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:

ILWidget subclass: #PnViewNotes
    instanceVariableNames: 'searchstring'
    classVariableNames: ''
    poolDictionaries: ''
    category: 'LeonardoBlog'

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:

!PnViewNotes methodsFor: 'building'!
    ^ [ :e | e h1 text:'Project notes'.
        e p text:'Use this application as a scratch pad. You can 
        attach to every page a series of tags to ease searching.'. 
        e build:self searchForm.
        e build:self searchResults ]

Let’s present the search form:

!PnViewNotes methodsFor: 'building'!
    ^ [ :e | e form build:[ :form |
            form div class:'input-group'; build:[:row |
                row a class:'glyphicon glyphicon-plus input-group-addon'; action:[self addNewNote].
                row input class:'form-control'; beSubmitOnChange; 
                    attributeAt:'placeholder' put:'Search string'; 
                    action:[ :value | searchstring := value. self doSearch ].
                 ] ] ]

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:

!PnViewNotes methodsFor: 'actions'!

The same thing happens with the addNewNote method:

!PnViewNotes methodsFor: 'actions'!

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

!PnViewNotes methodsFor: 'building'!
    ^ [ :e | ]

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

Iliad Framework, index page

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s