Laying Out GUI Interfaces

This section describes how to:

Some Basics

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

Start Visual Java

To start Visual Java, click on its icon in the main tool bar

When Visual Java starts, a control panel appears in the Java WorkShop browser and the Layout panel is activated in a separate window.

Visual Java 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.

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 Visual Java mode from Layout to Preview. Switch back and forth between Layout and Preview mode using the radio buttons at the bottom of the control panel.

Create a Layout Grid

Whenever you start a new layout, a 12-cell grid is positioned in the Layout panel:
	

You can create a grid with as many cells as you need by clicking in any cell and pressing the keyboard 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 cells from the grid by selecting them and pressing the Delete key. The row and column containing the selected cell will be deleted. If the row or column contains a component, then the row or column containing the component will not be deleted. To delete a row or column that contains a component, you must first delete the component.

Add Components to the Layout Grid

After you create a grid, you can begin to add components from the Visual Java palette in the control panel. To add a component to your layout, click on the component button and then click in the cell in which you want it located.


If you want to add a component to more than one cell:

  1. Click the component's button
  2. Press the Control key
  3. Click in the cells in which you want to add the component
		

Click here, or on the image above, for information about the palette components.

Modifying Components

Once you've placed a component in a cell, you can edit its attributes and adjust its size and location in the grid.

Select a Component

To modify a component in the grid, you must first select it by clicking on it. When it is selected, handles appear on the sides and corners of the component.
		

Change a Component's Attributes

All of the palette components have attributes that you can modify using the Attributes Editor. Choose Visual=>Edit Attributes to edit the attributes of a selected component.


A shortcut method for opening the Attribute Editor is to click the right mouse button while the cursor is positioned in the area between the component and its cell border.

Component attributes vary, depending on the function of the component. Specialized attributes are explained with the description of their associated components in Visual Java Components. General attributes that apply to most of the components are described in Attribute Editor.

Delete a Component

To delete a component, select it and press the Delete key.


You can also use the Cut icon to delete the component and place it on the clipboard. Click on a cell and use the Paste icon to paste the component into the selected cell.

Change a component's size and shape

To change a Component's Size and Shape:
  1. Select the component.
  2. Slide the component resize controls on the right and bottom of the Layout window.
    

Controls on the right change component height; controls on the bottom change component width. Each component has a minimum height and width, below which the controls will not let you resize.

If you click on the black lines within the component resize handles, arrow heads appear on the ends of the black line and the component's size is automatically increased to fill the containing cell. The line on the right fills the cell vertically, and the line on the bottom fills the cell horizontally.

    

Controlling Component Resize Behavior When its Window Changes

You can control how components and cells behave when their containing window is resized. You control this behavior by using the row/column resize controls with the component resize controls. You select the row/column resize controls by clicking in them.
    

The row/column resize controls interact with the component resize controls to enable you to control how the cells and components behave when the window that contains them is resized.

The interaction between the row/column resize controls and the component resize controls provides you with maximum flexibility in controlling resize behavior. We suggest that you create a small grid with a variety of components and experiment with these controls. The use of these controls will be described fully in documentation that will be posted on the Java WorkShop website in the future. Please refer to the Release Notes for the URL of the Java WorkShop Help Updates page.

Extend a Component Across Multiple Cells

To cause a component to span other cells in its row or column:
  1. Select the component.
  2. Click on one of the eight handles that surround the component.
  3. Drag the handle, stretching the component over rows and columns in the grid.
    

Move a Component to Another Cell

To move a component from one cell to another:
  1. Select the component.
  2. Click in the component handle area.
  3. Drag the component to destination cell.
  4. Release the mouse button.

Copy a Component to Another Cell

To copy a component to other cells:
  1. Select the component.
  2. Click on the Copy icon
  3. Click in the cell in which you want to paste a copy of the component.
  4. Click on the Paste icon.


See also:

Visual Java Overview
The Visual Menu
Visual Java Components
Generating Java Source Code
Adding Operations (Filters and Actions)
Visual Java Runtime Classes
Creating Menus
Adding Custom Components and Windows
Using Groups and Shadows (Basic)
Using Groups and Shadows (Advanced)
Visual Java API Documentation
Visual Java Runtime Packages
Class Hierarchy
Index of all Fields and Methods