Communication in both directions (Text control)

Code regrouping

examples/widgetapp/sample_page.e

@@ -24,21 +24,24 @@ feature
 		local
 			panel: WSF_MULTI_CONTROL
 		do
-			button1 := create {WSF_BUTTON_CONTROL}.make ("sample_button1", "I'm a button")
+			create textbox1.make ("txtBox1", "1")
+			create textbox2.make ("txtBox2", "2")
+			button1 := create {WSF_BUTTON_CONTROL}.make ("sample_button1", "SUM")
+			create textbox_result.make ("txtBox3", "")
 			button1.set_click_event (agent handle_click)
-			button2 := create {WSF_BUTTON_CONTROL}.make ("sample_button2", "I'm a button2")
-			button2.set_click_event (agent handle_click)
 			create panel.make ("panel")
+			panel.add_control (textbox1)
+			panel.add_control (textbox2)
 			panel.add_control (button1)
-			panel.add_control (button2)
+			panel.add_control (textbox_result)
 			control := panel
 		end
 
 	handle_click (context: WSF_PAGE_CONTROL)
 		do
 			if attached {SAMPLE_PAGE} context as sp then
-				sp.button1.set_text ("Hello World! (Ueeee)")
-				sp.button2.set_text ("Hi btn2")
+
+				sp.textbox_result.set_text (textbox1.text + " + " + textbox2.text+" = "+ (textbox1.text.to_integer_16+textbox2.text.to_integer_16).out)
 			end
 		end
 
@@ -48,6 +51,10 @@ feature
 
 	button1: WSF_BUTTON_CONTROL
 
-	button2: WSF_BUTTON_CONTROL
+	textbox1: WSF_TEXT_CONTROL
+
+	textbox2: WSF_TEXT_CONTROL
+
+	textbox_result: WSF_TEXT_CONTROL
 
 end

examples/widgetapp/widget.coffee

@@ -2,13 +2,14 @@ trigger_callback = (control_name,event)->
   $.ajax
     data:
       control_name: control_name
-      event:        event
+      event: event
+      states: JSON.stringify(states)
     cache: no
   .done (new_states)->
     #Update all classes
+    window.states = new_states
     for name,state of new_states
       controls[name]?.update(state)
-    states = new_states
     return
 
 class WSF_CONTROL
@@ -35,12 +36,26 @@ class WSF_BUTTON_CONTROL extends WSF_CONTROL
   update: (state) ->
     @$el.text(state.text)
 
+class WSF_TEXT_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    self = @
+    @$el.change ()->
+      self.change()
+  change: ()->
+    #update local state
+    window.states[@control_name]['text'] = @$el.val()
+    trigger_callback(@control_name, 'change')
+
+  update: (state) ->
+    @$el.val(state.text)
+
 #map class name to effectiv class
 typemap =
   "WSF_BUTTON_CONTROL":WSF_BUTTON_CONTROL
+  "WSF_TEXT_CONTROL":WSF_TEXT_CONTROL
 
 #create a js class for each control
-for name,state of states
+for name,state of window.states
   #find control DOM element
   $el = $('[data-name='+name+']')
   #get control type

examples/widgetapp/widget.js

@@ -1,6 +1,6 @@
 // Generated by CoffeeScript 1.6.1
 (function() {
-  var $el, WSF_BUTTON_CONTROL, WSF_CONTROL, controls, name, state, trigger_callback, type, typemap,
+  var $el, WSF_BUTTON_CONTROL, WSF_CONTROL, WSF_TEXT_CONTROL, controls, name, state, trigger_callback, type, typemap, _ref,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
@@ -8,18 +8,19 @@
     return $.ajax({
       data: {
         control_name: control_name,
-        event: event
+        event: event,
+        states: JSON.stringify(states)
       },
       cache: false
     }).done(function(new_states) {
-      var name, state, states, _ref;
+      var name, state, _ref;
+      window.states = new_states;
       for (name in new_states) {
         state = new_states[name];
         if ((_ref = controls[name]) != null) {
           _ref.update(state);
         }
       }
-      states = new_states;
     });
   };
 
@@ -70,12 +71,43 @@
 
   })(WSF_CONTROL);
 
+  WSF_TEXT_CONTROL = (function(_super) {
+
+    __extends(WSF_TEXT_CONTROL, _super);
+
+    function WSF_TEXT_CONTROL() {
+      return WSF_TEXT_CONTROL.__super__.constructor.apply(this, arguments);
+    }
+
+    WSF_TEXT_CONTROL.prototype.attach_events = function() {
+      var self;
+      self = this;
+      return this.$el.change(function() {
+        return self.change();
+      });
+    };
+
+    WSF_TEXT_CONTROL.prototype.change = function() {
+      window.states[this.control_name]['text'] = this.$el.val();
+      return trigger_callback(this.control_name, 'change');
+    };
+
+    WSF_TEXT_CONTROL.prototype.update = function(state) {
+      return this.$el.val(state.text);
+    };
+
+    return WSF_TEXT_CONTROL;
+
+  })(WSF_CONTROL);
+
   typemap = {
-    "WSF_BUTTON_CONTROL": WSF_BUTTON_CONTROL
+    "WSF_BUTTON_CONTROL": WSF_BUTTON_CONTROL,
+    "WSF_TEXT_CONTROL": WSF_TEXT_CONTROL
   };
 
-  for (name in states) {
-    state = states[name];
+  _ref = window.states;
+  for (name in _ref) {
+    state = _ref[name];
     $el = $('[data-name=' + name + ']');
     type = $el.data('type');
     if ((type != null) && (typemap[type] != null)) {