Setting a Layout Manager during Visual Composition

To set a layout manager in a container bean, follow these steps:

  1. Open the property sheet for the container bean.
  2. From the value column, select the cell for the layout property.
  3. From the Layout Manager drop-down list, select a layout.

Setting Layout Properties during Visual Composition

The complexity of this task depends on which layout manager you choose for your container bean and how much custom behavior your bean requires. Default behavior exists to some extent for all layouts. To set layout properties for the components of the container bean, follow these steps:

  1. Open the property sheet for the component bean.
  2. If one exists, click the expansion icon Expansion Icon to the left of the constraints property.
  3. Select the value field for the property you want to modify and enter the new property value.
  4. Press enter to apply the value.

Consider waiting to set layout properties until you have settled on a layout manager. Many values are lost when you switch layouts or move the component to another container.

GridBag Layout Constraints

GridBag is a powerful tool for layout, however, because of its many choices, it can become confusing. Once you have selected GridBag layout for your user interface, adjust the constraints to affect the placement of beans within the layout.
Constraint Specifies...
Anchor Where within the cell (North, South, etc.) to place a component that is smaller than the cell.
Fill How to size the component (Vertical, Horizontal, Both, or None) when the cell is larger than the component's requested size.
gridX, gridY The column (gridX) and row (gridY) where your component resides. If gridWidth or gridHeight is >1, gridX and gridY are the starting row and column. The default places a new component to the right or below the previously added component.
gridWidth, gridHeight The number of cells the component should use in a row (gridWidth) or column (gridHeight).
insets The component's external padding, the minimum amount of space between the component and the edges of its cell.
ipadX, ipadY The component's internal padding within the layout, or how much to add to the width and/or height of the component.
weightX, weightY How to redistribute space for resizing behavior. You should specify a weight for at least one component in a row (weightX) and column (weightY) to prevent all the components from clumping together in the center of their container. The distribution of extra space is calculated as a proportional fraction of the total weightX in a row and weightY in a column.

Creating a GUI Using GridBagLayout

Follow these steps to create a To Do List GUI using GridBagLayout:


To Do List in GridBagLayout

  1. To set up the applet:

  2. To place beans in the GridBag:

  3. To adjust property values within the Properties window, select the bean and then adjust the property value:
    Bean... Property... Change Value to... What You See..
    JTextField1 columns 5 TextField width increase
    JLabel1 text To Do Item: Change in text
    JLabel2 text To Do List Change in text
    JLabel2 font Name--serif, Size--18 Change in font style and size
    JLabel2 horizontalAlignment center Label placement is centered

  4. To adjust the constraints properties within the Properties window, select the bean and then open the constraints tree-view and adjust the property value :
    Note:Since the JScrollPane, not the JList, is the component that is sitting in the GridBagLayout, you modify its constraints. Because the JList completely covers the JScrollPane, you must select the pane from either the Beans List window or the Properties window. If you select the JList instead, you cannot adjust the component width within the layout manager.

    Bean... Constraint... Change Value To... What You See..
    JScrollPane1 gridWidth 2 Pane covers two cells width
    JScrollPane1 fill both Pane fills the cell vertically and horizontally
    JScrollPane1 weightX 1 Column containing the JScrollpane expands to fill the extra horizontal space in the JApplet
    JScrollPane1 weightY 1 Row containing the JScrollpane expands to fill the extra vertical space in the JApplet
    JScrollPane1 insets left--15, bottom-- 5, right--15 Padding on the left, bottom, and right of the pane
    JLabel2 gridWidth 2 Label covers two cells width
    JLabel2 insets top--15 Padding on the top of the label
    JTextField1 fill horizontal Textfield fills cell horizontally
    JTextField1 insets top--15, bottom--5, right--15 Padding around top, bottom and right side of the TextField
    JLabel1 ipadX 10 Internal padding between text and component border
    JLabel1 insets top--15, left--15, bottom--5, right--5 Padding around all sides of label
    Note:Setting the weightX and weightY on the JScrollPane, insures that the GUI resizes proportionately. Setting the ipadX on JLabel1, insures that the label resizes proportionately. This is especially helpful when translating your GUI into other languages.

  5. To add the button panel:

  6. To adjust the properties and constraints properties for JPanel1 and its contents:
    Bean... Property... Change Value To... What You See...
    JPanel1 constraints--anchor EAST Panel placement moves to the lower right corner
    JPanel1 constraints--insets bottom--15, right--15 Padding around the right and bottom of the panel
    JPanel1 layout--hgap 5 Space between the buttons
    JButton1 text Add Button label changes
    JButton2 text Remove Button label changes


Related concepts
Layout Managers in Visual Composition

Related procedures
Editing Bean Properties

Related references
Properties