Dynamic Web Development with Seaside

7Rendering Components

In this chapter you will learn the basics of displaying text and other information such as tables and lists with Seaside and its powerful XHTML manipulation interface. You will learn how to create a component which could include text, a form, a picture, or anything else that you would like to display in a web browser. Seaside’s component framework is one of its most powerful features and writing an application in Seaside amounts to creating and manipulating components. You will learn how to use Seaside’s API, which is based on the concept of “brushes”, to generate valid XHTML.

One of the great features of Seaside is that you do not have to worry about manipulating HTML yourself and creating valid XHTML. Seaside produces valid XHTML: it automatically generates HTML markup using valid tags, it ensures that the tags are nested correctly and it closes the tags for you.

Let’s look at a simple example: to force a line-break in HTML (for instance, to separate the lines of a postal address) you need to use a break tag: <br/>. Some people use <br> or <br></br>, and neither is valid in XHTML. Some browsers will accept these incorrect forms without a problem, but some will mark them as errors. If your content is getting passed on through RSS or Atom clients, it may fail in unexpected ways. You do not need to worry about any of this when using Seaside.

The basic metaphor used in Seaside for rendering HTML is one of painting on a canvas using brushes. Methods such as renderContentOn: that are called to render content are passed an argument (by convention named html) that refers to the current canvas object. To render content on this object you can call its methods (or to use the correct Smalltalk terminology, you can pass it messages). In the simple example given above, to add a line-break to a document you would use html break.

When you send a message to the canvas, you’re actually asking it to start using a new brush. Each brush is associated with a specific type of HTML tag, and can be passed arguments defining more detail of what you want to be rendered. So to write out a paragraph of text, you would use html paragraph with: 'This is the text'. This tells the canvas to start using the paragraph brush (which causes ‘<p>’ to be output), then output the text passed as the argument, and finally to finish using the brush (which causes ‘</p>’ to be output).

Many brushes can be passed multiple messages before they are finished, by chaining the messages together with ; (this is called cascading messages in Smalltalk). For example, a generic heading exists which can be used to generate HTML headings at various levels, by passing it a level: message with an argument specifying the level of heading required:

html heading
level: 3;
with: 'A third level heading'.

This will produce the HTML:

<h3>A third level heading</h3>

You can cascade as many messages as you need to each brush object.

You can easily tell Seaside to nest tags by using Smalltalk blocks:

html paragraph: [
html text: 'The next word is '.
html strong: 'bold' ].

This will produce the HTML:

<p>The next word is <strong>bold</strong></p>

Note that we’ve used a very handy shortcut here: many of the brush methods have an equivalent method that can be called with a single argument so instead of typing html paragraph with: 'text' you need only type html paragraph: 'text'.

This is a very brief introduction that will allow you to begin to experiment with how these techniques can be combined into a larger piece of content, as you will see in the following sections.

Copyright © 23 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.