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
CounterLibrary as follows:
WAFileLibrary subclass: #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:
- http://www.seaside.st/styles/logo-plain.png (rename once downloaded).
Pay attention that the file name of your resources does not contain non-alphabetic characters since it may cause problems.
html image url: (CounterLibrary urlOf: #seasidePng).
html heading: count.
callback: [ self increase ];
callback: [ self decrease ];
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> ...