Dynamic Web Development with Seaside

17.4Example of FileLibrary in use

We’ve gone on long enough without a working hands-on example. To illustrate how to use a file library, we will show how to add some resources to the WebCounter application we defined in the first chapter of this book (http://localhost:8080/webcounter) or can also use the version that comes with Seaside (http://localhost:8080/examples/counter). First we create a new subclass of WAFileLibrary named CounterLibrary as follows:

WAFileLibrary subclass: #CounterLibrary
instanceVariableNames: ''
classVariableNames: ''
poolDictionaries: ''
category: 'Test'

An empty CounterLibrary

Adding files to the CounterLibrary.

We will follow the steps presented in the previous section and associate two resources to our library. One is an icon named seaside.png and the other is a CSS file named seaside.css — you can download the ones from the Seaside website we mentioned before:

seaside.png
http://www.seaside.st/styles/logo-plain.png (rename once downloaded).
seaside.css
http://seaside.st/styles/main.css

Pay attention that the file name of your resources does not contain non-alphabetic characters since it may cause problems.

Now we change the method renderContentOn: — this shows how we access resources using the urlOf:.

WebCounter>>renderContentOn: html
html image url: (CounterLibrary urlOf: #seasidePng).
html heading: count.
html anchor
callback: [ self increase ];
with: '++'.
html space.
html anchor
callback: [ self decrease ];
with: '--'

Next we implement updateRoot: so that our component contains a link to our style sheet:

WebCounter>>updateRoot: anHtmlRoot
super updateRoot: anHtmlRoot.
anHtmlRoot stylesheet url: (CounterLibrary urlOf: #seasideCss)

This causes the look of our application to change. It now uses the CSS file we added to our file library as shown by Figure 125.

Counter with the updateRoot: method defined

Have a look at the XHTML source generated by Seaside by using your browser’s View Source option. You will see that the links are added to the head section of the HTML document as shown below:

...
<link rel="stylesheet" type="text/css" href="/files/CounterLibrary.css"/>
</head>
<body onload="onLoad()" onkeydown="onKeyDown(event)">
  <img alt="" src="/files/CounterLibrary/seaside.png"/>
  <h1>0</h1>
  <a href="http://localhost:8080/WebCounter?_s=UwGcN6vwGVmj9icD&amp;_k=D6Daqxer&amp;1">++</a>&nbsp;
  <a href="http://localhost:8080/WebCounter?_s=UwGcN6vwGVmj9icD&amp;_k=D6Daqxer&amp;2">--</a>
...

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.