Iliad Framework, how to customize the page generation

In the previous post we talked about how to include static resources in the Pharo image to be server with our application.

Let’s start with a new web application and, as we have seen in the relative post, we must create a class deriving from ILApplication, write the path method and an empty index controller:

<span class="nc">ILApplication</span> <span class="nf">subclass:</span> <span class="ss">#LcBlogProjectNotes</span>
    <span class="nf">instanceVariableNames:</span> <span class="s">''</span>
    <span class="nf">classVariableNames:</span> <span class="s">''</span>
    <span class="nf">category:</span> <span class="s">'LeonardoBlog'</span>
<span class="c">"LcApplication class>>path protocol accessing"</span>
<span class="nf">path</span>
    <span class="o">^</span> <span class="s">'ProjectNotes'</span>
<span class="c">"LcApplication>>index protocol controllers"</span>
<span class="nf">index</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">'Hi!'</span> ]

Remember to put the index method in the protocol controllers!

Now we must integrate all the bootstrap code from the static resources generated in the previous post in the page.

Do to that we must override the updatePage: method from ILApplication like this:

<span class="c">"LcApplication>>updatePage protocol updating"</span>
<span class="nf">updatePage:</span> <span class="nv">aPage</span>
    <span class="c">"Includes bootstrap JS"</span>

    <span class="nv">aPage</span> <span class="nf">head</span> <span class="nf">link</span>
      <span class="nf">rel:</span> <span class="s">'stylesheet'</span><span class="p">;</span>
      <span class="nf">href:</span> <span class="s">'/bootstrap/css/bootstrap.min.css'</span><span class="p">.</span>
    <span class="nv">aPage</span> <span class="nf">head</span> <span class="nf">link</span>
      <span class="nf">rel:</span> <span class="s">'stylesheet'</span><span class="p">;</span>
      <span class="nf">href:</span> <span class="s">'/bootstrap/css/bootstrap-theme.min.css'</span><span class="p">.</span>
    <span class="nv">aPage</span> <span class="nf">head</span> <span class="nf">javascript</span> <span class="nf">src:</span> <span class="s">'/bootstrap/js/bootstrap.min.js'</span><span class="p">.</span>
    <span class="nv">aPage</span> <span class="nf">head</span> <span class="nf">meta</span>
      <span class="nf">httpEquiv:</span> <span class="s">'X-UA-Compatible'</span><span class="p">;</span>
      <span class="nf">content:</span> <span class="s">'IE=edge'</span><span class="p">.</span>
    <span class="nv">aPage</span> <span class="nf">head</span> <span class="nf">meta</span>
      <span class="nf">name:</span> <span class="s">'viewport'</span><span class="p">;</span>
      <span class="nf">content:</span> <span class="s">'width=device-width, initial-scale=1'</span><span class="p">.</span>

    <span class="c">"We want a title for our app"</span>
    <span class="nv">aPage</span> <span class="nf">head</span> <span class="nf">title:</span> <span class="s">'A project note-taking app'</span>

The updatePage: method get called when the page has been constructed and before its contents are sent to the browser. In this method you can customize the generated page as you want.

Voila’! We have integrated Bootstrap JS.