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:
Now we will show how you can replace the stylesheet using the FileLibrary.