Thứ Hai, 27 tháng 5, 2013

Hướng dẫn sử dụng WindowBuilder để thiết kế giao diện trong Eclipse

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 Locationfield. To know which update URL is for your current Eclipse version, go to You will see the links for different versions of Eclipse:

Name:  Update Sites.PNG<br />Views: 1530<br />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 theName field, such as WindowBuilder, and click OK:
Name:  Add Repository.PNG<br />Views: 1354<br />Size:  8.0 KB
Figure: Install WindowBuilder via update URL

Eclipse will load some information about the plug-in:
Name:  Install 1.PNGViews: 1356Size:  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.PNGViews: 1352Size:  11.0 KB
Figure: Installation of WindowBuilder is in progress

You may have to restart the IDE after the installation completed:
Name:  restart.PNGViews: 1345Size:  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.PNGViews: 1386Size:  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<br /><br /><br /><br /><br /><br />Views: 1348<br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1346<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1349<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1341<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1353<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1360<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1344<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1334<br /><br /><br /><br /><br /><br /><br />Size:  10.2 KB
Figure: The behavior of a container using GridBagLayout

And for a container that uses BorderLayout:
Name:  border layout.PNG<br /><br /><br /><br /><br /><br /><br />Views: 1329<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />Views: 1330<br /><br /><br /><br /><br /><br /><br />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<br /><br /><br /><br /><br /><br /><br />    Views: 1326<br /><br /><br /><br /><br /><br /><br />    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<br /><br /><br /><br /><br /><br /><br />    Views: 1338<br /><br /><br /><br /><br /><br /><br />    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<br /><br /><br /><br /><br /><br /><br />Views: 1321<br /><br /><br /><br /><br /><br /><br />Size:  36.1 KB
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:

1 nhận xét:

  1. Hello there! This post coyld not be written any better!
    Reading through this post reminds me of my old room mate! He always kept talking about this.
    I will forward this post to him. Fairly certain he will have
    a good read. Thanks ffor sharing!

    Trả lờiXóa