Introducing the Eclipse Visual Editor David Gallardo

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

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

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 supported SWT layouts VE allows the following layouts: Null Layout FillLayout GridLayout RowLayout …but offers no support for FormLayout

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 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

Demo Swing null layout, convert to GridBagLayout Add listener SWT GridBagLayout Add listener For related article see: