We would like to display an anchor which, when clicked, removes an item from this list. For this we just can redefine
renderContact:on: as follows. We add another callback with the ’remove’ text, see Figure 72.
ContactListView>>renderContact: aContact on: html
html text: aContact name , ' ' , aContact emailAddress.
html text: ' ('.
callback: [ self removeContact: aContact ];
html text: ')'
Contact removeContact: aContact
Try it yourself. Click on the remove anchors. The corresponding contact entry will be removed from the database. When you’re done playing around be sure to reset the database as described at the end of Section 9.4.
It would be nice to get a confirmation before removing the item. The following method definition fixes that.
(self confirm: 'Are you sure that you want to remove this contact?')
ifTrue: [ Contact removeContact: aContact ]
We send the component (self) the message
WAComponent>>confirm:, which displays a “Yes/No” confirmation dialog (See Figure 73).
true if the user answers “Yes” and
false otherwise. This is very straightforward because Seaside handles all the complexity for you, which is amazing when you consider what a mess this kind of interaction is with many other web frameworks. Let’s look at what happens:
- The user clicks on the anchor, causing the web browser to submit a request to Seaside.
- Seaside finds and evaluates the callback for the anchor (our block of code).
- The callback sends
ContactListView>>removeContact:, which in turn sends
- The execution of
ContactListView>>removeContactis suspended, and the confirmation page is returned to the user’s web browser.
- The user clicks the “Yes” or “No” button causing their browser to send a request to Seaside.
- The confirmation component handles this request, “answering”
trueif the user clicked “Yes” and
- When the confirmation component answers, the
ContactListView>>removeContact:method resumes execution and processes the answer from
confirm:, deleting the contact item if the answer was
So, in Seaside, it is easy for a method to display another component, wait for the user to interact with it, and then resume execution when that component has completed its job. This is akin to modal dialogs in Graphical User Interface (GUI) applications, see Part III.