Binding the Class’s Instance Variables to the Form Elements

In Creating a WebObjects Application Project, you bound the input elements to variables in Main’s code. Now you’ll modify the bindings to use the class you just created.

1. Select Web Components in the first column of the browser.

2. Double-click Main.wo in the second column of the browser to open the component in WebObjects Builder.

3. Using the Add Key panel, add a variable called currentGuest to your component and specify its type as Guest. (Note that you can now choose Guest from the Type combo box.)

   An entry for currentGuest appears in the object browser. Notice the “>” symbol to the right of its name. This means that there is additional data to be displayed in the second column.

4. Select currentGuest in the object browser.

   The second column displays the three fields of currentGuest, as determined by the definition of its class, Guest.

5. Make a connection from guestName in the second column of the object browser (next to currentGuest) to the Name text field (press the mouse button down on the variable, drag to the element, and release the mouse button), and click value in the pop-up menu.

   This time, when the pop-up menu appears, there is a dot next to the value attribute because you bound it in the first tutorial.

6. Bind the other two input elements to currentGuest.email and currentGuest.comments in the same way.

Creating a Table to Display the Output

In the first chapter, you created three WOString elements to display the information the guest entered. In this tutorial, you’ll create a different type of element, an HTML table, to display the information. In later tasks, you’ll display data for multiple users in the table.

1. Delete the WOString elements below the horizontal line in the Main component, because you’ll be replacing them with a table. Select the WOString elements and choose Cut from the Edit menu to delete them.

2. 

   Click the button.

   The New Table panel appears. On the right is the Preview pane, which displays what your table will look like.

   

3. Click OK. The table appears in your page.

4. Select the upper-left cell of the table by clicking it.

5. Change the text in the cell to Name.

6. Open the Inspector if it is not already open.

   The Inspector presents a number of modifiable settings that apply to the table cell you’ve selected.

   

7. Select pixels from the Width pop-up list. Enter 150 in the Width field and press Tab.

   The width of the column is set to 150 pixels.

8. Click in the component window, then press Tab.

   Pressing Tab when editing a table causes the contents of the next cell to the right to be selected (or the first cell of the next row if in the rightmost column). Pressing Shift-Tab moves in the opposite direction through the table.

9. Repeat steps 5 through 8 for the second and third cells of the top row. Label the middle column E-mail and set its width to 150 pixels. Label the third column Comments and leave its width unset. (The comments field takes up the remainder of the width of the table.)

Adding Dynamic Elements to Table Cells

Tables and cells are static HTML elements, so you can’t bind them to variables or methods. To display dynamic information in cells, you add dynamic elements, such as WOStrings, to the cells.

1. Select the first cell on the second row of the table and clear its contents.

2. 

   Click to add a WOString to the cell.

3. Press the Tab key.

   The contents of the next cell to the right are selected.

4. Repeat steps 2 and 3 for the other two cells in the second row.

Binding the Dynamic Elements in the Table

1. Make a connection from currentGuest.guestName in the object browser to the center of the WOString in the first column to bind its value attribute.

2. Similarly, bind currentGuest.email and currentGuest.comments to the WOStrings in the second and third columns.

   The table should now look like this:

   

3. Save the Main component.

Creating the Guest Object

Earlier in this chapter, you created a Java class of type Guest and wrote a constructor for it. You also added a variable of that class, currentGuest, to the Main component. However, adding a variable to the component doesn’t actually create a new Guest object; you need to create one explicitly at some point in your code.

You’ll create the Guest object in the constructor method for your component. This method is called when the component is first created; that is, the first time the user accesses the component.

1. Choose View Source File from the pull-down list at the bottom of the window.

   Project Builder becomes active and displays the code for Main.java. Notice the following declaration that was added to your code when you added the currentGuest variable:

   public Guest currentGuest;

2. Delete the declarations of guestName, email, and comments since you aren’t using them anymore.

3. Add the constructor method inside the Main class definition:

   public Main(WOContext context) { super(context); currentGuest = new Guest(); }

   The first statement calls the constructor of Main’s superclass (which is com.webobjects.appserver.WOComponent). The second statement allocates a new empty Guest object and calls Guest’s constructor to initialize its instance variables.

4. Save Main.java.

5. Save main.wo in WebObjects Builder.

6. Build and run your application.

   The application should work similarly to that in the first chapter, except that the guest’s data is displayed in a table at the bottom of the page instead of as plain text.

   

At this point, your application still handles information from a single guest only; in Keeping Track of Multiple Guests, you’ll modify the application so that it can keep track of multiple guests.

Creating a Guest List

To store the information from all guests that have accessed the application, you’ll create an application variable called allGuests, which exists for the life of the application.

1. In Project Builder, select Classes in the first column of the browser. Then select Application.java from the second column.

   The application’s code appears in the window. The following listing shows the code generated by the Wizard, along with code you will add.

   // Generated by the WebObjects Wizard ...

   import com.webobjects.foundation.*; import com.webobjects.appserver.*;

   import com.webobjects.eocontrol.*;

   public class Application extends WOApplication {

   protected NSMutableArray allGuests;

   public static void main(String argv[]) {

   WOApplication.main(argv, Application.class);

   }

   public Application() {

   super();

   allGuests = new NSMutableArray();

   System.out.println("Welcome to " + this.name() + " !"); /* ** put your initialization code in here ** */

   }

   public void addGuest(Guest aGuest) {

   allGuests.addObject(aGuest);

   }

   public void clearGuests() {

   allGuests.removeAllObjects();

   }

   }

   Note that there is one method already defined: Application, which is the constructor for the Application object. The first line calls the constructor for Application’s superclass (which is the class WOApplication). The second line prints a message that you see in the Launch panel when you launch your application.

2. After the call to super, enter this code:

   allGuests = new NSMutableArray();

   This statement initializes allGuests to be a new object of class NSMutableArray. This class provides methods to add, change, and delete objects from an array.

3. At the top of the Application class definition, enter this declaration:

   protected NSMutableArray allGuests;

   This declares allGuests to be of type NSMutableArray. Declaring it protected means that it is accessible only from this class or one of its subclasses. It is standard object-oriented practice for a class to prevent other classes from directly manipulating its instance variables. Instead, you provide accessor methods that other objects use to read or modify the instance variables.

4. Add the accessor methods addGuest and clearGuests, as shown in the listing.

   The addGuest method adds an object of class Guest to the end of the allGuests array, using the NSMutableArray method addObject.

   The clearGuests method removes all the objects from the array using the NSMutableArray method removeAllObjects.

5. Save Application.java.

Adding Guests to the Guest List

Now, when the user submits the form, you’ll add the information to the allGuests array rather than displaying it directly.

1. Switch to the code for Main.java.

2. In the submit method, add the following code before the return statement:

   ((Application)application()).addGuest(currentGuest);

   currentGuest = new Guest();

   This code calls the application’s addGuest method, which adds an object (in this case, currentGuest) to the end of the array. Then it creates a new Guest object to hold the next guest’s data.

   Note: The addGuest method is defined in the class Application, which is a subclass of WOApplication. The component’s application method (called in the above statement) returns an object of type WOApplication, so you must cast it to Application in order to access its addGuest method.

Your next step is to create a new component to display the list of guests that allGuests stores.

Clearing the Guest List

While developing your application, you may find it useful to be able to remove all guests from the list. (Typically, you wouldn’t allow users to remove all guests from the list.)

1. In WebObjects Builder, make the GuestList component window active.

2. Choose Add Action from the pull-down list at the bottom of the window. In the panel, enter clearGuestList as the name of the action and set the page returned to null. Click Add.

3. Choose View Source File from the pull-down list.

   You’ll notice that there is a skeleton of the clearGuestList action method as well as the declaration for currentGuest that you created previously.

4. Enter the following code before the return statement in clearGuestList:

   ((Application)application()).clearGuests();

   This code calls the application’s clearGuests method, removing all the Guest objects from the array.

5. Save GuestList.java by choosing Save from the File menu.

6. Go back to WebObjects Builder.

7. Place the cursor below the table and press Shift-Enter.

8. 

   Click to add a WOForm element to contain the button you’ll create in the next step.

9. 

   Click .

   This creates a submit button that the user will click to clear the guest list.

10. Using the Inspector, double-click in the binding column next to the value attribute and type “Clear Guest List”.

    This changes the title of the button. Note that the quotes are necessary to indicate that you’re binding a string, not a variable.

11. Bind the action attribute to clearGuestList.

    When the user clicks the button, the clearGuestList action method is called, that causes the guest list to be cleared and the page to be redrawn.

Adding a Dynamic Hyperlink

Now you’ll create a hyperlink that returns the user to the Main page.

1. Place the cursor below the submit button (outside the rectangle of its containing form).

2. 

   Click .

3. Type Return to Sign-in Page, replacing the selected text.

4. Inspect the hyperlink.

5. Select the pageName attribute, then double-click in the Binding column and type "Main" (including the quotes).

6. Save the GuestList component.

7. Build and test your application.

   The GuestList page should now look like this: