Design View

This view is the central part of JFormDesigner. It displays the opened forms and lets you edit forms.

Design View

Stand-alone: At top of the view, tabs are displayed for each open form. Click on a tab to activate a form. To close a form, click the Close Tab symbol that appears on the right side of a tab if the mouse is over it. An asterisk (*) in front of the form name indicates that the form has been changed.

IDE plug-ins: The Design view is integrated into the IDEs, which have its own tabs.

On the top and left sides of the view, you can see the column and row headers. These are important controls for grid-based layout managers. Use them to insert, delete or move columns/rows and change column/row properties.

In the center is the design area. It displays the form, grids and handles. You can drag and drop components, resize, rename, delete components or in-place-edit labels.

Selecting components

To select a single component, click on it. To select multiple components, hold down the Ctrl (Mac: Command) or Shift key and click on the components. To select the parent of a selected component, hold down the Alt key (Mac: Option key) and click on the selected component.

To select components in a rectangular area, select Marquee Selection in the Palette and click-and-drag a rectangular selection area in the Design view. Or click-and-drag on the free area in the Design view. All components that lie partially within the selection rectangle are selected.

Marquee selection

The selection in the Design view and in the Structure view is synchronized both ways.

Drag feedback

JFormDesigner provides four types of drag feedback.

Drag feedback

The gray figure shows the outline of the dragged components. It always follows the mouse location. The green figure indicates the drop location, the yellow figure indicates a new column/row and red figures indicate occupied areas.

Cursor feedback

JFormDesigner uses various cursors while dragging components:

Move Cursor The dragged components will be moved to the new location.
Add Cursor Either add a new component to the form or copy existing components.
Add-multi Cursor Add multiple components of the same type to the form.
Reject Cursor It is not possible to drop the component at this location.

Add components

To add components, choose a component from the Palette and drop it to the location where you want to add it.

To add multiple instances of a component, hold down the Ctrl key (Mac: Command key) while clicking on the Design view.

Move or copy components

To move components simply drag them to the new location. You will get reasonable visual feedback during the drag operation.

Move components

To copy components, proceed just as moving components, but hold down the Ctrl key (Mac: Option key) before dropping the components.

You can cancel all drag operations using the Esc key.

Resize components

Use the selection handles to resize components. Click on a handle and drag it.

Resize components

The green feedback figure indicates the new size of the component. The tool tip provides additional information about location, size and differences.

Whether a component is resizable or not depends on the used layout manager.

Morph components

The "Morph Bean" command allows you to change the class of existing components without loosing properties, events or layout information. Right-click on a component in the Design or Structure view and select Morph Bean from the popup menu.

Nest in Container

The "Nest in Container" command allows you to nest selected components in a new container (usually a JPanel). Right-click on a component in the Design or Structure view and select Nest in JPanel from the popup menu. The new container gets the same layout manager as the old container and is placed at the same location where the selected components were located. For grid-based layout managers, the new container gets columns and rows and the layout constraints of the selected components are preserved.

Nest in Container (Before)   Nest in Container (After)

Non-visual beans

To add a non-visual bean to a form, select it in the Palette (or use Choose Bean) and drop it into the free area of the Design view. Non-visual beans are shown in the Design view using proxy components.

Non-visual bean

Red beans

If a bean could not be instantiated (class not found, exception in constructor, etc), a red bean will be shown in the designer view as placeholder.

red bean container   red bean component

To fix such problems, take a look at the Error Log view and if necessary add required jars to the classpath of your project.