Dynamic Web Development with Seaside

17.2Including CSS and Javascript

So far, we’ve been including style information for our components by implementing the style method on our components. This is great for dynamic development, but there are a number of problems with this approach:

  • Seaside is generating a style sheet file each time your component is rendered. This takes time to generate.
  • Each generated stylesheet has the session key embedded in its URL, and so is seen as a unique file by your browser, and so loaded again.
  • As you integrate more components in your page, each is generating its own stylesheet, so you can end up with many resources to be downloaded for each page.

Once your application’s look and feel has begun to stabilise, you will want to think about using static stylesheets. These are typically included by using link tags in the head section of the XHTML document. This presents us with a problem: by the time your component gets sent renderContentOn:, the canvas has already generated the head section.

Fortunately, Seaside provides a hook method called WAComponent>>updateRoot: which is sent to all components which are reachable directly or indirectly through children or a call: message — which means basically to all visible components. This message is sent during the generation of the body of the head tag and can be extended to add elements to this tag. The argument to updateRoot: is an instance of WAHtmlRoot which supports the access to document elements such as <title>, <meta>, <javascript> and <stylesheet> with their corresponding messages ( WAHtmlRoot>>title, WAHtmlRoot>>meta, WAHtmlRoot>>javascript and WAHtmlRoot>>stylesheet). It also allows you to add attributes to the <head> or <body> tags using the messages WAHtmlRoot>>headAttributes, WAHtmlRoot>>bodyAttributes.

In particular, WAHtmlRoot offers the possibility to add new styles or script using the messages WAHtmlRoot>>addScript: and WAHtmlRoot>>addStyles:.

The object returned by both stylesheet and javascript understands url: which allows you to specify the URL of the stylesheet or JavaScript file. Suppose we have a stylesheet being served from http://seaside.st/styles/main.css. We could adopt this style in our document by extending updateRoot: as follows:

WAComponent subclass: #ComponentWithStyle
instanceVariableNames: ''
classVariableNames: ''
poolDictionaries: ''
category: 'Serving-Files'
ComponentWithStyle>>updateRoot: anHtmlRoot
super updateRoot: anHtmlRoot.
anHtmlRoot stylesheet url: 'http://seaside.st/styles/main.css'
ComponentWithStyle>>renderContentOn: html
html heading level: 1; with: 'Seaside'.
html text: 'This component uses the Seaside style.'

Running the example should give you the following Figure 119:

Application with enabled style sheet
Now we will show how you can replace the stylesheet using the FileLibrary.

Copyright © 17 April 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.