Transcript Document

Developing GUIs With the
Eclipse Visual Editor,
SWT Edition
David Gallardo
My books
• Java Oracle Database Development
• Eclipse in Action, (lead author)
• Eclipse in Action, 2nd edition due out in December
• Preview article, Introducing the Eclipse Visual Editor
available at:
http://www.manning.com/books/gallardo2
Presentation and source available at:
http://www.gallardo.org
The Visual Editor is Eclipse’s
long-awaited GUI Builder for
Swing/AWT and SWT
What’s a GUI builder good for?
• Coding graphical user interfaces is tedious
and requires verbose code
• Visualizing the effects of code and code
changes isn’t intuitive for most people
• The flexible, powerful layouts that give
professional results can be especially
difficult to program
• A GUI builder lets you use graphical design
tools in a WYSIWYG environment to
design the GUI and generates code for you
The Eclipse Visual Editor
• It’s been a long time coming…
– Difficult to develop
– Hard to make one that generates good code and
that doesn’t require proprietary artifacts like
format files
– Visual Age for Java had one of the few good ones
– Little incentive for IBM to contribute this to
Eclipse?
• The lack of a GUI build was one of the chief
complaints about Eclipse, vis-à-vis competitors
Introducing the Eclipse Visual
Editor
• IBM eventually relented and contributed
their Visual Editor in Fall 2003
• Initial version, 0.5, was Swing/AWT only
• Version 1.0, released Fall 2004, introduced
limited support for SWT—the Standard
Widget toolkit
• Version 1.1, released July 2005, adds more
SWT support and support for RCP views
Why SWT?
• IBM created SWT as a replacement for Swing/AWT
– AWT controls were native, but took lowest-common
denominator approach to achieve cross-platform
compatability
– Swing emulated controls don’t always match platform
– Swing controls performed poorly relative to native
controls
• SWT took a hybrid approach
– Thin layer over native controls
– Emulated controls where native controls for a particular
platform aren’t available
• SWT applications have the look & responsiveness of
native applications
• SWT is relatively simple and easy to use
Installing VE
• VE is an independent component that plugs
into Eclipse JDT
• Install using Eclipse Update feature. This
will install VE and the following
dependencies:
– Graphical Editing Framework (GEF)
– Eclipse Modeling Framework (EMF)
• Versions of Eclipse, VE, GEF and EMF
must be compatible—Update will make
sure that dependency requirements are met
Principal VE features
• Wizard for creating Visual Classes—classes that
include an SWT Shell or Composite
• Visual editor with palette of controls and two
views in usual editor location:
– Design view
– Source view
• Java Beans View
• Properties View
• Indicator and tool buttons for controlling
synchronization between views
• No support for JFace
Visual class wizard
• SWT options:
– Composite
– Shell
• SWT controls are not intended to be subclassed:
SWT favors re-use through composition rather
than inheritance.
• The generated visual class, by default, only
subclasses Object.
• VE generates the code for declaring and
instantiating the selected type
SWT palette selections
The VE palette organizes SWT controls in
folders:
• SWT controls: Button, CheckBox, RadioButton,
Label, Link, Text…
• SWT containers: Shell, Composite, Group,
TabFolder, CoolBar…
Working with controls
• Drag and drop from palette to design view or Java
Beans view
• Adjust size or position in design view (if layout
manager permits)
• Modify properties in Properties View
• Add event handlers in design view or Java Beans
view
• Modify source directly
• By default, changes in one view will be reflected
automatically in the rest
• Synchronization can be turned off or on with
toolbutton; indicator appears in status bar
Working with layouts
• There is no default layout manager for a SWT
containers. (Or to put it another way, the default is
the null layout manager.)
• Null layout lets you modify controls’ sizes and
placement arbitrarily, but will not adjust
automatically well when window is re-sized or UI
is localized for different languages.
• To select a layout manager, make sure the
container is selected in the design view or Java
Beans view, then change the layout manager in
Properties view
VE supported SWT layouts
VE allows the following layouts:
•
•
•
•
•
Null Layout
FillLayout
FormLayout
GridLayout
RowLayout
…but offers no support for FormLayout
VE layout customizers
• Different sets of tools tailored for each type
of layout
– Layout tools
– Components
• Most complete support for null layout
– Display grid
– Tools for aligning controls, matching size,
spacing evenly
• Good support for GridLayout—a powerful
and flexible layout manager
• Layout conversion is imperfect
Adding listeners
• To make a GUI work, you need to add
listeners to wire controls together
• Listeners can be added by right-clicking on
a control in design view or Java Beans view
and selecting Events->
• Handlers specific to a control can be
selected directly
• Other events can be selected by selecting
Add Events…
• Dialog box will show applicable listeners
and adapters
Listeners and adapters
• SWT often offers a choice between a listener—which
is an interface—and an adapter which is a class
– An interface requires that you implement all the methods it
defines
– Most SWT interfaces have a corresponding adapter—a class
that implements the interfaces methods with stubs
– You subclass the adapter and only need to implement the
methods you care about
– The only disadvantage of adapters is that your event handler
can’t subclass anything else
• VE will create all the code needed in either case,
including method stubs for the listener interface, so
using a listener is not much of an inconvenience
Running an SWT application
• Can run as a Java Bean in Eclipse environment
• To run as a Java app requires a native library (DLL on
Windows). There are four options:
– Use a -Djava.library.path VM argument in the launch
configuration to tell the application where the library is.
– Put the library in the root directory of your project.
– Add the location of the library the path the OS uses to locate
libraries. On Windows, this is PATH environment variable;
on Mac OS X and Linux, this is LD_LIBRARY_PATH.
– Move the library to a place that is already on the path, such
as the %SystemRoot%\SYSTEM32 directory on Windows,
or /usr/local/lib on Linux and Mac.
Demo
Building a click-counter application:
•
•
•
•
•
Layout with GridLayout (see next slide)
Change control names with refactoring
Add listeners
Add listener code
Run as Java Bean and as a Java app
Planning the GridLayout