Sizing and aligning visual beans

Since this bean does not use a layout manager, you need to clean up the appearance of your user interface by using the sizing and aligning tools from the tool bar on the Visual Composition Editor. The tool bar provides several different tools for sizing and aligning beans. You'll learn a great deal about how to use them by experimenting with the different tools.

The following steps explain how to match the size of two beans, align the beans with other beans, and evenly distribute the beans within another bean. You'll learn more about sizing and changing beans in Manipulating beans.

Sizing, aligning, and distributing beans

The order in which you size, align, and distribute the beans is not always important. Usually, you start with the upper left corner and work your way through all the beans in the window.

To size the list so it matches the width of the text field, do the following:

  1. Select Beans List tool the Beans List from the tool bar.
  2. From the list, select JScrollPane1.

    Remember, you want to size the container for the list, which is the scroll pane. You are using the Beans List to do this because the JList bean almost completely overlays the JScrollPane bean, which makes it difficult to select from the free-form surface.

  3. Hold down the Ctrl key to select multiple items and from the free-form surface select the text field using mouse button 1.
  4. Select Match Width tool the Match Width tool from the tool bar.

    Because the text field was selected last, it becomes the anchor bean for the match width operation. The width of the list is changed to match the width of the text field.

Note: The anchor bean has solid selection handles. The other selected items have outlined selection handles.

To size and align the Add button and the Remove button, do the following:

  1. Resize the Remove button to an appropriate size for the applet.
  2. Select the Add button, hold down the Ctrl key and select the Remove button using mouse button 1. Then, select Match Width tool. the Match Width tool from the tool bar.
  3. Because the buttons remain selected, you can now align their left edges by selecting Align left tool the Align Left tool from the tool bar.

To align the left side of the text field, list, and labels, do the following:

  1. Move the label for the text field (the one that says To-Do Item) to the position you want it in the applet.
  2. Select the scroll pane (making certain it is the scroll pane, not the list), the text field and their associated labels, making sure to select the label of the text field last.

    By selecting the text field label last, you make it the anchor bean for the alignment operation.

  3. Select Align Left tool the Align Left tool from the tool bar.
  4. Because the text field, list, and labels are still selected, you can evenly distribute them in the window by selecting Distribute Vertically tool the Distribute Vertically tool from the tool bar.
  5. Save your work.

You have now completely finished the user interface of your To-Do List applet.

Note: The entire applet that you are creating is a bean. When you select Bean and then Save Bean from the menu, you are saving the entire applet.