Dynamic Web Development with Seaside

10.4Radio Buttons

In our gender example above, the list is a bit of overkill. Let’s present the user with radio buttons instead. We create radio buttons with the canvas’ radioButton message, which returns a WARadioButtonTag. Radio buttons are arranged in groups, and radio buttons in a group are mutually exclusive, so only one can be selected at a time.

We will make two changes to our renderContentOn: method: declare a local variable named group and replace the list code with a radio button definition, as shown in the following method:

ContactView>>renderContentOn: html
| group |
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.

"Radio Buttons"
html text: 'Gender: '.
group := html radioGroup.
group radioButton
selected: self contact isMale;
callback: [ self contact beMale ].
html text: 'Male'.
group radioButton
selected: self contact isFemale;
callback: [ self contact beFemale ].
html text: 'Female'.
html break.

html submitButton on: #save of: self ]

First, we ask the canvas to create a new group using radioGroup. We then ask the group for a new radio button using the message radioButton. The selected: message determines if the browser will render the page with that button selected. Notice in our example that we select the button if it corresponds to the current value of the gender variable. That way the form reflects the state of our component.

The callback: method should be a zero argument callback block which is executed when the page is submitted with that radio button selected. Note the callback block is not called for options that were not selected.

With radio buttons

Radio Button Brush Summary. The following table gives a summary of the most important radioButton brush messages.

Methods on WARadioButtonTag Description
group: aRadioGroup Specify the radio group to which this button belongs.
selected: aBoolean Specify a boolean value that indicates whether this radio button is initially selected.
callback: aBlockSpecify a zero argument callback block which is called if this button is selected when the submit button is pressed.

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