AWT Support

Once you have added one of the above forms into your application, the Design editor appears in NetBeans along with the Palette. Figure 4-3 shows the available widgets you can drag and drop onto the AWT form. AWT forms support different layouts, which you can set by right-clicking on the form and selecting Set Layout from the pop-up menu.

Swing Support

Similar to AWT, the New File wizard offers you the choices shown in Figure 4-4.

Figure 4-5 shows the available widgets in the palette to drag and drop onto a Swing form. You see the various widgets grouped in categories (e.g., Swing Containers, Swing Controls, Swing Menus, Swing Windows, and Swing Fillers).

The Apache NetBeans visual editor allows you to develop your GUIs by using drag and drop of components (or widgets) from the palette onto it. Just right-click inside the JFrame and select the Set Layout menu item (see Figure 4-6). You’ll see the default choice is not a traditional Swing/AWT layout manager; it’s something named Free Design. This means you are using the Matisse visual GUI builder, which was introduced in NetBeans 5. Matisse configures the JFrame to use the GroupLayout layout manager developed in the SwingLabs java.​net project.

Aligning Components

To help us lay out controls within a form, Apache NetBeans provides a toolbar (see Figure 4-7) along the top of the design view, containing tools to align and preview forms.

• Source view displays the source code for the form.

• Design view displays the GUI designer.

• History displays the source code local history and can be useful if you need to revert to previous versions.

• Selection mode: allows components to be selected.

• Connection mode: allows creating connections between two components so that an event on one component can trigger an event on another component.

• Preview design: allows previewing how the form will be displayed at runtime.

• Align Left In Column: allows multiple components to be left-aligned.

• Align Right In Column: allows multiple components to be right-aligned.

• Center Horizontally: allows multiple components to be centered horizontally.

• Align Top In Row: allows multiple components to be top-aligned.

• Align Bottom In Row: allows multiple components to be bottom- aligned.

• Center Vertically: allows multiple components to be centered vertically.

• Change Horizontal Resizability: resize the selected component horizontally rather than being anchored to the left and right of other components.

• Change Vertical Resizability: resize the selected component vertically rather than being anchored to the top and bottom of other components.

Matisse also allows a group of selected components to be centered down the axis of the first selected component. Horizontal and vertical centering are available. Multiple components must be selected; then all are centered on the widest selection. Another option allows centering components horizontally and vertically in their parent container. We shall see some examples later in this chapter.

Anchoring Components

As the name implies, anchoring a component to a position means that the component will stay in that position relative to other components or boundaries even if its container is resized.

When we anchor a component, we are basically saying that when we resize the form, we want the component to stay aligned with another component. So, for example, if we anchor a JLabel to the bottom right of a JFrame, when we expand the JFrame, the label will stay at the bottom right. To indicate that a widget is anchored to another object, Apache NetBeans displays a dotted horizontal or vertical line, ending at the boundary that the component is anchored to. If a component is not anchored on a particular edge, a zigzagged line is displayed indicating that the location of the component may expand in the specified direction. In Figure 4-8, the JLabel is anchored to the bottom right of the frame. There is, therefore, a dotted line between the label and the bottom and right edges of the JFrame and a zigzagged line between the left and top edges of the JFrame.

You may also right-click on the widget and select Anchor ➤ (Left, Right, Top, Bottom) from the context menu.

Resizing Components

When we resize a form, anchored components move along to stay in their position while the form is resized, but they are not resized themselves.

If we want to allow a component to resize when a form is resized, we must specify that the component can auto-resize. Right-click on the component and select the Auto-Resizing menu item and choose either Horizontal or Vertical (or both). Figure 4-9 shows the JLabel of Figure 4-8 that can be auto-resized both horizontally and vertically. You now notice that both zigzagged lines have been transformed to dotted lines.

You may also double-click on each of the surrounding empty spaces and define the exact size of the space using the Edit Layout Space dialog box.

To set two or more widgets to the same size, select them, right-click any one of them, and choose Set the Same Size ➤ Set Width (or Same Size ➤ Set Height) from the contextual menu.

Properties

The Properties window is broken down into three categories:

• Properties tab (see Figure 4-10): editable properties for the selected component can be edited in this section. Properties are usually grouped in the following groups: Properties, Other Properties, Layout, and Accessibility.

• Events tab (see Figure 4-11): allows defining what actions are performed on a component when certain events (for example, mouse click, key pressed, etc.) are triggered. For example, to define an actionPerformed() on a button, click on the drop-down menu next to the actionPerformed event (a small black down arrow); a pop-up is displayed, suggesting a name for the event handler. This name consists of the name of the widget being edited, together with the name of the event. Upon selecting the name for the event handler, NetBeans automatically opens up the Source window, placing the caret ready for entering the event handler code. You will notice that the source code editor contains areas that cannot be edited. This is necessary because this code is automatically generated by the GUI Builder, and changing this code manually might break this binding between the code and the GUI designer. Finally, click on the … button in the GUI designer to add, remove, or rename an event handler.

• Code tab (see Figure 4-12): allows providing custom code snippets for a component, for example, any pre/post initialization code, etc.

Note

Older versions of NetBeans (before the donation to Apache) had also a Binding tab. This has, unfortunately, been removed from Apache NetBeans due to licensing issues and due to the fact that JSR 295 (https://jcp.org/en/jsr/detail?id=295) has not become official. Take a look at this JIRA item (https://issues.apache.org/jira/browse/NETBEANS-530) for more information.

You can modify a property in one of three ways:

• By directly editing its value,

• By using the drop-down menu (if one exists),

• By using the custom editor (via the … button).

Connection Tool

Apache NetBeans provides an easy way to make connections between components, using the Connection Mode button (see Figure 4-7). Clicking on that button, NetBeans will display a message asking to select the component that will generate the event:

Upon selecting the source component, NetBeans displays a message, asking to select the component that will receive the event:

Upon selecting a component to receive the event, NetBeans will display the Connection Wizard window of Figure 4-13.

Select the source event, click Next, and specify the target operation (see Figure 4-14).

In the next step, you need to enter how the target will be modified (see Figure 4-15).

To view an example project that illustrates Swing forms, create a new project (menu File ➤ New Project), choose the Samples/Java category and the GUI Form Examples file type. The generated project contains three examples of Swing forms (Antenna, ContactEditor, and Find) that give you some ideas of the capabilities that Apache NetBeans IDE provides to design GUIs. The Anagram Game under the same category is another example.

JavaFX Support

Apache NetBeans allows you to create JavaFX projects by clicking on File ➤ New Project menu item. You may create Ant-based or Maven-based JavaFX projects. Select Java with Ant ➤ JavaFX category and choose one of the available JavaFX projects as shown in Figure 4-16. Or select the Java with Maven category and choose JavaFX Application project. In the first case, you can create a JavaFX application developing the GUI using Java code, or use an FXML file to script the GUI widgets of your application. You may also create an application that mixes Swing and JavaFX components.

Once you have created your JavaFX application, you may add additional JavaFX classes of FXML files by using the File ➤ New File wizard as shown in Figure 4-17.

Apache NetBeans doesn’t provide a GUI designer for JavaFX applications, like the Matisse GUI builder for Swing. One can, however, integrate SceneBuilder with NetBeans. SceneBuilder (see Figure 4-18) allows you to build JavaFX applications graphically. Oracle has stopped support of the SceneBuilder, which latest version is 2.0 (http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html). Gluon (https://gluonhq.com/products/scene-builder/) has taken over support and development of SceneBuilder. We shall see shortly how to set up Apache NetBeans to use SceneBuilder.

Sven Reimer’s Monet (http://plugins.netbeans.org/plugin/55434/monet-the-javafx-scene-builder-integration) plugin is an attempt to run SceneBuilder from within NetBeans to build the GUI of JavaFX applications the same way as when you use Matisse to build the GUI of your Swing applications.

Design the Main Tasks List Window

Create a new package by right-clicking on the todo package, selecting New ➤ Java package from the pop-up menu and giving the package name todo.view.

Now right-click the todo.view package icon and choose New ➤ Other (or choose File ➤ New File from the main menu), then select the Swing GUI Forms category and the JFrame Form file type (see Figure 4-4) and click Next.

In the next step of the wizard, type TasksWindow as the class name and press Finish. The IDE opens the visual form editor, as shown in Figure 4-1; notice also the location of the Projects, Navigator, and Properties windows; the Palette and the editor area.

An orange frame highlights the selected component (the JFrame content pane in Figure 4-1). The navigator displays all visual and nonvisual components of the JFrame, which is handy when you need to change the properties of a component hidden by another or one too small to be selected in the editor. On the right you see the component palette , which shows by default the standard Swing components (you can also add third-party JavaBeans by right-clicking on it and choosing Palette Manager), as well as the Properties windows. Properties are categorized to ease access to the ones most commonly used, and changed properties have their names highlighted in bold.

Let’s create the GUI of our prototype. From the palette, drag the toolbar icon and drop it over the JFrame . You’ll notice that a placeholder for the toolbar follows the mouse pointer, and that the visual editor displays guidelines when it’s close to the edges of the JFrame, as shown in Figure 4-22. These guidelines help you keep controls aligned and spaced out inside the container. Matisse generates the layout constraints to maintain the positioning of each component when the container is resized or when the Look and Feel (L&F) is changed.

Move the toolbar on the top-left corner of the JFrame, and then drag the right border so that it becomes attached to the right border of the JFrame, thus filling up all the top part of the window (see Figure 4-23).

Repeat the process to insert a JLabel attached to the bottom of the JFrame. This label will be used as the status bar for the tasks window. Then add a JScrollPane, filling up the area between the JToolbar and the JLabel.

Now try resizing the JFrame content pane. The JToolbar, JLabel, and JScrollPane should resize to keep the borders attached to the JFrame’s corners and to each of the other borders.

You may give more descriptive names to the variables of the various widgets, by right-clicking on each of them in the Navigator window and selecting Change Variable Name from the pop-up menu. From the same context menu, you can modify the widget’s displayed text by selecting Edit Text action.

Next, let’s add a JTable inside the JScrollPane and create the toolbars’ buttons in order for the TasksWindow to start resembling the sketch of Figure 4-19.

You may use the icons provided together with the sources of this book. Copy the icons folder inside the Source Packages of the Todo project.

Non-Java files inside the Source Packages folder will be added by Apache NetBeans to the resulted application jar file that will be created inside the dist folder, and the application will be able to refer to them as classpath resources, no matter where the jar file is installed on the user machine. As a bonus, the application code doesn’t have to worry about platform-specific details like path separators and drive letters.

To add a button to the toolbar, drag it from the palette onto the toolbar. Clear the text property and click on the … button of the icon property to display the editor shown in Figure 4-24. Choose the appropriate package (icons) and the appropriate icon file.

NetBeans also provides a customizer to define the JTable’s model property. Make sure to select the JTable widget from the Navigator window (and not the JScrollPane) and click on the … button of its model property. The dialog box of Figure 4-25 appears. I have edited the columns to look like the application we wish to develop. However, this customization is only useful for prototyping, as in the real application the model will be created from real (Task) objects. Typically, the customization of JTables will require the development of custom Java classes like cell renderers and editors, column models, etc.

Finally, we need a menu bar. Go on and drag a Menu Bar widget from the palette on the top of the form. Use the Navigator window or click directly on the Menu Bar on the GUI designer to add the menus, as shown in Figure 4-26 (left as an exercise to the reader). You can choose between JMenuItem, JCheckBoxMenuItem, JRadioButtonMenuItem, JMenu, and JSeparator. You can also add mnemonics by setting this property for the menu item (and/or the accelerator property). The accelerator is a key stroke that calls the action directly (e.g., F11 key in Figure 4-26). The mnemonic is a key stroke that accesses the menu item using the keyboard in combination with the Alt key. For example, you can access the File menu (not the underlying F) by pressing Alt+F.

Click on the Preview button of the GUI designer’s toolbar (Figure 4-7) in order to view how the TasksWindow will behave during runtime (see Figure 4-27). You can navigate the menus, interact with the JTable; the Preview is quite powerful.

Design the Task Details Dialog

According to Figure 4-19, there is a dialog to create/edit tasks. Right-click the todo.view package and select New ➤ Other. Select the Swing GUI Forms category and the JDialog Form file type (see Figure 4-4). Provide the class name TaskDetailsDialog and press Finish.

Add a JLabel attached to the left, top, and right borders of the dialog, with no spacing; it will serve as a message area for validation errors and the like. Rename it to lblMessageArea (right-click it in the Design view, then select Change Variable Name from the pop-up menu) and set its opaque property and the background color so that it looks like a band at the top of the dialog. Also add an EmptyBorder (border property) so there’s empty space around the text and the band’s borders.

Next add three JLabels for the description, priority, and due date fields (edit the text labels to Description, Priority, and Due Date respectively and rename the variables to lblDescription, lblPriority, lblDueDate respectively). Attach all three to the left of the JDialog internal area (the drawing area). Leave some spacing between the components and the border. Resize the two shorter labels to attach their right borders to the right border of the larger one. Then select the three labels (with Shift + click) and change the horizontalAlignment property to RIGHT.

Then add a JTextField next to the Description label (rename it to txtDescription) and a JSpinner (rename it to spPriority) next to the Priority label. Make sure that the guidelines keep the label and the field baseline aligned. The JSpinner does not provide any property to set a preferred or minimum width, while the JTextField uses the column property for this. However, you can resize the JSpinner and Matisse will set the component’s preferred size in pixels.

We need to restrict the task priority between 1 and 10. Select the JSpinner widget, and in the Properties window, first click on the ellipsis (…) button for the value property, choose Custom code from the combo box, and set spPriority.setValue(1). Then click on the Code button and select the ellipsis (…) button for the Post Creation Code property. Enter the code as shown in Figure 4-28 and click OK. Go to the Source view, right-click inside the editor, and Fix Imports to resolve the errors.

For the due date, we can use a JFormattedText to save the date, but we shall see how to use a Date Picker Swing component instead. There are a number of available solutions, for example: JDatePicker (https://sourceforge.net/projects/jdatepicker/), JDateChooser (http://plugins.netbeans.org/plugin/658/jdatechooser-1-2), LGoodDatePicker (https://github.com/LGoodDatePicker/LGoodDatePicker) and the not maintained anymore SwingX JXDatePicker from SwingLabs (http://www.java2s.com/Code/Jar/s/Downloadswingxall165jar.htm). Unfortunately, none of them stores the picked date using the latest java.time.LocalDateTime. We will see how to integrate SwingX JXDatePicker from SwingLabs (it is left as an exercise to integrate any of the others if you wish). Download it and extract it to a folder on your machine.

Right-click on the palette and select the Palette Manager from the context menu (see Figure 4-29).

Click on New Category button and give the name SwingX. Click the Add from JAR button, select the swingx-all-1.6.5.jar, from the location you downloaded previously, and click Next. In the next step, select all the available components and click Next. In the final step, choose the SwingX category you created earlier and click Finish. You just added a new category in the Palette that contains all the SwingX components.

Drag the JXDatePicker component on the TaskDetailsDialog form next to the Due Date label. Mainly, this is it. I let you explore the API of the widget to find out how to set the date format, if you are not happy with the default one, and how to get/set the date value.

To aid accessibility, it’s a good practice to set the labelFor property on a JLabel to describe which component the label is for. This can greatly enhance the performance of screen readers and other accessibility software.

Add a JLabel (label: Obs:, name: lblObs), a JScrollPane (name: spObs) and inside it add a JTextArea (name: txtaObs), a JCheckBox (text: Completed Task, name: chkCompleted), and four JButtons (text: Save, name: btnSave, text: Cancel, name: btnCancel, text: Clear, name: btnClear, text: Remove, name: btnRemove). The final TaskDetailsDialog form should look like the one in Figure 4-30.

Good UI design makes all buttons from a logical group the same size. Just select all desired buttons (actually you can select any control you want) and right-click any of the selected buttons. Then select Same Size ➤ Same Width and Same Size ➤ Same Height check-box menu items. The drawing area will indicate that the controls were configured to always have the same size.

Our Todo prototype application is now complete, ready to be shown to your customers to get useful feedback before you begin implementing it.

As a final step, you can ask Matisse to automatically internationalize the application’s UI. This means that for each resource that would normally be internationalized by hand, Matisse automatically adds the value supplied in the UI designer to a resource bundle. This is done for all UI elements. The visual localization feature works in harmony with automatic internationalization. Just right-click the root form node (TasksWindow) in the Navigator window, locate the Design Locale combo box in the Properties window (see Figure 4-31), and then select a locale or add a new one (see Figure 4-32). Check the Automatic Internationalization check box in the Properties window, too. Once the Design Locale is selected, you can now simply edit the text in the UI as if normally editing a form. The localization for the Design Locale takes place automatically with the values entered into the UI. The locale can be changed and the form reedited to set the values for the newly selected locale. It is as simple as it sounds to create a fully internationalized UI with Apache NetBeans (see Figure 4-33) to satisfy your customers throughout the globe.