View RSS Feed

Eclipse

Using WindowBuilder to design GUI in Eclipse

Rating: 2 votes, 4.50 average.
by , 02-06-2012 at 04:57 AM (48273 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:

Name:  Update Sites.PNG
Views: 35588
Size:  23.8 KB
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:

Name:  Add Repository.PNG
Views: 29254
Size:  8.0 KB
Figure: Install WindowBuilder via update URL

Eclipse will load some information about the plug-in:

Name:  Install 1.PNG
Views: 29494
Size:  30.9 KB
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:

Name:  installing software.PNG
Views: 29224
Size:  11.0 KB
Figure: Installation of WindowBuilder is in progress

You may have to restart the IDE after the installation completed:

Name:  restart.PNG
Views: 29194
Size:  9.6 KB
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:

Name:  Window builder views.PNG
Views: 34297
Size:  109.6 KB
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:

Name:  show view.PNG
Views: 29198
Size:  10.9 KB
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:

Name:  design mode.PNG
Views: 29220
Size:  18.6 KB
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:

Name:  new wizard.PNG
Views: 29245
Size:  27.2 KB
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:

Name:  install swt toolkit.PNG
Views: 29231
Size:  21.0 KB
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:

Name:  swt designer.PNG
Views: 29351
Size:  22.4 KB
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:

Name:  swing palette.PNG
Views: 29949
Size:  60.1 KB
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:

Name:  palette context menu.PNG
Views: 29623
Size:  21.1 KB
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:

Name:  gridbag layout.PNG
Views: 29094
Size:  10.2 KB
Figure: The behavior of a container using GridBagLayout

And for a container that uses BorderLayout:

Name:  border layout.PNG
Views: 29087
Size:  7.0 KB
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…

Name:  toolbar.PNG
Views: 29227
Size:  18.9 KB
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:

    Name:  structure pane.PNG
Views: 29004
Size:  23.9 KB
    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.

    Name:  properties pane.PNG
Views: 29182
Size:  26.1 KB
    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:

Name:  windowbuilder preferences.PNG
Views: 29117
Size:  36.1 KB
Figure: Configure WindowBuilder settings


References

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:

DucBui likes this.

Submit "Using WindowBuilder to design GUI in Eclipse" to Facebook Submit "Using WindowBuilder to design GUI in Eclipse" to Digg Submit "Using WindowBuilder to design GUI in Eclipse" to del.icio.us Submit "Using WindowBuilder to design GUI in Eclipse" to StumbleUpon Submit "Using WindowBuilder to design GUI in Eclipse" to Google

Comments