WindowBuilder Pro: Advanced Java GUI Creation in Eclipse

s much of an improvement as Swing and SWT have been for building Java GUIs, Java still lacks the ease of free-form GUI creation available in products such as Visual Basic. In fact, coding Java GUIs is so tedious and requires such detailed knowledge of the AWT, Swing, and SWT APIs that it has become a specialty within the Java programming community. WindowBuilder Pro, a tool developed by Instantiations, Inc. of Portland, Oregon, allows all Java developers to bi-directionally create, edit, and manage all types of GUI components. As an Eclipse plug-in, it also integrates seamlessly with Eclipse’s Java Perspective. This article offers a review of WindowBuilder Pro’s features, benefits, and usability, and a discussion about the direction of Java GUI development with Instantiations’ vice president of product development.

Waxing Nostalgic
I admit I have a soft spot for pre-.NET Visual Basic. Java purists will flame me for mentioning VB in the same breath as Java, but its IDE opened up programming to millions of developers—me included. Even though VB programmers faced “DLL-hell” at build and integration time, they at least could take comfort in how fast they could code a prototype application GUI, wire up some event handlers, and collect their “oohs” and “aaahs” from management. Not so with Java.

From my early days with Java, I was put off by the hand-coding overhead required for client-side GUI development (recall that most programmers wear laziness as a badge of honor). In fact, VB so spoiled me that I eschewed fat client development in favor of server-side development, and I never looked back. I just never found the tools that could abstract and simplify GUI creation in Java like VB did.

The Birth of WindowBuilder Pro
Recently, I had to spec a GUI for a possible Eclipse plug-in. Responding to a thread on the Portland Java Users Group, I made the acquaintance of Mark Johnson, who works at a company called Instantiations in Portland. As it turns out, Instantiations specializes in two things: Java GUI tools and Eclipse plug-ins.

Mark introduced me to Eric Clayberg, their senior VP of product development. He said that their team had been developing GUI tools since 1992, initially for Smalltalk. Seizing upon the lack of GUI builder tools for Java and the growing popularity of SWT, Eric led the initial development on a SWT tool and later added Swing capabilities. When Instantiations completed a strategic acquisition of SWT Designer (an application created by regular Eclipse plug-in contributor Konstantin Scheglov) in 2003, WindowBuilder Pro was born.

WindowBuilder Pro is currently used by companies such as IBM, Lucent, Fujitsu, Sprint, Adobe, HP, Northrop Grumman, Lockheed Martin, Sanyo, Cisco, Goldman Sachs, MetLife, Ford, 3M, DaimlerChrysler, and Motorola. According to Mark Johnson, WindowBuilder Pro has more than 10,000 registered users, and more than 30,000 people have downloaded the product. It has also been one of the most popular Eclipse plug-ins, averaging 1,000 downloads per week since it was launched on September 30, 2003 (see Table 1: WindowBuilder Pro at a Glance).

Testing the Tool
WindowBuilder Pro is made for the Java developer who needs to build user interfaces without drowning in the minutia of the Java GUI libraries. One of the things that I noticed right away when I tested WindowBuilder Pro was how clean the Java code it generated was. In fact, by studying how WindowBuilder structured its output and referring to my other Swing and SWT references, I learned a lot about writing maintainable Java GUIs. The tool is intended primarily for creating either Swing or SWT GUIs using the Eclipse IDE, but of course it supports AWT widgets. Eric Clayberg also said, “a significant percentage of our users use the tool to create UIs for Eclipse plugins and for Eclipse RCP (Rich Client Platform) apps.” (See Table 2: WindowBuilder Pro Key Features)

 
Figure 1. Duplicate the Original Visual Basic 6.0.FileBlaster UI

I tested the tool on Eclipse 3.0, so to follow my testing approach I recommend that you have that installed first. If you have a different version of Eclipse, make sure that you download and install the corresponding version of WindowBuilder Pro, or else you’ll have problems. To obtain the 14-day evaluation version of WindowBuilder Pro, browse here and follow the instructions. One performance note: WindowBuilder is memory intensive, so I recommend increasing the physical memory allocated to your JVM to at least 128MB. On my Windows box for example, all I had to do was modify the target value in my Eclipse Shortcut to read:

"C:Program FilesEclipse3.0eclipseeclipse.exe" -Xms128M
 
Figure 2. A Complete Selection of the Most Common GUI Project Types

Most Java GUI development boils down to four basic steps:

  1. Create your components and set their properties.
  2. Add them to a container.
  3. Select a layout manager to arrange your components.
  4. Write the event handlers.
 
Figure 3. Select How Your GUI Code Is Constructed

The main metric for my testing approach was measuring how easily WindowBuilder Pro supports this workflow. I soon discovered that with this tool, you actually begin with Step 2 by choosing the kind of container project you want. I chose to build an SWT application called FileBlaster (see Figure 1), which mimics an old VB utility that I made for renaming collections of files.

In Eclipse, I started by selecting File > New > Other… and choosing SWT Application from the Designer folder. (See Figure 2 and note all of the container options that are available in WindowBuilder Pro.)

 
Figure 4. The Most Used AWT, Swing, and SWT Widgets

I specified that the GUI code go in main() to simplify the example (See Figure 3).

After I pressed Finish, WindowBuilder Pro generated a clean application stub like the following:

package com.mts.wbp.test;import org.eclipse.swt.widgets.Display;import org.eclipse.swt.widgets.Shell;public class FileBlaster {	public static void main(String[] args) {		final Display display = Display.getDefault();		final Shell shell = new Shell();		shell.setSize(500, 375);		shell.setText("SWT Application");		shell.layout();		shell.open();		while (!shell.isDisposed()) {			if (!display.readAndDispatch())				display.sleep();		}	}}

When you click the Design tab, you will see your GUI container rendered in a very functional IDE—not unlike VB’s in its intuitive structure (See Figure 4). Down the middle, note the panel bars of all the widgets available to you.

 
Figure 5. Manage Your GUI from a Tree Browser

Now, if you’re like me, you reserve the right to judge all claims of “ease of use” by whether or not you can be productive on intuition and experience alone—in this case, by dropping widgets on the shell and trying to make the GUI look the way you want. So, next I decided to try adding some menus.

Scanning the widget bar, I clicked the Menu Controls panel and selected MenuBar. By clicking on the shell, a menu bar appeared at the top (See Figure 5). So far, so good.

 
Figure 6. WindowBuilder Pro Supports Complex Menus

Next, I clicked Menu and then clicked in the menu bar. A menu item appeared in the bar, and I noticed that WindowBuilder also created a tree display of all the widgets I added. A right-click on any of these icons popped an Implement… menu item leading to its stubbed out event handler. I continued adding menus and menu items until I had duplicated my original VB menus (See Figure 6). The total time was only 15 minutes!

At this point, I realized that I’d forgotten to add a Layout manager. I chose the arguably most complex one, the Form Layout, and simply clicked the shell to apply it. Form Layout combines the ease of dropping widgets on the shell with very detailed controls to constrain them. This is where WindowBuilder Pro goes the extra mile beyond what VB did. Whereas in VB you had to manually write all the window-resizing code (yes, I realize that you could use tools to do this, but most developers rolled their own), WindowBuilder Pro gathers all of your design intent though the Properties table or the IDE itself.

 
Figure 7. Newly Refactored Java FileBlaster UI

Eventually, I figured out how WindowBuilder was constraining controls to the shell (remember that I wasn’t cheating and using the help system or tutorials for my test). At one point, I realized the List I was using should have been a DropDown Combo. Back in the day, I would have had to rip out the VB control and start over. Using WindowBuilder Pro’s control morphing feature, I refactored the control with two mouse clicks. Total time to complete my GUI without help or tutorials: 35 minutes. I was sold!

Figure 7 shows my completed UI for FileBlaster SWT.

Figure 8 shows the results of prepending my company initials to some file names.

 
Figure 8. The Effect of the Add Prefix or Suffix Menu Command

While most major Java IDEs have some GUI tools, few comprehensive IDEs are dedicated to Java GUI development in Eclipse. The Eclipse Visual Editor is about the only other one on the market. While I did not compare WindowBuilder Pro to the Eclipse Visual Editor myself, Instantiations does claim that it wins head-to-head in many important categories (see Table 3: WindowBuilder Pro Versus Eclipse Visual Editor). In all fairness, however, as of September 2004 Eclipse Visual Editor does include the following:

  • SWT and Swing support
  • Full two-way editing of Java and the visual model
  • Advanced graphical editors for Swing’s GridBagLayout and SWT’s GridLayout
  • Windows and Linux/GTK support
  • Full support for Eclipse 3.0.1

The Future of Java GUIs
I asked Eric Clayberg if new GUI tools are helping Java compete with Microsoft’s .NET platform. He replied, “SWT provides a clear alternative to .NET for building client applications. It finally allows Java developers to create fast, native Windows apps that are every bit as good as those created with .NET. GUI builders targeting SWT make building SWT-based UIs practical.”

Clayberg also cited the significant increase in developers interested in creating fat client Swing and SWT apps, the steady increase in the number of eval downloads of the product over the last year, and the popularity of SWT in various trade magazines and newsgroups as key factors driving Instantiations to continue innovating its GUI tools.

“Development on the product has accelerated over the last year, and Instantiations is actively working on many new features,” he added. “We are continuing to evolve the product’s abilities to create Eclipse RCP apps. Support for the new Eclipse Forms API is due out soon. We are also enhancing the product’s Swing capabilities with plans to add support for JGoodies FormLayout and other popular layout managers.”

Clayberg was also especially proud of the fact that WindowBuilder Pro has an extremely flexible code generation and parsing engine. “WB can read and write just about any Java GUI format. That makes it ideal for editing (or reverse engineering) Java code created by other GUI builders such as JBuilder, NetBeans, VA Java, etc. In many ways, it is the ‘Rosetta Stone’ of Java GUI builders,” he boasted.

GUI Programming Takes a Leap Forward
Java has historically languished and struggled in the area of GUI development: AWT was not robust enough, and Swing—improvement that it is—is just too bulky and slow for many fat client applications. With the advent of the lightweight and fast SWT library, Java GUI programming has taken a huge leap forward, but developers still are faced with the headaches of reverse-engineering old AWT and Swing applications, maintaining existing code, and creating new apps. WindowBuilder Pro is specifically designed to address these issues (See Table 4: WindowBuilder Pro: Pros and Cons). It excels at translating legacy Java GUI code and supporting rapid application development reminiscent of the old Visual Basic 5-6.0. All of this is implemented in an intuitive and easy-to-use Eclipse interface. Java developers who have been avoiding GUI programming because of the learning curve and its impact to their respective productivity should seriously investigate this powerful tool.


Mark Johnson Mark Johnson is the vice president of marketing at Instantiations. He is also the chair for the Eclipse Public Relations Committee. You can reach Mark at [email protected].
Mark Johnson Eric Clayberg is the senior vice president for product development at Instantiations. He co-authored “Eclipse: Building Commercial Quality Plug-ins” (Addison-Wesley, June 2004). You can contact Eric at [email protected].

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Related Posts