Dynamic Web Development with Seaside

15.6Calling Other Components

We are ready to create another component and call it. We create a component called ToDoItemView that is used to represent a specific todo item. Let’s create a new class that will refer to the item it represents via an instance variable named model.

WAComponent subclass: #ToDoItemView
instanceVariableNames: 'model'
classVariableNames: ''
poolDictionaries: ''
category: 'ToDo-View'

We define the corresponding accessor methods.

^ model
ToDoItemView>>model: aModel
model := aModel

Now we can define the rendering method for our new component. Note that this is a nice example showing the diversity of brushes since we use a different brush for each entity we manipulate.

ToDoItemView>>renderContentOn: html
html heading: 'Edit'.
html form: [
html text: 'Title:'; break.
html textInput
value: self model title;
callback: [ :value | self model title: value ].
html break.
html text: 'Due:'; break.
html dateInput
value: self model due;
callback: [ :value | self model due: value ] ]

Finally, we make sure that this new component is used when we edit an item. To do this, we redefine the method edit: of the class ToDoListView so that it calls the new component on the item we want to edit. Note that the method call: takes a component as a parameter and that this component will be displayed in place of the calling component, see Part III.

ToDoListView>>edit: anItem
self call: (ToDoItemView new model: anItem)

If you click on the edit link of an item you will be able to edit the item. You will notice one tiny problem with the editor: we do not yet let users save or commit their changes! We will correct this in the next section.

In the meantime, add a style sheet to make the editor look nice:

^ 'body {
color: #222;
font-size: 75%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
h1 {
color: #111;
font-size: 2em;
font-weight: normal;
margin-bottom: 0.5em;

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