In the previous recipe, we saw how to make a desktop GUI application. In this recipe, we'll see how we can add components onto a form and how we can preview the form at the design time.
For more information on using different Swing components, check out http://docs.oracle.com/javase/tutorial/uiswing/
components/index.html.
Getting ready
To complete this recipe, we need to have the JarViewer project that was created in the Creating a Swing application recipe. If you have not completed this recipe, the source code is available with the code download bundle for this chapter.
How to do it…
1. Ensure that the JarViewer project is open in NetBeans and double-click on the MainFrame.java class to open it for editing.
2. From the Palette section, drag a Label component onto the form's design surface snapping it to the top-left side of the form. When dragging the label onto the form, you will see a horizontal and vertical dotted line when the label is at the preferred distance from the top corner. Drop the label at this point as shown in the following screenshot:
3. Right-click on the dropped label on the design surface and select Change Variable Name….
4. Enter the New Name field as jarLabel.
Some developers like to use Hungarian notation for control names in GUIs to help distinguish the types of components that are being added to a form, for example, lblJarLabel. Throughout this book however, I've not used Hungarian notation to distinguish variable types as the compiler can do this for me. For more information, about Hungarian notation, check out http://en.wikipedia.org/wiki/Hungarian_notation.
5. Locate the text property within the jarLabel [JLabel] – Properties window.
Set the property value to be Jar File.
6. The text displayed for the label on the form will now change to read Jar File.
7. From the Palette section, drop a Button component onto the form at the top right.
Just like when dropping the Label component in step 2, the guidelines will be displayed on the form indicating that the button has been snapped to the top-right side of the form.
8. Right-click on the dropped button on the design surface and select Change Variable Name….
9. Enter the New Name field as viewButton.
10. Right-click on the button once more and select Edit Text.
11. The text displayed on the button will become editable. Enter the text View and press the Return key.
12. From the Palette section, drag a Panel component onto the form, snapping it to the left and bottom of the form. Drag the panel to the right to additionally snap it to the right-hand side of the form as well.
13. Drag the height of the panel to be 16.
14. Right-click on the panel and select Change Variable Name….
15. Enter the New Name field as statusPanel.
16. Locate the border property for the panel within the statusPanel [JPanel] – Properties window.
17. Click on the … button ( ) to open the border property window.
18. Select Bevel Border from the Available Borders section.
19. Select Lowered as the Type field, as shown in the following screenshot:
20. Click on OK.
21. From the Palette section, drag a Label component onto statusPanel aligning it with the bottom-left side of the panel.
22. Right-click on the label and select Change Variable Name….
23. Enter the New Name field as statusLabel.
24. Locate the text property within the statusLabel [JLabel] – Properties window and delete the property value so that no value is set.
25. From the Palette section, drag a Text Field component onto the form's design surface. Snap the Text Field component to the top of the form and the right-hand side of the jarLabel label.
26. Drag the Text Field component to the right and snap it to the left-hand side of the viewButton component.
27. Right-click on the text field and select Change Variable Name….
28. Enter the New Name field as jarName.
29. Locate the text property within the jarName [JTextField] – Properties window and delete the property value so that no value is set.
30. From the Palette section, drag a List control onto the form, snapping it to the left-hand side of the form and to the bottom of the jarLabel component.
31. Drag the List control to the right and snap it to the right-hand size of the form.
32. Drag the List control to the bottom and snap it to the top of the statusPanel component.
33. Right-click on the List control and select Change Variable Name….
34. Enter the New Name field as jarEntries.
We have now completed the design of our form. The completed form should look like the following screenshot:
We could now run our application to see what it looks like; however, NetBeans provides an excellent design-time tool that allows us to preview the form without running the application.
On a small application, there isn't much benefit in previewing forms at design time, but as your application grows, this ability can rapidly increase your productivity.
35. Click on the Preview Design button at the top of the design surface. NetBeans will open a preview version of the form. Resize the form and note that all of the controls on the form correctly resize with the form, as shown in the following screenshot:
How it works…
When designing forms within NetBeans, there is a vast array of components that are available within the Palette section that can be simply dragged-and-dropped onto the design surface.
We can add controls (such as labels, buttons and lists, and so on), Swing fillers, Swing menus, or even other Swing windows (file choosers and color choosers, and so on). We can even add AWT components or our own custom-defined Beans. We can see the Palette window in the following screenshot:
With each control we add, we can choose to either add it at a given size on the form, or snap it to other controls/edges of the form thus providing the ability for controls to properly resize when the form is resized.
Not only can we add controls onto a form, but we can also add controls into other controls. We saw how to add JPanel and then drop JLabel inside it to make a more complicated control.
For each control that we add to the form, there's a corresponding set of properties that can be set for the control. As we've seen previously, these properties can be set at the design time as simple values, or can be implemented as custom code snippets.
There's more...
We can also write custom code that can be triggered at different times during a component's lifecycle. On the Code tab of a component's Properties window, we can specify a lifecycle event (such as Pre-Creation Code or Post-Creation Code) together with the custom code to run. This can be very useful if we wish, for example, to initialize components on a form when they are created.
Using the Binding tab, we can also bind component properties with other JavaBeans components, so, for example, we could automatically update a progress bar based upon some external action.
If you look at many desktop applications, you'll see that many components such as buttons have a shortcut assigned—these are generally referred to as a mnemonic. For example, a button labelled Close will invariably be displayed as Close (note the underlined C) indicating that pressing Alt + C will have the same effect as clicking on the button. We can easily define these keyboard mnemonics in NetBeans by setting the mnemonic property of a component.
In this recipe, we created a JLabel that described another component (we created the JLabel with the text Jar File, which described JTextField next to it). To aid accessibility, it's a good practice to set the labelFor property on a JLabel to describe which component it is the label for. This can greatly enhance the performance of screen readers and other accessibility software.
Wait, what if we want to add more complex components such as toolbars or menus to our application?
Fortunately, this is a simple procedure when using NetBeans.
In the next recipe, we'll take a look at adding menus into our application. In subsequent recipes, we'll show how to add toolbars and then see how to use events to wire up all of these components.
If you want to see some more examples of GUI forms within NetBeans, check out the provided sample applications. When creating a new project, select Samples and then Java from the Categories list. The three sample projects, Anagram Game, GUI Form Examples, and Client Editor, provide further examples of using the NetBeans GUI editor.