Dynamic Web Development with Seaside

7.4Rendering Objects

Let’s take a moment to step back and review what we have learnt. Consider the following method:

ScrapBook>>renderContentOn: html
html paragraph: 'A plain text paragraph.'.
html paragraph: [
html render: 'A paragraph with plain text followed by a line break. '.
html break.
html emphasis: 'Emphasized text '.
html render: 'followed by a horizontal rule.'.
html horizontalRule.
html render: 'An image URI: '.
html image url: 'http://www.seaside.st/styles/logo-plain.png' ]

There are four patterns that appear in this method.

  1. render: renderableObject. This message adds the renderable object to the content of the component. It doesn’t use any brushes, it just tells the object to render itself.
  2. Message with zero or one argument. These create brushes. Just as a painter is able to use different tools to paint on a canvases, brushes represent the various tags we can use in XHTML, so horizontalRule will produce the tag hr. Some brushes take an argument such as emphasis: other don’t. Section 7.5 will cover this in depth.
  3. Composed messages. The expression html image creates an image brush, and then sends it a url: message to configure its attributes.
  4. Block passed as arguments. Using a block (code delimited by [ and ]) allows us to say that the actions in the block are happening in the context of a given tag. In our example, the second paragraph takes an argument. It means that all the elements created within the block will be contained within the paragraph.

About the render: message. As you saw, we use the message render: to render objects. Modify the method renderContentOn: of your ScrapBook component as follows.

ScrapBook>>renderContentOn: html
html paragraph: [
html render: 'today: '.
html render: Date today ]

Refresh your web browser, see Figure 61. The methodrenderContentOn: renders a string and the object representing the current date. It uses the method render:. Most of the time you will use the method render: to render objects or other components, see Chapter 12.

Rendering object with the #render: method.

We use a block as the argument of the paragraph: because we want to specify that the string 'today ' and the textual representation of the current date are both within a paragraph. Seaside provides a shortcut for doing this. If you are sending only the message render: inside a block, just use the renderable object as a parameter instead of the block. The following two methods are equivalent and we suggest you to use the second form, see Figure 62.

Two equivalent methods.

ScrapBook>>renderContentOn: html
html paragraph: [ html render: 'today: ' ]
ScrapBook>>renderContentOn: html
html paragraph: 'today: '

Two equivalent forms.

About the method text:. You may see some Seaside code using the message WAHtmlCanvas>>text: as follow.

renderContentOn: html
html text: 'some string'.
html text: Date today.

The method text: produces the string representation of an object, as would be done in an inspector. You can pass any object and by default its textual representation will be rendered. In Pharo and GemStone the method text: will call the method Object>>asString, while VisualWorks uses the method Object>>displayString. In any case, the string representation is generated by sending the message Object>>printOn: to that object. html text: anObject is an efficient short hand for the expression html render: anObject asString in Pharo.

About the method renderOn:. If you browse the implementation of WAHtmlCanvas>>render: you will see that render: calls renderOn:. Do not conclude that you can send renderOn: in your renderContentOn: method. Object>>renderOn: is an internal method which is part of a double dispatch between the canvas and an object it is rendering. Do not invoke it directly!

Copyright © 19 March 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.