Using WindowBuilder to design GUI in Eclipse
by, 02-06-2012 at 04:57 AM (21783 Views)
WindowBuilder is a great Eclipse plug-in that allows developers to visually design graphical user interface (GUI) for Java applications. It supports developing both Swing and SWT applications. In addition, it also supports Google Web Toolkit (GWT) and XML Windowing Toolkit (XWT). This article introduces this plug-in to Java developers about installation and working within Eclipse IDE environment.
Install WindowBuilder plug-in
WindowBuilder is already integrated into Eclipse Indigo version (Eclipse IDE for Java Developers). If you are using older versions (Helios, Galileo, Ganymede, …) you need to install the plug-in through the Eclipse’s Install New Software feature.
Select Help -> Install New Software… from Eclipse’s main menu. In the Install dialog, click Add button on the right of the dropdown list Work with. In the dialog Add Repository, you need to type the update URL of WindowBuilder into Location field. To know which update URL is for your current Eclipse version, go to http://www.eclipse.org/windowbuilder/download.php. You will see the links for different versions of Eclipse:
Figure: Update links page for WindowBuilder
Copy the link corresponding to your Eclipse version, and paste it into the Location field. Type a meaningful name for the Name field, such as WindowBuilder, and click OK:
Figure: Install WindowBuilder via update URL
Eclipse will load some information about the plug-in:
Figure: Select features of WindowBuilder to install
Click Select All to install all features of WindowBuilder, and click Next.
In the screen Install Details, click Next.
In the Review Licenses screen, select I accept the terms of the license agreements. Click Finish, Eclipse will download and install the plug-in:
Figure: Installation of WindowBuilder is in progress
You may have to restart the IDE after the installation completed:
Figure: A restart is recommended after installation
Click Restart Now to restart the IDE.
The WindowBuilder’s views
There is no separate perspective for WindowBuilder. Instead, Eclipse has three new views that support designing GUI:
- Design view: the visual editor for designing windows, frames, dialogs, panels.
- Palette view: provides UI widgets, components and layouts available for designing.
- Structure view: displays the logical structure of the component being designed. This contains two panes:
- Components pane: displays the hierarchical structure of the component being designed.
- Properties pane: displays the properties of the current selected object.
The following screen shot illustrates the three views that come with WindowBuilder:
Figure: Views specific to WindowBuilder
To show a view, select Window -> Show View -> Other…There is a new branch in the Show View dialog – WindowBuilder:
Figure: Select a view of WindowBuilder
The Design view is not shown here because it is available only when viewing the source code of a container by switching to design mode, as depicted in the following screenshot:
Figure: The Design mode
To create a GUI container, select File -> New. In the New dialog, expand the branch WindowBuilder, you will see about a dozen of containers and components that can be created and managed by WindowBuilder:
Figure: WindowBuilder can work with various types of components
All Swing’s widgets are available to create. For other toolkits like GWT, SWT and XWT you need to do additional installation. If you want to develop a SWT application, select SWT User Interface from the above dialog, and click Next. You will be asked to install the SWT Toolkit:
Figure: Install SWT Toolkit
Click Finish to install SWT Toolkit. You have to restart the IDE after installation completed. SWT widgets are available to create in the New dialog:
Figure: The SWT Toolkit supports various components
Follow the same steps to install GWT Toolkit and XWT Toolkit.
The Palette View
The Palette provides quick access to common widgets such as labels, buttons, text fields…This view is shown automatically when switching to design mode or manually by selecting Window -> Show View from the main menu.
You can drag and drop widgets from the Palette into the Design view. The widgets in the Palette are specific to the current toolkit. For example, the Swing’s widgets are different with the SWT’s ones.
The following screenshot show different palette for Swing and SWT:
Figure: The difference between Swing palette and SWT palette
The widgets are grouped by categories for easy access, such as Layouts, Controls, Menu… You can do various customizations via the context menu:
Figure: The context menu of Palette view
The Design View
The Design view is the visual editor that allows to arrange, edit, move, re-size… widgets placed onto a container. The behavior of drag and drop widgets is different depending on the layout manager being used by the container.
The following screenshot illustrates the behavior when drop a widget onto a container using GridBagLayout:
Figure: The behavior of a container using GridBagLayout
And for a container that uses BorderLayout:
Figure: The behavior of a container using BorderLayout
The visual editor comes with a handy toolbar that provides quick access for common operations such as preview the window, refresh the source code and the design page, undo/redo, change the look and feel…
Figure: The toolbar of Design page
One great feature of WindowBuilder is, the design view and the source code are synchronized immediately when you make changes to either side. You can freely change the source code and the design page updates the changes immediately.
When selecting a widget or component in the design view, the Components pane and Properties pane display the corresponding information.
The Structure View
The Structure view is activated when switching to design mode or selecting Window -> Show View from the main menu. It is divided into two panes:
- The Components pane: this represents the structure and relationship among components within a container in a hierarchical tree which allows quickly visualizing the structure and navigating among the components easily. In addition, you can perform various operations via the context menu:
Figure: The Components pane
When selecting an object in the design view, the components tree is also updated for the selected current selected component. You also can drag and drop widgets from the Palette view into the components tree.
- The Properties pane: it is activated and refreshed each time a component is selected either in the design view or in the components tree. You can view and edit properties of the selected component via this pane, the changes are updated in the design view and components tree immediately.
Figure: The Properties pane
Configure WindowBuilder settings
You can configure various settings for WindowBuilder by choosing Window -> Preferences from the main menu, and select the branch WindowBuilder:
Figure: Configure WindowBuilder settings
WindowBuilder is a powerful GUI design tool which comes as a plug-in for Eclipse IDE. Here are some great resources about the plug-in:
- WindowBuilder’s home page: http://www.eclipse.org/windowbuilder/.
This is the place to download separate installation or get update links.
- WindowBuilder’s documentation: http://help.eclipse.org/indigo/index...l%2Findex.html
This is the original and great resource to learn using WindowBuilder.