Dynamic Web Development with Seaside

7.3More Fun with the Seaside Canvas

Now let’s have even more fun. Since Seaside uses plain Smalltalk rather than templates to build web pages, we can use Smalltalk to build the logic of our rendering method. We are only limited by our imagination and artistic taste. For example, suppose that we want to display 10 Seaside logos. We can simply use the timesRepeat: Smalltalk loop as shown in the next method. See the output in Figure 58.

ScrapBook>>renderContentOn: html
html paragraph: 'Fun with Smalltalk and Seaside.'.
html paragraph: [
10 timesRepeat: [
html image
url: 'http://www.seaside.st/styles/logo-plain.png';
width: 50 ] ]

Using Smalltalk to write a loop in our rendering method.

Since we’re writing Smalltalk, changes are easy. In the next example, we added a horizontal rule inside the loop but noticed that it didn’t look very nice (see Figure 59), so we moved it outside the loop (see Figure 60).

ScrapBook>>renderContentOn: html
html paragraph: 'Fun with Smalltalk and Seaside.'.
html paragraph: [
10 timesRepeat: [
html image
url: 'http://www.seaside.st/styles/logo-plain.png';
width: 50.
html horizontalRule ] ]
ScrapBook>>renderContentOn: html
html paragraph: 'Fun with Smalltalk and Seaside.'.
html paragraph: [
10 timesRepeat: [
html image
url: 'http://www.seaside.st/styles/logo-plain.png';
width: 50 ].
html horizontalRule ]

Rendering images vertically

Rendering images horizontally

Using Seaside’s canvas and brushes eliminates many of the errors that occur when manually manipulating tags.

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.