GUI Building in NetBeans IDE 3.6 This short tutorial guides you through the process of creating an application called ColorSwitch. You will build a simple program that enables you to switch the color of a panel from light gray to medium gray to black. During the process of creating ColorSwitch, you will learn how to do these tasks: 1. Create a container from a template and place it in a project 2. Select a layout manager, add label and button components to a container, edit the component properties, and create connections between the components 3. Edit Java source code by adding the event handler code 4. Compile and run an application 5. View the class hierarchy, if desired This tutorial takes less than an hour to complete. Creating a Container The top-level container that you create holds the other components (button and label) in your application. You create the container using the JFrame component and place the container in the colorswitch package. (A package is a group of related Java classes and interfaces.) To create the container: 1. Somewhere on your machine's file system, create an IDETutorial directory. 2. Choose File Mount Filesystem. 3. Select Local Directory and click Next. 4. Navigate to your IDETutorial directory, select it, and click Finish. The IDETutorial directory is mounted in the Filesystems window. 5. In the Filesystems window, right-click the IDETutorial node and choose New JFrame Form. 6. Type ColorSwitch in the Name text field. 7. Click Finish. A node for the ColorSwitch Form object is added to the IDETutorial directory in the Filesystems window. The ColorSwitch node can be expanded to display the nodes for the ColorSwitch class and the ColorSwitch form. In addition, two tabs appear in the Source Editor for the ColorSwitch file. The first tab displays the Java source code for the ColorSwitch class. You can type only in the white areas of the Source Editor. The second tab shows the ColorSwitch class in the Form Editor. When you select the Form Editor tab, three windows appear to the right of the Source Editor:
o o o Palette. Contains tabs for various AWT, JFC/Swing, and JavaBeans components, along with a selection of layout managers and border styles. Inspector. Provides a tree hierarchy representation of the components in your application. Properties. Displays the properties of the whatever is selected in the Inspector, Form Editor, or Filesystems window. Selecting a Layout Manager A layout manager assists you in determining the size and position of the components within a container. Each container type has a default layout manager. BorderLayout is the default layout manager for the JFrame component. BorderLayout divides the container into five sections (north, south, east, west, and center). In this step, you switch to the GridLayout layout manager, which creates sections equal in size and displays them in the requested numbers of rows and columns. To change layout managers: 1. In the Palette, click the Layouts tab. The Layouts tab provides access to the layout managers in the Java Foundation Classes (JFC). When you move your mouse pointer over a button in the layouts toolbar, a tool tip displays the name of the layout manager represented by that button. 2. Click the GridLayout button ( ) in the Layouts tab. 3. Click anywhere on the grey ColorSwitch form in the Form Editor to set the layout manager. The GridLayout is added to the JFrame's component hierarchy in the Inspector. 4. In the Inspector, select GridLayout in the component hierarchy. The properties of the layout manager appear in the Properties pane below the Inspector. 5. In the property sheet, set the Columns property to 1 and the Rows property to 2. Press Enter after each entry to change the property values. Although the Form Editor does not display a grid, it now contains a single column and two rows. Adding a Label and Setting Its Properties Your application uses a blank label with an opaque background to display the colors. You need to add the label and set its properties.
To add a label: 1. Click the Swing tab on the Palette. 2. Click the JLabel button from the Swing palette. 3. Click anywhere on the ColorSwitch form in the Form Editor. A label with the text jlabel1 is displayed in the Form Editor. In the Inspector, a node named jlabel1 [JLabel] is displayed and highlighted in the tree view. The properties for the component are displayed in the Properties pane. Source code for the label is displayed in the Source Editor. 4. In the Properties tab, scroll to the text property and delete jlabel1, leaving the value blank. Press Enter. 5. Scroll down to Other Properties and check the check box for the opaque property. All you should see in the Form Editor is a line that demarks the edge boundaries of the jlabel1 component. Adding a Button You will now add the button that operates the ColorSwitch application. To add a button: 1. In the Swing palette, click the JButton button. 2. Click anywhere on the ColorSwitch form in the Form Editor. The button is displayed in the Form Editor, its corresponding node is displayed in the Inspector, and its source code is displayed in the Source Editor. 3. In the Properties tab of the Properties pane, set the text property to Switch Color. 4. In the Properties tab, click the ellipsis (...) button for the font property. 5. In the jbutton dialog box, select Bold for font style and 14 for font size. Click OK. The button label, Switch Color, should appear in larger bold type. You should see Switch Color in half of the Form Editor pane. In the other half, you should see an empty space with a dark boundary line between the two components. Setting Up the Button to Switch Color To add the mouse event: 1. In the Inspector, select the jbutton1 node (if it is not already selected). 2. In the Events tab of the Properties window, select the mouseclicked property. The value changes from none to jbutton1mouseclicked.
3. Press Enter. The Source Editor switches to the tab containing the Java source code for the ColorSwitch class and displays the listener code jbutton1.addmouselistener and event method jbutton1mouseclicked(). Adding Event Handler Code Now that the jbutton1mouseclicked() method has been created, you can add custom code for handling this event. You want a click of the button to change the color of the label. To add the code: 1. In the Source Editor toolbar, locate the Quick Browse combo box and select JButton1 from the list of your ColorSwitch application's elements. The cursor appears at the beginning of the JButton1 variable declaration in a blue guarded block. Guarded blocks of Java code generated by the Form Editor have a light blue background and cannot be edited. 2. Move the cursor to the line below the variable declaration section (on or about line 71) and declare the following new variable: 3. private java.awt.color currentcolor = java.awt.color.lightgray; You can display line numbers in the Source Editor by right-clicking in the left margin and choosing Show Line Numbers. 4. 5. Select jbutton1mouseclicked in the Quick Browse combo box. Place the cursor after //Add your handling code here: below the guarded block (on or about line 53) and type the following: 6. if (currentcolor == java.awt.color.lightgray) 7. currentcolor = java.awt.color.gray; 8. else if (currentcolor == java.awt.color.gray) 9. currentcolor = java.awt.color.black; 10. else 11. currentcolor = java.awt.color.lightgray; 12. jlabel1.setbackground (currentcolor); Note that the last line is jlabel with the number one ("1") before the period and not the letter "l". 13. 14. Save the file by choosing File Save (Ctrl + S).
Compiling and Running Your Program Now that you have created the user interface and the connections between the components, you can compile and run your application. To compile and run the program: 1. Compile ColorSwitch by choosing Build Compile (F9). If the build is successful, the "Finished ColorSwitch" message appears in the status bar in the main window. If there are problems with the build, error messages are displayed in the Output window. You can double-click an error message to jump to the line in the source code where the error occurred. Once the build is successful, you can run the application. 2. Run ColorSwitch by choosing Build Execute (F6). You can also skip step 1 and simply execute your program. The IDE will compile any classes that are out of date before running the program. 3. 4. If there are no execution errors, the IDE displays the Output and Execution windows. 5. The ColorSwitch application is displayed: 6. 7. In the application, click the button three times to check that the label area above the button changes from light gray to medium gray to black. 8. Exit the application.