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) {
+  _ref = window.states;
-    state = states[name];
+  for (name in _ref) {
+    state = _ref[name];
     $el = $('[data-name=' + name + ']');
     type = $el.data('type');
     if ((type != null) && (typemap[type] != null)) {

library/server/wsf_html/webcontrol/wsf_button_control.e

@@ -23,11 +23,24 @@ feature {NONE}
 			click_event := agent donothing
 		end
 
-feature
+feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
-		--UGLY HACK MUST BE REMOVED
+	set_state (new_state: JSON_OBJECT)
+		do
+			if attached {JSON_STRING} new_state.item (create {JSON_STRING}.make_json ("text")) as new_text then
+				text := new_text.unescaped_string_32
+			end
+		end
 
-	donothing (p: WSF_PAGE_CONTROL)
+	state: JSON_OBJECT
+		do
+			create Result.make
+			Result.put (create {JSON_STRING}.make_json (text), create {JSON_STRING}.make_json ("text"))
+		end
+
+feature --EVENT HANDLING
+
+	donothing (p: WSF_PAGE_CONTROL) --UGLY HACK MUST BE REMOVED
 		do
 		end
 
@@ -43,17 +56,13 @@ feature
 			end
 		end
 
+feature
+
 	render: STRING
 		do
 			Result := "<button data-name=%"" + control_name + "%" data-type=%"WSF_BUTTON_CONTROL%">" + text + "</button>"
 		end
 
-	state: JSON_OBJECT
-		do
-			create Result.make
-			Result.put (create {JSON_STRING}.make_json (text), create {JSON_STRING}.make_json ("text"))
-		end
-
 	set_text (t: STRING)
 		do
 			text := t

library/server/wsf_html/webcontrol/wsf_control.e

@@ -11,18 +11,16 @@ feature
 
 	control_name: STRING
 
-feature {WSF_PAGE_CONTROL, WSF_CONTROL}
+feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
-	handle_callback (cname: STRING; event: STRING; page: WSF_PAGE_CONTROL)
+	load_state (new_states: JSON_OBJECT)
-		deferred
+		local
-		end
+			new_state: detachable JSON_VALUE
-
+		do
-	render: STRING
+			new_state := new_states.item (create {JSON_STRING}.make_json (control_name))
-		deferred
+			if attached {JSON_OBJECT} new_state as new_state_obj then
-		end
+				set_state (new_state_obj)
-
+			end
-	state: JSON_OBJECT
-		deferred
 		end
 
 	read_state (states: JSON_OBJECT)
@@ -30,4 +28,24 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL}
 			states.put (state, create {JSON_STRING}.make_json (control_name))
 		end
 
+	set_state (new_state: JSON_OBJECT)
+		deferred
+		end
+
+	state: JSON_OBJECT
+		deferred
+		end
+
+feature --EVENT HANDLING
+
+	handle_callback (cname: STRING; event: STRING; page: WSF_PAGE_CONTROL)
+		deferred
+		end
+
+feature
+
+	render: STRING
+		deferred
+		end
+
 end

library/server/wsf_html/webcontrol/wsf_multi_control.e

@@ -11,7 +11,8 @@ inherit
 
 	WSF_CONTROL
 		redefine
-			read_state
+			read_state,
+			load_state
 		end
 
 create
@@ -27,32 +28,28 @@ feature {NONE}
 			controls := create {LINKED_LIST [WSF_CONTROL]}.make;
 		end
 
-feature
+feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
-	add_control (c: WSF_CONTROL)
+	load_state (new_states: JSON_OBJECT)
 		do
-			controls.put_front (c)
-		end
-
-	handle_callback (event: STRING; cname: STRING; page: WSF_PAGE_CONTROL)
-		do
-			if equal (cname, control_name) then
-			else
-				across
-					controls as c
-				loop
-					c.item.handle_callback (event, cname, page)
-				end
-			end
-		end
-
-	render: STRING
-		do
-			Result := ""
 			across
 				controls as c
 			loop
-				Result := Result + c.item.render
+				c.item.load_state (new_states)
+			end
+		end
+
+	set_state (new_state: JSON_OBJECT)
+		do
+		end
+
+	read_state (states: JSON_OBJECT)
+		do
+			states.put (state, create {JSON_STRING}.make_json (control_name))
+			across
+				controls as c
+			loop
+				c.item.read_state (states)
 			end
 		end
 
@@ -68,13 +65,35 @@ feature
 			end
 		end
 
-	read_state (states: JSON_OBJECT)
+feature --EVENT HANDLING
+
+	handle_callback (event: STRING; cname: STRING; page: WSF_PAGE_CONTROL)
 		do
-			states.put (state, create {JSON_STRING}.make_json (control_name))
+			if equal (cname, control_name) then
+			else
+				across
+					controls as c
+				loop
+					c.item.handle_callback (event, cname, page)
+				end
+			end
+		end
+
+feature
+
+	render: STRING
+		do
+			Result := ""
 			across
 				controls as c
 			loop
-				c.item.read_state(states)
+				Result := c.item.render + Result
 			end
 		end
+
+	add_control (c: WSF_CONTROL)
+		do
+			controls.put_front (c)
+		end
+
 end

library/server/wsf_html/webcontrol/wsf_page_control.e

@@ -40,16 +40,23 @@ feature
 		local
 			event: detachable STRING
 			control_name: detachable STRING
-			states: JSON_OBJECT
+			states: detachable STRING
+			new_states: JSON_OBJECT
+			json_parser: JSON_PARSER
 		do
 			control_name := get_parameter ("control_name")
 			event := get_parameter ("event")
-			if attached event and attached control_name and attached control then
+			states := get_parameter ("states")
+			if attached event and attached control_name and attached control and attached states then
+				create json_parser.make_parser (states)
+				if attached {JSON_OBJECT} json_parser.parse_json as sp then
+					control.load_state (sp)
+				end
 				control.handle_callback (control_name, event, Current)
-				create states.make
+				create new_states.make
-				control.read_state (states)
+				control.read_state (new_states)
 				response.put_header ({HTTP_STATUS_CODE}.ok, <<["Content-Type", "application/json"]>>)
-				response.put_string (states.representation)
+				response.put_string (new_states.representation)
 			else
 				process
 				render
@@ -64,18 +71,17 @@ feature
 		do
 			create states.make
 			control.read_state (states)
-
 			data := "<html><head>"
 			data.append ("</head><body>")
 			data.append (control.render)
-			data.append ("<script type=%"text/javascript%">var states=")
+			data.append ("<script type=%"text/javascript%">window.states=")
 			data.append (states.representation)
 			data.append (";</script>")
 			data.append ("<script src=%"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js%"></script>")
 			data.append ("<script src=%"/widget.js%"></script>")
 			data.append ("</body></html>")
 			create page.make
-			page.put_header ({HTTP_STATUS_CODE}.ok,  <<["Content-Type", "text/html"]>>)
+			page.put_header ({HTTP_STATUS_CODE}.ok, <<["Content-Type", "text/html"]>>)
 			page.set_body (data)
 			response.send (page)
 		end

library/server/wsf_html/webcontrol/wsf_text_control.e

@@ -0,0 +1,79 @@
+note
+	description: "Summary description for {WSF_TEXT_CONTROL}."
+	author: ""
+	date: "$Date$"
+	revision: "$Revision$"
+
+class
+	WSF_TEXT_CONTROL
+
+inherit
+
+	WSF_CONTROL
+
+create
+	make
+
+feature {NONE}
+
+	make (n: STRING; v: STRING)
+		do
+			control_name := n
+			text := v
+			change_event := agent donothing
+		end
+
+feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
+
+	set_state (new_state: JSON_OBJECT)
+		do
+			if attached {JSON_STRING} new_state.item (create {JSON_STRING}.make_json ("text")) as new_text then
+				text := new_text.unescaped_string_32
+			end
+		end
+
+	state: JSON_OBJECT
+		do
+			create Result.make
+			Result.put (create {JSON_STRING}.make_json (text), create {JSON_STRING}.make_json ("text"))
+		end
+
+feature --EVENT HANDLING
+
+	donothing (p: WSF_PAGE_CONTROL) --UGLY HACK MUST BE REMOVED
+		do
+		end
+
+	set_change_event (e: PROCEDURE [ANY, TUPLE [WSF_PAGE_CONTROL]])
+		do
+			change_event := e
+		end
+
+	handle_callback (cname: STRING; event: STRING; page: WSF_PAGE_CONTROL)
+		do
+			if Current.control_name.is_equal (cname) and attached change_event then
+				if event.is_equal ("change") then
+					change_event.call ([page])
+				end
+			end
+		end
+
+feature
+
+	render: STRING
+		do
+			Result := "<input type=%"text%" data-name=%"" + control_name + "%" data-type=%"WSF_TEXT_CONTROL%" value=%"" + text + "%" />"
+		end
+
+	set_text (t: STRING)
+		do
+			text := t
+		end
+
+feature
+
+	text: STRING
+
+	change_event: PROCEDURE [ANY, TUPLE [WSF_PAGE_CONTROL]]
+
+end