Developing GUIs With the Eclipse Visual Editor, Swing/AWT Edition

1
Developing GUIs With the Eclipse Visual Editor,
Swing/AWT Edition

• David Gallardo

2
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

3
Presentation and source available at

• http//www.gallardo.org

4
The Visual Editor is Eclipses long-awaited GUI
Builder for Swing/AWT and SWT
5
Whats a GUI builder good for?

• Coding graphical user interfaces is tedious and
  requires verbose code
• Visualizing the effects of code and code changes
  isnt 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

6
The Eclipse Visual Editor

• Its been a long time coming
• Difficult to develop
• Hard to make one that generates good code and
  that doesnt 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

7
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

8
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
  compatibleUpdate will make sure that dependency
  requirements are met

9
Principal VE features

• Wizard for creating Visual Classesclasses 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

10
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

11
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

12
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

13
Working with layouts

• If you create a Swing frame, then add a label to
  it, itll fill the frame completely, and youll
  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

14
VE supported Swing/AWT layouts

• VE supports the following layouts

• Null layout
• BorderLayout
• BoxLayout
• CardLayout
• FlowLayout
• GridBagLayout
• GridLayout

SpringLayout is not supported
15
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
  GridBagLayoutwhich is very useful, since
  GridBagLayout is difficult to work with

16
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-gt
• 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

17
Listeners and adapters

• Swing often offers a choice between a
  listenerwhich is an interfaceand an adapter
  which is a class
• An interface requires that you implement all the
  methods it defines
• Most Swing interfaces have a corresponding
  adaptera 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 cant 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

18
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