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:
| group |
html form: [
html text: 'Name:'.
html textInput on: #name of: self contact.
html text: 'Email address:'.
html textInput on: #emailAddress of: self contact.
html text: 'Gender: '.
group := html radioGroup.
selected: self contact isMale;
callback: [ self contact beMale ].
html text: 'Male'.
selected: self contact isFemale;
callback: [ self contact beFemale ].
html text: 'Female'.
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
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.
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.