Redesign states and implement generated control_name

draft/library/wsf_js_widget/kernel/dropdown/wsf_dropdown_control.e

@@ -44,7 +44,7 @@ feature -- Change
 		local
 			li: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			create li.make_with_tag_name (control_name + "_item" + dropdown_menu.controls.count.out, "li")
+			create li.make_with_tag_name ("li")
 			li.add_control (c)
 			dropdown_menu.add_control (li)
 		end

draft/library/wsf_js_widget/kernel/grid/wsf_grid_control.e

@@ -21,9 +21,9 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING; a_columns: ITERABLE [WSF_GRID_COLUMN]; a_datasource: WSF_DATASOURCE [G])
+	make (a_columns: ITERABLE [WSF_GRID_COLUMN]; a_datasource: WSF_DATASOURCE [G])
 		do
-			make_repeater (n, a_datasource)
+			make_repeater (a_datasource)
 			columns := a_columns
 		end
 

draft/library/wsf_js_widget/kernel/grid/wsf_pagination_control.e

@@ -19,9 +19,9 @@ create
 
 feature {NONE}
 
-	make (n: STRING; ds: WSF_PAGABLE_DATASOURCE [G])
+	make (ds: WSF_PAGABLE_DATASOURCE [G])
 		do
-			make_control (n, "ul")
+			make_control ( "ul")
 			add_class ("pagination")
 			datasource := ds
 			datasource.set_on_update_page_agent (agent update)
@@ -48,10 +48,10 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 
 feature --Event handling
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 			-- Handle goto/next/prev events
 		do
-			if Current.control_name.same_string (cname) then
+			if Current.control_name.same_string (cname[1]) then
 				if event.same_string ("next") then
 					datasource.set_page (datasource.page + 1)
 				elseif event.same_string ("prev") then

draft/library/wsf_js_widget/kernel/grid/wsf_repeater_control.e

@@ -20,15 +20,15 @@ inherit
 
 feature {NONE} -- Initialization
 
-	make (n: STRING; a_datasource: WSF_DATASOURCE [G])
+	make ( a_datasource: WSF_DATASOURCE [G])
 		local
 			p: WSF_PAGINATION_CONTROL [G]
 		do
-			make_multi_control (n)
+			make_multi_control
 			datasource := a_datasource
 			datasource.set_on_update_agent (agent update)
 			if attached {WSF_PAGABLE_DATASOURCE [G]} a_datasource as ds then
-				create p.make (n + "_paging", ds)
+				create p.make ( ds)
 				add_control (p)
 				pagination_control := p
 			end

draft/library/wsf_js_widget/kernel/input/wsf_autocomplete_control.e

@@ -22,19 +22,19 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING; c: WSF_AUTOCOMPLETION)
+	make (c: WSF_AUTOCOMPLETION)
 			-- Initialize with specified name and autocompletion
 		do
-			make_with_agent (n, agent c.autocompletion)
+			make_with_agent ( agent c.autocompletion)
 			if attached c.template as t then
 				template := t
 			end
 		end
 
-	make_with_agent (n: STRING; c: FUNCTION [ANY, TUPLE [STRING], JSON_ARRAY])
+	make_with_agent (c: FUNCTION [ANY, TUPLE [STRING], JSON_ARRAY])
 			-- Initialize with specified name and autocompletion function
 		do
-			make_input (n, "")
+			make_input ( "")
 			create_json_list := c
 			template := "{{=value}}"
 		end
@@ -49,10 +49,10 @@ feature -- State
 
 feature -- Callback
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 		do
 			Precursor {WSF_INPUT_CONTROL} (cname, event, event_parameter)
-			if cname.same_string (control_name) and event.same_string ("autocomplete") then
+			if cname[1].same_string (control_name) and event.same_string ("autocomplete") then
 				state_changes.put (create_json_list.item ([text]), "suggestions")
 			end
 		end

draft/library/wsf_js_widget/kernel/input/wsf_checkbox_control.e

@@ -19,10 +19,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n, l, c: STRING)
+	make (l, c: STRING)
 			-- Initialize with specified control name,
 		do
-			make_value_control (n, "input")
+			make_value_control ( "input")
 			label := l
 			checked_value := c
 		end
@@ -54,9 +54,9 @@ feature --Event handling
 			change_event := e
 		end
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 		do
-			if Current.control_name.same_string (cname) and attached change_event as cevent then
+			if Current.control_name.same_string (cname[1]) and attached change_event as cevent then
 				if event.same_string ("change") then
 					cevent.call (Void)
 				end

draft/library/wsf_js_widget/kernel/input/wsf_checkbox_list_control.e

@@ -28,10 +28,10 @@ create
 
 feature {NONE} -- Initializaton
 
-	make (n: STRING)
+	make
 			-- Initialize with specified control name
 		do
-			make_multi_control (n)
+			make_multi_control
 		end
 
 feature -- Implementation

draft/library/wsf_js_widget/kernel/input/wsf_input_control.e

@@ -19,10 +19,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n, v: STRING)
+	make (v: STRING)
 			-- Initialize with specified name and value
 		do
-			make_value_control (n, "input")
+			make_value_control ( "input")
 			type := "text"
 			text := v
 		end
@@ -53,9 +53,9 @@ feature --Event handling
 			change_event := e
 		end
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
-		do
+		do 
-			if Current.control_name.same_string (cname) and attached change_event as cevent then
+			if Current.control_name.same_string (cname[1]) and attached change_event as cevent then
 				if event.same_string ("change") then
 					cevent.call (Void)
 				end

draft/library/wsf_js_widget/kernel/input/wsf_password_control.e

@@ -19,10 +19,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n, v: STRING)
+	make (v: STRING)
 			-- Initialize with specified control name and text
 		do
-			make_input (n, v)
+			make_input (v)
 			type := "password"
 		end
 

draft/library/wsf_js_widget/kernel/input/wsf_textarea_control.e

@@ -21,10 +21,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n, t: STRING)
+	make (t: STRING)
 			-- Initialize with specified control name and text to be displayed in this textarea
 		do
-			make_input (n, t)
+			make_input ( t)
 			tag_name := "textarea"
 		end
 

draft/library/wsf_js_widget/kernel/navbar/wsf_navbar_control.e

@@ -21,10 +21,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING)
+	make
 			--Initialize
 		do
-			make_multi_control (n)
+			make_multi_control
 			active_set := false
 			add_class ("navbar navbar-inverse navbar-fixed-top")
 			create nav.make_with_tag_name ("ul")
@@ -35,10 +35,10 @@ feature {NONE} -- Initialization
 			nav_right.add_class ("nav navbar-nav navbar-right")
 		end
 
-	make_with_brand (n, b: STRING)
+	make_with_brand ( b: STRING)
 			-- Initialize with specified brand string
 		do
-			make (n)
+			make
 			brand := b
 		end
 
@@ -85,7 +85,7 @@ feature -- Change
 		local
 			li: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			create li.make_with_tag_name (control_name + "_link" + nav.controls.count.out, "li")
+			create li.make_with_tag_name ("li")
 			li.add_class ("dropdown")
 			li.add_control (l)
 			li.add_control (d)
@@ -97,7 +97,7 @@ feature -- Change
 		local
 			li: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			create li.make_with_tag_name (control_name + "_link" + nav.controls.count.out, "li")
+			create li.make_with_tag_name ("li")
 			li.add_class ("dropdown")
 			li.add_control (l)
 			li.add_control (d)
@@ -107,12 +107,9 @@ feature -- Change
 	add_list_element_right (l: WSF_STATELESS_CONTROL)
 			-- Add element in li tag to right aligned part of navbar
 		local
-			name: STRING
 			li: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			name := control_name + "_rightlink";
+			create li.make_with_tag_name ("li")
-			name := name + nav_right.controls.count.out
-			create li.make_with_tag_name (name, "li")
 			li.add_control (l)
 			add_element_right (li)
 		end
@@ -122,7 +119,7 @@ feature -- Change
 		local
 			li: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			create li.make_with_tag_name (control_name + "_link" + nav.controls.count.out, "li")
+			create li.make_with_tag_name ("li")
 			li.add_control (l)
 			add_element (li)
 		end

draft/library/wsf_js_widget/kernel/navlist/wsf_navlist_control.e

@@ -9,7 +9,7 @@ class
 
 inherit
 
-	WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
+	WSF_MULTI_CONTROL [WSF_NAVLIST_ITEM_CONTROL]
 		rename
 			make as make_multi_control
 		end
@@ -19,9 +19,9 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING)
+	make
 		do
-			make_multi_control (n)
+			make_multi_control
 			add_class ("list-group")
 		end
 
@@ -31,7 +31,16 @@ feature -- Change
 		local
 			c: WSF_NAVLIST_ITEM_CONTROL
 		do
-			create c.make (control_name + "_item_" + controls.count.out, link, text)
+			create c.make (link, text)
+			add_control(c)
+		end
+
+	add_button (event:attached like {WSF_BUTTON_CONTROL}.click_event; text: STRING)
+		local
+			c: WSF_NAVLIST_ITEM_CONTROL
+		do
+			create c.make ("", text)
+			c.set_click_event(event)
 			add_control(c)
 		end
 

draft/library/wsf_js_widget/kernel/navlist/wsf_navlist_item.e

@@ -12,6 +12,9 @@ inherit
 	WSF_BUTTON_CONTROL
 		rename
 			make as make_button
+		redefine
+			set_state,
+			state
 		end
 
 create
@@ -19,12 +22,41 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n, link, t: STRING)
+	make ( link, t: STRING)
 		do
-			make_control (n, "a")
+			make_control ("a")
 			text := t
 			attributes := "href=%"" + link + "%"";
 			add_class ("list-group-item")
 		end
+feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
+
+	set_state (new_state: JSON_OBJECT)
+			-- Restore text from json
+		do
+			Precursor {WSF_BUTTON_CONTROL}(new_state)
+			if attached {JSON_BOOLEAN} new_state.item ("active") as new_active then
+				active := new_active.item
+			end
+		end
+
+	state: WSF_JSON_OBJECT
+			-- Return state which contains the current text and if there is an event handle attached
+		do
+			Result := Precursor {WSF_BUTTON_CONTROL}
+			Result.put_boolean (true, "active")
+		end
+
+feature -- Change
+
+	set_active (a: BOOLEAN)
+			-- Set text of that button
+		do
+				active := a
+				state_changes.replace (create {JSON_BOOLEAN}.make_boolean (a), "active")
+		end
+feature -- Properties
+
+	active: BOOLEAN
 
 end

draft/library/wsf_js_widget/kernel/progressbar/wsf_progress_control.e

@@ -19,18 +19,18 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING)
+	make
 			-- Initialize with specified control name
 		do
-			make_control (n, "div")
+			make_control ("div")
 			add_class ("progress")
 			progress := 0
 		end
 
-	make_with_source (n: STRING; p: WSF_PROGRESSSOURCE)
+	make_with_source ( p: WSF_PROGRESSSOURCE)
 			-- Initialize with specified control name and progresssource
 		do
-			make (n)
+			make
 			progress_source := p
 		end
 
@@ -51,9 +51,9 @@ feature -- State handling
 
 feature -- Event handling
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 		do
-			if cname.same_string (control_name) and event.same_string ("progress_fetch") then
+			if cname[1].same_string (control_name) and event.same_string ("progress_fetch") then
 				state_changes.put_integer (progress_value, "progress")
 			end
 		end

draft/library/wsf_js_widget/kernel/slider/wsf_image_slider_control.e

@@ -19,10 +19,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING)
+	make
 			-- Initialize with specified name
 		do
-			make_control (n, "div")
+			make_control ( "div")
 			add_class ("carousel slide")
 			create list.make_with_tag_name ( "ol")
 			list.add_class ("carousel-indicators")
@@ -43,7 +43,7 @@ feature -- State handling
 
 feature -- Callback
 
-	handle_callback (cname, event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 		do
 				-- Do nothing here
 		end
@@ -91,7 +91,7 @@ feature -- Change
 			cl: STRING
 			item: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			create item.make (control_name + "_item" + slide_wrapper.controls.count.out)
+			create item.make ()
 			item.add_class ("item")
 			item.add_control (c)
 			if attached caption as capt then

draft/library/wsf_js_widget/kernel/webcontrol/wsf_button_control.e

@@ -19,13 +19,13 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING; t: STRING)
+	make (a_text: STRING)
 			-- Initialize with specified control name and text
 		do
-			make_control (n, "button")
+			make_control ("button")
 			add_class ("btn")
 			add_class ("btn-default")
-			text := t
+			text := a_text
 		end
 
 feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
@@ -54,9 +54,9 @@ feature --Event handling
 			click_event := e
 		end
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 		do
-			if Current.control_name.same_string (cname) and attached click_event as cevent then
+			if Current.control_name.same_string (cname[1]) and attached click_event as cevent then
 				cevent.call (Void)
 			end
 		end

draft/library/wsf_js_widget/kernel/webcontrol/wsf_control.e

@@ -18,14 +18,13 @@ inherit
 
 feature {NONE} -- Initialization
 
-	make (n, a_tag_name: STRING)
+	make (a_tag_name: STRING)
 			-- Initialize with specified control name and tag
 		require
-			not n.is_empty
 			not a_tag_name.is_empty
 		do
 			make_stateless_control (a_tag_name)
-			control_name := n
+			create control_name_prefix.make_empty
 			create state_changes.make
 			create actions.make_array
 		ensure
@@ -140,7 +139,7 @@ feature -- Rendering
 			loop
 				css_classes_string := css_classes_string + " " + c.item
 			end
-			l_attributes := "id=%"" + control_name + "%" data-name=%"" + control_name + "%" data-type=%"" + a_generator + "%" "
+			l_attributes := " data-name=%"" + control_name + "%" data-type=%"" + a_generator + "%" "
 			if attached attrs as a then
 				l_attributes := l_attributes + a
 			end
@@ -152,7 +151,7 @@ feature -- Rendering
 
 feature -- Event handling
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST [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
@@ -170,6 +169,24 @@ feature -- Properties
 
 	actions: JSON_ARRAY
 
+	control_id: INTEGER assign set_control_id
+
+	set_control_id (d: INTEGER)
+		do
+			control_id := d
+		end
+
 	control_name: STRING
+		do
+			Result := control_name_prefix + control_id.out
+		end
+
+	control_name_prefix: STRING assign set_control_name_prefix
+
+
+	set_control_name_prefix (p: STRING)
+		do
+			control_name_prefix := p
+		end
 
 end

draft/library/wsf_js_widget/kernel/webcontrol/wsf_form_control.e

@@ -21,10 +21,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING)
+	make
 			-- Initialize
 		do
-			make_multi_control (n)
+			make_multi_control
 			tag_name := "form"
 		end
 

draft/library/wsf_js_widget/kernel/webcontrol/wsf_form_element_control.e

@@ -34,7 +34,7 @@ feature {NONE} -- Initialization
 	make_with_validators (a_label: STRING; c: WSF_VALUE_CONTROL [G]; v: LIST [WSF_VALIDATOR [G]])
 			-- Initialize form element control with a specific label, value control and list of validators
 		do
-			make_control (c.control_name + "_container", "div")
+			make_control ("div")
 			add_class ("form-group")
 			if attached {WSF_INPUT_CONTROL} c or attached {WSF_TEXTAREA_CONTROL} c then
 				c.add_class ("form-control")
@@ -100,14 +100,15 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 
 feature -- Event handling
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 			-- Pass callback to subcontrols
 		do
-			if cname.same_string (control_name) then
+			if cname[1].same_string (control_name) then
+				cname.go_i_th (1)
+				cname.remove
 				if event.same_string ("validate") then
 					validate
 				end
-			else
 				value_control.handle_callback (cname, event, event_parameter)
 			end
 		end

draft/library/wsf_js_widget/kernel/webcontrol/wsf_html_control.e

@@ -17,10 +17,10 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n, t, v: STRING)
+	make (t, v: STRING)
 			-- Initialize
 		do
-			make_value_control (n, t)
+			make_value_control ( t)
 			html := v
 		end
 
@@ -43,7 +43,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 
 feature --Event handling
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 		do
 		end
 

draft/library/wsf_js_widget/kernel/webcontrol/wsf_layout_control.e

@@ -30,9 +30,9 @@ feature -- Add control
 
 	add_control_with_offset (c: WSF_STATELESS_CONTROL; span, offset: INTEGER)
 		local
-			div: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
+			div: WSF_STATELESS_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			create div.make (control_name + "_item_" + controls.count.out)
+			create div.make_with_tag_name ("div")
 			div.add_class ("col-md-" + span.out + " col-md-offset-" + offset.out)
 			div.add_control (c)
 			add_control_raw (div)
@@ -40,9 +40,9 @@ feature -- Add control
 
 	add_control (c: WSF_STATELESS_CONTROL; span: INTEGER)
 		local
-			div: WSF_MULTI_CONTROL [WSF_STATELESS_CONTROL]
+			div: WSF_STATELESS_MULTI_CONTROL [WSF_STATELESS_CONTROL]
 		do
-			create div.make (control_name + "_item_" + controls.count.out)
+			create div.make_with_tag_name ("div")
 			div.add_class ("col-md-" + span.out)
 			div.add_control (c)
 			add_control_raw (div)

draft/library/wsf_js_widget/kernel/webcontrol/wsf_multi_control.e

@@ -23,16 +23,16 @@ create
 
 feature {NONE} -- Initialization
 
-	make (n: STRING)
+	make
 			-- Initialize with specified control name and default tag "div"
 		do
-			make_with_tag_name (n, "div")
+			make_with_tag_name ("div")
 		end
 
-	make_with_tag_name (n, t: STRING)
+	make_with_tag_name (t: STRING)
 			-- Initialize with specified control name and tag
 		do
-			make_control (n, t)
+			make_control (t)
 			controls := create {ARRAYED_LIST [G]}.make (5);
 		end
 
@@ -52,7 +52,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 			across
 				controls as c
 			loop
-				if attached {WSF_STATELESS_MULTI_CONTROL[WSF_STATELESS_CONTROL]} c.item as cont then
+				if attached {WSF_STATELESS_MULTI_CONTROL [WSF_STATELESS_CONTROL]} c.item as cont then
 					cont.load_subcontrol_state (newstate)
 				elseif attached {WSF_CONTROL} c.item as cont then
 					if attached {JSON_OBJECT} newstate.item (cont.control_name) as value_state then
@@ -83,7 +83,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 			across
 				controls as c
 			loop
-				if attached {WSF_STATELESS_MULTI_CONTROL[WSF_STATELESS_CONTROL]} c.item as mcont then
+				if attached {WSF_STATELESS_MULTI_CONTROL [WSF_STATELESS_CONTROL]} c.item as mcont then
 					mcont.read_subcontrol_state (controls_state)
 				elseif attached {WSF_CONTROL} c.item as cont then
 					controls_state.put (cont.full_state, cont.control_name)
@@ -93,12 +93,32 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 
 	read_state_changes (states: WSF_JSON_OBJECT)
 			-- Read states_changes in subcontrols
+		local
+			sub_states: WSF_JSON_OBJECT
+			control_state: WSF_JSON_OBJECT
 		do
 			Precursor (states)
+			create sub_states.make
+			read_subcontrol_state_changes (sub_states)
+			if sub_states.count>0 then
+				if attached {JSON_OBJECT}states.item (control_name) as changes then
+					changes.put (sub_states, "controls")
+				else
+					create control_state.make
+					control_state.put (sub_states, "controls")
+					states.put (control_state, control_name)
+				end
+			end
+		end
+
+	read_subcontrol_state_changes (states: WSF_JSON_OBJECT)
+		do
 			across
 				controls as c
 			loop
-				if attached {WSF_CONTROL} c.item as cont then
+				if attached {WSF_STATELESS_MULTI_CONTROL [WSF_STATELESS_CONTROL]} c.item as cont then
+					cont.read_subcontrol_state_changes (states)
+				elseif attached {WSF_CONTROL} c.item as cont then
 					cont.read_state_changes (states)
 				end
 			end
@@ -112,11 +132,12 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 
 feature -- Event handling
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST [STRING]; event: STRING; event_parameter: detachable STRING)
 			-- Pass callback to subcontrols
 		do
-			if equal (cname, control_name) then
+			if equal (cname [1], control_name) then
-			else
+				cname.go_i_th (1)
+				cname.remove
 				across
 					controls as c
 				loop
@@ -143,12 +164,15 @@ feature -- Rendering
 			end
 		end
 
-feature -- Change
+feature
 
 	add_control (c: G)
 			-- Add a control to this multi control
 		do
 			controls.extend (c)
+			if attached {WSF_CONTROL} c as d then
+				d.control_id := controls.count
+			end
 		end
 
 feature -- Properties

draft/library/wsf_js_widget/kernel/webcontrol/wsf_page_control.e

@@ -13,6 +13,7 @@ inherit
 		rename
 			make as make_control
 		redefine
+			control_name,
 			full_state,
 			read_state_changes
 		end
@@ -22,7 +23,8 @@ feature {NONE} -- Initialization
 	make (req: WSF_REQUEST; res: WSF_RESPONSE)
 			-- Initialize
 		do
-			make_control (req.request_time_stamp.out, "body")
+			control_name:=req.request_time_stamp.out
+			make_control ( "body")
 			request := req
 			response := res
 			initialize_controls
@@ -73,7 +75,7 @@ feature -- Implementation
 				if attached {JSON_OBJECT} json_parser.parse_json as sp then
 					set_state (sp)
 				end
-				handle_callback (event_control_name, event, event_parameter)
+				handle_callback (event_control_name.split ('-'), event, event_parameter)
 				create states_changes.make
 				read_state_changes (states_changes)
 				response.put_header ({HTTP_STATUS_CODE}.ok, <<["Content-Type", "application/json; charset=ISO-8859-1"]>>)
@@ -145,7 +147,7 @@ feature -- Implementation
 
 feature -- Event handling
 
-	handle_callback (cname: STRING; event: STRING; event_parameter: detachable STRING)
+	handle_callback (cname: LIST[STRING]; event: STRING; event_parameter: detachable STRING)
 			-- Forward callback to control
 		do
 			control.handle_callback (cname, event, event_parameter)
@@ -178,6 +180,8 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 			Result.put (controls_state, "controls")
 			Result.put (state, "state")
 		end
+feature
+	control_name:STRING
 
 feature {NONE} -- Root control
 

draft/library/wsf_js_widget/kernel/webcontrol/wsf_stateless_control.e

@@ -37,6 +37,12 @@ feature -- Change
 			css_classes.force (c)
 		end
 
+	remove_class (cla: STRING)
+			-- Add a css class to this control
+		do
+			css_classes.prune (cla)
+		end
+
 feature -- Rendering
 
 	render_tag (body: STRING; attrs: detachable STRING): STRING

draft/library/wsf_js_widget/kernel/webcontrol/wsf_stateless_multi_control.e

@@ -6,10 +6,17 @@ note
 
 class
 	WSF_STATELESS_MULTI_CONTROL [G -> WSF_STATELESS_CONTROL]
+
 inherit
+
 	WSF_MULTI_CONTROL [G]
 		rename
 			make_with_tag_name as make_with_tag_name_and_name
+		redefine
+			add_control,
+			set_control_name_prefix,
+			handle_callback,
+			set_control_id
 		end
 
 create
@@ -17,15 +24,67 @@ create
 
 feature {NONE} -- Initialization
 
-	make_with_tag_name(t:STRING)
+	make_with_tag_name (t: STRING)
-	do
+		do
-		make_with_tag_name_and_name("",t)
+			make_with_tag_name_and_name (t)
-	end
+		end
 
 	make_tag_less
 		do
-			make_with_tag_name_and_name ("", "")
+			make_with_tag_name_and_name ("")
 			stateless := True
 		end
 
+feature
+
+
+
+	set_control_id (d: INTEGER)
+		do
+			control_id := d
+			set_subcontrol_prefixes
+		end
+
+	set_control_name_prefix (p: STRING)
+		do
+			control_name_prefix := p
+			set_subcontrol_prefixes
+		end
+
+	set_subcontrol_prefixes
+		do
+			across
+				controls as e
+			loop
+				if attached {WSF_CONTROL} e.item as el then
+					el.control_name_prefix := control_name_prefix + control_id.out + "_"
+				end
+			end
+		end
+
+feature
+
+	add_control (c: G)
+			-- Add a control to this multi control
+		do
+			controls.extend (c)
+			if attached {WSF_CONTROL} c as d then
+				d.control_id := controls.count
+				d.control_name_prefix := control_name_prefix + control_id.out + "_"
+			end
+		end
+feature -- Event handling
+
+	handle_callback (cname: LIST [STRING]; event: STRING; event_parameter: detachable STRING)
+			-- Pass callback to subcontrols
+		do
+			across
+				controls as c
+			loop
+				if attached {WSF_CONTROL} c.item as cont then
+					cont.handle_callback (cname, event, event_parameter)
+				end
+			end
+		end
+
 end

examples/widgetapp/assets/widget.coffee

@@ -69,6 +69,15 @@ Mini =
     {
       render:template(t)
     }
+parseSuggestions = (data)->
+  for a of data
+    if a == 'suggestions'
+      return data[a]
+    else
+      d = parseSuggestions(data[a])
+      if d?
+        return d
+  return null
 loaded = {}
 lazy_load = (requirements,fn,that)->
   if requirements.length == 0
@@ -97,7 +106,7 @@ lazy_load = (requirements,fn,that)->
     done()
 
 build_control = (control_name, state, control)->
-  $el = control.$el.find('[data-name='+control_name+']')
+  $el = control.$el.find('[data-name='+control_name+']').first()
   #get control type
   type = $el.data('type')
   #create class
@@ -176,16 +185,31 @@ class WSF_CONTROL
         console.log "Failed preforming action #{action.type}"
  
   process_update: (new_states)->
-    if new_states[@control_name]?
+    try
-      @update(new_states[@control_name])
+      if new_states[@control_name]?
-    for control in @controls
+        @update(new_states[@control_name])
-      if control?
+        for control in @controls
-        control.process_update(new_states)
+          if control?
+            control.process_update(new_states[this.control_name]['controls'])
+    catch e
+      return
+    return
+    
+    
 
   get_context_state : ()->
     if @parent_control? and not @isolation
       return @parent_control.get_context_state()
     return @wrap(@control_name,@fullstate)
+
+  get_full_control_name: ()->
+    if @parent_control? 
+      val = @parent_control.get_full_control_name()
+      if val != ""
+        val = val + "-"
+      return val+@control_name
+    return @control_name
+
   wrap : (cname,state)->
     ctrs = {}
     ctrs[cname] = state
@@ -201,10 +225,18 @@ class WSF_CONTROL
     @url + '?' + $.param(params)
 
   trigger_callback: (control_name,event,event_parameter)->
+    @run_trigger_callback(@get_full_control_name(),event,event_parameter)
+
+  get_page:()->
+    if @parent_control?
+      return @parent_control.get_page()
+    return @
+
+  run_trigger_callback: (control_name,event,event_parameter)->
     if @parent_control? and not @isolation
-      return @parent_control.trigger_callback(control_name,event,event_parameter)
+      return @parent_control.run_trigger_callback(control_name,event,event_parameter)
     self = @
-    $.ajax
+    return $.ajax
       type: 'POST',
       url: @callback_url
                       control_name: control_name
@@ -219,7 +251,7 @@ class WSF_CONTROL
       #Update all classes
       if new_states.actions?
         self.process_actions(new_states.actions)
-      self.process_update(new_states)
+      self.get_page().process_update(new_states)
       
   #Simple event listener
 
@@ -257,6 +289,17 @@ class WSF_PAGE_CONTROL extends WSF_CONTROL
     @initialize = lazy_load @requirements, @attach_events, @
     @load_subcontrols()
 
+  process_update: (new_states)->
+    for control in @controls
+      if control?
+        control.process_update(new_states)
+
+    return
+    
+
+  get_full_control_name: ()->
+    ""
+
   wrap : (cname,state)->
     state
 
@@ -310,6 +353,16 @@ class WSF_INPUT_CONTROL extends WSF_CONTROL
     if state.text?
       @state['text'] = state.text
       @$el.val(state.text)
+      
+class WSF_NAVLIST_ITEM_CONTROL extends WSF_BUTTON_CONTROL
+  update: (state) ->
+    super
+    if state.active?
+      if state.active
+        @$el.addClass("active")
+      else
+        @$el.removeClass("active")
+
 
 class WSF_TEXTAREA_CONTROL extends WSF_INPUT_CONTROL
 
@@ -341,6 +394,7 @@ class WSF_AUTOCOMPLETE_CONTROL extends WSF_INPUT_CONTROL
   attach_events: () ->
     super
     self = @
+    console.log @$el
     @$el.typeahead({
       name: @control_name
       template: @state['template']
@@ -354,7 +408,7 @@ class WSF_AUTOCOMPLETE_CONTROL extends WSF_INPUT_CONTROL
                       event: 'autocomplete'
                       states: JSON.stringify(self.get_context_state())
         filter: (parsedResponse) ->
-            parsedResponse[self.control_name]['suggestions']
+            return parseSuggestions(parsedResponse)
         fn: ()->
           self.trigger_callback(self.control_name, 'autocomplete')
     })

examples/widgetapp/assets/widget.js

@@ -1,5 +1,5 @@
 // Generated by CoffeeScript 1.6.1
-var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CODEVIEW_CONTROL, WSF_CONTROL, WSF_DROPDOWN_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_SLIDER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, lazy_load, loaded, show_alert, start_modal, start_modal_big, template, tmpl,
+var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CODEVIEW_CONTROL, WSF_CONTROL, WSF_DROPDOWN_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_NAVLIST_ITEM_CONTROL, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_SLIDER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, lazy_load, loaded, parseSuggestions, show_alert, start_modal, start_modal_big, template, tmpl,
   __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; };
 
@@ -101,6 +101,21 @@ Mini = {
   }
 };
 
+parseSuggestions = function(data) {
+  var a, d;
+  for (a in data) {
+    if (a === 'suggestions') {
+      return data[a];
+    } else {
+      d = parseSuggestions(data[a]);
+      if (d != null) {
+        return d;
+      }
+    }
+  }
+  return null;
+};
+
 loaded = {};
 
 lazy_load = function(requirements, fn, that) {
@@ -141,7 +156,7 @@ lazy_load = function(requirements, fn, that) {
 
 build_control = function(control_name, state, control) {
   var $el, type, typeclass;
-  $el = control.$el.find('[data-name=' + control_name + ']');
+  $el = control.$el.find('[data-name=' + control_name + ']').first();
   type = $el.data('type');
   typeclass = null;
   try {
@@ -293,21 +308,21 @@ WSF_CONTROL = (function() {
   };
 
   WSF_CONTROL.prototype.process_update = function(new_states) {
-    var control, _i, _len, _ref, _results;
+    var control, _i, _len, _ref;
-    if (new_states[this.control_name] != null) {
+    try {
-      this.update(new_states[this.control_name]);
+      if (new_states[this.control_name] != null) {
-    }
+        this.update(new_states[this.control_name]);
-    _ref = this.controls;
+        _ref = this.controls;
-    _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          control = _ref[_i];
-      control = _ref[_i];
+          if (control != null) {
-      if (control != null) {
+            control.process_update(new_states[this.control_name]['controls']);
-        _results.push(control.process_update(new_states));
+          }
-      } else {
+        }
-        _results.push(void 0);
       }
+    } catch (e) {
+      return;
     }
-    return _results;
   };
 
   WSF_CONTROL.prototype.get_context_state = function() {
@@ -317,6 +332,18 @@ WSF_CONTROL = (function() {
     return this.wrap(this.control_name, this.fullstate);
   };
 
+  WSF_CONTROL.prototype.get_full_control_name = function() {
+    var val;
+    if (this.parent_control != null) {
+      val = this.parent_control.get_full_control_name();
+      if (val !== "") {
+        val = val + "-";
+      }
+      return val + this.control_name;
+    }
+    return this.control_name;
+  };
+
   WSF_CONTROL.prototype.wrap = function(cname, state) {
     var ctrs;
     ctrs = {};
@@ -339,9 +366,20 @@ WSF_CONTROL = (function() {
   };
 
   WSF_CONTROL.prototype.trigger_callback = function(control_name, event, event_parameter) {
+    return this.run_trigger_callback(this.get_full_control_name(), event, event_parameter);
+  };
+
+  WSF_CONTROL.prototype.get_page = function() {
+    if (this.parent_control != null) {
+      return this.parent_control.get_page();
+    }
+    return this;
+  };
+
+  WSF_CONTROL.prototype.run_trigger_callback = function(control_name, event, event_parameter) {
     var self;
     if ((this.parent_control != null) && !this.isolation) {
-      return this.parent_control.trigger_callback(control_name, event, event_parameter);
+      return this.parent_control.run_trigger_callback(control_name, event, event_parameter);
     }
     self = this;
     return $.ajax({
@@ -359,7 +397,7 @@ WSF_CONTROL = (function() {
       if (new_states.actions != null) {
         self.process_actions(new_states.actions);
       }
-      return self.process_update(new_states);
+      return self.get_page().process_update(new_states);
     });
   };
 
@@ -416,6 +454,21 @@ WSF_PAGE_CONTROL = (function(_super) {
     this.load_subcontrols();
   }
 
+  WSF_PAGE_CONTROL.prototype.process_update = function(new_states) {
+    var control, _i, _len, _ref;
+    _ref = this.controls;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      control = _ref[_i];
+      if (control != null) {
+        control.process_update(new_states);
+      }
+    }
+  };
+
+  WSF_PAGE_CONTROL.prototype.get_full_control_name = function() {
+    return "";
+  };
+
   WSF_PAGE_CONTROL.prototype.wrap = function(cname, state) {
     return state;
   };
@@ -534,6 +587,29 @@ WSF_INPUT_CONTROL = (function(_super) {
 
 })(WSF_CONTROL);
 
+WSF_NAVLIST_ITEM_CONTROL = (function(_super) {
+
+  __extends(WSF_NAVLIST_ITEM_CONTROL, _super);
+
+  function WSF_NAVLIST_ITEM_CONTROL() {
+    return WSF_NAVLIST_ITEM_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_NAVLIST_ITEM_CONTROL.prototype.update = function(state) {
+    WSF_NAVLIST_ITEM_CONTROL.__super__.update.apply(this, arguments);
+    if (state.active != null) {
+      if (state.active) {
+        return this.$el.addClass("active");
+      } else {
+        return this.$el.removeClass("active");
+      }
+    }
+  };
+
+  return WSF_NAVLIST_ITEM_CONTROL;
+
+})(WSF_BUTTON_CONTROL);
+
 WSF_TEXTAREA_CONTROL = (function(_super) {
 
   __extends(WSF_TEXTAREA_CONTROL, _super);
@@ -590,6 +666,7 @@ WSF_AUTOCOMPLETE_CONTROL = (function(_super) {
     var self;
     WSF_AUTOCOMPLETE_CONTROL.__super__.attach_events.apply(this, arguments);
     self = this;
+    console.log(this.$el);
     this.$el.typeahead({
       name: this.control_name,
       template: this.state['template'],
@@ -605,7 +682,7 @@ WSF_AUTOCOMPLETE_CONTROL = (function(_super) {
           });
         },
         filter: function(parsedResponse) {
-          return parsedResponse[self.control_name]['suggestions'];
+          return parseSuggestions(parsedResponse);
         },
         fn: function() {
           return self.trigger_callback(self.control_name, 'autocomplete');

examples/widgetapp/base_page.e

@@ -21,20 +21,20 @@ feature
 			btn: WSF_BUTTON_CONTROL
 			dropdown:WSF_DROPDOWN_CONTROL
 		do
-			create control.make ("container")
+			create control.make
 			control.add_class ("container")
 			create dropdown.make_with_tag_name ( "Dropdown", "li")
 			dropdown.add_link_item ("Example link 1", "#")
 			dropdown.add_divider
 			dropdown.add_link_item ("Example link 2", "#")
-			create navbar.make_with_brand ("navbar1", "Example")
+			create navbar.make_with_brand ("Example")
 			navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/%"", "Home"))
 			navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/grid%"", "Grid"))
 			navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/repeater%"", "Repeater"))
 			navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/slider%"", "Slider"))
 			navbar.add_element (dropdown)
 			navbar.add_list_element_right (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/about%"", "About"))
-			create btn.make ("scode", "Show Code")
+			create btn.make ("Show Code")
 			btn.set_click_event (agent show_code)
 			btn.set_isolation (true)
 			btn.add_class ("btn-success")

examples/widgetapp/codeview_page.e

@@ -20,7 +20,7 @@ feature
 
 	initialize_controls
 		do
-			create control.make_codeview ("textarea", "")
+			create control.make_codeview ("")
 		end
 
 	process

examples/widgetapp/grid_page.e

@@ -24,12 +24,12 @@ feature
 			Precursor
 			control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h1", "", "Grid Demo"))
 			create datasource.make_news
-			create search_query.make ("query", create {GOOGLE_AUTOCOMPLETION}.make)
+			create search_query.make (create {GOOGLE_AUTOCOMPLETION}.make)
 			search_query.add_class ("form-control")
 			search_query.set_change_event (agent change_query)
 			control.add_control (search_query)
 			control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h2", "", "Results"))
-			create grid.make ("mygrid", <<create {WSF_GRID_COLUMN}.make ("Title", "title"), create {WSF_GRID_COLUMN}.make ("Content", "content")>>, datasource)
+			create grid.make (<<create {WSF_GRID_COLUMN}.make ("Title", "title"), create {WSF_GRID_COLUMN}.make ("Content", "content")>>, datasource)
 			control.add_control (grid)
 			navbar.set_active (2)
 		end

examples/widgetapp/image_slider_page.e

@@ -24,9 +24,9 @@ feature -- Implementation
 			form: WSF_FORM_CONTROL
 		do
 			Precursor
-			create slider.make ("myslider")
+			create slider.make
-			create form.make ("sliderform")
+			create form.make
-			form.add_control (create {WSF_FORM_ELEMENT_CONTROL [STRING]}.make ("Input", create {WSF_INPUT_CONTROL}.make ("sliderformtext", "Test")))
+			form.add_control (create {WSF_FORM_ELEMENT_CONTROL [STRING]}.make ("Input", create {WSF_INPUT_CONTROL}.make ("Test")))
 				--slider.add_control (form, Void)
 				--slider.add_image ("http://www.placesmustseen.com/wp-content/uploads/2013/01/paris-eiffel-tower.jpg", "Eiffel Tower")
 			slider.add_image ("http://31.media.tumblr.com/43f3edae3fb569943047077cddf93c79/tumblr_mtw7wdX9cm1st5lhmo1_1280.jpg", "car")

examples/widgetapp/repeater_page.e

@@ -24,12 +24,12 @@ feature
 			Precursor
 			control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h1", "", " Repeater Demo"))
 			create datasource.make_news
-			create search_query.make ("query", create {GOOGLE_AUTOCOMPLETION}.make)
+			create search_query.make (create {GOOGLE_AUTOCOMPLETION}.make)
 			search_query.add_class ("form-control")
 			search_query.set_change_event (agent change_query)
 			control.add_control (search_query)
 			control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h2", "", "Results"))
-			create repeater.make ("myrepeater", datasource)
+			create repeater.make (datasource)
 			control.add_control (repeater)
 			navbar.set_active (3)
 		end

examples/widgetapp/sample_page.e

@@ -30,58 +30,58 @@ feature
 			source: INCREASING_PROGRESSSOURCE
 		do
 			Precursor
-			create form.make ("panel")
+			create form.make
 			form.add_class ("form-horizontal")
 				--Number 1
-			create textbox1.make ("txtBox1", "1")
+			create textbox1.make ("1")
 			create n1_container.make ("Number1", textbox1)
 			n1_container.add_validator (create {WSF_DECIMAL_VALIDATOR}.make_decimal_validator ("Invalid Number"))
 			n1_container.add_validator (create {OWN_VALIDATOR}.make_own)
 			form.add_control (n1_container)
 				--Number 2
-			create textbox2.make ("txtBox2", "2")
+			create textbox2.make ("2")
 			create n2_container.make ("Number2", textbox2)
 			n2_container.add_validator (create {WSF_DECIMAL_VALIDATOR}.make_decimal_validator ("Invalid Number"))
 			form.add_control (n2_container)
 				--Flag autocomplete
-			create autocompletion1.make ("autocompletion1", create {FLAG_AUTOCOMPLETION}.make)
+			create autocompletion1.make (create {FLAG_AUTOCOMPLETION}.make)
 			create n3_container.make ("Flag Autocomplete", autocompletion1)
 			form.add_control (n3_container)
 				--Contact autocomplete
-			create autocompletion2.make ("autocompletion2", create {CONTACT_AUTOCOMPLETION}.make)
+			create autocompletion2.make (create {CONTACT_AUTOCOMPLETION}.make)
 			create n4_container.make ("Contact Autocomplete", autocompletion2)
 			form.add_control (n4_container)
 				--Google autocomplete
-			create autocompletion3.make ("autocompletion4", create {GOOGLE_AUTOCOMPLETION}.make)
+			create autocompletion3.make (create {GOOGLE_AUTOCOMPLETION}.make)
 			create n5_container.make ("Google Autocomplete", autocompletion3)
 			form.add_control (n5_container)
 				--Categories
-			create cklist.make ("categories")
+			create cklist.make
-			cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("net", "Network", "net"))
+			cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Network", "net"))
-			cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("os", "Operating Systems", "os"))
+			cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Operating Systems", "os"))
-			cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("fmfp", "Formal Methods and Functional Programming", "fmfp"))
+			cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Formal Methods and Functional Programming", "fmfp"))
 			create cats_container.make ("Categories", cklist)
 			cats_container.add_validator (create {WSF_MIN_VALIDATOR [STRING]}.make_min_validator (1, "Choose at least one category"))
 			cats_container.add_validator (create {WSF_MAX_VALIDATOR [STRING]}.make_max_validator (2, "Choose at most two category"))
 			form.add_control (cats_container)
 				--Button 1
-			create button1.make ("sample_button1", "Update")
+			create button1.make ("Update")
 			button1.set_click_event (agent handle_click)
 			button1.add_class ("col-lg-offset-2")
 			form.add_control (button1)
 				--Button 2
-			create button2.make ("sample_button2", "Start Modal Grid")
+			create button2.make ("Start Modal Grid")
 			button2.set_click_event (agent handle_click)
 			form.add_control (button2)
 				--Result
-			create result_html.make ("txtBox3", "p", "")
+			create result_html.make ("p", "")
 			form.add_control (create {WSF_FORM_ELEMENT_CONTROL [STRING]}.make ("Result", result_html))
 			control.add_control (form)
 
 				--Progress bar
 			control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h4", "", "Autoincrementing progressbar"))
 			create source.make
-			create progress.make_with_source ("progress1", source)
+			create progress.make_with_source (source)
 			source.set_control (progress)
 			progress.set_isolation (true)
 			control.add_control (progress)