Iliad Framework, index page

In this post we will create a page to display the notes that we created with the project notes app. We will use the widget that we have created in the previous lesson to display the current user and we will create a form to search inside notes.

Creating the PnViewNotes widget

Let’s start by creating a new widget that will be the content of the new page:

<span class="nc">ILWidget</span> <span class="nf">subclass:</span> <span class="ss">#PnViewNotes</span>
    <span class="nf">instanceVariableNames:</span> <span class="s">'searchstring'</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 created an instance variable, searchString, to remember the search string that will used to search inside the notes.

The rendering methods of the PnViewNotes widget

The interesting bits of this example are inside the rendering methods:

<span class="nf">contents</span>
<span class="k">!</span><span class="nc">PnViewNotes</span><span class="k"> methodsFor: </span><span class="s">'building'</span><span class="k">!</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">h1</span> <span class="nf">text:</span><span class="s">'Project notes'</span><span class="p">.</span>
        <span class="nv">e</span> <span class="nf">p</span> <span class="nf">text:</span><span class="s">'Use this application as a scratch pad. You can </span>
<span class="s">        attach to every page a series of tags to ease searching.'</span><span class="p">.</span>

        <span class="nv">e</span> <span class="nf">build:</span><span class="bp">self</span> <span class="nf">searchForm</span><span class="p">.</span>
        <span class="nv">e</span> <span class="nf">build:</span><span class="bp">self</span> <span class="nf">searchResults</span> ]

Let’s present the search form:

<span class="k">!</span><span class="nc">PnViewNotes</span><span class="k"> methodsFor: </span><span class="s">'building'</span><span class="k">!</span>
<span class="nf">searchForm</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">form</span> <span class="nf">build:</span>[ <span class="o">:</span><span class="nv">form</span> <span class="o">|</span>
            <span class="nv">form</span> <span class="nf">div</span> <span class="nf">class:</span><span class="s">'input-group'</span><span class="p">;</span> <span class="nf">build:</span>[<span class="o">:</span><span class="nv">row</span> <span class="o">|</span>
                <span class="nv">row</span> <span class="nf">a</span> <span class="nf">class:</span><span class="s">'glyphicon glyphicon-plus input-group-addon'</span><span class="p">;</span> <span class="nf">action:</span>[<span class="bp">self</span> <span class="nf">addNewNote</span>]<span class="p">.</span>
                <span class="nv">row</span> <span class="nf">input</span> <span class="nf">class:</span><span class="s">'form-control'</span><span class="p">;</span> <span class="nf">beSubmitOnChange</span><span class="p">;</span>
                    <span class="nf">attributeAt:</span><span class="s">'placeholder'</span> <span class="nf">put:</span><span class="s">'Search string'</span><span class="p">;</span>
                    <span class="nf">action:</span>[ <span class="o">:</span><span class="nv">value</span> <span class="o">|</span> <span class="nv">searchstring</span> <span class="o">:=</span> <span class="nv">value</span><span class="p">.</span> <span class="bp">self</span> <span class="nf">doSearch</span> ]<span class="p">.</span>
                 ] ] ]

As you see we have used the BootstrapJs CSS declarations with the class: method of elements. When our element doesn’t support an attribute, like the placeholder attribute and the ILInputElement objects, we can manually place attributes with the methodattributeAt:put:`.

Another interesting bit is the beSubmitOnChange method, that will cause the ILInputElement to call the server every time the user changes the text field content, without waiting for the form to be submitted.

Every time the search string is modified we place the new content in the searchstring instance variable and we invoke the doSearch method to search inside the notes.

As we haven’t already implemented the notes DAO we delay the discussion of the doSearch method, that we implement like this:

<span class="k">!</span><span class="nc">PnViewNotes</span><span class="k"> methodsFor: </span><span class="s">'actions'</span><span class="k">!</span>
<span class="nf">doSearch</span>

The same thing happens with the addNewNote method:

<span class="k">!</span><span class="nc">PnViewNotes</span><span class="k"> methodsFor: </span><span class="s">'actions'</span><span class="k">!</span>
<span class="nf">addNewNote</span>

Until we haven’n implemented the PnNote object and its DAO we delay the implementation of the searchResults method:

<span class="k">!</span><span class="nc">PnViewNotes</span><span class="k"> methodsFor: </span><span class="s">'building'</span><span class="k">!</span>
<span class="nf">searchResults</span>
    <span class="o">^</span> [ <span class="o">:</span><span class="nv">e</span> <span class="o">|</span> ]

In this lesson we left many method unimplemented, but in the following one we implement the PnNote object and its DAO.