Describing GUI Building on NetBeans IDE

Introduction

 

This article shows how to create a GUI, in other words, a Graphical User Interface and add a few back-ends functionalities using the NetBeans IDE. You will be able to work with jLabel, jTextField, jComboBox and jButton easily using NetBeans.

 

Initial Stage: Creating a project

 

Use the following procedure to create the project:

1. Select "File" -> "New Project" from the main menu bar.
2. Select Java in categories and "Java Application" in the project. Click the "Next" button.
3. Write WelcomeApp in the Project Name and specify the path.
4. You can choose "Use Dedicated Folder for Storing Libraries" to specify the location for the library folder. This step is optional.
5. Deselect the "Create Main Class" CheckBox if selected. Finally, click "Finish". Now your project's initial stage of project creation is complete. Now we will build the Front-End.

Creating the Front-End

• Creating a jFrame Container:

1. In the project window you will see a node with your project name, WelcomeApp; right-click on this node and select "New" -> "Other".
2. A dialog box with the name New File will appear, select Swing GUI Forms in categories and jFrame Form file type then click "Next".
3. Type WelcomeAppUI as class name and my.welcomeapp as the package.
4. Finally click the "Finish" button.
   
   After following the preceding steps the NetBeans IDE creates the WelcomeAppUI form and also the WelcomeAppUI class on the WelcomeApp application and finally opens a WelcomeAppUI form in the GUI builder. Our my.WelcomeApp package replaces the default package.

• Adding Components to Front-End:
  
  Now we will be using the palette to populate our application front-end with a jPanel. Then we will be adding some of the components like jLabel, jTextField, jButton etcetera. The design of our application will look as in the following screenshot.

 

 

1. Pick the jPanel from the Swing Container in the Palette and drop it onto the jFrame.
2. Select the border of the jPanel by clicking on the ellipsis (...) button next to Border.
3. In the border dialog box, select "Titled Border" from the list and write "Welcome App" for the title TextField provided. And proceed according to the preceding screenshot and design the application.

• Editing the Text of the Components Added:

1. Double-click on the JLabel1 and rename it to First Name.
2. Double-click on the JLabel2 and rename it to Last Name.
3. Double-click on the JLabel3 and rename it to Interest.
4. Right-click on the jTextFields and select "Edit Text" from the pop-up menu and delete the default text.
5. Rename the JButton1, JButton2 and JButton3 to "Submit", "Clear" and "Exit" respectively by right-clicking on each button and selecting "Edit Text" from the pop-up menu.
   
   Finally the Application front-end will look as in the following screenshot.

 

• Adding Functions to the Buttons:
  
  To handle the occurrence of the events, in other words when an action is performed on the button by clicking on it by the mouse or pressing it using the keyboard, it must be able to perform its task. This functionality is provided by using ActionEvent of ActionListener.

1. Functionalities of the "Exit" button:

• Right-click on the "Exit" button and select "Events" -> "Action" -> "actionPerformed" from the pop-up menu.
• When the actionPerformed event is selected, the NetBeans IDE will add ActionListener to the "Exit" button of its own. And a handler method will be generated to handle the actionPerformed method.
• The IDE will take you to the source code window automatically and the cursor will be on the actionPerformed method of the "Exit" button. 

The default code that will appear is as follows:

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt)
{
        // TODO add your handling code here:
}

Now we need to edit the code. Replace the comment with System.exit(0); and the code is as follows:

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt)
{
        System.exit(0);
}

2. Functionalities for the "Clear" button.

• Click on the "Design" button at the top and now right-click on the "Clear" button and select "Events" -> "Action" -> "actionPerformed" from the pop-up menu.
• Now edit the code to be as in the following code:

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt)
{
        jTextField1.setText("");
        jTextField2.setText("");
        jTextField3.setText("");
        jTextField4.setText("");
}

The code above will clear all the four jTextFields.

1. Functionalities of the "Submit" button.
   
   The "Submit" button will pick the data inserted by the user and work according to the following statements:

• Click on the "Design" button and right-click on the "Submit" button then select "Events" -> "Action" -> "actionPerformed".
• Edit the Code as follows:

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)
{
 String nm=jTextField1.getText();
 String nb=jTextField2.getText();
 jTextField4.setText("WelcomApp Welcomes you "+nm+" "+nb);
 jTextField3.setText("You like "+Interest.getSelectedItem());
}

Now our code for the WelcomeApp is complete.

• Running the Program
  
  Select "Run" -> "Run Main Project" and you can just press F6. The output screenshots are provided below.
  
  Before clicking on the Submit Button:

 

 

 

After clicking on the Submit Button:

 

 

 

Click the "Exit" button to Quit.