Iliad Framework, the first widget

In this lesson we will create the first widget using the Iliad framework.

We have studied applications and controllers but the core of the Iliad framework is the concept of widget. Every page served by the Iliad framework is composed by widgets, as widget are written on the page as HTML tags. A widget is:

Every widget is a subclass of the ILWidget class. Let’s create out first widget:

<span class="nc">ILWidget</span> <span class="nf">subclass:</span> <span class="ss">#LcCounterWidget</span>
    <span class="nf">instanceVariableNames:</span> <span class="s">''</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>

The contents of a widget must be defined overriding the contents method of the widget class:

<span class="c">"LcCounterWidget>>contents 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="s">'I''m a widget!'</span> ]

When I said that every page server by the Iliad framework is composed by widgets I was actually right because also the ILApplication class extends ILWidget!

To attach out widget to the application we will add an instance variable to the application class to store the widget instance.

Create a new accessor for the firstWidget component that create the instance if needed:

<span class="c">"LcBlogHelloIliad>>firstWidget protocol accessing"</span>
<span class="nf">firstWidget</span>
    <span class="o">^</span> <span class="nv">firstWidget</span> <span class="nf">ifNil:</span> [ <span class="nv">firstWidget</span> <span class="o">:=</span> <span class="nc">LcCounterWidget</span> <span class="nb">new</span> ]

Now I will create a new controller just to show how the widget can be rendered:

<span class="c">"LcBlogHelloIliad>>widgetExample protocol contollers"</span>
<span class="nf">widgetExample</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="s">'Hi! Widget example'</span><span class="p">.</span>
    <span class="nv">e</span> <span class="nf">build:</span><span class="bp">self</span> <span class="nf">firstWidget</span> ]

As always pay attention on putting the widgetExample in the right protocol!

Now you can go here: http://localhost:7070/leonardoBlog/widgetExample to see the example working.

This article will be long but I should make a remark on the firstWidget accessor method. We could also use the initialize method to create a new instance of the widget when the LcBlogHelloIliad class is created and this will actually work but, if you choose my implementation (which is copyied from the Iliad examples) you can reuse your old browser session to try new code and this is really good, believe me.