Dynamic Web Development with Seaside

7.7Rendering Lists and Tables

We will modify our ScrapBook to display the site contents using a list. We want to use an ordered list so we’ll ask the canvas for an WAHtmlCanvas>>orderedList brush, which answers with an instance of WAListTag. Inside the body of that tag we want a collection of list item tags (li) which we get with the canvas’ WAHtmlCanvas>>listItem: method. We use the short form so we don’t have to use with: for each list item.

ScrapBook>>renderContentOn: html
html heading level: 1; with: 'Hello world'.
html paragraph: 'Welcome to my Seaside web site. In the
future you will find all sorts of applications here
such as:'
.
html orderedList with: [
html listItem: 'Calendars'.
html listItem: 'Todo lists'.
html listItem: 'Shopping carts'.
html listItem: 'And lots more...' ]

Let’s use our earlier suggestions to write this code more succinctly. We’ll use heading: instead of html heading level1, and we’ll use the ordered list shortcut WAHtmlCanvas>>orderedList:. We can use this last shortcut since we aren’t configuring the ordered list tag.

ScrapBook>>renderContentOn: html
html heading: 'Hello world'.
html paragraph: 'Welcome to my Seaside web site. In the
future you will find all sorts of applications here
such as:'
.
html orderedList: [
html listItem: 'Calendars'.
html listItem: 'Todo lists'.
html listItem: 'Shopping carts'.
html listItem: 'And lots more...' ]

Open this component in your web browser and you should see something similar to Figure 65.

A list of items

As good Smalltalkers following the DRY (Don’t Repeat Yourself) principle, we can refactor this method to avoid an explicit enumeration as follows. This demonstrates the power of having a programmatic way to specify the component contents.

ScrapBook>>items
^ #('Calendars' 'Todo lists' 'Shopping carts' 'And lots more...')
ScrapBook>>renderContentOn: html
html heading: 'Hello world'.
html paragraph: 'Welcome to my Seaside web site. In the
future you will find all sorts of applications here
such as:'
.
html orderedList: [
self items do: [ :each | html listItem: each ] ]

Let’s create a table of expected delivery dates. We suggest you perform a similar refactoring of the following method which illustrates tableRow: and tableData: .

ScrapBook>>renderContentOn: html
html heading: 'Hello world'.
html paragraph: 'Welcome to my Seaside web site. In the
future you will find all sorts of applications here
such as:'
.
html table: [
html tableRow: [
html tableHeading: 'Calendars'.
html tableData: '1/1/2006'.
html tableData: 'Track events, holidays etc'] .
html tableRow: [
html tableHeading: 'Todo lists'.
html tableData: '5/1/2006'.
html tableData: 'Keep track of all the things to remember to do.' ].
html tableRow: [
html tableHeading: 'Shopping carts'.
html tableData: '8/1/2006'.
html tableData: 'Enable your customers to shop online.' ] ]

Notice that we generate table text entries in a fashion that is very similar to what we did in the list example. Note also that we used WAHtmlCanvas>>tableHeading: to designate a cell that represents a row header.

A table of items

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.