Introduction to GUI Building

Exercise 1: Creating a Project

The first step is to create an IDE project for the application that we are going to develop. We will name our project NumberAddition.

1. Choose File > New Project. Alternatively, you can click the New Project icon in the IDE toolbar.
2. In the Categories pane, select the Java node. In the Projects pane, choose Java Application. Click Next.
3. Type NumberAddition in the Project Name field and specify a path, for example, in your home directory, as the project location.
4. (Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and specify the location for the libraries folder. See Sharing Project Libraries for more information on this option.
5. Deselect the Create Main Class checkbox if it is selected.
6. Click Finish.
   

   Exercise 2: Building the Front End

   To proceed with building our interface, we need to create a Java container within which we will place the other required GUI components. In this step we'll create a container using the JFrame component. We will place the container in a new package, which will appear within the Source Packages node.
   

   Create a JFrame container

   1. In the Projects window, right-click the NumberAddition node and choose New > Other.
   2. In the New File dialog box, choose the Swing GUI Forms category and the JFrame Form file type. Click Next.
   3. Enter NumberAdditionUI as the class name.
   4. Enter my.numberaddition as the package.
   5. Click Finish.

   The IDE creates the NumberAdditionUI form and the NumberAdditionUI class within the NumberAddition application, and opens the NumberAdditionUI form in the GUI Builder. The my.NumberAddition package replaces the default package.
   

   Adding Components: Making the Front End

   Next we will use the Palette to populate our application's front end with a JPanel. Then we will add three JLabels, three JTextFields, and three JButtons. If you have not used the GUI Builder before, you might find information in the Designing a Swing GUI in NetBeans IDE tutorial on positioning components useful.
   Once you are done dragging and positioning the aforementioned components, the JFrame should look something like the following screenshot.
   

   

   If you do not see the Palette window in the upper right corner of the IDE, choose Window > Palette.
   

   1. Start by selecting a Panel from the Swing Containers category on Palette and drop it onto the JFrame.
   2. While the JPanel is highlighted, go to the Properties window and click the ellipsis (...) button next to Border to choose a border style.
   3. In the Border dialog, select TitledBorder from the list, and type in Number Addition in the Title field. Click OK to save the changes and exit the dialog.
   4. You should now see an empty titled JFrame that says Number Addition like in the screenshot. Look at the screenshot and add three JLabels, three JTextFields and three JButtons as you see above.

   Renaming the Components

   In this step we are going to rename the display text of the components that were just added to the JFrame.
   

   1. Double-click jLabel1 and change the text property to First Number
   2. Double-click jLabel2 and change the text to Second Number
   3. Double-click jLabel3 and change the text to Result
   4. Delete the sample text from jTextField1. You can make the display text editable by right-clicking the text field and choosing Edit Text from the popup menu. You may have to resize the jTextField1 to its original size. Repeat this step for jTextField2 and jTextField3.
   5. Rename the display text of jButton1 to Clear. (You can edit a button's text by right-clicking the button and choosing Edit Text. Or you can click the button, pause, and then click again.)
   6. Rename the display text of jButton2 to Add.
   7. Rename the display text of jButton3 to Exit.

   Your Finished GUI should now look like the following screenshot: