Download Document

Developing GUIs With the
Eclipse Visual Editor,
Swing/AWT 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 SWT support
• Version 1.1, released July 2005, adds more
SWT support and support for RCP views
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
extend Swing/AWT components
• Visual editor with palette of components and
containers 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
Visual class wizard
• Swing options:
–
–
–
–
–
–
–
–
–
–
–
Applet
Application
Desktop panel
Dialog
Frame
Internal Frame
Panel
Scroll Pane
Split pane
Tabbed Pane
Window
• AWT options:
–
–
–
–
–
–
Applet
Dialog
Frame
Panel
Scroll Pane
Window
Swing/AWT palette selections
The VE palette organizes Swing/AWT components in
folders:
•
•
•
•
Swing components: JButtons, JCheckBox, JLabel…
Swing containers: JFrame, JPanel, JScrollPane…
Swing menus: JMenuBar, JMenuItem, JToolBar…
AWT Controls: Frame, Dialog, Button, Label…
Working with components
• 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
• If you create a Swing frame, then add a label to it,
it’ll fill the frame completely, and you’ll be unable
to move or re-size
• The default layout manager for a Swing frame is
BorderLayout. Sizes and location of components
are governed by a strict policy.
• To change, select the content pane in design view
or Java Beans view, then change layout manager
in Properties view
• Null layout, for example, lets you modify
components’ sizes and placement arbitrarily
VE supported Swing/AWT
layouts
VE supports the following layouts:
•
•
•
•
•
•
•
Null layout
BorderLayout
BoxLayout
CardLayout
FlowLayout
GridBagLayout
GridLayout
SpringLayout is not supported
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 components, matching size,
spacing evenly
• Layout conversion
– Best support converting from null layout to
GridBagLayout—which is very useful, since
GridBagLayout is difficult to work with
Adding listeners
• To make a GUI work, you need to add
listeners to wire components together
• Listeners can be added by right-clicking on
a components in design view or Java Beans
view and selecting Events->
• Handlers specific to a components can be
selected directly
• Other events can be selected by selecting
Add Events…
• Dialog box will show applicable listeners
and adapters
Listeners and adapters
• Swing 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 Swing 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 it
using a listener is not much of an inconvenience
Demo
Building a click-counter application:
•
•
•
•
•
•
•
Layout with null layout tools
Change control names with refactoring
Convert to GridBagLayout
Add listeners
Add listener code
Run as Java Bean
Add main() and run as Java app