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

This is a short discussion of the event-to-method connections used in this example. It is not necessary for you to make the connections as you follow along in this text. Step-by-step instructions are provided in the next section.

The behavior of the To-Do List applet is to add the text entered in the text field to the list when the Add button is selected, and to remove a selected item from the list when the Remove button is selected. To do this, you need to make event-to-method connections between the buttons and the text field and the list. In the 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 and then a 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 the Add JButton's actionPerformed(java.awt.event.ActionEvent) event and the DefaultListModel's addElement(java.lang.Object) method. Removing an item from the list is performed by connecting the Remove JButton's actionPerformed(java.awt.event.ActionEvent) event to the removeElementAt(java.lang.Object) method of the DefaultListModel.

Simply adding these two event-to-method connections does not actually cause anything to be added to or removed from the list model because both the addElement(java.lang.Object) and removeElementAt(java.lang.Object) methods require a parameter that specifies what object is to be added to or removed from the list. You specify the parameters by creating parameter-from-property connections.

The text from the JTextField is provided as the parameter to the addElement(java.lang.Object) method. The selectedValue from the JList is provided as the parameter to the removeElementAt(java.lang.Object) method.

Adding a list model and making your connections

You must first add a list model before connecting your beans. Why do you need a list model?  In the Java Foundation Classes (also called Swing) data and views of the data are separate. A list is simply one view of some To-Do items. The To-Do list items themselves are contained in the list model. To add a list model, do the following:

  1. Select the Choose Bean tool from the palette.
    tchoosbn.GIF (433 bytes)
  2. Select Class as the Bean Type from the Choose Bean window. Using Browse with a pattern of "de", select the DefaultListModel class:

    tchodeft.GIF (3220 bytes)

    Click OK and place the DefaultListModel on the free-form surface, below the applet (the gray area).

  3. Now you can begin your connections to move items into your list. Select the Add button, then 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 the DefaultListModel 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.

    tincconn.gif (4579 bytes)

  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 the DefaultListModel 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 the DefaultListModel. 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.

    tconnct2.gif (4870 bytes)

To make the event-to-method connection for the Remove button, do the following:

  1. Select the Remove button, then click mouse button 2. In the pop-up menu that appears, select Connect and then actionPerformed.
  2. Click mouse button 1 on the DefaultListModel, then select Connectable Features.   From the pop-up menu that appears, select removeElementAt(int).   Again, a dashed line appears, which means that more information is necessary. In this case, the value of the parameter for the removeElementAt(int) method is missing.
  3. To make the parameter-from-property connection that specifies what to remove from the list, follow these steps:
  4. Save your work.

Your connections should now look like this:
tconnct3.GIF (5004 bytes)
 

Event-to-Code Connection

Event-to-code programming allows you to associate a hand-written 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. In this brief section you can link an event, like the click of a button, with your own hand-written methods and it is added to the Visual Composition Editor. An actual example of using this approach, however, is not shown here.

To link an event such as the click of a button with your own hand-written method, do the following:

  1. Click mouse button 2 on the Add button. Click mouse button 1 on Event to Code in the pop-up window. The Event-to-Code window appears.

    tevtocde.GIF (8281 bytes)

  2. At this point, add your code. Before the return statement, add a comment: // testing event-to-code programming. (You will get to add more real code using the Event-to-Code feature later.)  Click OK to save it. An information message appears, telling you the text has been modified.   Click Yes. Your method appears in the Visual Composition Editor as shown below.

    tevtocd2.GIF (4570 bytes)

  3. If you had added a real method that performed a function then your method would be run when the Add button was clicked. Select the text box that contains the method name. Click mouse button 2 on the method. Select Delete from the pop-up window. Save your work.

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.