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 the Beans List from the tool bar.
    tbeanlst.gif (992 bytes)

    From the list, select JScrollPane1. Remember, you want to size the container the list is in, which is the scroll pane

  2. Hold down the Ctrl key to select multiple items and select the text field using mouse button 1.
  3. Select the Match Width tool from the tool bar.
    * Figure SIZEHZ not displayed.

    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  the Match Width tool from the tool bar.
    * Figure SIZEHZ not displayed.
  3. Because the buttons remain selected, you can now align their left edges by selecting the Align Left tool from the tool bar.
    * Figure ALEFT not displayed.

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 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 the Align Left tool from the tool bar.
    * Figure ALEFT not displayed.
  4. Because the text field, list, and labels are still selected, you can evenly distribute them in the window by selecting the  Distribute Vertically tool from the tool bar.
    tspacevt.gif (1006 bytes)
  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.