Author: jmorliaguet
Date: Wed Feb  8 23:40:14 2006
New Revision: 2326

Added:
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_progressive_enhancement.html
   (contents, props changed)
Modified:
   cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
Log:

- added support for "progressive enhancement". Standard HTML widgets can be 
replaced by Ajax 
  widgets.

  (cf http://en.wikipedia.org/wiki/Progressive_Enhancement)



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 Wed Feb  8 
23:40:14 2006
@@ -265,7 +265,15 @@
             }
 
             /* insert the widget into the DOM */
-            el.parentNode.insertBefore(view.widget, el);
+            var replace = def.widget.replace;
+            if (replace) {
+              var replaced = $(replace);
+              if (replaced) {
+                replaced.parentNode.replaceChild(view.widget, replaced);
+              }
+            } else {
+              el.parentNode.insertBefore(view.widget, el);
+            }
 
             /* registers views per perspective */
             var perspectives = def.perspectives || [];

Added: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_progressive_enhancement.html
==============================================================================
--- (empty file)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_progressive_enhancement.html
      Wed Feb  8 23:40:14 2006
@@ -0,0 +1,88 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
+<html xml:lang="en" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml";>
+<head>
+  <title>CPSSkins Unit test file</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <script src="../../prototype.js" type="text/javascript"></script>
+  <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" />
+
+  <style stype="text/css">
+  .standard {
+    background-color: #ccc;
+    padding: 1em;
+    width: 200px;
+    border: 1px solid #999;
+  }
+  .ajax {
+    background-color: #fc0;
+    padding: 1em;
+    width: 200px;
+    border: 1px solid #999;
+  }
+  </style>
+
+  <script type="text/javascript">
+    Object.extend(Widgets, {
+
+      ajaxwidget: function(def) {
+        var widget = Canvas.createNode({
+          tag: "div",
+          classes: "ajax"
+        });
+        return new AjaxWidget(widget, def);
+      },
+    });
+
+    AjaxWidget = Class.create();
+    AjaxWidget.prototype = Object.extend(new CPSSkins.View(), {
+
+      render: function(data) {
+        this.widget.innerHTML = "Ajax widget";
+      }
+
+    });
+
+  </script>
+
+</head>
+<body>
+
+  <h1>CPSSkins: progressive enhancement</h1>
+
+  <p>Standard HTML widgets located on the page can be replaced by <strong>
+     Ajax-enhanced</strong> widgets.</p>
+
+  <p>If the Ajax library is not supported by the browser or if javascript is
+     disabled, the original HTML widgets will be used for compatibility 
reasons.
+  </p>
+
+  <p>This is the opposite of <strong>graceful degradation</strong>.</p>
+
+  <div id="htmlwidget" class="standard">
+    Standard HTML widget
+  </div>
+
+  <ins class="model">
+  {"id": "ram-data-provider",
+   "data": "",
+   "storage": {
+     "type": "ram"
+     }
+  }}
+  </ins>
+
+  <ins class="view">
+  {"widget": {
+     "type": "ajaxwidget",
+     "replace": "htmlwidget"
+   },
+   "model": "ram-data-provider"
+  }
+  </ins>
+
+</body>
+</html>
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to