Have fun with Mark's HTMLController!


Have no idea about javascript and never want to deal with programming languages? No problem: this directive allows you to do your client logic right in the html! You can either place your logic with in the HTMLController tag anywhere in body tag or you can add inline attributes to any DOM element that you like to control.

You can even apply logic dynamically!

And watch the logic you added!


There are three ways to build your client logic: To start, simply add an attribute, "html-Controller", in the body tag. Then you can speicify your logic with in a "HTMLController" tag (See an example below) or add control logic to the involved DOM components.
Another way to add logic to DOM element is using attribute "HTMLController" as a inline attribute. The value of "HTMLController" can be:

You can also wire the DOM components dynamically. The dynamic wiring is carried out by action "command". For example,

The content of attribute "HTMLController" above means that building a connction from command_button to itself and carry out command as the button is clicked. The command is fetched from element with id as "commander_1".
You can chain commands to complete a connection.

For example, to have textarea_4 synchronize with input_4, you can enter "#input_4|pub|/Test/TopicX|enter,#textarea_4|sub|/Test/TopicX|replace||#input_4" or simply connect them as "#input_4|connection|enter|#textarea_4|replace".

Dynamic wiring sometimes is really useful. For example, you can rearrange the logic after users enter a certain state (such as entering some text or check a box) instead of reload the page with different logic. You may want to try it yourself in the input field with green background below. You can also clear all the wiring any time or reset all the static wiring (try the buttons below the table).


The following table contains all the target DOM elements to be controlled: Move the mouse cursor to the fields (colored red) to see the setting in tooltips.
What happen?Text InputButtonSelectCheckBoxTextAreaDivInstruction To Operate the Demo
There are two publishers: button_0 (click), input_0(enter)
And two subscribers: textarea_0 (to be append), select_0(to be selected with a static value ""). Logic is done in Logic block below (the light yellow area).
Input 0 select_0 checkbox_0 textarea_0
1).click at button_0 or enter at input_0; 2).see change at select_0 and textarea_0
Connection between input_1 (keydown) and textarea_1 (to be replace by content of input_1). Logic is done in Logic block below (the light yellow area). Input 1 select_1 checkbox_1 textarea_1
1). typing in input_1; 2). watch the change in textarea_1
Logic is done inline: input_2 publish "/Test/TopicB" and textarea_2 subscribe the topic and append content from input_2 Input 2 select_2 checkbox_2 textarea_2
Click at button_2 and watch change on textarea_2
Logic is done inline: Connection between input_3 (keydown) and textarea_3 (to be replaced) Input 3 select_3 checkbox_3 textarea_3
Type into input_3 and watch change in textarea_3
Try it now Input 4 select_4 checkbox_4 textarea_4
Select a pre-defined item in the dropbox below to see what. Or type into the green input field using your own commands

You can wire DOM components dynamically. Just select a pre-defined command and then hit the enter key to submit

You can even:

Static logic reside in HTMLController tag

See the description in blue:
	    	<!-- Multiple publishers and multiple subscribers on a single topic -->
		<topic name="/Test/TopicA">
			<pub id="button_0" event="click"> //button_0 publish a topic ""/Test/TopicA">" as it is clicked
			<pub id="input_0" event="enter"> //input_0 publish a topic ""/Test/TopicA">" as it is receives a enter key
			<sub id="textarea_0" action="append" valueSelector="div_0"> //when topic ""/Test/TopicA">" is published, content of textarea_0 is appended by text in div_0  
			<sub id="select_0" action="selectValue" value="Item_4"> //when topic ""/Test/TopicA">" is published,select_0 is selected to match value ""
		<!-- Connection -->
			<source id="input_1" event="keydown"> //When input_1 receipts a keydown
			<target id="textarea_1" action="replace"> //content of textarea_1 is replaced with content in input_1

Supported Events:

Supported actions: