Dynamic Web Development with Seaside

15.5Adding a Form

We would like to have a Save button so that we can save our changes. We need to wrap our component in a form in order for this to work correctly (see Chapter 10). Here is our updated renderContentOn: method:

ToDoListView>>renderContentOn: html
html heading: self model title.
html form: [
html anchor
callback: [ self add ];
with: 'add'.
html unorderedList: [ self renderItemsOn: html ].
html submitButton: 'Save' ]

Now we can add a checkbox to change the status of a todo item, see Figure 104.

Our todo application with checkboxes and save buttons

Note that the value of the checkbox is passed as an argument of the checkbox callback. The callback uses this value to change the status of the todo item. Notice the use of the submitButton to add a submit button in the form.

ToDoListView>>renderItem: anItem on: html
html listItem
class: 'done' if: anItem isDone;
class: 'overdue' if: anItem isOverdue;
with: [
html checkbox
value: anItem done;
callback: [ :value | anItem done: value ].
html render: anItem title.
html space.
html anchor
callback: [ self edit: anItem ];
with: 'edit'.
html space.
html anchor
callback: [ self remove: anItem ];
with: 'remove' ]

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.