The GUI Builder is the primary workspace within which GUI design takes place in the IDE. The GUI Builder enables you to lay out forms by placing components where you want them and by providing visual feedback in the form of guidelines.

Designing Java GUIs with the GUI Builder

The IDE's GUI Builder enables you to design GUI's (graphical user interfaces) visually. As you create and modify your GUI, the IDE automatically generates the Java code to implement the interface. GUI forms are indicated by form nodes ( ) in the Projects, Files, and Favorites windows.

Using the GUI Builder

Whenever you open a GUI form, the IDE displays it in a Editor tab with toggle buttons enabling you to switch between Source and Design views. The Design view enables you to work with GUI forms visually while the Source view permits editing of the form's source code directly. Each time you select a form's Design toggle button, the Palette, Inspector, and Properties windows appear automatically.

Typically, components are added to a form using the Palette window and arranged in the GUI Builder workspace. As you work, the GUI Builder automatically displays guidelines suggesting preferred alignment and anchoring for the components you add. Using the Inspector window in conjunction with the Properties window, you can then examine and adjust properties of a form's components and layout managers, manage component event handlers, and define how code is generated.


Guarded Blocks

As you work with a form in the Design view, code is generated automatically by the GUI Builder and is displayed in the Source view with a blue background. This code is called guarded text and is not directly editable.

Guarded text generated by the GUI Builder's includes:

• Blocks of components' variable declarations.
• The initComponents() method, in which form initialization is performed. This method is called from the form's constructor and though it is not editable manually, you can affect the way it is generated by editing the Code properties in the component's property sheet.
• The header (and trailing brace) of all event handlers.

GUI Form Hierarchy in the IDE

The IDE's Inspector window provides a hierarchical tree view of the form's various components. Each form is represented by a root node ( ) within which all components in the form's class are contained. All other GUI components are organized into one of the following two subnodes:

• Form Container node ( ). Represents the top level of the form's hierarchy and contains the visible components currently displayed in the GUI Builder.
• Other Components node ( ). Contains the form's non-visual components.

Notes:

• To use the GUI Builder, you must work with files that were created with the IDE's GUI form templates. You cannot use the GUI Builder to edit GUI forms that were created outside of the IDE.
• You can combine FreeDesign containers and containers using other layout managers together in the same form.
• Forms created in earlier versions of the IDE are not automatically converted to the FreeDesign layout manager and remain editable in the same way as before.
• New containers added to forms created in earlier versions of the IDE do not assume the FreeDesign layout manager in order to ensure code compatibility. However, you can set it manually in the Set Layout submenu.

Options Window: Miscellaneous: GUI Builder

You use this panel to configure code generation properties for the GUI Builder.

You can access this panel by choosing Tools > Options from the main menu, clicking the Miscellaneous category and then clicking the GUI Builder tab.

Code Generation settings

• Generate Components as. Select how the GUI Builder components are generated.
• Variables Modifier. Select from the drop-down list an access modifier for variables generated for components on the form.
• Listener Generation Style. Determines how the code for component events and their handlers is generated. All of the options produce functionally equivalent code, but each option has different performance qualities. Select one of the following options from the drop-down list:
• Anonymous Innerclasses. One anonymous innerclass is generated for each event. This option might have a negative impact on the performance and memory of the application because the application must load and keep open many classes when the form is executed.
• One Innerclass. One common innerclass is generated for the whole form. This innerclass implements all necessary listeners and dispatches all events to the attached event handlers. The resulting code is less compact and slightly less efficient, but the anonymous innerclasses are eliminated. This option is particularly suitable for large forms with many components and event handlers.
• Main Class. The form's main class implements the listeners. No special innerclass for events is generated. This is the most efficient option, but it does not work well with all types of forms. This option should only be used if the form class does not declare any listener implementation that could interact with events that are generated by components in the form.
• Automatic Internationalization. Select an option from the drop-down list to specify if the GUI Builder should automatically generate the properties files where internationalized strings are stored.
• Fold Generated Code. If selected, generated code is folded in the Source Editor.
• Show Assistant. If selected, the GUI Builder Assistant is displayed in design view.         

GUI Builder Tasks: Quick Reference

The following table describes common GUI Builder tasks.

To perform this task	Follow these steps
Reload a form.	Do one of the following: Press Ctrl-R in either the GUI Builder or the Source Editor. Right-click the root node of the form in either the Files window, Projects window, or Inspector window and select Reload Form from the contextual menu.
Create a menu bar.	In the Palette window, click a JMenuBar ( ) or MenuBar ( ) component. Click anywhere in the JFrame, JDialog, or JApplet container to which you want to add the menu bar. If this is the first menu bar you have added to the form, the menu bar appears visually on the form. If this is not the form's first menu bar, the menu appears below the Other Components node in the Inspector window and is not visible in the form.
Add a menu to a menu bar.	Right-click the menu bar in the Inspector window and choose Add JMenu or Add Menu from the contextual menu. If you wish to name the new menu, expand the menu bar node in the Inspector window, right-click the newly created menu node, and choose Properties. Then enter the desired name for the text property.
Add a menu item.	In the Inspector window, right-click the menu to which you would like to add an item. Choose Add from the contextual menu and then choose an item from the submenu. If you wish to rename the new menu item, expand the menu node in the Inspector window, right-click the newly created menu item, and choose Properties. Then enter the desired name for the text property.
Create a contextual menu.	In the Palette window, click the JPopupMenu ( ) or PopupMenu ( ) contextual menu component. Click anywhere in the form to add the contextual menu. The new menu appears under the Other Components list in the Inspector window.
Add an event handler to a component.	Do one of the following: Select the component in the Inspector window. Then click the Events button in the Properties window and select the desired event property. Right-click the component in the Inspector window or GUI Builder and choose the desired event from the Events menu in the contextual menu. Use the Connection wizard by clicking the connection icon in the GUI Builder toolbar, next clicking the source component, and then clicking the target component.
Configure the GUI Builder.	Choose Tools > Options. Select the GUI Builder Settings node. Edit the desired GUI Builder properties.
Move or copy a component.	Select the component in the GUI Builder or Inspector window. Right-click the component and choose Cut or Copy from the contextual menu. Right-click the destination container in the GUI Builder or Inspector window and choose Paste from its contextual menu. The component or components are moved or copied with all properties intact. Events are maintained only if you are pasting within the same form.
Edit component labels.	Select the component in the GUI Builder and do one of the following to display the in-place editing field: Press the spacebar. Click the component again. Right-click the component and choose Edit Text from the contextual menu. Type the new label and press Enter.
Create a Palette window category.	Choose Tools > Palette > Swing/AWT Components. In the Palette window, right-click any existing category button and choose Create New Category from the contextual menu. Type a name for the new category in the dialog box that appears and click OK.
Create a Palette window category.	Choose Tools > Palette > Swing/AWT Components. Click the New Category button. Type a name for the new category in the dialog box that appears and click OK.
Remove a Palette window category.	Choose Tools > Palette > Swing/AWT Components. Click the Remove button. Click Yes in the dialog box that appears.
Copy a palette category item.	Choose Tools > Palette > Swing/AWT Components. In the Palette, right-click any existing component and choose Copy from the contextual menu. Right-click the Palette category in which you wish to place the component and choose Paste > Copy.
Remove a palette category item.	Choose Tools > Palette > Swing/AWT Components. Click the Remove button. Click Yes in the dialog box that appears.
Add a bean to the Palette window.	Choose Tools > Palette > Swing/AWT Components. If you wish to create a new category for the bean, click New Category before you add the bean. Click Add from JAR, Add from Library, or Add from Project. Complete the wizard to add the bean.

- Wagner R. Santos