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
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
<stylesheet> with their corresponding messages (
WAHtmlRoot>>stylesheet). It also allows you to add attributes to the
<body> tags using the messages
The object returned by both
updateRoot: as follows:
WAComponent subclass: #ComponentWithStyle
super updateRoot: anHtmlRoot.
anHtmlRoot stylesheet url: 'http://seaside.st/styles/main.css'
html heading level: 1; with: 'Seaside'.
html text: 'This component uses the Seaside style.'
Running the example should give you the following Figure 119: