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.
Radio Button Brush Summary. The following table gives a summary of the most important radioButton
brush messages.