Create Great-Looking GUIs With NetBeans IDE 5.5

Create Great-Looking GUIs With NetBeans IDE 5.5

<!----><!----><!----><!----><!----><!---->

Print-friendly Version

<!---->

By John O'Conner, November 2006

Articles Index

The Java platform provides support for creating a graphical user interface (GUI) for your desktop applications. Several layout managers help you specify the position and size of GUI components. You might already be familiar with some of the common layout managers, which include FlowLayout, BorderLayout, and GridBagLayout, among others. A Visual Guide to Layout Managers, which is part of The Swing Tutorial, provides an excellent review of all the standard layout managers.

If you are a very skilled user interface (UI) developer who enjoys a challenge, you can write code manually to use a combination of layout managers to control precisely how components use their container space. Although the ability to lay out a GUI form by hand might win you the right to brag at the office, it is not always the best use of your time. In many situations, you can save time and effort by using a visual development environment to design and implement graphical forms. Unfortunately, many integrated development environments (IDEs) are little more than a thin wrapper around the various properties available from a layout manager.

If you are a GUI guru who avoids that type of IDE, you'll be thrilled that NetBeans IDE 5.5 provides significantly more value. It is not just a tool that allows you to visually set the various properties of layout managers, although that certainly is possible. NetBeans IDE 5.5 has a feature called the NetBeans IDE GUI Builder. This GUI builder, introduced as "Matisse" as early as NetBeans IDE 5.0, provides you the power and freedom to spend more time designing your application UI instead of dealing with the low-level details of specific layout managers. Figure 1 shows a sample screen capture of NetBeans IDE 5.5. This and other images in this article show screen captures of the GUI builder interacting with a demonstration address panel.

<!---->

Figure 1. Among other things, NetBeans IDE 5.5 provides a project manager, GUI design area, component inspector, component palette, and property editor.

 
<!---->

Not only does NetBeans IDE GUI Builder simplify GUI creation by providing immediate visual updates to your GUI design, it also helps you create a better-looking GUI by solving some of the most important, difficult problems that UI designers face. Some of the benefits and features of using NetBeans IDE 5.5 with the NetBeans IDE GUI Builder include the following:

• Free Design mode
• Platform independence
• Visual previews
• Internationalization support
• Custom component support in the palette
• Support for Java Platform, Standard Edition 6 (Java SE 6) code layout

 
<!---->

Free Design Mode

NetBeans IDE GUI Builder provides the Free Design mode of operation, which allows you to move UI components around a panel or frame without concern for the underlying layout manager. Layout managers are not gone. In fact, NetBeans IDE uses a new layout manager called GroupLayout to implement layout designs that you specify when you move components around a form. However, the GUI builder itself handles the low-level details of component positioning, sizing, resizing, and spacing. This frees you to design an appealing UI without spending needless time tweaking every detail of the layout implementation. As you drag and drop, rearrange, align, and anchor graphical components onto a form, the GUI builder provides visual feedback and layout hints that help you create the perfect UI. Figure 2 shows alignment and anchor suggestions that the GUI builder thinks are appropriate for a sample form. Anchors show the point of origin for measuring component positions within a form.

<!---->

Figure 2. The GUI builder provides visual cues for component alignment and anchoring as you design your UI.

 
<!---->

The Free Design concept is a combination of the new GroupLayout layout manager available in the Java SE 6 platform and the sophisticated NetBeans IDE GUI Builder itself. The GUI builder and layout manager work together to allow you to freely place and manipulate visual components anywhere on your form. The Free Design mode is active by default when you create a new form or panel. This style of interacting with GUI forms shows up in NetBeans IDE 5.5 as another layout manager. Figure 3 shows the option, which is available in the Inspector window for the form object.

<!---->

Figure 3. Select the Free Design interaction mode as a layout manager option.

 
<!---->

In theory, NetBeans IDE 5.5 could use any combination of layout managers to position your components as you arrange them within the Design pane. In practice, however, it uses the GroupLayout manager. NetBeans IDE engineers created GroupLayout to simplify GUI creation within an IDE such as NetBeans.

<!---->

Platform Independence

Great UI designs work well regardless of the underlying platform. If you deliberately place form components with hard-coded position and size information, those UIs will not display correctly on all platforms. Each host platform -- whether Mac OS X, Open Solaris, or Microsoft Windows -- has its own suggested guidelines for position and placement of components. NetBeans IDE GUI Builder helps you create platform-independent UIs, with one layout definition that runs and looks good on all target platforms.

If you follow the layout guidelines while placing components, your UI will look great in any platform. As you drag and drop UI components from the palette onto the visual design area, the GUI builder suggests alignment, position, anchors, and sizes that all adjust as necessary for specific platforms during runtime. The result is that you design your UI once, and it runs correctly everywhere.

The GUI builder and GroupLayout manager avoid absolute positions in your form design. Instead, the GUI builder preserves relative spatial relationships among components. As you drag and drop components onto the visual design area of NetBeans IDE 5.5, the GUI builder generates code that minimizes specific numerical offsets and sizes. If you pay attention to the visual cues that NetBeans IDE provides, your UI design will be platform independent.

The visual cues include dotted lines that suggest spacing and alignments. Because the layout manager determines preferred spacing and position hints at runtime, the exact gaps among components may change slightly when running on different hosts. Figure 4 shows an alignment hint for a postal code field in an address panel.

<!---->

Figure 4. NetBeans IDE GUI Builder suggests component spacing and text-baseline positioning that will be correct on all target platforms.

 
<!---->

You can even create your own custom rules to control how the GroupLayout class determines correct spacing. A GroupLayout object gets layout and spacing guidelines from a LayoutStyle object. By implementing your own LayoutStyle class, you can create customized rules that influence how the GroupLayout class does its job. However, the Java SE 6 platform already provides LayoutStyle class implementations for every major platform, so your GUI designs will already comply with most platform UI guidelines.

<!---->

Design Previews

As you design your UI, the GUI builder shows the form in the design area of the NetBeans IDE 5.5 window. This is an accurate but static representation of your UI form. You cannot interact with it as if it were actually running. Static and noninteractive views are fine while you are arranging components, but this view does not help you see how form components will grow or shrink as you resize the form, nor can you test the order of tabs.

The NetBeans IDE 5.5 GUI Builder has a visual design preview feature that allows you to see how the form will display in your application. You can activate the design preview by clicking on the preview icon -- a small image of an eye -- above the Design pane. Figure 5 shows this icon.

<!---->

Figure 5. Choose the design preview by clicking the preview "eye" icon above the form design area.

 
<!---->

When you click on the preview icon, the GUI builder will activate your form in Preview mode. Preview mode lets you type information into text fields, tab from field to field, and resize the form. The preview give you an indication of whether your component alignments and anchors are set the way you want them. Figure 6 shows a preview of a sample AddressPanel component.

<!---->

Figure 6. The visual preview allows you to interact with your form.

 
<!----><!---->

Internationalization

Internationalization is the process of making your application localizable. A localized application uses the language and cultural expectations of its target locale to provide a more pleasant, usable UI. Although there are many requirements to correctly internationalize an application, you should avoid making at least the following mistakes in your UI design:

• Setting absolute component positions and size
• Using hard-coded strings, fonts, colors, and left-to-right viewing orientation

The NetBeans IDE GUI Builder can help you avoid these mistakes by helping you create one layout design that runs successfully everywhere, regardless of platform-specific rules about component position. The GroupLayout manager provides adaptive spacing and relative positioning among components, which change depending on the platform's look and feel. The GUI builder also makes it easy to extract text to resource bundles. If you have used the Free Design layout along with the GroupLayout layout manager, your forms will automatically adjust label and other component sizes to handle the new lengths of localized text.

To make your Swing UI even better, you should internationalize it. 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 extract all visible text, including text on labels, buttons, tabs, borders, and window titles from source code. Don't forget tool tips, mnemonics, and accessibility descriptions. The internationalization wizards in NetBeans IDE 5.5 can extract localizable resources for you quickly and accurately. You can launch the wizard from the Tools menu as shown in Figure 7.

<!---->

Figure 7. The internationalization tools are on the Tools menu.

 
<!---->

The internationalization wizard leads you through three easy steps:

1. Select the files that contain localizable resources.
2. Choose the name of the resource bundle that NetBeans IDE should create.
3. Extract and approve the strings.

Although you can use the wizard to extract localizable strings from a single source file, the wizard can save you a great deal of time when you use it on multiple files. You can choose one or more files in the wizard as shown in Figure 8.

<!---->

Figure 8. Select your source-code files to internationalize.

 
<!---->

After you have created a ResourceBundle file to store localizable text, you must instruct the wizard to use that resource file. Select the resource file in step 2 as shown in Figure 9.

<!---->

Figure 9. Choose the resource bundles that will store the localizable text.

 
<!---->

The next step is to approve and edit the list of key-value pairs. A key is the name your application uses to find and use a localized resource. A value is the localized term, phrase, or other resource used in the application. Your code will use a key to load a localizable text value from the ResourceBundle file. You can modify the keys to follow your code-naming conventions at this point. Figure 10 shows the final step in using the internationalization wizard.

<!---->

Figure 10. After you approve the list of localizable strings, NetBeans IDE extracts them to a resource bundle.

 
<!---->

Not only does the NetBeans IDE GUI Builder help you extract localizable text, it also helps you create translations. You can add translations by creating new ResourceBundle objects for each target locale. You add new locales by selecting the Add Locale option that is available when you right-click on the resource bundle file in the Projects view pane. Figure 11 shows how to select this option.

<!---->

Figure 11. Add localizable resource bundles in the Projects pane.

 
<!---->

One unique feature of NetBeans IDE 5.5 is its localization editor. Once you have run the internationalization wizard, your localizable text will be in a ResourceBundle file. If you right-click on this file in the Project view window and select the Open option, NetBeans IDE will open a localization editor. Figure 12 shows the editor. The localization editor shows the original source text on the left and the target localized text to the right. In this example, the developer has added a Japanese-speaking locale to the project. The target text appears in the editor, allowing the user to translate the text.

<!---->

Figure 12. You can translate localizable text from within NetBeans IDE.

 
<!----><!---->

Custom Components

All GUI components show up in a dockable palette within NetBeans IDE. By default, the palette is on the right side of the NetBeans IDE UI, but you can move the palette around to suit your preferences. Using components is as simple as dragging and dropping them from the palette to your frame or panel. The palette comes preconfigured with all the core Swing and Abstract Window Toolkit (AWT) components.

You can easily install your own custom components with the Palette Manager. You can package your components as a Java archive (JAR) file, as part of a larger library, or even as part of another NetBeans IDE project. You can even put components from your current project onto the palette for easy access.

Once you have created a component, the class appears in your Project view window. You can right-click on the component's file and select the Tools > Add to Palette option. At that point, you can choose a category for your component and place it into the palette. Categories include Swing, AWT, and Beans by default, and you can add new categories too. After adding components to the palette, you can drag and drop them from the palette to other forms in your application. Figure 13 shows a custom component in the palette area.

<!---->

Figure 13. You can put custom components in the palette for easy reuse.

 
<!----><!---->

Generated Code

As you create your UI, NetBeans IDE GUI Builder 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 of the code is contained within an initComponents method. Component field values and their event-handler headers, not their bodies, are also protected. Figure 14 shows part of the initComponents method for an AddressFrame class.

<!---->

Figure 14. The GUI builder puts protected, auto-generated code into the initComponents method.

 
<!---->

You can 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-creation and pre- and post-initialization code to any GUI component. The GUI builder will add your customized code to the initComponents method and will maintain your code with the rest of the fenced code. So although the GUI builder creates protected, fenced code that you cannot edit directly in the class source view, it also provides a way for you to add customized code safely.

Figure 15 shows the property sheet with entries for pre- and post-creation and pre- and post-initialization code that you can specify for any of your UI components. After selecting these properties, you can type your own code into the editor.

<!---->

Figure 15. You can add customized initialization code to any GUI component.

 
<!----><!---->

Integration With the Java SE 6 Platform

The Free Design layout has been available since NetBeans IDE 5.0. NetBeans IDE 5.0's GUI Builder provided support for this layout strategy by using a separate library called the Swing Layout Extensions. The IDE provided that library because the support for the underlying GroupLayout layout manager was not yet part of the core Java platform in J2SE 5.0. The Swing Layout Extensions are still available, but now that functionality also exists in the core libraries of the Java SE 6 platform.

You can use NetBeans IDE 5.5 to develop applications and UIs for Java SE 6 or earlier Java platform versions. If you write applications for any platform version prior to Java SE 6, you must continue to use the Swing Layout Extensions. However, the new GUI builder can also generate your UI using the layout manager functionality supported in the Java SE 6 platform. In the latter case, you do not need to use or include the layout extensions in your final product.

If you create a new project in NetBeans IDE 5.5 and your target platform is Java SE 6, the GUI builder will automatically generate your UI using the Java SE 6 platform's core libraries. However, if you import an old project into NetBeans IDE 5.5, you should manually update the project's layout to use the new Java SE 6 platform libraries. Of course, you can still use the layout extensions if you like, but doing so is not necessary with the Java SE 6 platform.

You can change the Layout Generation Style for your UI by accessing the properties for your form. In the NetBeans IDE GUI Builder main window, make sure the Design mode is active. This shows your UI design graphically in the Design pane. Click on the form in the Inspector pane to see the form's properties. One of the properties is Layout Generation Style. You can select either Standard Java 6 Code or Swing Layout Extensions Library. Changing this setting does not affect how your UI will look, but it does change how the GUI builder generates the code to create the UI. Figure 16 shows the Layout Generation Style property.

<!---->

Figure 16. Select a Layout Generation Style to use either core libraries for the Java SE 6 platform or the Swing Layout Extensions for earlier Java platform versions.

 
<!----><!---->

Summary

NetBeans IDE GUI Builder helps you create professional-looking UIs. It does this by guiding your choices for component placement and size using the Free Design layout mode. This mode lets you drag and drop GUI components onto a panel or frame. Although you can place components wherever you want, NetBeans IDE GUI Builder provides position hints that make your design look right regardless of the host platform. If you use the Free Design concept, the NetBeans IDE GUI Builder will implement your UI design using GroupLayout, a layout manager that controls component size and position as well as the space among components at runtime. These platform-independent designs produce platform-specific layouts at runtime. You will always know what to expect at runtime because you will be able to preview your GUI design while you create it.

NetBeans IDE GUI Builder also helps you create internationalized applications that are easy to localize. Internationalization wizards will help you extract localizable text to create locale-specific resource files. To improve productivity and simplify how you use your own or third-party GUI components, NetBeans IDE lets you add those components to the component palette. To use a new graphical component, you just drag and drop it from the palette onto your form or panel.

Finally, the NetBeans IDE 5.5 GUI Builder works well with the Java SE 6 platform. The GUI builder can produce layout implementations that use the new GroupLayout layout manager in the Java SE 6 platform, or it can use Swing Layout Extensions that run on previous Java platform versions. Whether you use the old extensions or the new layouts available in the Java SE 6 platform, the NetBeans IDE 5.5 GUI Builder helps you create great-looking GUIs.

<!---->