Table of Contents Previous Section

Bind the input elements

 In the previous task, you created the application's variables. In the next task, you'll write a script that manipulates the variables. For the script to actually use the values of the dynamic HTML elements on the page, you first need to specify which variables represent which elements. This is called "binding" the elements.

There isn't a one-to-one correlation between dynamic elements and variables. Most dynamic elements have several attributes, and you bind each attribute to a different variable or method in your script. For example, WOTextField defines three attributes that define very different things: value specifies the value the user enters in the text field, name specifies a unique identifier for the text field, and disabled specifies if the field is enabled or disabled. If you wanted non-default values for all three attributes, you'd bind them to three different variables.

To bind an element, you must specify three things:

WebObjects Builder provides a shortcut to creating bindings: you can select the variable, select the element, and let WebObjects Builder decide what attribute you want the variable bound to. Most of the time, the shortcut gives you the binding you want. This task shows you how to use the shortcut to bind the elements in the GuestBook.

  1. In the Main window, select the text field labeled Name in the GuestBook's form that you created earlier.

  2. In the object browser in the bottom half of the window, navigate to the name attribute of aGuest.

  3. Double-click name.

    This binds aGuest.name to the value attribute of the WOTextField labeled Name. After you perform this step, the text "aGuest.name" appears in the text field to show that it has been bound. A status message appears in the upper right corner of the editing display saying the binding has been made to WOTextField's value attribute. This means that aGuest.name represents the value entered in the Name field.

  4. Select the text field labeled E-mail and double-click aGuest.email to bind it to the E-mail text field's value attribute.

  5. Select the multi-line text element and double-click aGuest.comments to bind it to the text element's value attribute.

    Unlike the text fields, the multi-line text element won't update to show you which variable it is bound to, but you will still receive the status message "bound to value."

  6. Save the Main component.

A closer look

 You just bound variables to dynamic elements in the HTML template. In the GuestBook application, the WOTextField and WOText elements are input fields-users will enter text in these fields, and the application will read the text. The bindings you made mean that after a user clicks Submit, aGuest.name contains the value in the Name field, aGuest.email contains the value in the E-mail field, and aGuest.comments contains the value in the Comments field.

At the beginning of this section, you learned that WOTextFields have three attributes: value, name, and disabled. Why didn't you have to make a binding to all three? Because name and disabled are optional attributes. If you don't bind variables to them, WebObjects assigns them default values. It creates a unique name to refer to the WOTextField, and it enables the text field by default. Later, you'll see an example of a dynamic element that has more than one variable bound to it.

Table of Contents Next Section