Introducing the Eclipse Visual Editor

1
Introducing the Eclipse Visual Editor

• David Gallardo

2
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

3
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

4
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

5
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

6
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

7
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

8
VE supported Swing/AWT layouts

• VE supports the following layouts

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

SpringLayout is not supported
9
VE supported SWT layouts

• VE allows the following layouts

• Null Layout
• FillLayout
• GridLayout
• RowLayout

but offers no support for FormLayout
10
VE layout customizers

• Different sets of tools tailored for each type of
  layout
• Layout tools
• Components
• In Swing, most complete support for null layout
• Display grid
• Tools for aligning components, matching size,
  spacing evenly
• In SWT, most complete its GridLayout
• Layout conversion
• Useful in SwingBest support converting from null
  layout to Swing GridBagLayoutwhich is very
  useful, since GridBagLayout is difficult to work
  with

11
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

12
Demo

• Swing null layout, convert to GridBagLayout
• Add listener
• SWT GridBagLayout
• Add listener
• For related article see http//www.manning.com/Ga
  llardo2