Iliad Framework, reacting to events

For now we have created a web application with a child widget that generate a static HTML. Now we need to receive and send data to make this application interactive.

I would like to create with you the example that you already find in the Iliad framework examples, the counter example. You can already see it in action at this link: http://localhost:7070/examples/counters.

A counter is simply an integer that starts with zero and can be incremented and decremented using two links. We start with creating an instance variable in the LcCounterWidget class that will hold the current value of the counter:

<span class="nc">ILWidget</span> <span class="nf">subclass:</span> <span class="ss">#LcCounterWidget</span>
    <span class="nf">instanceVariableNames:</span> <span class="s">'value'</span>
    <span class="nf">classVariableNames:</span> <span class="s">''</span>
    <span class="nf">poolDictionaries:</span> <span class="s">''</span>
    <span class="nf">category:</span> <span class="s">'LeonardoBlog'</span>

We create the accessors accordingly with what we have said in the previous post.

<span class="c">"LcCounterWidget>>value protocol accessing"</span>
<span class="nf">value</span>
    <span class="o">^</span> <span class="nv">value</span> <span class="nf">ifNil:</span> [ <span class="nv">value</span> <span class="o">:=</span> <span class="m">0</span> ]<span class="p">.</span>

<span class="c">"LcCounterWidget>>value: protocol accessing"</span>
<span class="nf">value:</span><span class="nv">aNumber</span>
    <span class="nv">value</span> <span class="o">:=</span> <span class="nv">aNumber</span>

Now I create the actions corresponding to the links under the counter:

<span class="c">"LcCounterWidget>>increase protocol accessing"</span>
<span class="nf">increase</span>
    <span class="bp">self</span> <span class="nf">value:</span> (<span class="bp">self</span> <span class="nf">value</span> <span class="nf">+</span> <span class="m">1</span>)<span class="p">.</span>
    <span class="bp">self</span> <span class="nf">markDirty</span><span class="p">.</span>

<span class="c">"LcCounterWidget>>decrease protocol accessing"</span>
<span class="nf">decrease</span>
    <span class="bp">self</span> <span class="nf">value:</span> (<span class="bp">self</span> <span class="nf">value</span> <span class="nf">-</span> <span class="m">1</span>)<span class="p">.</span>
    <span class="bp">self</span> <span class="nf">markDirty</span><span class="p">.</span>

As you may see these actions barely increment and decrement the value using the accessor method and then call the markDirty method, who means that the component has to be redrawn on the client side.

Now we need to modify the contents method to display the value of the counter on the page:

<span class="c">"LcCounterWidget>>firstWidget protocol building"</span>
<span class="nf">contents</span>
    <span class="o">^</span> [ <span class="o">:</span><span class="nv">e</span> <span class="o">|</span>
        <span class="nv">e</span> <span class="nf">p</span> <span class="nf">text:</span> <span class="bp">self</span> <span class="nf">value</span> <span class="nf">asString</span><span class="p">.</span>
        <span class="nv">e</span> <span class="nf">a</span>
        <span class="nf">text:</span> <span class="s">'++'</span><span class="p">;</span>
        <span class="nf">action:</span> [ <span class="bp">self</span> <span class="nf">increase</span> ]<span class="p">.</span>
        <span class="nv">e</span> <span class="nf">a</span>
        <span class="nf">text:</span> <span class="s">'--'</span><span class="p">;</span>
        <span class="nf">action:</span> [ <span class="bp">self</span> <span class="nf">decrease</span> ] ]

Now you can try the URL: http://localhost:7070/leonardoBlog/widgetExample to see that our implementation is working.