Create A Simple Java GUI Application Using The Netbeans

Note

The screenshots shown here might differ slightly according to the version of Netbeans and the OS you’re using.

This tutorial will show you how to create a simple Java GUI application using the Netbeans. For this reason, our first GUI will be a single window application with a JButton, JTextField and a custom graphics object based on a JPanel. We will eventually create 3 classes in 3 different files. The first class will contain the main method, and merely instantiate a new copy of an extended JFrame. The second class will be our extended version of a JFrame. The third class will eventually contain our version of an extended JPanel, on which we will draw some simple graphic objects.

Getting started

Start a new Netbeans project in the usual way.

Click File, New Project:

Choose a name and location for your project (guiproject), then untick the box to create a project main class. Click finish to create the project structure.

2. Add a JFrame object to the Project

Now right click on guiProject folder in the Source Packages folder. Select ‘new’ then ‘JFrame Form’ as shown below.

The screen should appear as below, requesting you to enter a name for your new class name, that will be an extended version of the existing JFrame class. Make sure the Package field matches the initial Package name of the project (guiprojects).

When you click on Finish, a new class will be added to your source code tree (myFrame.java), and the Netbeans IDE looks something like this below.

You can click between two different views of this new file – the Design mode is shown above, and the source code underlying it, is shown below.

Notice the line highlighted in blue, marked with the comment ‘Generated Code’. Open up this code fold (click on the ‘+’ in the margin) and you will see following

This ‘blue’ code has been automatically generated by Netbeans. You should recognise some of the statements from the lectures. Netbeans is taking care of component initialisation, layout managers and other low level details for you automatically. You cannot edit the ‘blue’ code as Netbeans manages this. It will be changed when you use the GUI Design tools.

Netbeans maintains an XML file (called myFrame.form) that defines the GUI layout and the generated code. If you edit the blue code elsewhere, Netbeans will merely recreate the original from the XML file the next time it is run. Switch back to the design view. On the right hand side of the screen you should see a palette of components. There are three or four sections of components. Make sure the ‘Swing Controls’ section is highlighted. Click on the icon labelled Button and drag it to the form

You can drag the component around the form to position it accurately. Now select the TextField icon from the Swing palette. Drag it across to the display form and position it as required. This is also shown on the next screen shot.

When you are happy with the positioning of your two components, click on the JButton again, and look at the properties field in the lower right hand corner as shown above. There are four tabs here – Properties, Binding, Events and Code. Make sure the ‘Properties’ tab is selected and browse around the options. Fields such as ‘text’ allow you to change the buttons caption to something more informative than JButton1.

Now select the ‘Events’ tab as shown on the next slide. Click on the right hand column of the actionPerformed line. This will automatically generate some code to handle the user clicking on the button.

If you now select the Source tab again you will find the following code added. This is shown in the next screenshot

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

Add this line to the ‘TO DO add handling code here’ section as shown below

 jTextField1.setText ("Hello World"); 

Compile and run your application.

You should see a window appear as in the next but one screen shot. Click on the button, and the textField should change to “Hello World” as illustrated You have now completed a simple GUI application, with only three lines of your code.

3. Extending and adding a JPanel component

The application looks rather empty at present. We will now create our own subclass of a JPanel component and override its paintComponent() method. This will give us a Graphics object to use, with access to ‘pens’, ‘brushes’ and other low level drawing tools.

Once we have designed our customised JPanel, we can place it on Netbeans GUI component palette as a new component, and use it in any other Java GUI application. To start, right click on guiProjects folder in the Source Packages folder again. This time, select ‘new’, then JPanel Form as shown below. This will create a new class, subclassed from JPanel

The screen should appear as below, requesting you to enter a name for your new JPanel. Make sure the Package field matches the initial Package name of the project (guiprojects). Enter a name such as myPanel and click Finish. Note, you are extending an existing JPanel object in the standard Java way with this operation

4. Overriding the paintComponent() method.

Once Netbeans has created your second class (myPanel) make sure the code editor tab is set to show this new class. Also, make sure you have switched to the ‘Source’ page, not the ‘Design’ page. You can enter text for the overridden paintComponent() method as follows:

@Override  
public void paintComponent(Graphics g) 
      {    
          super.paintComponent(g);  
          g.drawString("Hello World", 40, 40);  
      }

This will add a paintComponent() method to the myPanel.java source code.

Your myPanel class should look as follows

Go to the paintComponent() method in the source code. Before compiling and running our program, let’s also change the background colour of myPanel. This can be done at run time within paintComponent(), but we can also change it at design time, here

Select the ‘Design’ tab again, then move over to the properties section. Make sure the ‘Properties’ tab is selected, as shown below.

Find the ‘Background’ entry and click on the three dots (…) to the right. This will bring up a colour selection dialog. Choose a suitable colour and click OK.

For convenience, it would also be a good idea to reduce the default size of myPanel by grabbing the corner and shrinking it down. The reason for this is that Netbeans uses the same default size for JFrames and JPanels. We want myPanel to fit on myFrame with room for other components as well. It isn’t important – we can still resize myPanel when we are adding it to myFrame using the GUI editor.

5. Add our new Component (myPanel) to the Netbeans Palette

Build your application now, but don’t run it, to check for any compilation errors. We still have to add myPanel as a component to myFrame. We can do this manually, by adding code to the myFrame() constructor method, but an easier way is to use the Netbeans GUI editor.

Right click on myPanel.java in the projects window, as shown below, and select ‘Tools’ then ‘Add to Palette’. This will allow us to add our new component to Netbeans stock of components available at design time. The next window but one will appear – note there are 9 different palettes to choose from. Select ‘Beans’ it has the least other components in it.

6. Add the new component to myFrame.

Select the myFrame.java file again, and ensure ‘Design’ mode is highlighted. Move to the palette on the right and scroll down to Beans. You may have to click on it to expand it. The new component ‘myPanel’ should be there. Select it and drag it to a suitable position on myFrame. You can resize it and adjust other properties just like its parent, JPanel.

You will notice that the previously chosen background colour, and the custom code added to paintComponent() will appear, even though we are in design mode, not running the proper program. However, once it is added to myFrame, you can change the background colour to something else if you wish – remember that myPanel inherits all the properties of JPanel.

Now build and run your program

Thanks for reading our blog, contact us to get any Java Programming Help, Java Assignment Help, Java Homework Help at realcode4you@gmail.com and get instant help with an affordable price.