Building the To-Do List applet

When the Visual Composition Editor opens for the new ToDoList applet, the default JApplet is represented as a gray rectangle on the free-form surface. To build the rest of the user interface, you must add several other visual beans. When you have finished creating the user interface for the To-Do List applet, the free-form surface of the Visual Composition Editor should look like this:

todointr.gif (3128 bytes)

To make a user interface that looks like this, you need to add, size, and align the remaining beans.

Note:
As you add beans to the applet, you may find that the default JApplet bean is too small to accommodate all the other beans. If this happens, you can resize the JApplet bean by selecting it and dragging one of the selection handles using mouse button

Although this bean uses a <null> layout manager, it could be built using one of the layout managers, such as GridBagLayout. For an example of creating the user interface for this bean in GridBagLayout, see "Creating a GUI Using GridBagLayout" in the online helps.

Adding a text field and a label

In this stage of the applet creation, you add a JTextField bean that is used to enter the To-Do items, and a JLabel bean to identify the field. These beans are in the Swing category of the beans palette.

Tip:  As you work with the palette, you may find the icons too small for your preference. To make them larger, right-click on any gray area on the palette and select Show Large Icons from the pop-up pane.

  1. From the beans palette, select the JTextField bean.
    ttext.gif (258 bytes)
    The information area at the bottom of the Visual Composition Editor displays Category: Swing Bean: JTextField, reflecting the current selection in the beans palette.
  2. Move the mouse pointer over the JApplet bean (the rectangle on the free-form surface). The pointer changes to a crosshair, indicating that it is now loaded with the bean you selected. Click mouse button 1 where you want to add the JTextField.

    If you accidentally picked the wrong bean and have not dropped the bean into the JApplet yet, select the correct bean, or select the Selection tool from the beans palette to unload the mouse pointer.
    tselect.gif (224 bytes)

    After you have added the JTextField bean to the JApplet, you can move it to a new location by dragging it with the mouse. You can also resize it by dragging a side of the rectangle.

  3. Select the JLabel bean and add JLabel just above the JTextField.
    tlabel.gif (266 bytes)

    Don't worry about their exact positions. Later you'll learn how to use the tools from the tool bar to match sizes and align beans.

Changing the text of a label and adding another label

Change the text of  JLabel to To-Do Item by editing the text as follows:

  1. Select the JLabel bean. Select Properties  from the tool bar.
  2. In the Properties window, click text field, and type To-Do Item (instead of JLabel1). The label now contains the text To-Do Item. You may need to stretch the label to see it.
  3. You can add another label below the JTextField by copying JLabel1. To copy a bean:
    1. Select the bean.
    2. From the Edit menu, select Copy.
    3. From the Edit menu, select Paste. The pointer changes to a crosshair, indicating that it is now loaded with the bean you selected.
    4. Click mouse button 1 below the JTextField to add the new label.
  4. Change the text for the new label to To-Do List by editing it as you did for JLabel1.

Tip: You can also copy a bean using the Ctrl key. Position the mouse pointer over the JLabel bean, hold down the Ctrl key, and drag the copy of the bean to below the JTextField bean.

Adding a scroll pane for your list

Add a scroll pane so that your list of items can be scrolled.

  1. Select the JScrollpane bean.
    tscrollpn.GIF (300 bytes)
    (Notice it comes from another group on the palette; the group of container beans.)
  2. Add JScrollPane below the text field.

Adding a list

To create the list in which the To-Do items are displayed, you need to add a JList:

  1. Select the JList bean and place it inside the scroll pane.
    tlistbox.gif (318 bytes)
    The JList bean adjusts to fill the JScrollPane.
  2. In the Properties window, change the selectionMode property to SINGLE_SELECTION. This simplifies the code needed to handle selection within the list.
  3. It is good practice to save your work periodically. To save your work, from the Bean menu select Save Bean.

Adding buttons

To add and remove items from the To-Do list, you need to add two buttons:

  1. To add more than one instance of a bean at a time, press and hold the Ctrl key before selecting the bean.
  2. Select the JButton bean.
    tpushbtn.gif (203 bytes)
    Add a button to the right of the text field.

    Notice that the mouse pointer remains a crosshair, indicating that it is still loaded with the JButton bean. To add another JButton, click mouse button 1 below JButton1.

  3. Select  the Selection tool from the beans palette to unload the mouse pointer.
    tselect.gif (224 bytes)
  4. Change the text on JButton1 to Add and JButton2 to Remove by editing them as you did with the label beans.
  5. Save your work using Save Bean from the Bean menu.

Congratulations! You have just created your first user interface using VisualAge for Java. Next, you need to size and align the beans within the To-Do List applet.