Dynamic Web Development with Seaside

9.7Removing a Contact

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: ' ('.
html anchor
callback: [ self removeContact: aContact ];
with: 'remove'.
html text: ')'
ContactListView>>removeContact: aContact
Contact removeContact: aContact

Contacts can now be removed

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.

ContactListView>>removeContact: aContact
(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).

With a removal confirmation

The method confirm: returns 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:

  1. The user clicks on the anchor, causing the web browser to submit a request to Seaside.
  2. Seaside finds and evaluates the callback for the anchor (our block of code).
  3. The callback sends ContactListView>>removeContact:, which in turn sends WAComponent>>confirm:.
  4. The execution of ContactListView>>removeContact is suspended, and the confirmation page is returned to the user’s web browser.
  5. The user clicks the “Yes” or “No” button causing their browser to send a request to Seaside.
  6. The confirmation component handles this request, “answering” true if the user clicked “Yes” and false otherwise.
  7. 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 true.

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.

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