Skip to main content

Professional Swing UIs with NetBeans GUI Builder

Posted by joconner on May 18, 2006 at 2:58 PM PDT

Jan Stola, Tomas Pavek, and Scott Violet discussed the motivations behind the latest graphical user interface builder available in NetBeans. The NetBeans GUI Builder, once labeled Matisse, is available in NetBeans version 5 and later.

J1SF2006_NetBeansGUIBuilder.jpg

Previous GUI builders forced you to understand layout managers, which are the underlying objects that control how and where GUI components are positioned within a container. They were nothing more than thin wrappers that exposed the low-level, complex details of a specific layout manager's rules. Because of the difficulty working directly with layout managers, developers often became frustrated. Many people simply gave up on them because the effort to master them was overwhelming.

Developers want to be able to prototype quickly, and UI designers want to spend time actually designing a graphical layout rather than wrestling with layout managers. Layout managers aren't gone. In fact, one of the key elements of this builder is a new layout manager called GroupLayout. However, NetBeans puts them far behind the scenes. GroupLayout is a feature of Java SE 6 (Mustang) but is available as a library extension that works with J2SE 5 (Tiger) too. In combination with GroupLayout, the NetBeans GUI Builder has lofty goals to ease the workload and effort of creating great looking GUIs on the Java platform. Those goals include the following:

  • platform look and feel independence
  • dynamic behavior that can resize most of GUI as needed
  • easy localization
  • size, font, and resolution scalability
  • conformance to platform UI guidelines
  • consistent visual appearance
  • provide separation of view and controller

Cross Platform UI

Common mistakes in cross platform UI design include the following:

  • absolute sizes or positions
  • reliance on relative proportions among components
  • implicit position dependencies
  • hard coded strings, fonts, colors, and left-to-right viewing orientation

The NetBeans GUI Builder can help resolve all of these mistakes by helping you create one layout design that runs successfully everywhere regardless of platform specific component position rules. The GroupLayout manager provides adaptive spacing and relative positioning among components that changes depending on the platform and look and feel. It also has built-in internationalization support that makes it easy to localize your UI. Some internationalization tasks, like extracting text to resource bundles, can be handled automatically if you want. The layout manager handles component resizing as needed when localized text requires larger or smaller components.

Layout Design

The GUI builder helps programmers follow layout guidelines used on specific host platforms. If you follow the layout guidelines while placing components, your UI will look great anywhere. As you drag and drop UI components onto the visual design area, the tool suggests alignment, position, and sizes that all adjust as necessary for specific platforms during runtime. One of the best features is that you can finally align components along their baseline, creating smooth visual flows across a form.

As you design a form, the NetBeans GUI Builder visually represents your design exactly as it will appear when running. When necessary, you can switch views to see the underlying source code as well.
The builder and layout manager don't pay attention to any absolute positions. Instead, this GUI builder preserves established relations among components. As you drag and drop components onto the visual design area of NetBeans, pay attention to the suggested anchors, alignment lines, and resizability cues. Remember, components may move around to maintain the relationships when your application runs with different look and feels.

If for any reason you don't like the suggested spacing among components, sizes, and positions, you can resize most properties. You can even go so far as to provide a custom LayoutStyle implementation for runtime. A LayoutStyle provides the rules used by GroupLayout.

Although the you could possibly hand code a GroupLayout design, this layout manager wasn't designed for that purpose. This layout manager works best with visual design tools.

Internationalization

Great Swing UIs are internationalized. That means you can translate strings, colors, and images for a specific locale without rebuilding the GUI. You have to avoid hard coded strings and other localizable content by placing those items in ResourceBundle files. Be careful to externalize all visible text, including text on labels, buttons, tabs, borders, and window titles. Don't forget tool tips, mnemonics, and accessibility descriptions. Special wizards and properties assist you in extracting localizable resources.

Custom Components

All GUI components show up in a dockable palette within NetBeans. Using components is as simple as dragging and dropping them. Eh, not so thrilling. However, you can easily install your own custom components with the Palette Manager. Your component can be packaged in an external JAR file or another NetBeans IDE project. I like being able to drag and drop custom components directly from my project's own explorer window. This makes using customized components easier since they're so seamlessly integrated into the environment.

Managing Generated Code

As you create your UI, NetBeans generates layout code for you. The generated code is "fenced," meaning that the IDE protects it from accidental, manual changes. The fenced code is well marked within the IDE, and most is contained within an initComponents method. Component field values and their event handler headers (not bodies) are also protected. At first I balked at this, thinking that fenced code was a hindrance. However, it's easy to write additional code outside the protected areas when you want to provide additional event handlers or customized initialization. Additionally, you can use the GUI Builder to add pre and post initialization code for any UI element.

Professional Results

NetBeans GUI Builder really does help to create professional user interfaces. It does this by guiding your choices for component placement and size for platform independence, helping you create internationalized designs, producing standard Java language code that works everywhere, and integrating third-party and customized components. Behind the scenes, a new layout manager provides the cross platform layouts. Although GroupLayout is built-in to Java SE 6 (Mustang), you can have it in your J2SE 5 applications by using an extension library.

More Information

Related Topics >>