- Add event paramenter

- Implement Paging control

examples/widgetapp/demo_datasource.e

@@ -9,7 +9,7 @@ class
 
 inherit
 
-	WSF_DATASOURCE [DEMO_DATA]
+	WSF_PAGABLE_DATASOURCE [DEMO_DATA]
 
 create
 	make_demo
@@ -28,11 +28,12 @@ feature
 		do
 			create list.make
 			across
-				((page - 1) * page_size) |..| (page * page_size - 1) as c
+				((page - 1) * page_size) |..| (page * page_size - 1).min(131) as c
 			loop
 				list.extend (create {DEMO_DATA}.make (c.item, "Name" + c.item.out, "desc " + c.item.out))
 			end
 			Result := list
+			row_count:=132
 		end
 
 end

examples/widgetapp/sample_page.e

@@ -18,16 +18,15 @@ feature
 
 	initialize_controls
 		local
-			container: WSF_MULTI_CONTROL[WSF_STATELESS_CONTROL]
+			container: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 			navbar: WSF_NAVBAR_CONTROL
-			form: WSF_FORM_CONTROL
 			n1_container: WSF_FORM_ELEMENT_CONTROL [STRING]
 			n2_container: WSF_FORM_ELEMENT_CONTROL [STRING]
 			n3_container: WSF_FORM_ELEMENT_CONTROL [STRING]
 			cats_container: WSF_FORM_ELEMENT_CONTROL [LIST [STRING]]
 			s: FLAG_AUTOCOMPLETION
 		do
-			create s.make(<<["dz", "Algeria"], ["be", "Belgium"] , ["ca", "Canada"],["de", "Deutschland"], ["england", "England"], ["fi", "Finland"], ["gr", "Greece"], ["hu", "Hungary"]>>)
+			create s.make (<<["dz", "Algeria"], ["be", "Belgium"], ["ca", "Canada"], ["de", "Deutschland"], ["england", "England"], ["fi", "Finland"], ["gr", "Greece"], ["hu", "Hungary"]>>)
 			create container.make_multi_control ("container")
 			create navbar.make_navbar ("Sample Page")
 			create textbox1.make_input ("txtBox1", "1")
@@ -66,21 +65,19 @@ feature
 		local
 			text: STRING
 		do
-			if attached {WSF_FORM_CONTROL} control as form then
+			form.validate
-				form.validate
+			if form.is_valid then
-				if form.is_valid then
+				text := textbox1.text + " + " + textbox2.text + " = " + (textbox1.text.to_integer_64 + textbox2.text.to_integer_64).out
-					text := textbox1.text + " + " + textbox2.text + " = " + (textbox1.text.to_integer_64 + textbox2.text.to_integer_64).out
+				text.append ("<ul>")
-					text.append ("<ul>")
+				across
-					across
+					cklist.value as s
-						cklist.value as s
+				loop
-					loop
+					text.append ("<li>" + s.item + "</li>")
-						text.append ("<li>" + s.item + "</li>")
-					end
-					text.append ("</ul>")
-					textbox_result.set_html (text)
-				else
-					textbox_result.set_html ("VALIDATION ERROR")
 				end
+				text.append ("</ul>")
+				textbox_result.set_html (text)
+			else
+				textbox_result.set_html ("VALIDATION ERROR")
 			end
 		end
 
@@ -100,4 +97,6 @@ feature
 
 	textbox_result: WSF_HTML_CONTROL
 
+	form: WSF_FORM_CONTROL
+
 end

examples/widgetapp/widget.coffee

@@ -11,11 +11,12 @@ Mini =
       render:template(t)
     }
 
-trigger_callback = (control_name,event)->
+trigger_callback = (control_name,event,event_parameter)->
   $.ajax
     data:
       control_name: control_name
       event: event
+      event_parameter: event_parameter
       states: JSON.stringify(window.states)
     cache: no
   .done (new_states)->
@@ -247,6 +248,36 @@ class WSF_CHECKBOX_LIST_CONTROL extends WSF_CONTROL
         result.push(subc.checked_value)
     return result
 
+class WSF_PAGINATION_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    self = @
+    @$el.on 'click', 'a', (e)->
+      e.preventDefault()
+      self.click(e)
+
+  click: (e)->
+    nr = $(e.target).data('nr')
+    if nr == "next"
+      trigger_callback(@control_name, "next")
+    else if nr == "prev"
+      trigger_callback(@control_name, "prev")
+    else
+      trigger_callback(@control_name, "goto", nr)
+
+  update: (state) ->
+    if state._html?
+      @$el.html($(state._html).html())
+
+class WSF_GRID_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    self = @
+
+  update: (state) ->
+    if state.datasource?
+      window.states[@control_name]['datasource'] = state.datasource
+    if state._body?
+      @$el.find('tbody').html($(state._body).html())
+
 #map class name to effective class
 typemap =
   "WSF_BUTTON_CONTROL":WSF_BUTTON_CONTROL
@@ -257,6 +288,8 @@ typemap =
   "WSF_FORM_ELEMENT_CONTROL": WSF_FORM_ELEMENT_CONTROL
   "WSF_HTML_CONTROL": WSF_HTML_CONTROL
   "WSF_CHECKBOX_LIST_CONTROL": WSF_CHECKBOX_LIST_CONTROL
+  "WSF_PAGINATION_CONTROL": WSF_PAGINATION_CONTROL
+  "WSF_GRID_CONTROL": WSF_GRID_CONTROL
 
 #create a js class for each control
 for name,state of window.states

examples/widgetapp/widget.js

@@ -1,6 +1,6 @@
 // Generated by CoffeeScript 1.6.1
 (function() {
-  var $el, Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_REGEXP_VALIDATOR, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, cache, controls, name, state, template, tmpl, trigger_callback, type, typemap, validatormap, _ref, _ref1, _ref2,
+  var $el, Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_PAGINATION_CONTROL, WSF_REGEXP_VALIDATOR, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, cache, controls, name, state, template, tmpl, trigger_callback, type, typemap, validatormap, _ref, _ref1, _ref2,
     __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; };
 
@@ -24,11 +24,12 @@
     }
   };
 
-  trigger_callback = function(control_name, event) {
+  trigger_callback = function(control_name, event, event_parameter) {
     return $.ajax({
       data: {
         control_name: control_name,
         event: event,
+        event_parameter: event_parameter,
         states: JSON.stringify(window.states)
       },
       cache: false
@@ -463,6 +464,71 @@
 
   })(WSF_CONTROL);
 
+  WSF_PAGINATION_CONTROL = (function(_super) {
+
+    __extends(WSF_PAGINATION_CONTROL, _super);
+
+    function WSF_PAGINATION_CONTROL() {
+      return WSF_PAGINATION_CONTROL.__super__.constructor.apply(this, arguments);
+    }
+
+    WSF_PAGINATION_CONTROL.prototype.attach_events = function() {
+      var self;
+      self = this;
+      return this.$el.on('click', 'a', function(e) {
+        e.preventDefault();
+        return self.click(e);
+      });
+    };
+
+    WSF_PAGINATION_CONTROL.prototype.click = function(e) {
+      var nr;
+      nr = $(e.target).data('nr');
+      if (nr === "next") {
+        return trigger_callback(this.control_name, "next");
+      } else if (nr === "prev") {
+        return trigger_callback(this.control_name, "prev");
+      } else {
+        return trigger_callback(this.control_name, "goto", nr);
+      }
+    };
+
+    WSF_PAGINATION_CONTROL.prototype.update = function(state) {
+      if (state._html != null) {
+        return this.$el.html($(state._html).html());
+      }
+    };
+
+    return WSF_PAGINATION_CONTROL;
+
+  })(WSF_CONTROL);
+
+  WSF_GRID_CONTROL = (function(_super) {
+
+    __extends(WSF_GRID_CONTROL, _super);
+
+    function WSF_GRID_CONTROL() {
+      return WSF_GRID_CONTROL.__super__.constructor.apply(this, arguments);
+    }
+
+    WSF_GRID_CONTROL.prototype.attach_events = function() {
+      var self;
+      return self = this;
+    };
+
+    WSF_GRID_CONTROL.prototype.update = function(state) {
+      if (state.datasource != null) {
+        window.states[this.control_name]['datasource'] = state.datasource;
+      }
+      if (state._body != null) {
+        return this.$el.find('tbody').html($(state._body).html());
+      }
+    };
+
+    return WSF_GRID_CONTROL;
+
+  })(WSF_CONTROL);
+
   typemap = {
     "WSF_BUTTON_CONTROL": WSF_BUTTON_CONTROL,
     "WSF_INPUT_CONTROL": WSF_INPUT_CONTROL,
@@ -471,7 +537,9 @@
     "WSF_CHECKBOX_CONTROL": WSF_CHECKBOX_CONTROL,
     "WSF_FORM_ELEMENT_CONTROL": WSF_FORM_ELEMENT_CONTROL,
     "WSF_HTML_CONTROL": WSF_HTML_CONTROL,
-    "WSF_CHECKBOX_LIST_CONTROL": WSF_CHECKBOX_LIST_CONTROL
+    "WSF_CHECKBOX_LIST_CONTROL": WSF_CHECKBOX_LIST_CONTROL,
+    "WSF_PAGINATION_CONTROL": WSF_PAGINATION_CONTROL,
+    "WSF_GRID_CONTROL": WSF_GRID_CONTROL
   };
 
   _ref = window.states;

library/server/wsf_html/webcontrol/grid/wsf_datasource.e

@@ -7,14 +7,28 @@ note
 deferred class
 	WSF_DATASOURCE [G -> WSF_ENTITY]
 
+feature -- Update event
+
+	set_on_update_agent (f: PROCEDURE [ANY, TUPLE []])
+		do
+			on_update_agent := f
+		end
+
+	update
+		do
+			if attached on_update_agent as a  then
+				a.call([])
+			end
+		end
+
+	on_update_agent: detachable PROCEDURE [ANY, TUPLE []]
+
 feature --State
 
 	state: JSON_OBJECT
 			-- Return state which contains the current html and if there is an event handle attached
 		do
 			create Result.make
-			Result.put (create {JSON_NUMBER}.make_integer (page), create {JSON_STRING}.make_json ("page"))
-			Result.put (create {JSON_NUMBER}.make_integer (page_size), create {JSON_STRING}.make_json ("page_size"))
 			if attached sort_column as a_sort_column then
 				Result.put (create {JSON_STRING}.make_json (a_sort_column), create {JSON_STRING}.make_json ("sort_column"))
 			else
@@ -43,16 +57,6 @@ feature --State
 
 feature
 
-	set_page (a_page: like page)
-		do
-			page := a_page
-		end
-
-	set_page_size (a_page_size: like page_size)
-		do
-			page_size := a_page_size
-		end
-
 	set_sort_column (a_sort_column: like sort_column)
 		do
 			sort_column := a_sort_column

library/server/wsf_html/webcontrol/grid/wsf_grid_control.e

@@ -9,7 +9,13 @@ class
 
 inherit
 
-	WSF_CONTROL
+	WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
+		redefine
+			set_state,
+			state,
+			handle_callback,
+			render
+		end
 
 create
 	make_grid
@@ -18,15 +24,22 @@ feature {NONE}
 
 	make_grid (n: STRING; a_columns: ITERABLE [WSF_GRID_COLUMN]; a_datasource: WSF_DATASOURCE [G])
 		do
-			make_control (n, "div")
+			make_multi_control (n)
 			columns := a_columns
 			datasource := a_datasource
+			datasource.set_on_update_agent (agent update)
+			if attached {WSF_PAGABLE_DATASOURCE [G]} a_datasource as ds then
+				create pagination_control.make_paging (n + "_paging", ds)
+				add_control (pagination_control)
+			end
 		end
 
 feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
 	update
 		do
+			state_changes.replace (create {JSON_STRING}.make_json (render_body), create {JSON_STRING}.make_json ("_body"))
+			state_changes.replace (datasource.state, create {JSON_STRING}.make_json ("datasource"))
 		end
 
 	set_state (new_state: JSON_OBJECT)
@@ -46,8 +59,9 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
 feature --EVENT HANDLING
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 		do
+			Precursor (cname, event, event_parameter)
 		end
 
 feature -- Implementation
@@ -83,8 +97,17 @@ feature -- Implementation
 		end
 
 	render: STRING
+		local
+			table: STRING
 		do
-			Result := render_tag (render_tag_with_tagname ("table", render_header + render_body, "", "table table-striped"), "")
+			table := render_tag_with_tagname ("table", render_header + render_body, "", "table table-striped")
+			Result := ""
+			across
+				controls as c
+			loop
+				Result := c.item.render + Result
+			end
+			Result := render_tag (table + Result, "")
 		end
 
 feature
@@ -93,4 +116,6 @@ feature
 
 	datasource: WSF_DATASOURCE [G]
 
+	pagination_control: detachable WSF_PAGINATION_CONTROL [G]
+
 end

library/server/wsf_html/webcontrol/grid/wsf_pagable_datasource.e

@@ -0,0 +1,57 @@
+note
+	description: "Summary description for {WSF_PAGABLE}."
+	author: ""
+	date: "$Date$"
+	revision: "$Revision$"
+
+deferred class
+	WSF_PAGABLE_DATASOURCE [G -> WSF_ENTITY]
+
+inherit
+
+	WSF_DATASOURCE [G]
+		redefine
+			state,
+			set_state
+		end
+
+feature --States
+
+	state: JSON_OBJECT
+			-- Return state which contains the current html and if there is an event handle attached
+		do
+			Result := Precursor
+			Result.put (create {JSON_NUMBER}.make_integer (page), create {JSON_STRING}.make_json ("page"))
+			Result.put (create {JSON_NUMBER}.make_integer (page_size), create {JSON_STRING}.make_json ("page_size"))
+			Result.put (create {JSON_NUMBER}.make_integer (row_count), create {JSON_STRING}.make_json ("row_count"))
+		end
+
+	set_state (new_state: JSON_OBJECT)
+		do
+			Precursor (new_state)
+			if attached {JSON_NUMBER} new_state.item (create {JSON_STRING}.make_json ("page")) as new_page then
+				page := new_page.item.to_integer
+			end
+			if attached {JSON_NUMBER} new_state.item (create {JSON_STRING}.make_json ("page_size")) as new_page_size then
+				page_size := new_page_size.item.to_integer
+			end
+			if attached {JSON_NUMBER} new_state.item (create {JSON_STRING}.make_json ("row_count")) as new_row_count then
+				row_count := new_row_count.item.to_integer
+			end
+		end
+
+feature
+
+	set_page (p: INTEGER)
+		do
+			page := p.min (page_count).max (1)
+		end
+
+	row_count: INTEGER
+
+	page_count: INTEGER
+		do
+			Result := (row_count / page_size).ceiling
+		end
+
+end

library/server/wsf_html/webcontrol/grid/wsf_pagination_control.e

@@ -0,0 +1,88 @@
+note
+	description: "Summary description for {WSF_PAGINATION}."
+	author: ""
+	date: "$Date$"
+	revision: "$Revision$"
+
+class
+	WSF_PAGINATION_CONTROL [G -> WSF_ENTITY]
+
+inherit
+
+	WSF_CONTROL
+
+create
+	make_paging
+
+feature {NONE}
+
+	make_paging (n: STRING; ds: WSF_PAGABLE_DATASOURCE [G])
+		do
+			make_control (n, "ul")
+			add_class ("pagination")
+			datasource := ds
+		end
+
+feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
+
+	state: JSON_OBJECT
+			-- Return state which contains the current html and if there is an event handle attached
+		do
+			create Result.make
+		end
+
+	set_state (new_state: JSON_OBJECT)
+		do
+		end
+
+feature --EVENT HANDLING
+
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+		do
+			if Current.control_name.is_equal (cname) then
+				if event.is_equal ("next") then
+					datasource.set_page (datasource.page + 1)
+				elseif event.is_equal ("prev") then
+					datasource.set_page (datasource.page - 1)
+				elseif event.is_equal ("goto") then
+					if attached event_parameter as p and then attached p.to_integer as i then
+						datasource.set_page (i)
+					end
+				end
+				state_changes.replace (create {JSON_STRING}.make_json (render), create {JSON_STRING}.make_json ("_html"))
+				datasource.update
+			end
+		end
+
+feature
+
+	render: STRING
+		local
+			page_count: INTEGER
+			paging_start: INTEGER
+			paging_end: INTEGER
+			cssclass: STRING
+		do
+			Result := render_tag_with_tagname ("li", render_tag_with_tagname ("a", "«", "href=%"#%" data-nr=%"prev%"", ""), "", "")
+			paging_start := (datasource.page - 4).max (1)
+			paging_end := (paging_start + 8).min (datasource.page_count)
+			paging_start := (paging_end - 8).max (1)
+			across
+				paging_start |..| paging_end as n
+			loop
+				if n.item = datasource.page then
+					cssclass := "active"
+				else
+					cssclass := ""
+				end
+				Result := Result + render_tag_with_tagname ("li", render_tag_with_tagname ("a", n.item.out, "href=%"#%" data-nr=%"" + n.item.out + "%"", ""), "", cssclass)
+			end
+			Result := Result + render_tag_with_tagname ("li", render_tag_with_tagname ("a", "»", "href=%"#%" data-nr=%"next%"", ""), "", "")
+			Result := render_tag (Result, "")
+		end
+
+feature
+
+	datasource: WSF_PAGABLE_DATASOURCE [G]
+
+end

library/server/wsf_html/webcontrol/input/wsf_autocomplete_control.e

@@ -45,9 +45,9 @@ feature -- State
 
 feature -- Callback
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 		do
-			Precursor {WSF_INPUT_CONTROL} (cname, event)
+			Precursor {WSF_INPUT_CONTROL} (cname, event, event_parameter)
 			if cname.is_equal (control_name) and event.is_equal ("autocomplete") then
 				state_changes.put (create_json_list.item ([text]), create {JSON_STRING}.make_json ("suggestions"))
 			end

library/server/wsf_html/webcontrol/input/wsf_checkbox_control.e

@@ -50,7 +50,7 @@ feature --EVENT HANDLING
 			change_event := e
 		end
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 		do
 			if Current.control_name.is_equal (cname) and attached change_event as cevent then
 				if event.is_equal ("change") then

library/server/wsf_html/webcontrol/input/wsf_input_control.e

@@ -49,7 +49,7 @@ feature --EVENT HANDLING
 			change_event := e
 		end
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 		do
 			if Current.control_name.is_equal (cname) and attached change_event as cevent then
 				if event.is_equal ("change") then

library/server/wsf_html/webcontrol/wsf_button_control.e

@@ -50,7 +50,7 @@ feature --EVENT HANDLING
 			click_event := e
 		end
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 		do
 			if Current.control_name.is_equal (cname) and attached click_event as cevent then
 				cevent.call ([])

library/server/wsf_html/webcontrol/wsf_control.e

@@ -84,7 +84,7 @@ feature -- Rendering
 
 feature --EVENT HANDLING
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 			-- Method called if any callback received. In this method you can route the callback to the event handler
 		deferred
 		end

library/server/wsf_html/webcontrol/wsf_form_element_control.e

@@ -41,7 +41,6 @@ feature {NONE}
 			if attached {WSF_HTML_CONTROL} c then
 				c.add_class ("form-control-static")
 			end
-
 			value_control := c
 			validators := v
 			label := a_label
@@ -94,7 +93,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
 feature --EVENT HANDLING
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 			-- Pass callback to subcontrols
 		do
 			if equal (cname, control_name) then
@@ -102,7 +101,7 @@ feature --EVENT HANDLING
 					validate
 				end
 			else
-				value_control.handle_callback (cname, event)
+				value_control.handle_callback (cname, event, event_parameter)
 			end
 		end
 

library/server/wsf_html/webcontrol/wsf_html_control.e

@@ -41,7 +41,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
 feature --EVENT HANDLING
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 		do
 		end
 

library/server/wsf_html/webcontrol/wsf_multi_control.e

@@ -48,16 +48,11 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 		end
 
 	set_state (new_state: JSON_OBJECT)
+			-- Before we process the callback. We restore the state of control.
 		do
-			across
-				controls as c
-			loop
-				if attached {WSF_CONTROL} c.item as cont then
-					cont.set_state (new_state)
-				end
-			end
 		end
 
+
 	read_state (states: JSON_OBJECT)
 			-- Read states in subcontrols
 		do
@@ -92,7 +87,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- STATE MANAGEMENT
 
 feature --EVENT HANDLING
 
-	handle_callback (cname: STRING; event: STRING)
+	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
 			-- Pass callback to subcontrols
 		do
 			if equal (cname, control_name) then
@@ -101,7 +96,7 @@ feature --EVENT HANDLING
 					controls as c
 				loop
 					if attached {WSF_CONTROL} c.item as cont then
-						cont.handle_callback (cname, event)
+						cont.handle_callback (cname, event, event_parameter)
 					end
 				end
 			end
@@ -120,9 +115,11 @@ feature
 			Result := render_tag (Result, "")
 		end
 
-	add_control (c: G)
+	add_control (c: detachable  G)
 		do
-			controls.put_front (c)
+			if attached c as d then
+				controls.put_front (d)
+			end
 		end
 
 	controls: LINKED_LIST [G]

library/server/wsf_html/webcontrol/wsf_page_control.e

@@ -43,6 +43,7 @@ feature
 			-- If request is not a callback. Run process and render the html page
 		local
 			event: detachable STRING
+			event_parameter: detachable STRING
 			control_name: detachable STRING
 			states: detachable STRING
 			states_changes: JSON_OBJECT
@@ -50,13 +51,14 @@ feature
 		do
 			control_name := get_parameter ("control_name")
 			event := get_parameter ("event")
+			event_parameter := get_parameter ("event_parameter")
 			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)
+				control.handle_callback (control_name, event, event_parameter)
 				create states_changes.make
 				control.read_state_changes (states_changes)
 				response.put_header ({HTTP_STATUS_CODE}.ok, <<["Content-Type", "application/json"]>>)
@@ -74,14 +76,14 @@ feature
 			page: WSF_PAGE_RESPONSE
 			states: JSON_OBJECT
 		do
-			create states.make
-			control.read_state (states)
 			data := "<html><head>"
 			data.append ("<link href=%"/bootstrap.min.css%" rel=%"stylesheet%">")
 			data.append ("<link href=%"/widget.css%" rel=%"stylesheet%">")
 			data.append ("</head><body>")
 			data.append (control.render)
 			data.append ("<script type=%"text/javascript%">window.states=")
+			create states.make
+			control.read_state (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>")