Dynamic Web Development with Seaside

Buy PDF Buy Print

15.4Adding Callbacks

As we saw in Chapter 9, Seaside offers a powerful way to define a user action: callbacks. We can use callbacks to make our items editable. We will extend the method renderItem:on: with edit and remove actions. To do this, we render two additional links with every item.

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

We use an anchor brush and we attach a callback to the anchor. Thus, the methods defined below are invoked when the user clicks on an anchor. Note that we haven’t implemented the edit action yet. For now, we just display the item title to see that everything is working. The remove action is fully implemented.

ToDoListView>>edit: anItem
self inform: anItem title
ToDoListView>>remove: anItem
(self confirm: 'Are you sure you want to remove ' , anItem title printString , '?')
ifTrue: [ self model remove: anItem ]

You should now be able to click on the links attached to an item to invoke the edit and remove methods as shown in Figure 102.

TodoWithAnchors

You can have a look at the generated XHTML code by turning on the halos and selecting the source link. You will see that Seaside is automatically adding lots of information to the links on the page. This is part of the magic of Seaside which frees you from the need to do complex request parsing and figure out what context you were in when defining the callback.

Now it would be good to allow users to add a new item. The following code will just add a new anchor under the title (see Figure 103):

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

For now, we will define a basic version of the addition behavior by simply defining add as the addition of the new item in the list of items. Later on we will open an editor to let the user define new todo items in place.

ToDoListView>>add
self model add: (ToDoItem new)

Our todo application with add functionality

Copyright © 21 September 2017 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.