Connecting beans

Now that you have added the visual beans to create the user interface, the next step is connecting them.

Event-to-method and parameter-from-property connections

The To-Do List applet is supposed to add the text entered in the text field to the list when the Add button is selected. In this example, you will extend your list to include a model called DefaultListModel. The Java Foundation Classes, also known as Swing, separate data from the view of the data. The actual list items are stored in the list model; an event-to-method connection sends the model's data to the list in the applet.

Because selecting a button signals an actionPerformed(java.awt.event.ActionEvent) event and adding an item to the list model is performed by the addElement(java.lang.Object) method, the event-to-method connection for adding an item to the list model is between AddButton's actionPerformed(java.awt.event.ActionEvent) event and the DefaultListModel's addElement(java.lang.Object) method.

Simply adding this event-to-method connection does not actually cause anything to be added to the list model because its addElement(java.lang.Object) method requires a parameter that specifies what object is to be added to the list. You specify the parameter by creating a parameter-from-property connection. The contents of the text field is provided as the parameter to the addElement(java.lang.Object) method of the list model.

Adding a list model and making your connections

  1. Select Choose Bean palette tool the Choose Bean tool from the palette.
  2. Select Class as the Bean Type from the Choose Bean window. Using Browse with a pattern of de, select the DefaultListModel class:
    Choose Bean window, showing list model entry

    Click OK and place the DefaultListModel bean on the free-form surface, below the applet (the gray area). By default, the new bean is named DefaultListModel1.

  3. Now you can begin your connections to move items into your list. Select AddButton and click mouse button 2. In the pop-up menu that appears, select Connect and then actionPerformed.

    The mouse pointer changes, indicating that you are in the process of making a connection. If you accidentally started the wrong connection, press the Esc key to cancel.

  4. To complete the connection, click mouse button 1 on DefaultListModel1 and then select Connectable Features. Click addElement(java.lang.Object) from the pop-up menu that appears. A dashed line appears, which means that more information is necessary. In this case, the value of the parameter for the addElement(java.lang.Object) method is missing.
    Free-form surface, showing incomplete Add button connection
  5. To make the parameter-from-property connection that specifies what to add to the list, follow these steps:
  6. Finally, you must get the To-Do items from DefaultListModel1 to the list in your applet, so that users can see them in the applet. This is a connection that sends data from a source (the model) to a view (the list). Click mouse button 2 on DefaultListModel1. Select Connect and then this from the pop-up window. Click mouse button 1 on the list and select model from the pop-up window. A blue line appears indicating a property-to-property connection, as follows:
    Free-form surface, showing echo from list model into list
  7. Save your work.

Event-to-code connection

Event-to-code programming enables you to associate a handwritten method with an event. In the first applet you created, you did not need to write any methods because VisualAge for Java generated them based on your visual elements and connections. However, sometimes additional logic is required.

For this example, we will use an event-to-code connection to activate the Remove button. An event-to-code connection enables us to specify several behaviors in one method. We could accomplish this without writing code by hand, but in this case, writing the code by hand is more efficient.

  1. Click mouse button 2 on the RemoveButton bean. In the pop-up menu that appears, select Connect and then actionPerformed.
  2. Click mouse button 2 on an empty area of the free-form surface. In the pop-up menu that appears, select Event to Code. The Event-to-Code Connection window appears.

    By default, VisualAge for Java creates a new method stub called removeButton_ActionPerformed (we renamed the button beans so we could know at a glance which methods belong to which button). This method is scoped to the composite bean class (ToDoList).

  3. Copy the following code over the method stub. If you are reading this in the hardcopy book, you might want to copy and paste this section from the Web version of Getting Started:
    public void removeButton_ActionPerformed(java.awt.event.ActionEvent actionEvent) {
     
            // Grab selected item
            Object itemToBeRemoved = getJList1().getSelectedValue();
     
            // Remove item from model
            getDefaultListModel1().removeElement(itemToBeRemoved);
     
            // Echo item to text field
            getJTextField1().setText(itemToBeRemoved.toString());
     
            // Refresh list from model
            getJList1().setModel(getDefaultListModel1());
            return;
    }
    

    This method calls get methods generated by VisualAge for Java to access the beans embedded in ToDoList.

  4. Select OK to close the window and save the new method.

Your connections should now look like this:
Free-form surface, showing Remove button's code connection

For an introduction to some features of the VisualAge for Java IDE that help you write manual code quickly and neatly, go to Writing code by hand.

With the user interface complete and the behavior of the applet defined by the connections between the visual beans, you are now ready to test your work.