Resizing the Layout

You can determine how components will be resized when a user resize the window or dialog box containing them. Depending on the controls you set for a cell and the component contained in that cell, the component can stretch with the window or not at all. You can also constrain the resizing of a component to one direction only. There are two aspects to resizing a component: enabling the cell containing the component to stretch and enabling the component itself to stretch. This section discusses:

To enlarge or shrink a component within a cell in the grid or to expand a cell across a row or column, see Resizing a Component.

To change cell height and width:

  1. Click in a cell.
    
    

  2. Drag the handles of the cell height or width control on the right or bottom of the layout window.
    
    

The cell height control stretches the cell vertically. The cell width control stretches the cell horizontally. If the cell contains a component, the component is resized accordingly.

You can also use the width and height controls to reduce the size of a stretched cell. (Each component has a minimum height and width, below which you cannot resize.)

Controlling Component Resize Behavior

You can control component resizing behavior by using the row and column controls in conjunction with the cell width and height controls.


The lines on the left side of the layout window correspond to each row in the grid; they are the row controls that enable you to control the height of the individual rows. The lines on top of the layout window correspond to each column in the grid; they are the column controls that enable you to control the width of the individual columns.

To horizontally resize a component:

  1. Select the component.
  2. Click on the black bar in the cell width control. Arrowheads should appear; the component will now fill the cell as the cell is resized.
  3. Click between the lines that correspond to the column that the selected component is in. A black bar with arrowheads should appear and the column width should double. The row will now stretch horizontally with the window.
    
    

The preceding figure shows resizing behavior set for a Single-line TextField component. Since only a single line of characters can be displayed in this component, it does not make sense to allow the component to resize vertically. You might try this procedure yourself and view the layout in Preview mode. Try changing the size of the layout window to see how the Single-line TextField changes.

To vertically resize a component:

  1. Select the component.
  2. Click on the black bar in the cell height control. Arrowheads should appear; the component will now fill the cell as the cell is resized.
  3. Click between the lines that correspond to the row that the selected component is in. A black bar with arrowheads should appear and the row height should double. The row will now stretch vertically with the window.

The preceding figure shows resizing behavior set for a Multi-line TextField component. It is reasonable to allow this component to resize both horizontally and vertically. Try previewing this layout and see how resizing the layout window affects the multiline text.

The interaction between the row/column controls and the cell resizers provides you with maximum flexibility in controlling resize behavior. Try creating a small grid with a variety of components and experiment with these controls.

See also:

Resizing a Component
Generating Java Source Code
Laying Out the the Interface
Modifying Components in the Grid