Web Forms in Seaside

In Chapter 11 of Learning Web Development with Seaside we create a form to collect information from the user. We start by launching the Seaside One-click Experience and then defining a new web component to edit events.

Now we go to an earlier web component that lists all the events and add a method to call our new editor component. We modify one of the report columns so that instead of simply displaying information about the event it offers an opportunity to edit the event. When we view the event list in a web browser, we see that data in the 'What' column now displays as a link. Clicking on that link takes us to the editor, which simply displays its class name.

Now we will add true editing. We modify the render content method to show a form with labels and entry fields. (If you don't like the table for styling, hang on a minute...) Using the web browser, we can edit fields in an event and see that they are modified.

Now, we will refactor our form to avoid the use of a table for layout. We create small methods for each element to be edited. Note that instead of table rows we have a div enclosing our elements. Rather than typing each method we are copying them from the tutorial. Finally we modify the render method to call each of our elements.

Now we modify our application to allow the creation of a new event. We add an 'Add Event' anchor to the event list, and see that it shows in the web browser.

Now we would like to demonstrate some other form elements. Rather than having 'who' be a text entry field, we will modify it to use a drop-down list. We make a similar change for the 'what' portion of the event. We will show the where as a text area and modify the CSS to layout the text area. We can modify the report column to show a string for the date/time.

In order to demonstrate checkboxes, radio buttons, and some JavaScript interaction with CSS, we will add an attribute to LBEvent to keep track of whether a game is home or away. We add a 'gameType' instance variable and accessors. We then add some instance variables to the event editor to capture some characteristics of the event. We add CSS for hiding a form element.

Now we are going to add a method to render the 'isGame' and 'gameType' fields. Smalltalk alerts us to the fact that these methods do not yet exist and we confirm the selectors. We add the new methods, one with some JavaScript for an on-click event.

When we refresh the application we see that the 'is game' checkbox shows and hides the game type field. We modify the save method to store a value for the game type field, either home, away, or nil.

We save our new code and quit the Seaside One-Click Experience.

For more information go to seaside.gemstone.com/tutorial.

Category:

Science & Technology

Tags:

• Seaside
• Smalltalk
• Web