Author: jmorliaguet
Date: Wed Feb  8 00:40:54 2006
New Revision: 2320

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_contextualactions_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/chat/cpsskins_chat.pt
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/quiz/cpsskins_quiz.pt
Log:

- saving work:

  - the "command controller" uses the internal event system to publish user
    actions

  - added a "form controller" that gathers data from the associated widget
    and that stores the data it in the model associated with the view:

  - fixed the page reload issue with konqueror / opera

  - added a method to display error message



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        Wed Feb 
 8 00:40:54 2006
@@ -11,7 +11,7 @@
   display: none;
 }
 
-div.jsonParseError {
+div.warningMessage {
   border: 2px solid red;
   padding: 0.5em;
   display: block;
@@ -21,7 +21,7 @@
   position: absolute;
 }
 
-div.jsonParseError pre {
+div.warningMessage pre {
   font-weight: normal;
   overflow: auto;
 }

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 
00:40:54 2006
@@ -75,6 +75,14 @@
     return controller;
   },
 
+  /* Error handling */
+  warn: function(msg, context) {
+    var div = document.createElement("div");
+    Element.addClassName(div, "warningMessage");
+    div.innerHTML = "A form controller requires a form widget.";
+    context.parentNode.replaceChild(div, context);
+  },
+
   /* Public events */
   registerHandlers: function(handlers) {
     Object.extend(CPSSkins.Handlers, handlers);
@@ -107,7 +115,9 @@
         var handler = CPSSkins.getEventHandler(eventid, e.subscriber);
         if (handler) {
           // set the target in case no target is specified in the subscription.
-          handler({'subscriber': e.subscriber, 'target': target});
+          info.subscriber = e.subscriber;
+          info.target = target;
+          handler(info);
         }
       }
     });
@@ -139,10 +149,8 @@
     try {
       res = JSON.parse(text.unescapeHTML());
     } 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)
+      msg = e.name + ": " + e.message + "<pre>" + e.text + "</pre>";
+      CPSSkins.error(msg, el);
     }
     return res;
   },
@@ -209,7 +217,8 @@
           if (factory) {
             var controller = factory(el, def);
             CPSSkins.Controllers[name] = controller;
-            CPSSkins.notify("registered controller " + def.id, {"target": 
controller});
+            CPSSkins.notify("registered controller " + def.id,
+                            {"target": controller});
           }
           break;
         }
@@ -250,7 +259,7 @@
               var evt_id = "registered controller " + controller_id;
               CPSSkins.registerEventHandler(evt_id, view, function(event) {
                 var controller = event.target;
-                view.controller = controller;
+                controller.register(view);
               });
               CPSSkins.subscribe(evt_id, {'subscriber': view, 'target': null});
             }
@@ -352,14 +361,9 @@
   initialize: function(node, def) {
     this.node = this.node;
     this.def = def;
-    this.setup();
-  },
-
-  setup: function() {
-    /* to override */
   },
 
-  call: function() {
+  register: function(view) {
     /* to override */
   }
 
@@ -381,13 +385,30 @@
 CPSSkins.CommandController = Class.create();
 CPSSkins.CommandController.prototype = Object.extend(new 
CPSSkins.Controller(), {
 
-  call: function(info) {
-    var action = info.action;
-    var handler_id = this.def.handlers[action];
-    if (handler_id) {
-      var handler = CPSSkins.Handlers[handler_id];
-      handler(info);
-    }
+  register: function(view) {
+
+    var controller = this;
+    view.controller = controller;
+
+    CPSSkins.registerEventHandler("command", view, function(info) {
+      var view = info.subscriber;
+      var controller = info.target;
+
+      // add some contextual info
+      info.view = view;
+      info.model = view.model;
+
+      var action = info.options.action;
+      // TODO: to refactor
+      /* the event handler calls the controller's registered handler */
+      var handler_id = controller.def.handlers[action];
+      if (handler_id) {
+        var handler = CPSSkins.Handlers[handler_id];
+        if (handler) handler(info);
+      }
+    });
+
+    CPSSkins.subscribe("command", {'subscriber': view, "target": controller});
   }
 
 });
@@ -395,7 +416,33 @@
 CPSSkins.FormController = Class.create();
 CPSSkins.FormController.prototype = Object.extend(new CPSSkins.Controller(), {
 
-  setup: function() {
+  register: function(view) {
+    var controller = this;
+    view.controller = controller;
+
+    var form = view.widget;
+
+    // prevent the browser from posting the form directly
+    form.setAttribute("onsubmit", "return false");
+
+    if (form.tagName.toLowerCase() != 'form') {
+      CPSSkins.warn("A form controller requires a form widget.", form);
+    }
+
+    this.submitEvent = this.submitEvent.bindAsEventListener(this);
+    Event.observe(form, "submit", this.submitEvent);
+  },
+
+  submitEvent: function(e) {
+    var widget = Event.element(e);
+    var model = widget.view.model;
+
+    var form_data = {};
+    $A(Form.getInputs(widget)).each(function(i) {
+      form_data[i.name] = Form.Element.getValue(i);
+    });
+
+    model.setData(form_data);
   }
 
 });
@@ -993,6 +1040,9 @@
     this.hide_effect = def.hide_effect || {};
 
     this.setup();
+
+    // create a back-reference
+    this.widget.view = this;
   },
 
   /* Public API */
@@ -1028,15 +1078,6 @@
     }
   },
 
-  handleAction: function(info) {
-    var controller = this.controller;
-    if (!controller) return;
-    // add some contextual info
-    info.model = this.model;
-    info.view = this;
-    controller.call(info);
-  },
-
   getData: function() {
     if (this.model) {
       return this.model.getData();
@@ -1430,11 +1471,11 @@
     }
     /* notify the controller to take action */
     var info = {
-      "target": this.selected,
-      "action": action,
-      "options": {'choice': choice}
+      "context": this.selected,
+      "target": this.controller,
+      "options": {'action': action, 'choice': choice}
     }
-    this.handleAction(info);
+    CPSSkins.notify("command", info);
     this.active = false;
   },
 

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
       (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
       Wed Feb  8 00:40:54 2006
@@ -105,11 +105,11 @@
   <!-- Controller -->
   <script type="text/javascript">
     function displayChoice(info) {
-      var target = info.target;
+      var context = info.context;
       var options = info.options;
 
       $("message").innerHTML +=
-        target.getAttribute('id') + ' =&gt; ' + options.choice + '\n';
+        context.getAttribute('id') + ' =&gt; ' + options.choice + '\n';
     }
 
     CPSSkins.registerHandlers({'displayChoice': displayChoice});

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
  Wed Feb  8 00:40:54 2006
@@ -165,10 +165,10 @@
   <!-- Controller -->
   <script type="text/javascript">
     function displayChoice(info) {
-      var target = info.target;
+      var context = info.context;
       var options = info.options;
       $("message").innerHTML +=
-        target.getAttribute('id') + ' =&gt; ' + info.options.choice + '\n';
+        context.getAttribute('id') + ' =&gt; ' + options.choice + '\n';
     }
 
     CPSSkins.registerHandlers({'displayChoice': displayChoice});

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/chat/cpsskins_chat.pt
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/chat/cpsskins_chat.pt
        (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/chat/cpsskins_chat.pt
        Wed Feb  8 00:40:54 2006
@@ -79,8 +79,9 @@
 
       inputbox: function(def) {
         var widget = Canvas.createNode({
-          tag: "div",
-          classes: "inputbox"
+          tag: "form",
+          classes: "inputbox",
+          attributes: {"method": "post"}
         });
         return new InputBox(widget, def);
       }
@@ -103,7 +104,6 @@
           });
           widget.appendChild(message);
         });
-
       }
 
     });
@@ -111,10 +111,6 @@
     InputBox = Class.create();
     InputBox.prototype = Object.extend(new CPSSkins.View(), {
 
-      setup: function() {
-        this.submitEvent = this.submitEvent.bindAsEventListener(this);
-      },
-
       render: function(data) {
         var widget = this.widget;
         widget.innerHTML = '';
@@ -129,12 +125,6 @@
           widget.appendChild(statusbox);
         }
 
-        var form = Canvas.createNode({
-          tag: "form",
-          attributes: {"method": "post"}
-        });
-        widget.appendChild(form);
-
         var input = Canvas.createNode({
           tag: "input",
           attributes: {
@@ -143,7 +133,7 @@
           },
           "style": {"width": "400px"}
         });
-        form.appendChild(input);
+        widget.appendChild(input);
 
         var user = Canvas.createNode({
           tag: "input",
@@ -153,7 +143,7 @@
             "value": data.user || "Guest"
           }
         });
-        form.appendChild(user);
+        widget.appendChild(user);
 
         var status = Canvas.createNode({
           tag: "input",
@@ -163,7 +153,7 @@
             "value": "Sending message ..."
           }
         });
-        form.appendChild(status);
+        widget.appendChild(status);
 
         var button = Canvas.createNode({
           tag: "button",
@@ -172,38 +162,13 @@
           },
           text: "SEND!"
         });
-        form.appendChild(button);
+        widget.appendChild(button);
 
-        Event.observe(form, "submit", this.submitEvent);
-        Form.focusFirstElement(form);
-      },
-
-      submitEvent: function(e) {
-        var target = Event.element(e);
-        var data = {};
-        $A(Form.getInputs(target)).each(function(i) {
-          data[i.name] = Form.Element.getValue(i);
-        })
-        info = {
-          "options": data,
-          "action": "submit",
-          "target": target
-        }
-        this.handleAction(info);
+        Form.focusFirstElement(widget);
       }
 
     });
 
-    /* Controller */
-
-    function submitContent(info) {
-      var data = info.options;
-      var model = info.model;
-      model.setData(data);
-    }
-
-    CPSSkins.registerHandlers({'submitContent': submitContent});
-
   </script>
 
 </head>
@@ -218,13 +183,9 @@
   </p>
   <p>There are two main views: the chat area and the input form</p>
 
-  /* to convert into a form controller */
   <ins class="controller">
-  {"id": "controller",
-   "type": "command",
-   "handlers": {
-     "submit": "submitContent"
-   }}
+  {"id": "form-controller",
+   "type": "form"
   }
   </ins>
 
@@ -326,7 +287,7 @@
       "type": "inputbox"
      },
      "model": "form",
-     "controller": "controller"
+     "controller": "form-controller"
     }
     </ins>
 

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/quiz/cpsskins_quiz.pt
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/quiz/cpsskins_quiz.pt
        (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/zope3/functional/quiz/cpsskins_quiz.pt
        Wed Feb  8 00:40:54 2006
@@ -21,7 +21,7 @@
       margin-top: 2em;
     }
 
-    div.inputbox {
+    form.inputbox {
       padding: 0.5em;
       width: 300px;
       border: 1px solid #666;
@@ -57,8 +57,9 @@
 
       inputbox: function(def) {
         var widget = Canvas.createNode({
-          tag: "div",
-          classes: "inputbox"
+          tag: "form",
+          classes: "inputbox",
+          attributes: {"method": "post", "onsubmit": "return false"}
         });
 
         return new InputBox(widget, def);
@@ -69,57 +70,48 @@
     InputBox = Class.create();
     InputBox.prototype = Object.extend(new CPSSkins.View(), {
 
-      setup: function() {
-        this.changeEvent = this.changeEvent.bindAsEventListener(this);
-        Event.observe(this.widget, "change", this.changeEvent);
-      },
-
       render: function(data) {
         var widget = this.widget;
         widget.innerHTML = '';
 
+        if (data.message) {
+          var message = Canvas.createNode({
+            tag: "div",
+            classes: "message",
+            text: data.message
+          });
+          widget.appendChild(message);
+        }
+
+        var status = Canvas.createNode({
+          tag: "input",
+          attributes: {
+            "name": "message",
+            "type": "hidden"
+          },
+          text: "Sending the message ..."
+        });
+        widget.appendChild(status);
+
         var input = Canvas.createNode({
           tag: "input",
           attributes: {
+            "name": "content",
             "type": "text"
           }
         });
+        widget.appendChild(input);
 
         var content = Canvas.createNode({
           tag: "div",
           classes: "content",
           text: data.content
         });
-
-        if (data.message) {
-          var message = Canvas.createNode({
-            tag: "div",
-            classes: "message",
-            text: data.message
-          });
-          widget.appendChild(message);
-        }
-
-        widget.appendChild(input);
         widget.appendChild(content);
-      },
-
-      changeEvent: function(e) {
-        var target = Event.element(e);
-        var value = target.value;
-        this.handleAction(target, 'change', value);
       }
 
     });
 
-    /* Controller */
-
-    function changeContent(model, context, value) {
-      model.setData({'message': 'Sending the answer ...', 'content': value});
-    }
-
-    CPSSkins.registerHandlers({'changeContent': changeContent});
-
   </script>
 
 </head>
@@ -140,10 +132,8 @@
 
   <ins class="controller">
   {"id": "controller",
-   "type": "command",
-   "handlers": {
-     "change": "changeContent"
-  }}
+   "type": "form"
+  }
   </ins>
 
 
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to