Browse DevX
Sign up for e-mail newsletters from DevX


WindowBuilder Pro: Advanced Java GUI Creation in Eclipse : Page 2

Want to build Java user interfaces without drowning in the minutia of the Java GUI libraries? WindowBuilder Pro may be the tool for you. Learn all about this Eclipse plug-in as Jason Morris puts it to the test.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 Files\Eclipse3.0\eclipse\eclipse.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

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date