10.6Date Inputs
Using the canvas’ dateInput
method is the simplest way to provide a date editor. It produces a WADateInput
, which understands the messages callback:
and value:
.
First, add a birthdate
instance variable to the class Contact
and produce accessor methods for it. You should be familiar with how to do this by now. If not, look back at the changes you’ve made in the previous sections.
Then add the following code to the form:
block on your renderContentOn:
method:
html dateInput
callback: [ :value | self contact birthdate: value ];
with: self contact birthdate.
html break.
For those who like to see the date presented in a different order, cascade-send options: #(day month year)
to the brush.
Your renderContentOn:
method should now look like this:
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.
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 text: 'Send email updates: '.
html checkbox
value: self contact requestsEmailUpdates;
callback: [ :value | self contact requestsEmailUpdates: value ].
html break.
"Date Input"
html text: 'Birthday: '.
html dateInput
callback: [ :value | self contact birthdate: value ];
with: self contact birthdate.
html break.
html submitButton on: #save of: self ]
Finally update our display method, as below:
ContactView>>save
self inform: self contact name ,
'--' , self contact emailAddress ,
'--' , self contact gender ,
'--' , self contact requestsEmailUpdates printString ,
'--' , self contact birthdate printString
Because the birthdate
instance variable is nil
, the date is displayed with the current date. Your final version of the application should look something like Figure 80.
Date Message Summary. The following table shows the messages of the dateInput
brush.