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:
ILWidget subclass: #LcCounterWidget instanceVariableNames: 'value' classVariableNames: '' poolDictionaries: '' category: 'LeonardoBlog'
We create the accessors accordingly with what we have said in the previous post.
"LcCounterWidget>>value protocol accessing" value ^ value ifNil: [ value := 0 ]. "LcCounterWidget>>value: protocol accessing" value:aNumber value := aNumber
Now I create the actions corresponding to the links under the counter:
"LcCounterWidget>>increase protocol accessing" increase self value: (self value + 1). self markDirty. "LcCounterWidget>>decrease protocol accessing" decrease self value: (self value - 1). self markDirty.
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:
"LcCounterWidget>>firstWidget protocol building" contents ^ [ :e | e p text: self value asString. e a text: '++'; action: [ self increase ]. e a text: '--'; action: [ self decrease ] ]
Now you can try the URL: http://localhost:7070/leonardoBlog/widgetExample to see that our implementation is working.