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
class: 'done' if: anItem isDone;
class: 'overdue' if: anItem isOverdue;
html text: anItem title.
callback: [ self edit: anItem ];
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.
self inform: anItem title
(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
remove methods as shown in Figure 102.
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):
html heading: self model title.
callback: [ self 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.
self model add: (ToDoItem new)