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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
Access the Editor Layout preference by selecting Window>Preferences, and selecting WindowBuilder.
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.
You can dock the Structure view to the top, bottom, left, or right of the Design view.
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.
5.1 Component Tree
The Component tree shows the hierarchical relationship between all components in the Design view.
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 |
 | Exposed | Child widgets exposed in a custom container. |
 | Event | Components 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.
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 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 |
| Selection | Select one or more widgets. Hold the Shift or CTRL key down to select multiple widgets.
|
| Marquee | Rubber band select multiple widgets. Hold the ALT key and start dragging to automatically activate the Marquee tool.
|
 | Choose component | Adds 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 Order | Sets the tab order of the components.
|
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.
You can also collapse or expand the 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.
