Author: jmorliaguet
Date: Sat Jan 14 00:17:29 2006
New Revision: 2205

Removed:
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_demo.html
Modified:
   cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css
   cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_navpanel_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_panel_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
   cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/panel5.html
   cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tooltip.css
   cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_widgets_test.html
Log:

- saving work: 

  - using JSON for the view definitions instead of XML
    (works on konqueror/safari)

  - using the <object> tag for views and models

  - moved effects to their own registry




Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css        
(original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css        Sat Jan 
14 00:17:29 2006
@@ -1,4 +1,23 @@
 
+object {
+  display: none;
+}
+
+div.jsonParseError {
+  border: 2px solid red;
+  padding: 0.5em;
+  display: block;
+  background-color: #ffc;
+  font: bold 13px sans-serif;
+  color: #000;
+  position: absolute;
+}
+
+div.jsonParseError pre {
+  font-weight: normal;
+  overflow: auto;
+}
+
 /* tooltip */
 
 .tooltip {

Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js (original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Sat Jan 14 
00:17:29 2006
@@ -34,18 +34,48 @@
     CPSSkins.parse(document);
   },
 
+  jsonParse: function(el) {
+    var res = null;
+    var text = el.innerHTML;
+    if (!text) return;
+    try {
+      res = JSON.parse(text);
+    } catch(e) {
+      var div = document.createElement("div");
+      Element.addClassName(div, "jsonParseError");
+      div.innerHTML = e.name + ": " + e.message + "<pre>" + e.text + "</pre>";
+      el.parentNode.replaceChild(div, el)
+    }
+    return res;
+  },
+
   parse: function(node) {
-    var elements = node.getElementsByTagName("view");
+    var elements = document.getElementsByTagName("object");
+    $A(elements).each(function(el, index) {
+
+      var classid = el.getAttribute("classid");
+      if (!classid.match(/^cpsskins\:/)) {
+        el.style.display = "block";
+        return;
+      }
+
+      if (classid != "cpsskins:view") {
+        return;
+      }
+
+      var config = CPSSkins.jsonParse(el);
 
-    $A(elements).each(function(e, index) {
-      var widget_id = e.getAttribute("widget").toLowerCase();
-      var factory = Widgets[widget_id];
+      var widget_type = config.widget.type;
+      if (!(widget_type in Widgets)) {
+        return;
+      }
+      var factory = Widgets[widget_type];
       if (factory) {
-        view = factory(e);
+        view = factory(config);
         view.id = index;
-        e.parentNode.insertBefore(view.widget, e);
+        el.parentNode.insertBefore(view.widget, el);
 
-        var perspectives = (e.getAttribute("perspectives") || "").split(",");
+        var perspectives = config.perspectives || [];
         $A(perspectives).each(function(p) {
           if (!p) return;
           if (!(p in CPSSkins.Perspectives)) {
@@ -54,7 +84,7 @@
           CPSSkins.Perspectives[p].push(view);
         });
 
-        var model = e.getAttribute("model");
+        var model = config.model;
         if (model) {
           CPSSkins.addObserver(model, view)
         }
@@ -143,8 +173,8 @@
       return to_show.indexOf(el) < 0;
     });
 
-    $A(to_hide).each(function(e) { e.hide() } );
-    $A(to_show).each(function(e) { e.show() } );
+    $A(to_hide).each(function(el) { el.hide() } );
+    $A(to_show).each(function(el) { el.show() } );
 
     CPSSkins.PreviousPerspective = CPSSkins.CurrentPerspective;
     CPSSkins.CurrentPerspective = perspective;
@@ -250,14 +280,15 @@
 
   json_regexp: new RegExp(/^\sdata:/),
 
-  _getCommentNode: function(node) {
+  _getModelNode: function(node) {
     node = $(node);
     while(node = node.previousSibling) {
-      var type = node.nodeType;
-      if (type == 1) return null;
-      if (type == 8) {
-        if (node && node.nodeValue.match(this.json_regexp)) {
+      if (node.nodeType == 1) {
+        if (node && node.tagName.toLowerCase() == "object"
+                 && node.getAttribute("classid") == "cpsskins:model") {
           return node;
+        } else {
+          return null;
         }
       }
     }
@@ -273,16 +304,11 @@
     }
 
     var data = null;
-    var comment = this._getCommentNode(node);
-    if (comment) {
-      comment = comment.nodeValue.replace(this.json_regexp, "");
-      try {
-        data = JSON.parse(comment);
-      } catch(e) {
-        /* catch the parse exception */
-      }
+    var node = this._getModelNode(node);
+    if (node) {
+      data = CPSSkins.jsonParse(node);
     }
-    if (node_id) {
+    if (node_id && data) {
       CPSSkins.Cache[node_id] = data;
     }
     return data;
@@ -298,7 +324,7 @@
     } else {
       var comment = " data: " + JSON.stringify(data);
       comment = document.createComment(comment);
-      var old = this._getCommentNode(node);
+      var old = this._getModelNode(node);
       if (old) {
         node.parentNode.removeChild(old);
       }
@@ -439,6 +465,66 @@
 
 }
 
+
+// Effects
+
+CPSSkins.Effects = {
+
+  show: function(node, options) {
+    var delay = options.delay;
+    if (delay) {
+      return new CPSSkins.Scheduler(node, {
+        delay: delay,
+        onComplete: function() {
+          Element.show(node);
+        }
+      });
+    } else {
+      Element.show(node);
+    }
+  },
+
+  hide: function(node, options) {
+    var delay = options.delay;
+    if (delay) {
+      return new CPSSkins.Scheduler(node, {
+        delay: delay,
+        onComplete: function() {
+          Element.hide(node);
+        }
+      });
+    } else {
+      Element.hide(node);
+    }
+  },
+
+  fadein: function(node, options) {
+    Canvas.setOpacity(node, 0);
+    return new CPSSkins.Scheduler(node, {
+      delay: options.delay,
+      action: function(value) {
+        Canvas.setOpacity(node, value);
+        },
+      onComplete: function() {
+        Element.show(node);
+      }
+    });
+  },
+
+  fadeout: function(node, options) {
+    return new CPSSkins.Scheduler(node, {
+      delay: options.delay,
+      action: function(value) {
+        Canvas.setOpacity(node, 1-value);
+      },
+      onComplete: function() {
+        Element.hide(node);
+      }
+    });
+  }
+
+}
+
 // View
 
 CPSSkins.View = function() {};
@@ -448,21 +534,22 @@
     this.widget = widget;
     this.tag = tag;
 
-    var controller_id = tag.getAttribute("controller") || null;
+    var controller_id = tag.controller || null;
     if (controller_id) {
       this.controller = CPSSkins.Controllers[controller_id];
     } else {
       this.controller = null;
     }
 
-    var model = tag.getAttribute("model");
+    var model = tag.model;
     if (model) {
       this.model = $(model);
     } else {
       this.model = null;
     }
 
-    this.effects = (tag.getAttribute("effects") || "").split(",");
+    this.show_effect = tag.show_effect || {};
+    this.hide_effect = tag.hide_effect || {};
 
     this.setup();
   },
@@ -513,27 +600,16 @@
 
   show: function() {
     if (this.visible) return;
-
     this.prepare();
 
     var widget = this.widget;
-
-    if (this.effects.indexOf("fadein") >= 0) {
-
+    var show_effect = this.show_effect;
+    if (show_effect) {
       if (this.effect) {
         this.effect.stop();
       }
-
-      Canvas.setOpacity(widget, 0);
-      this.effect = new CPSSkins.Scheduler(widget, {
-        action: function(value) {
-          Canvas.setOpacity(widget, value);
-          },
-        onComplete: function() {
-          Element.show(widget);
-        }
-      });
-
+      show_effect.transition = show_effect.transition || "show";
+      this.effect = this.applyEffect(widget, show_effect)
     } else {
       Element.show(widget);
     }
@@ -543,7 +619,6 @@
 
   hide: function() {
     if (!this.visible) return;
-
     var widget = this.widget;
 
     if (this.effect && !this.effect.started) {
@@ -551,23 +626,22 @@
       return;
     }
 
-    if (this.effects.indexOf("fadeout") >= 0) {
-      this.effect = new CPSSkins.Scheduler(widget, {
-        action: function(value) {
-          Canvas.setOpacity(widget, 1-value);
-          },
-        onComplete: function() {
-          Element.hide(widget);
-        }
-      });
-
+    var hide_effect = this.hide_effect;
+    if (hide_effect) {
+      hide_effect.transition = hide_effect.transition || "hide";
+      this.effect = this.applyEffect(widget, hide_effect);
     } else {
       Element.hide(widget);
     }
 
     this.visible = false;
-
     this.teardown();
+  },
+
+  applyEffect: function(node, options) {
+      if (options.transition in CPSSkins.Effects) {
+        return CPSSkins.Effects[options.transition](node, options)
+      }
   }
 
 }
@@ -583,6 +657,7 @@
       style: {position:"absolute", display:"none"}
     });
     return new CPSSkins.ContextualMenu(widget, tag);
+
   },
 
   tooltip: function(tag) {
@@ -611,7 +686,7 @@
 
   setup: function() {
     this.visible = false;
-    this.url = this.tag.getAttribute("url");
+    this.url = this.tag.widget.url;
     this.css_id = null;
     this.script_id = null;
 
@@ -628,7 +703,7 @@
 
   render: function(data) {
     var url = data;
-    var script = this.tag.getAttribute("script");
+    var script = this.tag.widget.script;
     if (script) {
       this.script_id = this.id;
       Canvas.addScript(this.script_id, script);
@@ -637,7 +712,7 @@
     var widget = this.widget;
     var options = {
       onComplete: function() {
-        CPSSkins.parse(widget);
+        //CPSSkins.parse(widget);
       }
     };
 
@@ -652,7 +727,7 @@
   },
 
   prepare: function() {
-    var css = this.tag.getAttribute("css");
+    var css = this.tag.widget.css;
     if (css) {
       this.css_id = "cpsskins-panel-css" + this.id;
       Canvas.addStyleSheet(this.css_id, css);
@@ -689,7 +764,7 @@
 
   render: function(data) {
     this.widget.innerHTML = '';
-    this._renderFragment(this.widget, this.tag, data);
+    this._renderFragment(this.widget, this.tag.widget, data);
   },
 
   _getSubmenu: function(element) {
@@ -705,42 +780,40 @@
   },
 
   _renderFragment: function(container, fragment, data) {
-    var tags = fragment.childNodes;
 
-    for (var i=0;i<tags.length;i++) {
-      var tag = tags[i];
-      if (tag.nodeType != 1) continue;
+    $A(fragment.items).each(function(item) {
 
-      var visible = tag.getAttribute("visible");
+      var type = item.type;
+      var visible = item.visible;
       var disabled = false;
       if (data && visible) {
         if (!data[visible]) disabled = true;
       }
 
-      switch (tag.tagName.toLowerCase()) {
+      switch (type) {
 
         case "item": {
           var options = {
             tag: "a",
-            content: tag.getAttribute("label"),
+            content: item.label,
             style: {display: "block"},
             attributes: {
-              action: tag.getAttribute("action"),
+              action: item.action,
               href: "javascript:void(0)"
             }
           }
 
-          var confirm = tag.getAttribute("confirm");
+          var confirm = item.confirm;
           if (confirm && !disabled) {
             options.attributes.confirm = confirm;
           }
 
-          var icon = tag.getAttribute("icon");
+          var icon = item.icon;
           if (icon && !disabled) {
             options.style.backgroundImage = "url(" + icon + ")";
           }
 
-          if (disabled) { 
+          if (disabled) {
             options.attributes.disabled = true;
             options.classes = "disabled";
           }
@@ -750,23 +823,22 @@
           break;
         };
 
-        case "items": {
+        case "selection": {
           if (!data) return;
-          var choices = tag.getAttribute("choices");
-          var items = data[choices] || [];
-          for (var j=0;j<items.length;j++) {
+          var choices = item.choices;
+          $A(data[choices]).each(function(s) {
             var options = {
               tag: "a",
-              content: items[j].label,
+              content: s.label,
               style: {display: "block"},
               attributes: {
-                action: tag.getAttribute("action"),
-                choice: items[j].choice,
+                action: item.action,
+                choice: s.choice,
                 href: "javascript:void(0)"
               }
             }
             container.appendChild(Canvas.createNode(options));
-          };
+          });
           break;
         };
 
@@ -783,13 +855,13 @@
           var options = {
             tag: "a",
             classes: "submenuitem",
-            content: tag.getAttribute("label"),
+            content: item.label,
             style: {display: "block"},
             attributes: {href:"javascript:void(0)"}
           };
 
           if (disabled) { options.classes = "disabled"; }
-          var item = container.appendChild(Canvas.createNode(options));
+          var submenuitem = container.appendChild(Canvas.createNode(options));
 
           if (disabled) break;
 
@@ -807,14 +879,14 @@
               margin: "-20px 0 0 0"
             }
           });
-          item.appendChild(submenu);
+          submenuitem.appendChild(submenu);
 
-          this._renderFragment(submenu, tag, data);
+          this._renderFragment(submenu, item, data);
 
           break;
         };
       }
-    }
+    }.bind(this));
   },
 
   prepare: function() {
@@ -827,7 +899,7 @@
     Canvas.fitInsideScreen(widget);
 
     // TODO: move this elsewhere
-    if (!this.tag.getAttribute("model")) {
+    if (!this.tag.model) {
       CPSSkins.addObserver(selected, this);
     }
   },

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
  (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
  Sat Jan 14 00:17:29 2006
@@ -22,56 +22,101 @@
 
     <!-- View: contextual menu widget -->
 
-    <view
-        widget="contextmenu"
-        controller="controller"
-        effects="fadein,fadeout">
-
-      <item label="Edit" icon="edit.png" action="edit"
-            visible="editable"></item>
-
-      <separator></separator>
-
-      <item label="Copy" icon="copy.png" action="copy"></item>
-
-      <item label="Paste" icon="paste.png" action="paste"
-            visible="editable"></item>
-
-      <separator></separator>
-
-      <submenu label="Format" visible="formattable">
-        <items action="format" choices="formats"></items>
-        <submenu label="Size" visible="sizable">
-          <items action="size" choices="sizes"></items>
-        </submenu>
-      </submenu>
-
-      <submenu label="Size" visible="sizable">
-        <items action="size" choices="sizes"></items>
-      </submenu>
-
-      <separator></separator>
-
-      <item label="Delete" icon="delete.png" action="delete"
-            visible="editable" confirm="Deleting, are you sure?"></item>
-    </view>
-
+    <object classid="cpsskins:view">
+    {"widget": {
+       "type": "contextmenu",
+       "items": [
+         {"type": "item",
+          "label": "Edit",
+          "icon": "edit.png",
+          "action": "edit",
+          "visible": "editable"
+         },
+         {"type": "separator"
+         },
+         {"type": "item",
+          "label": "Copy",
+          "icon": "copy.png",
+          "action": "copy"
+         },
+         {"type": "item",
+          "label": "Paste",
+          "icon": "paste.png",
+          "action": "paste",
+          "visible": "editable"
+         },
+         {"type": "separator"
+         },
+         {"type": "submenu",
+          "label": "Format",
+          "visible": "formattable",
+          "items": [
+            {"type": "selection",
+             "action": "format",
+             "choices": "formats"
+            },
+            {"type": "submenu",
+             "label": "size",
+             "visible": "resizable",
+             "items": [
+               {"type": "selection",
+                "action": "size",
+                "choices": "sizes"
+               }
+             ]
+            }
+          ]
+         },
+         {"type": "separator"
+         },
+         {"type": "submenu",
+          "label": "size",
+          "visible": "resizable",
+          "items": [
+            {"type": "selection",
+             "action": "size",
+             "choices": "sizes"
+            }
+          ]
+         },
+         {"type": "item",
+          "label": "Delete",
+          "icon": "delete.png",
+          "action": "delete",
+          "confirm": "Deleting are you sure"
+         }
+       ]
+     },
+     "controller": "controller",
+     "show_effect": {
+       "transition": "fadein"
+     },
+     "hide_effect": {
+       "transition": "fadeout"
+     }
+    }
+    </object>
 
-    <!-- data: {"copyable":true} -->
+    <object classid="cpsskins:model">
+    {"copyable":true}
+    </object>
     <div id="area1" class="pad">area1</div>
 
-    <!-- data:
+    <object classid="cpsskins:model">
     {"formattable":true,
      "formats":[
-      {"choice":"style","label":"Style"}
-     ]}
-    -->
+       {"choice":"style","label":"Style"}
+     ]
+    }
+    </object>
     <div id="area2" class="pad">area2</div>
 
-    <!-- data: {"editable":true} -->
+    <object classid="cpsskins:model">
+    {"editable":true}
+    </object>
     <div id="area3" class="pad">area3</div>
 
-    <!-- data:
+    <object classid="cpsskins:model">
     {"editable":true,
      "formattable":true,
      "formats":[
@@ -79,17 +124,19 @@
       {"choice":"widget","label":"Widget"},
       {"choice":"effect","label":"Effect"}
      ],
-     "sizable":true,
+     "resizable":true,
      "sizes":[
       {"choice":"small","label":"Small"},
       {"choice":"medium","label":"Medium"},
       {"choice":"large","label":"Large"},
       {"choice":"x-large","label":"Extra large"}
      ]}
-    -->
+    </object>
     <div id="area4" class="pad">area4
 
-      <!-- data: {"editable":true} -->
+      <object classid="cpsskins:model">
+      {"editable":true}
+      </object>
       <div id="area5" class="pad">area5</div>
     </div>
   </div>

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_navpanel_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_navpanel_test.html
        (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_navpanel_test.html
        Sat Jan 14 00:17:29 2006
@@ -43,41 +43,53 @@
     href="javascript:CPSSkins.switchPerspective('panels/panel1')">
   PANEL 1</a>
 
-  <view
-      widget="panel"
-      perspectives="panels/panel1"
-      url="panel1.html">
-  </view>
+  <object classid="cpsskins:view">
+  {"widget": {
+     "type": "panel",
+     "url": "panel1.html"
+   },
+   "perspectives": ["panels/panel1"]
+  }
+  </object>
 
   <a class="header"
      href="javascript:CPSSkins.switchPerspective('panels/panel2')">
   PANEL 2</a>
 
-  <view
-      widget="panel"
-      perspectives="panels/panel2"
-      url="panel2.html">
-  </view>
+  <object classid="cpsskins:view">
+  {"widget": {
+     "type": "panel",
+     "url": "panel2.html"
+   },
+   "perspectives": ["panels/panel2"]
+  }
+  </object>
 
   <a class="header"
     href="javascript:CPSSkins.switchPerspective('panels/panel3')">
   PANEL 3</a>
 
-  <view
-      widget="panel"
-      perspectives="panels/panel3"
-      url="panel3.html">
-  </view>
+  <object classid="cpsskins:view">
+  {"widget": {
+     "type": "panel",
+     "url": "panel3.html"
+   },
+   "perspectives": ["panels/panel3"]
+  }
+  </object>
 
   <a class="header"
     href="javascript:CPSSkins.switchPerspective('panels/panel4')">
   PANEL 4</a>
 
-  <view
-      widget="panel"
-      perspectives="panels/panel4"
-      url="panel4.html">
-  </view>
+  <object classid="cpsskins:view">
+  {"widget": {
+     "type": "panel",
+     "url": "panel4.html"
+   },
+   "perspectives": ["panels/panel4"]
+  }
+  </object>
 
 </body>
 

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
        (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
        Sat Jan 14 00:17:29 2006
@@ -120,36 +120,76 @@
   <p>The views observe the model.
      When the model changes the views gets updated.</p>
 
-  <!-- data: {
-    "size": 1,
-    "sizeinfo": [{"choice":"", "label":""}]
+  <object classid="cpsskins:model">
+  {"size": 1,
+   "sizeinfo": [
+     {"choice": "", "label": ""}
+   ]
   }
-  -->
+  </object> 
   <div id="data-provider">DATA PROVIDER
     <!-- tooltip view -->
-    <view widget="tooltip" showdelay="1500"></view>
+    <object classid="cpsskins:view">
+    {"widget": {
+       "type":"tooltip"
+     },
+     "show_effect": {
+       "delay": 1500
+     }
+    }
+    </object>
 
     <!-- contextual menu view -->
-    <view widget="contextmenu">
-      <submenu label="Size info">
-        <items choices="sizeinfo"></items>
-      </submenu>
-    </view>
+    <object classid="cpsskins:view">
+    {"widget": {
+      "type": "contextmenu",
+      "items": [
+        {"type": "selection", "choices": "sizeinfo"}
+      ]
+    }}
+    </object>
   </div>
 
   <h2>progress bar widget</h2>
-  <view widget="progressbar" model="data-provider"></view>
+  <object classid="cpsskins:view">
+  {"widget": {
+     "type": "progressbar"
+   },
+   "model": "data-provider"
+  }
+  </object>
 
   <h2>counter widget</h2>
-  <view widget="counter" model="data-provider"></view>
+  <object classid="cpsskins:view">
+  {"widget": {
+     "type": "counter"
+   },
+   "model": "data-provider"
+  }
+  </object>
 
   <h2>menu widget</h2>
   <div id="info">
     Info
     <!-- menu view observing the data provider -->
-    <view widget="contextmenu" model="data-provider">
-      <items choices="sizeinfo"></items>
-    </view>
+    <object classid="cpsskins:view">
+    {"widget": {
+       "type": "contextmenu",
+       "items": [
+         {"type": "submenu",
+          "label": "Size info",
+          "items": [
+            {"type": "selection",
+             "choices": "sizeinfo"
+            }
+          ]
+         }
+       ]
+     },
+     "model": "data-provider"
+    }
+    </object>
+
   </div>
 
   <p>

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_panel_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_panel_test.html
   (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_panel_test.html
   Sat Jan 14 00:17:29 2006
@@ -40,17 +40,25 @@
     <tr style="vertical-align: top">
       <td colspan="3">
 
-        <view widget="panel"
-            perspectives="page-designer,layout-designer"
-            url="panel1.html"
-            css="style1.css">
-        </view>
-
-        <view widget="panel"
-            perspectives="site-designer"
-            url="panel2.html"
-            css="style2.css">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url": "panel1.html",
+           "css": "style1.css"
+         },
+         "perspectives": ["page-designer", "layout-designer"]
+        }
+        </object>
+
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url": "panel2.html",
+           "css": "style2.css"
+         },
+         "perspectives": ["site-designer"]
+        }
+        </object>
 
       </td>
     </tr>
@@ -58,60 +66,80 @@
     <tr style="vertical-align: top">
       <td style="width: 20%">
 
-        <view
-            widget="panel"
-            perspectives="page-designer"
-            url="panel2.html">
-        </view>
-
-        <view widget="panel"
-            perspectives="site-designer,layout-designer"
-            url="panel3.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url": "panel2.html"
+         },
+         "perspectives": ["page-designer"]
+        }
+        </object>
+
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url": "panel3.html"
+         },
+         "perspectives": ["site-designer", "layout-designer"]
+        }
+        </object>
 
       </td>
       <td syle="width: 60%">
 
-        <view
-            widget="panel"
-            perspectives="page-designer"
-            url="panel3.html">
-        </view>
-
-        <view
-            widget="panel"
-            perspectives="page-designer"
-            url="panel4.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url": "panel3.html"
+         },
+         "perspectives": ["page-designer"]
+        }
+        </object>
+
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url": "panel4.html"
+         },
+         "perspectives": ["page-designer"]
+        }
+        </object>
 
       </td>
       <td style="width: 20%">
 
-        <view
-            widget="panel"
-            perspectives="site-designer,layout-designer"
-            url="panel4.html">
-        </view>
-
-        <view
-            widget="panel"
-            perspectives="site-designer"
-            url="panel2.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url":"panel4.html"
+         },
+         "perspectives": ["site-designer", "layout-designer"]
+        }
+        </object>
+
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+           "url":"panel2.html"
+         },
+         "perspectives": ["site-designer"]
+        }
+        </object>
 
       </td>
 
     </tr>
   </table>
 
-  <view
-      widget="panel"
-      perspectives="element-editor"
-      url="panel5.html"
-      css="popup.css">
-  </view>
-
-  <div id="message"></div>
+  <object classid="cpsskins:view">
+  {"widget": {
+     "type": "panel",
+     "url": "panel5.html",
+     "css": "popup.css"
+   },
+   "perspectives": ["element-editor"]
+  }
+  </object>
 
 </body>
 

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
      (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
      Sat Jan 14 00:17:29 2006
@@ -11,7 +11,43 @@
   <script src="../../json.js" type="text/javascript"></script>
   <script src="../../cpsskins.js" type="text/javascript"></script>
   <link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
-  <link rel="stylesheet" href="tooltip.css" type="text/css" />
+
+  <style type="text/css">
+#area1 {
+  margin: 1em;
+  padding: 2em;
+  float: left;
+  border: 1px solid #ccc;
+  background: #f9f9f9;
+}
+
+#area1 a {
+  border: 1px solid #999;
+  text-decoration: none;
+  padding: 0.1em 0.9em;
+  margin: 0 0.2em;
+  color: #000;
+  background-color: #efc;
+}
+
+#area2 {
+  margin: 1em;
+  padding: 2em;
+  float: left;
+  border: 1px solid #ccc;
+  background: #f9f9f9;
+}
+
+#area2 a {
+  border: 1px solid #999;
+  text-decoration: none;
+  padding: 0.1em 0.9em;
+  margin: 0 0.2em;
+  color: #000;
+  background-color: #ffe;
+}
+</style>
+
 </head>
 <body>
 
@@ -19,21 +55,36 @@
 
   <div id="area1">
 
-    <!-- data: {"hint":"Click here to open the document."} -->
+    <object classid="cpsskins:model">
+    {"hint":"Click here to open the document."}
+    </object>
     <a href="#">Open</a>
 
-    <!-- data: {"hint":"Click here to save the document."} -->
+    <object classid="cpsskins:model">
+    {"hint":"Click here to save the document."}
+    </object>
     <a href="#">Save</a>
 
-    <!-- data: {"hint":"Click here to close the document."} -->
+    <object classid="cpsskins:model">
+    {"hint":"Click here to close the document."}
+    </object>
     <a href="#">Close</a>
 
-    <view
-        widget="tooltip"
-        effects="fadein,fadeout"
-        showdelay="1000"
-        hidedelay="500">
-    </view>
+    <object classid="cpsskins:view">
+    {"widget": {
+       "type": "tooltip"
+     },
+
+     "show_efffect": {
+       "transition": "fadein",
+       "delay": 1000
+     },
+
+     "hide_effect": {
+       "transition": "fadeout",
+       "delay": 500
+    }}
+    </object>
 
     <p>Show delay: 1s<br/>
        Hide delay: 500ms</p>
@@ -41,21 +92,37 @@
 
   <div id="area2">
 
-    <!-- data: {"hint":"Click here to open the file."} -->
+    <object classid="cpsskins:model">
+    {"hint":"Click here to open the file."}
+    </object>
     <a href="#">Open</a>
 
-    <!-- data: {"hint":"Click here to save the file."} -->
+    <object classid="cpsskins:model">
+    {"hint":"Click here to save the file."}
+    </object>
     <a href="#">Save</a>
 
-    <!-- data: {"hint":"Click here to close the file."} -->
+    <object classid="cpsskins:model">
+    {"hint":"Click here to close the file."}
+    </object>
     <a href="#">Close</a>
 
-    <view
-        widget="tooltip"
-        effects="fadein,fadeout"
-        showdelay="500"
-        hidedelay="1000">
-    </view>
+    <object classid="cpsskins:view">
+    {"widget": {
+       "type": "tooltip"
+     },
+
+     "show_effect": {
+       "transition": "fadein",
+       "delay": 500
+     },
+
+     "hide_effect": {
+       "transition": "fadeout",
+       "delay": 1000
+      }
+    }
+    </object>
 
     <p>Show delay: 500ms<br/>
        Hide delay: 1s</p>

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/panel5.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/panel5.html    
    (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/panel5.html    
    Sat Jan 14 00:17:29 2006
@@ -20,46 +20,71 @@
   <table style="width: 100%; padding:1em">
     <tr>
       <td>
-        <view
-            widget="panel"
-            effects="fadein"
-            perspectives="element-editor/1"
-            url="panel1.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+            url="panel1.html"
+         },
+         "show_effect": {
+           "transition": "fadein"
+         },
+         "perspectives": ["element-editor/1"]
+        }
+        </object>
       </td>
       <td>
-        <view
-            widget="panel"
-            effects="fadein"
-            perspectives="element-editor/1"
-            url="panel2.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+            url="panel2.html"
+         },
+         "show_effect": {
+           "transition": "fadein"
+         },
+         "perspectives": ["element-editor/1"]
+        }
+        </object>
       </td>
       <td>
-        <view
-            widget="panel"
-            effects="fadein"
-            perspectives="element-editor/2"
-            url="panel3.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+            url="panel3.html"
+         },
+         "show_effect": {
+           "transition": "fadein"
+         },
+         "perspectives": ["element-editor/2"]
+        }
+        </object>
       </td>
       <td>
-        <view
-            widget="panel"
-            effects="fadein"
-            perspectives="element-editor/2"
-            url="panel4.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+            url="panel4.html"
+         },
+         "show_effect": {
+           "transition": "fadein"
+         },
+         "perspectives": ["element-editor/2"]
+        }
+        </object>
       </td>
       <td>
-        <view
-            widget="panel"
-            perspectives="element-editor/3"
-            url="panel6.html">
-        </view>
+        <object classid="cpsskins:view">
+        {"widget": {
+           "type": "panel",
+            url="panel6.html"
+         },
+         "show_effect": {
+           "transition": "fadein"
+         },
+         "perspectives": ["element-editor/3"]
+        }
+        </object>
       </td>
     </tr>
-    </tr>
   </table>
   </div>
 

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tooltip.css
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tooltip.css    
    (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tooltip.css    
    Sat Jan 14 00:17:29 2006
@@ -1,34 +1 @@
 
-#area1 {
-  margin: 1em;
-  padding: 2em;
-  float: left;
-  border: 1px solid #ccc;
-  background: #f9f9f9;
-}
-
-#area1 a {
-  border: 1px solid #999;
-  text-decoration: none;
-  padding: 0.1em 0.9em;
-  margin: 0 0.2em;
-  color: #000;
-  background-color: #efc;
-}
-
-#area2 {
-  margin: 1em;
-  padding: 2em;
-  float: left;
-  border: 1px solid #ccc;
-  background: #f9f9f9;
-}
-
-#area2 a {
-  border: 1px solid #999;
-  text-decoration: none;
-  padding: 0.1em 0.9em;
-  margin: 0 0.2em;
-  color: #000;
-  background-color: #ffe;
-}

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_test.html   
    (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_test.html   
    Sat Jan 14 00:17:29 2006
@@ -12,6 +12,7 @@
   <script src="../../cpsskins.js" type="text/javascript"></script>
   <script src="../unittest.js" type="text/javascript"></script>
   <link rel="stylesheet" href="../test.css" type="text/css" />
+  <link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
 </head>
 <body>
 
@@ -30,22 +31,32 @@
   <div>
     <div id="e1"></div>
     <div>
-      <!-- data: {"a":"1","b":"2"} -->
+
+      <object classid="cpsskins:model">
+      {"a":"1","b":"2"}
+      </object>
+
       <div id="e2"></div>
       <div id="e3"></div>
       <div id="e4">
-        <!-- data: {"a":"1"} -->
+
+        <object classid="cpsskins:model">
+        {"a":"1"}
+        </object>
         <div></div>
+
         <div id="e5"></div>
       </div>
     </div>
     <div></div>
-    <!-- data:
+
+    <object classid="cpsskins:model">
     {"a":["1","2","3"],
      "b":{"c":1,"d":2},
      "c":[[1],[2],[3]]}
-    -->
+    </object>
     <div id="e6"></div>
+
   </div>
 
   <!-- panels -->
@@ -139,14 +150,14 @@
       assertEqual(Identifiable.isEmpty(e6), true);
     }},
 
-    testGetCommentNode: function() { with(this) {
-      assertEqual(Canvas._getCommentNode(e0), null);
-      assertEqual(Canvas._getCommentNode(e1), null);
-      assertNotEqual(Canvas._getCommentNode(e2), null);
-      assertEqual(Canvas._getCommentNode(e3), null);
-      assertEqual(Canvas._getCommentNode(e4), null);
-      assertEqual(Canvas._getCommentNode(e5), null);
-      assertNotEqual(Canvas._getCommentNode(e6), null);
+    testGetModelNode: function() { with(this) {
+      assertEqual(Canvas._getModelNode(e0), null);
+      assertEqual(Canvas._getModelNode(e1), null);
+      assertNotEqual(Canvas._getModelNode(e2), null);
+      assertEqual(Canvas._getModelNode(e3), null);
+      assertEqual(Canvas._getModelNode(e4), null);
+      assertEqual(Canvas._getModelNode(e5), null);
+      assertNotEqual(Canvas._getModelNode(e6), null);
     }},
 
     testGetNodeData: function() { with(this) {

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_widgets_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_widgets_test.html
       (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/unit/cpsskins_widgets_test.html
       Sat Jan 14 00:17:29 2006
@@ -29,10 +29,14 @@
 
 <div>
 
-  <!-- data: {"hint":"Tooltip hint for e0"} -->
+  <object classid="cpsskins:model">
+  {"hint":"Tooltip hint for e0"}
+  </object>
   <div id="e0"></div>
 
-  <!-- data: {"hint":"Tooltip hint for e1"} -->
+  <object classid="cpsskins:model">
+  {"hint":"Tooltip hint for e1"}
+  </object>
   <div id="e1"></div>
 
   <view widget="tooltip"></view>
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to