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, 2 nd edition due out in December Preview article, Introducing the Eclipse Visual Editor, available at:

Presentation and source available at:

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