Now that you have added the visual beans to create the user interface, the next step is connecting them.
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
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.
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.
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.
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).
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.
Your connections should now look like this:
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.
![]() |
![]() |