10.2Convenience Methods
Seaside offers also some convenience methods that make your code shorter. Let’s have a look at them.
Text input fields. The initial value of an input field often comes from an accessor method on some class (for example self contact name
). Similarly your input field callbacks will often look like those in the previous example, and simply take the text that the user entered and store it using a similar method name (for example self contact name: value
). Because this is such a common pattern, text input brushes provide the method on:of:
, which does this automatically for you so you can write:
html textInput on: #name of: self contact
instead of:
html textInput
callback: [ :value | self contact name: value ];
with: self contact name
Buttons. Similarly, the label of a submit button can often be inferred from the name of the method it invokes. Submit button brushes provide the method on:of:
, which does this automatically for you allowing you to write one line:
html submitButton on: #save of: self
instead of all of this:
html submitButton
callback: [ self save ];
value: 'Save'
The actual conversion from the selector name to the button label happens by sending labelForSelector:
to the second argument. The default implementation of this method simply capitalizes the first letter of the selector and returns a string, but applications might decide to customize that method by overriding it.
Text fields. For text fields, the on:of:
method takes the (symbol) name of the property to be edited and the object which holds the property.
Specifying method names. Seaside generates method names from the property names using the usual Smalltalk accessor/mutator naming conventions. For example, a property called #name
would use a method called name
as an accessor and a method called name:
as a mutator. The accessor is used to provide the starting value for the field and the mutator is used in a callback to set the value of the property.
Generating labels. For submit buttons, on:of:
takes the name of the method to invoke and the object to which to send the message. It will use the method name to generate a label for the button with a bit of intelligence. The symbol #save
becomes the label “Save”, whereas the symbol #youCanUseCamelCase
becomes “You Can Use Camel Case”. If you don’t like this translation, use the callback:
and value:
methods, as demonstrated in the last section.
So, putting all these techniques to work, our render method could be changed to:
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.
html submitButton on: #save of: self ]
All of the Seaside input components support both the on:of:
and the more primitive callback:
and value:
methods, so we will use whichever form makes our code the more readable. Anchors also support on:of:
.
As we mentioned above, controls such as input fields, buttons, popups, list boxes, and so on must all be placed inside a form
tag. Typically only a single form
tag is needed on a page. form
tags must not be nested but multiple form
tags can occur, one after another, on a single page. Only the contents of a single form
will be submitted by the web browser though (normally determined by the form in which the user clicked a submit button).