Dynamic Web Development with Seaside

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).

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.