Dynamic Web Development with Seaside

7.2Fun with Seaside XHTML Canvas

Let’s try making our ScrapBook component look a little more exciting. Redefine the method renderContentOn: as follows. Refresh your browser and you should see a situation similar to Figure 54.

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: '.
html image url: 'http://www.seaside.st/styles/logo-plain.png' ]

Some simple XHTML elements in Seaside

You created two paragraphs, added some text, a break, a horizontal rule and an image. But notice that you did not edit any tags directly and you generated valid XHTML! In the following sections we will analyze what we did in detail but for now let’s continue to explore what Seaside has generated for us.

Sometimes you would like to know exactly what XHTML elements Seaside is generating for you. Try to use your web browser to view the XHTML source for your ScrapBook. You’ll find that it is not particularly readable since it is not formatted for human readers (no line-feeds, indentation, etc) and it contains much more than your single component XHTML. Not to worry, Seaside has a great tool called the halos that can be used to get to a display of nicely formatted XHTML source code of all the components displayed on a page and do much more as well. At the bottom of your web browser’s window you should see a tool bar (see Figure 55). The tool bar contains tools that are available in development mode. For now you just have to know that such buttons let you interact with the tools. Note that depending on your Seaside version you may have different tools.

The Seaside tool bar

Halos let you interact directly with the components you are editing. Click the “Halos” link and notice that a border, or ‘halo’, appears around your component’s visual representation. Figure 56 shows the component and its halo. Figure 57 shows the html generated for the component currently displayed. Even if your component contained links or actions, you can activate them even when browsing the generated XHTML.

A component decorated with halos.

Your component is now displayed in the web browser but it is decorated with a border. On the top you will now see a number of icons and links. For now let’s focus on the links Render/Source on the right. The bold Render means that you are currently seeing your component as normally rendered in your web browser, as seen in Figure 56. Pressing Source will show you the XHTML generated by Seaside for the component. Notice that what you see is just the XHTML for the current component and not the complete application. Notice that <br/> and <hr/> are valid!

XHTML of a component generated by Seaside

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.