Dynamic Web Development with Seaside

12.6.1Visual Decorations

Message Decorations. WAMessageDecoration renders a heading above the component using the message WAComponent>>addMessage:. As an example we add a message to the ContactView component by sending it addMessage:, see Figure 89.

super initialize.
editor := ContactView new.
editor contact: self contacts first.
editor addMessage: 'Editing...'. " <-- added "
editor onAnswer: [ :answer | self inform: 'Saved', answer printString ]

Adding a message around a component

Note that the WAComponent>>addMessage: returns the decoration, so you may want to also use the yourself message if you need to refer to the component itself:

SomeComponent>>renderContentOn: html
html render: (AnotherComponent new addMessage: 'Another Component'; yourself)

Window Decoration. WAWindowDecoration renders a border with a close widget around the component.

The following example adds a window decoration to the ContactView component. To see it in action, use the contacts application implemented by the ContactList component (probably at http://localhost:8080/contacts. The result of clicking on an edit link is shown in Figure 90.

super initialize.
self addDecoration: (WAFormDecoration new buttons: #(cancel save)).
self addDecoration: (WAWindowDecoration new title: 'Zork Contacts')

Decorating a component with a window

You may see that your Save and Cancel buttons are duplicated: you can remove this duplication by commenting out the self renderSaveOn: html line from ContactView>>renderContentOn:.

It is much more common to add a window decoration when calling a component rather than when initializing it. The following example illustrates a common idiom that Seaside programmers use to decorate a component when calling it. It uses a decoration to open a component on a new page.

WAPlugin>>open: aComponent
"Replace the current page with aComponent."

WARenderLoop new
call: (aComponent
addDecoration: (WAWindowDecoration new
cssClass: self cssClass;
title: self label;
withToolFrame: false

Form Decoration. A WAFormDecoration places its component inside an HTML form tag. The message WAFormDecoration>>buttons: should be used to specify the buttons of the form. The button specification is a list of strings or symbols where each string/symbol is the label (first letter capitalized) for a button and the name of the component callback method when button is pressed.

The component that a WAFormDecoration decorates must implement the method WAFormDecoration>>defaultButton, which returns the string/symbol of the default button (the one selected by default) of the form. For each string/symbol specified by the WAFormDecoration>>buttons: method, the decorated component must implement a method of the same name, which is called when the button is selected.

Be sure not to place any decorators between WAFormDecoration and its component, otherwise the defaultButton message may fail.

You can examine the source of WAFormDialog and its subclasses to see the use of a FormDecoration to manage buttons:

form := WAFormDecoration new buttons: self buttons.
self addDecoration: form
^ #(ok)

Using Decorations in the Contacts application. You can add a WAFormDecoration to ContactView as follows: define an initialize method to add the decoration, and remove the superfluous rendering calls from renderContentOn:, to leave simpler code and an unchanged application (see Figure 91).

super initialize.
self addDecoration: (WAFormDecoration new buttons: #(cancel save))
ContactView>>renderContentOn: html
self renderNameOn: html.
self renderEmailOn: html.
self renderGenderOn: html.
self renderSendUpdatesOn: html.
self renderDateOn: html.

We chose cancel and save as our button names since these methods were already defined in the class, but we could have used any names we wanted as long as we implemented the corresponding methods.

Using a decoration to add buttons and form to a ContactView

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