Laying Out the GUI Interface

# Laying Out the Interface

This section describes how to start laying out an interface:

- Create a GUI builder project
- Lay out the design

## Some Basics

This section describes how you start GUI builder, add and delete cells in the layout grid, and add components to the grid.

### Start GUI Builder

To create an application with GUI builder, you must first create a GUI project. Choose Project -> New and use the project wizard to create a GUI project. When you have created the project, the GUI builder panel is displayed between the Java WorkShop main toolbar and the Edit/Debug toolbar. The panel displays the component palette, name of the current container, the current mode state (Edit or Preview), and the name of the selected component.

When GUI builder starts, a separate layout window opens with a default panel container. The layout window displays a gridbag layout. GUI builder uses a grid system that enables you to place GUI components, such as buttons and text fields, in the cells of a grid. You can nest grids within the cells of other grids using the Gridbag Layout Panel component.

At any time during the layout process, you can view a close approximation of how the layout will look in your application by switching the GUI builder mode from Edit to Preview.

### Create the Layout

When you start a new layout, a 12-cell grid is positioned in the layout window.You can create a grid with as many cells as you need by clicking in any cell and pressing on the arrow keys. A row or column of cells is added to the grid in the direction of the arrow key each time you press it.

Delete empty rows and columns from the grid by selecting them and pressing the Delete key. The row and column containing the selected cell will be deleted (you cannot delete individual cells). To delete a row or column that contains a component, you must first delete the component.

To add components to the layout grid:

1. Click on a component in one of the palette folders to select it.
2. Click in the cell where you want to place the component.

To add an invisible bean to the layout grid:

- Click on an invisible bean in the palette.

  Because the bean has no visible representation, it cannot be viewed in the layout. To verify that you have added the invisible bean, check the Windows list to the right of the palette. Each time an invisible bean is selected, it's name is added to the Windows choice list. The attribute editor for the invisible bean should also appear each time the bean is selected.

To add a component to more than one cell:

1. Click on the component in the palette folder.
2. Press the Control key.
3. Click in the cells in which you want to add the component.

Once you have placed a component in a cell, you can adjust its size and location in the grid. To resize a component, see Resizing a Component. To set the resizing behavior of individual components with respect to the resizing of the window that contains them, see Resizing the Layout. To stretch components across cells, delete components, or change their attributes, see Modifying Components in a Grid.

To see examples of how to design a layout, see:

- Card File - Examples of Creating an Application
- Tutorial Seven: Creating a GUI

See GUI Builder Palette for information about components in the GUI builder palette.

See also:

  Generating Java Source Code
  GUI Builder Palette
  Adding a Menu Bar and Menus
  Importing Components
  Customizing a Bean
  Adding Operations to Components
  Adding Custom Components and Windows

  Visual Java GUI Builder API Documentation
    Visual Java GUI Builder Runtime Packages
    Class Hierarchy
    Index of All Fields and Methods