Iliad Framework, how events are implemented

n the previous post we implemented the counter example. Now I would like to talk about how the event’s black magic actually works from the browser point of view.

If you are curious like me you have opened the browser source view just to see how the generated HTML looks like and you have found something like this:

<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/1999/xhtml"</span> <span class="na">xml:lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"/javascripts/jquery-1.4.4.min.js"</span><span class="nt">></span> <span class="nt"></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"/javascripts/no_conflict.js"</span><span class="nt">></span> <span class="nt"></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"/javascripts/iliad.js"</span><span class="nt">></span> <span class="nt"></script></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=utf-8"</span><span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><p></span>Hi! Widget example<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"45926"</span><span class="nt">></span>
<span class="nt"><p></span>0<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:{}"</span> <span class="na">onclick=</span><span class="s">"iliad.evaluateAction("/leonardoBlog/widgetExample?_action=45931&_state=71db1789");"</span><span class="nt">></span>++<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:{}"</span> <span class="na">onclick=</span><span class="s">"iliad.evaluateAction("/leonardoBlog/widgetExample?_action=45932&_state=71db1789");"</span><span class="nt">></span>--<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>

Our widget has been wrapped in a div tag that have, in my example, the class 45926. We have created two actions and these actions have been written as two Javascript calls with two parameters:

<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:{}"</span> <span class="na">onclick=</span><span class="s">"iliad.evaluateAction("/leonardoBlog/widgetExample?_action=45931&_state=71db1789");"</span><span class="nt">></span>++<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:{}"</span> <span class="na">onclick=</span><span class="s">"iliad.evaluateAction("/leonardoBlog/widgetExample?_action=45932&_state=71db1789");"</span><span class="nt">></span>--<span class="nt"></a></span>

The parameter “action” is different because, on the server, two different actions have to be invoked, but the “state” variable has the same value. In effect, when we have generated the page, the state was the same between the two links.

Now I will click on the ++ link and capture the Ajax request and the server response for you:

GET http://localhost:7070/leonardoBlog/widgetExample?_action=45927&_state=71db1789
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,it;q=0.6
Connection:keep-alive
Cookie:_iliad685744=587b7bac-82f8-4e95-84bc-7a39b13aa458
Host:localhost:7070
Referer:http://localhost:7070/leonardoBlog/widgetExample
X-Requested-With:XMLHttpRequest

{
"head": [],
"widgets":
    {
      "45926":
      "<div class=\"45926\"><p>1</p><a href=\"javascript:{}\" onclick=\"iliad.evaluateAction("/leonardoBlog/widgetExample?_action=45934&_state=71db1789");\">++</a><a href=\"javascript:{}\" onclick=\"iliad.evaluateAction("/leonardoBlog/widgetExample?_action=45935&_state=71db1789");\">--</a></div>"
    }
}

Now the black magic is explained by itself: the page on the browser has made an Ajax request to the server telling him that it has to execute the action with the code 45927 on the state 71db1789 and the server response tell to the client that he must replace the HTML content of the widget 45926 with the new content. The server knows that which widgets must be redrawn using the markDirty method.

The meaning of the action and of the class fields should now be clear to you.

The state parameter, as you may see, doesn’t change between action invokations. Its role is managing multiple windows for the same session, for example when you have multiple tabs opened for the same session. When you have multiple tabs opened for the same session every tab has a different value for the state parameter.