12 - An Eclipse GUI Builder
Overview: .................................................................................................................... 1
A GUI Builder:............................................................................................................ 1
Acquiring the Designer Plug-in:.................................................................................. 2
Installation:.................................................................................................................. 2
Activating the Designer:.............................................................................................. 3
Creating a new SWT/JFace Java Project:.................................................................... 3
Creating a new SWT Java File:................................................................................... 4
Parts of the Designer: .................................................................................................. 7
Open Definition and Convert Local to Field Buttons ............................................... 11
Handling Events with the Designer:.......................................................................... 11
Adding an Event Listener with the SWT Designer:.................................................. 12
Deleting an Event Listener with the SWT Designer: ................................................ 14
Using Layout Managers in the SWT Designer: ........................................................ 14
NullLayout: ............................................................................................................... 15
FillLayout:................................................................................................................. 18
RowLayout:............................................................................................................... 19
GridLayout: ............................................................................................................... 20
FormLayout (Professional Version Only):................................................................ 22
StackLayout (Professional Version Only):................................................................ 30
BorderLayout (Professional Version Only): ............................................................. 31
FlowLayout (Professional Version Only): ................................................................ 33
GridLayout (AWT) (Professional Version Only): .................................................... 34
Creating Menus in the SWT Designer (Professional Version Only): ....................... 34
Custom Widget Templates (Professional Version Only):......................................... 37
Widget Morphing (Professional Version Only):....................................................... 38
Custom Composites (Professional Version Only): ................................................... 38
JFace Viewers (Professional Version Only): ............................................................ 41
Custom JFace Dialog Creation:................................................................................. 42
JFace Wizard Page Creation (Professional Version Only): ...................................... 44
JFace Application Creation (Professional Version Only):........................................ 46
Code Generation Options:......................................................................................... 50
Type Specific Code Generation Options (Professional Version Only):.................... 52
Additional Features of the Designer:......................................................................... 53
Creating a UI: Two Examples................................................................................... 55
Creating a GUI for an Address Book Application: ................................................... 55
Creating a new Project: ............................................................................................. 55
Creating a new SWT Application: ............................................................................ 55
Designing the GUI Window:..................................................................................... 56
Creating Menus: ........................................................................................................ 61
Creating Event Handlers: .......................................................................................... 63
Creating an SWT GUI for a Client Billing Application:........................................... 65
Taking a Look at the Original GUI: .......................................................................... 66
Creating Our Own ClientBillingUI:.......................................................................... 67
Creating the Client List Group:................................................................................. 68
Department of Computer Science
University of Manitoba
i
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse
Creating a Tabbed Folder:......................................................................................... 69
The Clients Tab: ........................................................................................................ 69
The Transactions Tab:............................................................................................... 71
Creating a Menu:....................................................................................................... 72
Running the Application: .......................................................................................... 73
Creating a Swing GUI for the Client Billing Application:........................................ 73
Creating the ClientBillingUI: .................................................................................... 73
Creating the Client List JPanel:................................................................................. 75
Creating a JTabbedPane: ........................................................................................... 78
The Clients Tab: ........................................................................................................ 79
The Transactions Tab:............................................................................................... 81
Creating a Menu:....................................................................................................... 85
Running the Application: .......................................................................................... 86
Summary: .................................................................................................................. 86
Department of Computer Science
University of Manitoba
ii
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse
12 - An Eclipse GUI Builder 1, 2
by Raphael Enns and Shantha Ramachandran
Department of Computer Science, University of Manitoba, Winnipeg, Manitoba, Canada
Last revised: May 21, 2004
Overview:
In this tutorial, we describe how to use a GUI Builder plug-in for Eclipse, as well as look
at its features. The GUI Builder that we will look at in this tutorial is the Designer
created by Instantiations, Inc., and is available at http://www.swt-designer.com. We will
be using version 2.0.0 of the Designer in this tutorial.
A GUI Builder:
In the previous tutorials, we have seen that SWT and Eclipse are fairly simple and
straightforward to use. One of the most common questions about SWT, however, is
“Where is the GUI Builder?” The answer is that there is no GUI Builder that comes with
Eclipse. However, because Eclipse is open source and designed for plug-ins, a GUI
Builder plug-in is able to be made and can be integrated right into Eclipse.
The Designer is a plug-in that allows you design SWT and Swing GUIs in Eclipse. The
Designer is available at http://www.swt-designer.com. A restricted version of the plug-in
is available for free download at the above website. There is also a professional version,
which
Look at
http://www.instantiations.com/swt-designer/comparison.html
see a comparison
between the free and the professional versions.
is available for $199 USD.
to
includes extra features,
that
As of version 2.0 of the Designer, Instantiations includes both SWT and Swing support in
the Designer. The SWT part is the same as in previous versions and is called the SWT
Designer. The Swing part is called the Swing Designer and is similar to the SWT
Designer. There is also a WindowBuilder product in the Designer which is simply both
the SWT Designer and the Swing Designer.
Since most of the features are the same or similar between the SWT Designer and the
Swing Designer, this tutorial will mainly look at features of the SWT Designer. To
demonstrate the similarities and the differences between the SWT Designer and the
Swing Designer, one of the examples at the end of this tutorial will be done in Swing.
1 This work was funded by an IBM Eclipse Innovation Grant.
2 © Raphael Enns, Shantha Ramachandran and David Scuse
Department of Computer Science
University of Manitoba
1
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse
Acquiring the Designer Plug-in:
You can download the Designer from the website, http://www.swt-designer.com. It can
be found in the Download section. Make sure you get the correct file for your version of
Eclipse. In order to download the Designer, you must have a username and password.
You can get a username and password by registering at the Designer’s website.
Installation:
Once you have downloaded the Designer, installing it is quite simple. First make sure
Eclipse is closed. Move the zip file into your Eclipse directory and then unzip the file. It
will add three folders to your plugin directory that start with com.swtdesigner.
To make sure that the plug-in was successfully installed, start Eclipse. Go to the menu
item Help > About Eclipse Platform. Click on the Plug-in Details button, and a list will
appear. The Designer and the SWT-Designer Help Plug-in items should appear in the
plug-in list.
In the case that you would wish to remove the Designer from your computer, the
Designer creates a batch file called designer-delete.bat in your Eclipse program
directory. Run this file to remove the Designer.
Department of Computer Science
University of Manitoba
2
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse
Activating the Designer:
Before you begin using the Designer you have to activate it. To start the activation
process, select Window > Preferences inside Eclipse. Select the “+” beside “Designer”
on the left side of the Preferences window, click on License, and then click on the button
that says “Registration and Activation”.
Both SWT and Swing support comes with the Designer product, but depending on your
serial number, only one of the three products is activated. For example, if you have a
valid serial number for the SWT Designer, you can use the SWT functionality of the
Designer, but you will not be able to use the Swing functionality except in evaluation or
free mode. If you have a serial number for WindowBuilder, you will have full use of
both the SWT and Swing functionality of the Designer.
Select the type of Designer that you want to activate, select the desired mode, and then
click Next. Follow the directions in the following pages to activate the Designer. Once it
has been activated you are ready to start designing GUIs.
Creating a new SWT/JFace Java Project:
An SWT/JFace Java Project and a regular Java Project are nearly equivalent. They both
create a Java project and you can use the Designer with both types. The only difference
between an SWT/JFace Java project and a regular Java project is that the SWT/JFace
Java project will automatically add the SWT and JFace jar files to the build path.
Department of Computer Science
University of Manitoba
3
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse
To create an SWT/JFace Java Project, select File > New > Project, and then in the
resulting window select SWT > SWT/JFace Java Project.
Click Next and then create the project the way you would normally create a Java Project.
You do not have to add the SWT and JFace jar files to the build path because they are
added automatically.
Note: To be able to use SWT, the SWT runtime DLL must be accessible by the SWT jar
file. For information on how to do this, see the Installing Eclipse tutorial, which can be
found at http://www.cs.umanitoba.ca/~eclipse.
Creating a new SWT Java File:
The easiest way to set up a file to use the Designer is to use the Designer Wizard. Select
File > New > Other from the menu and select Designer > SWT Application.
Department of Computer Science
University of Manitoba
4
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse
Click Next. In the window that opens, choose the project the file will go in and give the
file a name. You can also select which method the SWT code will initially appear in by
selecting the appropriate radio button as shown below. Click Finish to create the new
file.
This will add a file to your project that already has an SWT event loop and a shell created
for you. The file should automatically open in the Designer Editor.
To open a file that has not been created by the Designer, simply right-click on the file and
select Open With > Designer Editor.
This will open the file in the Designer Editor in the source view. There are two tabs at the
bottom of the editor window labeled Source and Design as shown below. If you click on
the Design tab, the file will be displayed in the design view and you will be able to
visually design your GUI.
Department of Computer Science
University of Manitoba
5
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse
Two other quick ways to switch between the source and design view are to click on the
“Switch between source and designer” button in the toolbar that is shown below, or
simply press F12.
Note: If a file was last opened in the Designer Editor, it will continue to open in that
editor until a different editor is selected to open the file with.
Below is an image of the Designer in the design view for a new file that was created
using the SWT Application wizard. Initially the class only has a shell with no controls
and no layout.
Note: To view the Designer Editor using the full screen, simply double click on the tab of
the current file at the top of the editor window.
Department of Computer Science
University of Manitoba
6
12 - An Eclipse GUI Builder
www.cs.umanitoba.ca/~eclipse