Iliad Framework, serving static resources

In the previous lesson we talked about how to use an Iliad webapp with a browser without Javascript enabled.

In this lesson we will talk about static resources to be included in your web-app.

When you will deploy your web application in the “real world” you want your static resources served by a specific web server as Apache but, while you are developing your application, you can make use of the web server embedded inside the Pharo Smalltalk environment: Komanche.

Iliad makes really easy to serve static resources. Now we will learn how to embed in your Pharo image Bootstrap JS. Let’s assume you already downloaded the compiled distribution to a file named bootstrap-3.1.1-dist.zip and that you extracted it in a folder named ~/tmp/bootstrap-3.1.1-dist.

To include it in your Pharo image you need to derive a class from ILMemoryDirectory for every Bootstrap JS subdirectory like this:

<span class="nc">ILMemoryDirectory</span> <span class="nf">subclass:</span> <span class="ss">#LcBootstrapCss</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="nc">ILMemoryDirectory</span> <span class="nf">subclass:</span> <span class="ss">#LcBootstrapFonts</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="nc">ILMemoryDirectory</span> <span class="nf">subclass:</span> <span class="ss">#LcBootstrapJs</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>

Now we tell the classes to load all the resources contained in the corresponding directories. Open a workspace and execute the following commands:

<span class="nc">LcBootstrapCss</span> <span class="nf">addAllFilesIn:</span><span class="s">'/home/leonardo/tmp/bootstrap-3.1.1-dist/css'</span><span class="p">.</span>
<span class="nc">LcBootstrapJs</span> <span class="nf">addAllFilesIn:</span><span class="s">'/home/leonardo/tmp/bootstrap-3.1.1-dist/js'</span><span class="p">.</span>
<span class="nc">LcBootstrapFonts</span> <span class="nf">addAllFilesIn:</span><span class="s">'/home/leonardo/tmp/bootstrap-3.1.1-dist/fonts'</span><span class="p">.</span>

You will see that a series of method are getting created under the files protocol. This is were the content of Bootstrap JS will be loaded.

Now we need to configure the subdirectory under the resources will be published. We just need to create a path method under the accessing protocol like this:

<span class="c">"LcBootstrapJs>>path protocol accessing"</span>
<span class="nf">path</span>
    <span class="o">^</span> <span class="s">'bootstrap/js'</span>
<span class="c">"LcBootstrapFonts>>path protocol accessing"</span>
<span class="nf">path</span>
    <span class="o">^</span> <span class="s">'bootstrap/fonts'</span>
<span class="c">"LcBootstrapCss>>path protocol accessing"</span>
<span class="nf">path</span>
    <span class="o">^</span> <span class="s">'bootstrap/css'</span>

Now we need to register these new classes to be loaded by the Iliad framework and the code to register the app must also be executed when you load your class in a fresh image. This is the place where the initialize method of the class side comes in:

<span class="c">"LcBootstrapJs class>>initialize protocol initialization"</span>
<span class="nf">initialize</span>
    <span class="nc">ILFileHandler</span> <span class="nf">addDirectory:</span> <span class="bp">self</span> <span class="nb">new</span>
<span class="c">"LcBootstrapFonts class>>initialize protocol initialization"</span>
<span class="nf">initialize</span>
    <span class="nc">ILFileHandler</span> <span class="nf">addDirectory:</span> <span class="bp">self</span> <span class="nb">new</span>
<span class="c">"LcBootstrapCss class>>initialize protocol initialization"</span>
<span class="nf">initialize</span>
    <span class="nc">ILFileHandler</span> <span class="nf">addDirectory:</span> <span class="bp">self</span> <span class="nb">new</span>

Now the initialization must be done by hand in a workspace:

<span class="nc">LcBootstrapJs</span> <span class="nf">initialize</span><span class="p">.</span>
<span class="nc">LcBootstrapCss</span> <span class="nf">initialize</span><span class="p">.</span>
<span class="nc">LcBootstrapFonts</span> <span class="nf">initialize</span><span class="p">.</span>

Try using a web browser pointing to http://localhost:7070/bootstrap/js/bootstrap.js and you will see the Bootstrap Js code. The same thing happens with the other directories.

Check that also the following URLS get served:

Now you are sure that everything is working.