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'
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.
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&_k=D6Daqxer&1">++</a> <a href="http://localhost:8080/WebCounter?_s=UwGcN6vwGVmj9icD&_k=D6Daqxer&2">--</a> ...