facebook

Java GUI Design Using SWT/Swing


1. What is SWT/Swing Designer?

SWT/Swing Designer is a Java GUI designer that makes it very easy to create Java GUI applications without spending a lot of time writing code to display simple forms. You can create complicated windows in minutes using the WYSIWYG visual designer, and the Java code is generated for you. You can easily add controls using drag-and-drop, add event handlers to your controls, change various properties of controls using a property editor, internationalize your app, and much more. The generated code doesn’t require additional custom libraries to compile and run, and SWT can reverse-engineer most hand-written Java GUI design code.

The editor is composed of the following components:

  • Design View – the main visual layout area.
  • Source View – write code and review the generated code
  • Structure View – composed of the Component Tree and the Property Pane.
    Component Tree – shows the hierarchical relationship between all of the components.
    Property Pane
     – displays properties and events of the selected components.
  • Palette – provides quick access to toolkit-specific components.
  • Toolbar – provides access to commonly used commands.
  • Context Menu – provides access to commonly used commands.

The editor also offers the following major features:

  • Bi-directional Code Generation – read and write almost any format and reverse-engineer most hand-written code
  • Internationalization (i18n) / Localization – externalize component strings, create and manage resource bundles.
  • Custom Composites & Panels – create custom, reusable components.
  • Factories – create custom factory classes and methods.
  • Visual Inheritance – create visual component hierarchies.
  • Event Handling – add event handlers to your components.
  • Menu Editing – visually create and edit menubars, menu items and popup menus.
  • Morphing – convert one component type into another.

The Swing Designer contains the tools necessary for creating windows, forms, and other UI elements.

Java GUI designer
Swing Designer


2. Creating a UI Element

Working with SWT/Swing Designer begins with creating a new UI element class as part of your project. Select File>New>Other, expand WindowBuilder and select one of the many components. Continue through the wizard to complete the element details.

Selecting a UI element to create

After you complete the wizard and the UI element is created, the Swing Designer opens allowing you to design the element using either the Design view or Source view.


2.1 Selecting a Layout Manager

When writing Java applications, you might want to use layouts to give your windows a specific look. A layout controls the position and size of children in a container. Layout classes are subclasses of the abstract class, Layout. Both SWT and Swing provide several standard layout classes, and you can write custom layout classes. Other UI toolkits embed implicit layout managers in each panel type.

In Java, positioning and sizing does not happen automatically. Applications can decide to size and place a container’s children initially, or in a resize listener. Another option is to specify a layout class to position and size the children. If children are not given a size, they have zero size and they cannot be seen.

The layout manager sets the sizes and locations of the components based on various factors such as:

  • The layout manager’s layout rules
  • The layout manager’s property settings, if any
  • The layout datas associated with each component
  • The size of the container

Each layout manager has characteristic strengths and drawbacks. Grid-based layouts and constraint-based layouts are the most useful and powerful of the standard layouts, but they are also the most complicated. When using the Design view, you can change the layout whenever you like. The tool adjusts the code as needed on the fly. Change the layout either by explicitly adding a layout manager to the source code for the container, or by selecting a layout for the composite on the design surface using the Layout tool on the Palette.


3. Design View

The Design view is your virtual sketchpad. You can add or remove components, edit layout properties, direct edit labels, and see what your overall design looks like as it evolves.

Editing a form design

Select a component in the Design view to make it appear in the Properties view, where you can edit its properties. This also activates selection handles for the component. Selection handles allow you change layout properties of the selected control and, for some layout managers, also layout properties of sibling controls. All properties that can be changed in the Design view can be also changed in the Properties view. Depending on the layout manager in effect, row and column headers might be visible in the header area.

Right-click a component to access the same context menu available from the Component tree. You can add components by choosing them from the palette, and delete them by pressing the Delete key.


3.1 Selecting Components

Use the Selection tool in the Palette to select one or more widgets. Hold the Shift or CTRL key down to select multiple widgets.

Selecting components

Use the Marquee tool in the Palette to rubber band select multiple widgets. Hold the ALT key and drag to automatically activate the Marquee tool.

Selecting with the Marquee tool


3.2 Editing Component Text

There is a quick way to edit the text property of buttons (including check and radio buttons), labels, text fields, groups, and table columns. First, select a component in the Design view, and press the Spacebar to reveal an edit box in which you can set the component’s text property.

Editing component text


3.3 Moving Components

When you move a component in the Design view, drag feedback is provided that is layout-manager specific. In an x,y-oriented layout like absolute layout, the live component is shown moving with a tooltip showing its current location. Dynamic snap/alignment points are provided to make it convenient to align the component with other components or the window margin.

Moving components in x,y-oriented layout

In grid-oriented layouts, different feedback is shown depending on which cell the pointer is over. If the pointer is positioned over an open cell, the cell is highlighted in green and the pointer shows a green check mark. If the pointer is positioned over a row or column border, the row or column border is highlighted in yellow indicating that a new row or column will be inserted. If the pointer is positioned over a populated cell, that cell is highlighted in red and the pointer shows a red minus sign.

   
Moving components in a grid-oriented layout


3.4 Resizing Components

When you resize a component in the Design view, size feedback is provided that is layout-manager specific. In an x,y-oriented layout like absolute layout, an outline of the new size is shown with a tooltip showing its current size. Dynamic snap/alignment points are provided to make it convenient to align the component with other components or the window margin. Resizing a component also snaps to the preferred size of the resized component or to the size (vertical or horizontal) of any other component on the same parent.

Resizing in an x,y-oriented layout

In grid-oriented layouts, resizing a component causes it to span more than one row or column. During the resize operation, the cells that will be occupied by the component are outlined in green.

Resizing in a grid-oriented layout


4. Source View

The Source view is where you write code by hand and review the code generated by the Java GUI design tool. The Source view is the standard Java editor, offering the following features:

  • Syntax highlighting
  • Content/code assist
  • Code formatting
  • Import assistance
  • Quick fix
  • Integrated debugging features

Source view

The Editor Layout preference controls the position of the Source view relative to the Design view. By default, they are on separate tabs, labeled Source and Design (you can select which page is first). Additional options are provided to show the Source view and Design view side by side or one above the other.

Side-by-side views
Stacked views

Access the Editor Layout preference by selecting Window>Preferences, and selecting WindowBuilder.

Setting the Editor Layout preference


5. Structure View

The Structure view is composed of the Component tree and the Properties view. The Component tree shows the hierarchical relationship between all components in the Design view, while the Properties view displays properties and events of the selected controls and provides text fields, lists, and other controls where you can edit properties, labels, and events.

The position of the Structure view can be configured via drag and drop or by right-clicking the Structure view header, and selecting Dock On from the menu.

Configuring docking position

 You can dock the Structure view to the top, bottom, left, or right of the Design view.

 
Docking positions

The Structure view is also available as a stand-alone view. Select Window>Show View>Other, expand WindowBuilder, and select Structure, or right-click the Structure view, and select Extract as View. Closing the stand-along Structure view returns the view to the default position, embedded within the editor.

   
Detatching the Structure view


5.1 Component Tree

The Component tree shows the hierarchical relationship between all components in the Design view.

Component tree

Each component in the tree shows its icon (with potential decorators), its variable name, and text label. Components can be represented as local variables or fields, and variable names must be unique within the scope in which the component is defined.

Icon decorators are used to indicate whether a component defines an events or is exposed as a public component of a custom container.

Icon

Decorator Name

Description

ExposedChild widgets exposed in a custom container.
EventComponents with one or more event handlers defined.

Expand the components in the tree using the Expand All icon , and collapse them using the Collapse All icon .

Right-click an entry in the tree to access the same context menu available in the Design view. You can arrange components in the tree by dragging and dropping, and delete using the Delete key.

You can select multiple components in the tree by holding down the CTRL key to add individual selections or the SHIFT key to add contiguous selections.


5.2 Properties View

The Properties view displays properties and events of the selected components and provides text fields, lists, and other controls for which you can edit properties and events. Select a control in the Component tree or the Design view to display its properties in the Property view. 

Properties view

When multiple controls are selected, all their shared properties are listed in the Property view. If the selected controls do not have the same value for a property, the property field in the Property view is blank.

By default, the Property view displays normal properties. Preferred properties are shown in bold and expert properties are shown in italics (click the Show Advanced Properties icon to reveal them). A gray background indicates a property set to its default value, while a white background indicates a property has been set to a non-default value. Click the Restore Default Value icon to set a property back to its default value.

You can select a property by clicking the property title or value. When a property is selected, an editor is displayed instead of the value, so you can change it value. In most property editors, Enter should be used to apply the value, and ESC to return to the previous value. If you select a property, you can use the arrow keys to navigate between properties.

The Properties view supports simple properties such as Strings and ints and complex properties that consist of several other properties, such as layouts and layout datas. Complex properties are displayed with a plus or minus sign before the title. You can expand/collapse complex properties in several different ways:

  • Double-click the property title or value
  • Click the plus or minus sign
  • Select the property and press the plus key to expand, the minus key to collapse

Some properties, such as strings, colors, fonts and images, provide a custom property editor which can be access by clicking the More button .

The state of a property (expanded or collapsed) is preserved between selections of controls. If you expand the property “style” for one control and then select another control, the property “style” remains expanded, so you can quickly change the style value for several properties without needing to expand it again and again. Once you decide that you don’t need to change the style, you can collapse the property “style” and allow space for other properties.

The Properties view supports selection properties, i.e., properties whose values should be selected from some list. For example, the “type” property of the complex “style” property for buttons is such a property. You can change its value in the following ways:

  • Double-click the property value for changing the value to the next value in list (or first value, if current value is the last)
  • Select the property, and press Spacebar to expand list and then use arrows to change value
  • Select the property, and press Delete to change the value to the default

Right-click the Properties view to access the property pane context menu.


6. Tool Palette

The Palette provides quick access to toolkit-specific components as well as custom components you might install. The Palette is organized into categories which may be expanded, collapsed, or hidden.

To add a components to the Design view, you can:

  • Select it in the palette and drop it on the design canvas or Component tree by clicking in the desired location.
  • Use the Choose Component command to select the widget type from Choose Component window.
You can add multiple widgets of the same type to the Design view by holding down the CTRL key when selecting the widget in the Palette.

You can customize the Palette by right-clicking anywhere in the Palette to access the Palette context menu or by opening the Palette Manager from the context menu.

The following commands are common to every palette:

  • Selection
  • Marquee
  • Choose component
  • Tab Order

Common Palette Commands

Icon

Menu Name

Description

SelectionSelect one or more widgets. Hold the Shift or CTRL key down to select multiple widgets.

MarqueeRubber band select multiple widgets. Hold the ALT key and start dragging to automatically activate the Marquee tool.

Choose componentAdds a component to the editor. Enter the name of the class or select it from the history list. You can right-click an item in the list to remove it from the history.

 

Tab OrderSets the tab order of the components.
    1. Start by selecting the top-level container (such as the JFrame).
    1. Activate the Tab Order tool.
    1. Click the components in the desired order.

      Click a component more than once to increment its index.

      SHIFT+Click to exclude a component.

      CTRL+Click to move the selected  index to another component.

    1. Deactivate the Tab Order tool by choosing another tool (such as Selection).

 The position of the Palette can be configured using drag and drop or by right-clicking the Palette header and selecting Dock On from the menu. The Palette can be docked to either the left or right side of the Design view.

 
Repositioning the Palette

You can also collapse or expand the Palette.

 
Collapsed Palette

The Palette is also available as a stand-alone view. Select Window>Show View>Other, expand WindowBuilder, and select Palette, or right-click the Palette and select Extract as View. Closing the stand-alone Palette view returns the view to the default position, embedded within the editor.

   
Detaching the Palette