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:
Logic block. You can insert a block with "HTMLController" tag (see detail below)
Inline attribute. You can also insert an attribute "HTMLController" into any DOM component and assign the wiring commands to the attribute.
Dynamic wiring. In your wiring command, you can use an action called "command" to carry out wiring command as the element is triggered.
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:
For publishing: HTMLController="anchorSelector|pub|topic|trigger event", where "|" is used as field delimiter and "," is used to chain logic (see its usage below). For example, you can turn a button into a publisher as <button HTMLController="|pub|/Test/TopicA|click"></button>, meaning a topic, "/Test/TopicA" will be published when current button is clicked.
For subscribing: HTMLController="anchorSelector|sub|topic|action|valuevalueSelector". For example, you can turn a textarea into a subscriber as <textarea HTMLController="|sub|/Test/TopicA|append|AAA"></textarea>, meaning when a topic, "/Test/TopicA" is published, content of current textarea will be appended with "AAA".
You can also specify a valueSelector as the fifth field so that the value can be fetched from that field while leave the forth field, the value field, empty: <textarea HTMLController="|sub|/Test/TopicA|append||#input_3"></textarea>, meaning when a topic, "/Test/TopicA" is published, content of current textarea will be appended with the content of field with "input_3 as id".
You can also place more than one logic to have a single field place multiple roles: <textarea HTMLController="|sub|/Test/TopicA|append|AAA,|pub|/Test/TopicB|keydown"></textarea>, meaning when a topic, "/Test/TopicA" is published, content of current textarea will be appended with "AAA". and "/Test/TopicB" will be published when the textarea receive a keydown
You can also fill the "value" field above with [[ Your_Expression ]] so that "Your_Expression" can be evaluated. For example,
will replace the content of current element with value in element with id as "input_4".
For connecting: HTMLController="anchorSelector|connection|trigger event|OtherPartySelector|action|value|valueSelector". For example, you can connect a text input field with id as "input_0" to textarea with id as "textarea_0" field as <input HTMLController="|connection|click|#textarea_0|replace">, meaning as you type in input_0, content of input_0 will be placed into textarea_0.
Note: if you leave the field, "anchorSelector", blank, HTMLController will assume that the current element is the anchor element. In this way,
where to place HTMLController attribute is not important since you can always specify the "anchorSelector".
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
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.
Instruction 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).
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).
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
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)
Type into input_3 and watch change in textarea_3
Try it now
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
or input your own: .
You can even:
- Clean up all the logic applied by HTMLController
- Recover to the original logic to the state when the page was loaded, the same as "reload the page" but without reloading
Static logic reside in HTMLController tag
See the description in blue:
<!-- Multiple publishers and multiple subscribers on a single topic -->
<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