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
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:
callback: [ self 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.
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
value: methods, as demonstrated in the last section.
So, putting all these techniques to work, our render method could be changed to:
html form: [
html text: 'Name:'.
html textInput on: #name of: self contact.
html text: 'Email address:'.
html textInput on: #emailAddress of: self contact.
html submitButton on: #save of: self ]
All of the Seaside input components support both the
on:of: and the more primitive
value: methods, so we will use whichever form makes our code the more readable. Anchors also support
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).