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.
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.
Select Brush Message Summary. The following table shows a summary of the most important message of the select
brush.