Author: jmorliaguet
Date: Fri Jan  6 23:41:57 2006
New Revision: 2169

Modified:
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
Log:

- using 2 really different widgets to visualize the same model: 

  - a progressbar 

  - a counter



Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
      (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
      Fri Jan  6 23:41:57 2006
@@ -14,11 +14,17 @@
 
   <style type="text/css">
     .grid {
-      border: 1px solid orange;
-      background-color: #ffc;
-      padding: 1.5em;
-      margin: 1em;
       font-size: 2em;
+      width: 460px;
+      padding: 0 0.5em;
+      margin: 8px 0;
+    }
+
+    .progressBar {
+      border: 1px solid #000;
+      background-color: #69c;
+      height: 20px;
+      width: 10px;
     }
   </style>
 
@@ -27,7 +33,7 @@
     var timer;
 
     function start() {
-      timer = setInterval("updateModel()", 1000);
+      timer = setInterval("updateModel()", 100);
     }
 
     function updateModel() {
@@ -43,6 +49,13 @@
         class: "grid"
         });
         return new Grid(widget, view);
+      },
+      progressbar: function(view, index) {
+        var widget = Canvas.addNode(document.body, {
+        tag: "div",
+        class: "progressBar"
+        });
+        return new ProgressBar(widget, view);
       }
     });
 
@@ -51,7 +64,6 @@
 
       initialize: function(widget, view) {
         this.widget = widget;
-        this.view = view;
       },
 
       update: function(data) {
@@ -60,6 +72,19 @@
 
     }
 
+    ProgressBar= Class.create();
+    ProgressBar.prototype = {
+
+      initialize: function(widget, view) {
+        this.widget = widget;
+      },
+
+      update: function(data) {
+        this.widget.style.width = data.size % 50 * 10 +"px";
+      }
+
+    }
+
   </script>
 
 </head>
@@ -73,7 +98,7 @@
   <!-- model: {"size": 1} -->
   <div id="data-provider"></div>
 
-  <cpsskins:view widget="grid" observe="data-provider"></cpsskins:view>
+  <cpsskins:view widget="progressbar" observe="data-provider"></cpsskins:view>
 
   <cpsskins:view widget="grid" observe="data-provider"></cpsskins:view>
 
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to