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.

Choose File > New Project. Alternatively, you can click the New Project icon in the IDE toolbar.
In the Categories pane, select the Java node. In the Projects pane, choose Java Application. Click Next.
Type NumberAddition in the Project Name field and specify a path, for example, in your home directory, as the project location.
(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.
Deselect the Create Main Class checkbox if it is selected.
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

In the Projects window, right-click the NumberAddition node and choose New > Other.
In the New File dialog box, choose the Swing GUI Forms category and the JFrame Form file type. Click Next.
Enter NumberAdditionUI as the class name.
Enter my.numberaddition as the package.
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.

JFrame with 3 JLabels, 3 JButtons, and 3 JTextFields

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

Start by selecting a Panel from the Swing Containers category on Palette and drop it onto the JFrame.
While the JPanel is highlighted, go to the Properties window and click the ellipsis (...) button next to Border to choose a border style.
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.
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.

Double-click jLabel1 and change the text property to First Number
Double-click jLabel2 and change the text to Second Number
Double-click jLabel3 and change the text to Result
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.
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.)
Rename the display text of jButton2 to Add.
Rename the display text of jButton3 to Exit.

Your Finished GUI should now look like the following screenshot:

Exercise 3: Adding Functionality

In this exercise we are going to give functionality to the Add, Clear, and Exit buttons. The jTextField1 and jTextField2 boxes will be used for user input and jTextField3 for program output - what we are creating is a very simple calculator. Let's begin.

Making the Exit Button Work

In order to give function to the buttons, we have to assign an event handler to each to respond to events. In our case we want to know when the button is pressed, either by mouse click or via keyboard. So we will use ActionListener responding to ActionEvent.

Right click the Exit button. From the pop-up menu choose Events > Action > actionPerformed. Note that the menu contains many more events you can respond to! When you select the actionPerformed event, the IDE will automatically add an ActionListener to the Exit button and generate a handler method for handling the listener's actionPerformed method.
The IDE will open up the Source Code window and scroll to where you implement the action you want the button to do when the button is pressed (either by mouse click or via keyboard). Your Source Code window should contain the following lines:
```
private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
    //TODO add your handling code here:
                }
```
We are now going to add code for what we want the Exit Button to do. Replace the TODO line with System.exit(0);. Your finished Exit button code should look like this:
```
private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
    System.exit(0);
                } 
```

Making the Clear Button Work

Click the Design tab at the top of your work area to go back to the Form Design.
Right click the Clear button (jButton1). From the pop-up menu select Events > Action > actionPerformed.
We are going to have the Clear button erase all text from the jTextFields. To do this, you will add some code like above. Your finished source code should look like this:
```
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){
    jTextField1.setText("");
    jTextField2.setText("");
    jTextField3.setText("");
                }
```

The above code changes the text in all three of our JTextFields to nothing, in essence it is overwriting the existing Text with a blank.

Making the Add Button Work

The Add button will perform three actions.

It is going to accept user input from jTextField1 and jTextField2 and convert the input from a type String to a float.
It will then perform addition of the two numbers.
And finally, it will convert the sum to a type String and place it in jTextField3.

Lets get started!

Click the Design tab at the top of your work area to go back to the Form Design.
Right-click the Add button (jButton2). From the pop-up menu, select Events > Action > actionPerformed.

We are going to add some code to have our Add button work. The finished source code shall look like this:

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt){
    // First we define float variables.
    float num1, num2, result;
    // We have to parse the text to a type float.
    num1 = Float.parseFloat(jTextField1.getText());
    num2 = Float.parseFloat(jTextField2.getText());
    // Now we can perform the addition.
    result = num1+num2;
    // We will now pass the value of result to jTextField3.
    // At the same time, we are going to
    // change the value of result from a float to a string.
    jTextField3.setText(String.valueOf(result));
                    }

Our program is now complete we can now build and run it to see it in action.

Exercise 4: Running the Program

To run the program in the IDE:

Choose Run > Run Main Project (alternatively, press F6).
Note: If you get a window informing you that Project NumberAddition does not have a main class set, then you should select my.NumberAddition.NumberAdditionUI as the main class in the same window and click the OK button.

To run the program outside of the IDE:

Choose Run > Clean and Build Main Project (Shift-F11) to build the application JAR file.
Using your system's file explorer or file manager, navigate to the NumberAddition/dist directory.
Note: The location of the NumberAddition project directory depends on the path you specified while creating the project in step 3 of the Exercise 1: Creating a Project section.
Double-click the NumberAddition.jar file.

After a few seconds, the application should start.

Note: If double-clicking the JAR file does not launch the application, see this article for information on setting JAR file associations in your operating system.

You can also launch the application from the command line.
To launch the application from the command line:

On your system, open up a command prompt or terminal window.
In the command prompt, change directories to the NumberAddition/dist directory.
At the command line, type the following statement:
```
java -jar  NumberAddition.jar
```
Note: Make sure my.NumberAddition.NumberAdditionUI is set as the main class before running the application. You can check this by right-clicking the NumberAddition project node in the Projects pane, choosing Properties in the popup menu, and selecting the Run category in the Project Properties dialog box. The Main Class field should display my.numberaddition.NumberAdditionUI.

my blog eight

Senin, 28 Januari 2013