Dynamic Web Development with Seaside

10.3Drop-Down Menus and List Boxes

XHTML provides a single element, select, which can be shown by web browsers as a drop-down menu or a list box, depending on the parameters of the element. In this section, we look at examples of each type. We’ll start with a drop-down menu.

For the sake of an example, let’s track the gender of each of our contacts. Change the Contact class definition to include the gender instance variable and add the methods which manipulate it, as shown below.

Object subclass: #Contact
instanceVariableNames: 'name emailAddress gender'
classVariableNames: 'Database'
poolDictionaries: ''
category: 'iAddress'
Contact>>gender
^ gender ifNil: [ gender := #Male ]
Contact>>isMale
^ self gender = #Male
Contact>>isFemale
^ self gender = #Female
Contact>>beMale
gender := #Male
Contact>>beFemale
gender := #Female

We would like to add a drop-down menu to our editor that allows the user to indicate the gender of someone in the contact list. The simplest way to do this is with the canvas’ select method. This method returns a WASelectTag.

The following method shows how the select brush can be parametrized to render a list for gender selection.

ContactView>>renderContentOn: html
html form: [
html text: 'Name:'.
html textInput on: #name of: self contact.
html break.
html text: 'Email address:'.
html textInput on: #emailAddress of: self contact.
html break.

"Drop-Down Menu"
html text: 'Gender: '.
html select
list: #(#Male #Female);
selected: self contact gender;
callback: [ :value |
value = #Male
ifTrue: [ self contact beMale ]
ifFalse: [ self contact beFemale ] ].
html break.

html submitButton on: #save of: self ]

Notice that selected: allows us to specify which item is selected by default (when the list is first displayed). Let’s update the save method to display the gender as follows:

ContactView>>save  
self inform: self contact name ,
'--' , self contact emailAddress ,
'--' , self contact gender

Try the application now. You should see a drop-down menu to select the gender, as shown in Figure 76.

Gender as a drop-down menu

Modify the gender input so that it specifies a list size:

ContactView>>renderContentOn: html
html form: [
html text: 'Name:'.
html textInput on: #name of: self contact.
html break.
html text: 'Email address:'.
html textInput on: #emailAddress of: self contact.
html break.

"List Box"
html text: 'Gender: '.
html select
size: 2;
list: #(#Male #Female);
selected: self contact gender;
callback: [ :value |
value = #Male
ifTrue: [ self contact beMale ]
ifFalse: [ self contact beFemale ] ].
html break.

html submitButton on: #save of: self]

Experienced Smalltalkers will be getting concerned at the length of this method by now. Generally it is considered good practice in Smalltalk to keep your methods to a few lines at most. For the purposes of this exercise, we will be ignoring this good practice, but you may want to think about how you could split this method up.

Now view the application in your browser. Most browsers will show a list rather than a drop-down menu, see Figure 77.

Gender as a list

Select Brush Message Summary. The following table shows a summary of the most important message of the select brush.

Methods on WASelectTag Description
list: aCollection Specify the list of options from which to select.
selected: anObject Specify the object which should be shown as selected by default.
callback: aBlock Specify a single-argument callback block which will be passed the object selected by the user.
size: anInteger Specify the number of rows of the list that should be visible. Note, if you don’t specify a size, the default on most browsers will be to use a drop-down menu. If you specify a size then most browsers will present the options in a list box.
on: aSymbol of: anObject This is a convenience method as explained previously.

Copyright © 19 March 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.