Coding a Simple Java User Interface Using NetBeans and Swing

Setting Up the NetBeans Project

Create a new Java Application project in NetBeans with a main class We'll call the project

Check Point: In the Projects window of NetBeans should be a top-level GuiApp1 folder (if the name is not in bold, right-click the folder and choose

). Beneath the

folder should be a Source Packages folder with

called GuiApp1. This folder contains the main class called

.java.

Before we add any Java code, add the following imports to the top of the

class, between the

line and the

:

These imports mean that all the classes we need to make this GUI application will be available for us to use.

Within the main method, add this line of code:

This means that the first thing to do is to create a new 

object. It's a nice short-cut for example programs, as we only need one class. For this to work, we need a constructor for the

class, so add a new method:

In this method, we'll put all the Java code needed to create the GUI, meaning that every line from now on will be inside the

method.

Building the Application Window Using a JFrame

Design Note: You might have seen Java code published that shows the class (i.e.,

) extended from a

. This class is then used as the main GUI window for an application. There really isn't any need to do this for a normal GUI application. The only time you would want to extend the

class is if you need to make a more specific type of

(take a look at

for more information on making a subclass).

As mentioned earlier, the first layer of the GUI is an application window made from a

. To create a

object, call the

constructor:

Next, we'll set the behavior of our GUI application window, using these four steps:

1. Ensure that the application closes when the user closes the window so that it does not continue to run unknown in the background:

2. Set a title for the window so the window doesn't have a blank title bar. Add this line:

3. Set the window size, so that the window is sized to accommodate the graphical components you place into it.

Design Note: An alternative option for setting the size of the window is to call the

method of the

class. This method calculates the size of the window based on the graphical components it contains. Because this sample application doesn't need to change its window size, we'll just use ​the

method.

4. Center the window to appear in the middle of the computer screen so that it does not appear in the top left-hand corner of the screen:

Adding the Two JPanels

The two lines here create values for the

and

objects we'll be creating shortly, using two

arrays. This makes it easier to populate some example entries for those components:

Create the first JPanel Object

Now, let's create the first

object. It will contain a

and a

. All three are created via their constructor methods:

Notes on the above three lines:

• The

  JPanel

  variable is declared final. This means that the variable can only hold the

  JPanel

  that's created in this line. The result is that we can use the variable in an inner class. It will become apparent why we want to later on in the code.
• The

  JLabel

  and

  JComboBox

  have values passed to them to set their graphical properties. The label will appear as "Fruits:" and the combobox will now have the values contained within the

  fruitOptions

  array declared earlier.
• The

  add()

  method of the

  JPanel

  places graphical components into it. A

  JPanel

  uses the FlowLayout as its default layout manager. This is fine for this application as we want the label to sit next to the combobox. As long as we add the

  JLabel

  first, it will look fine:

Create the Second JPanel Object

The second

follows the same pattern. We'll add a

and a

and set the values of those components to be "Vegetables:" and the second

array

. The only other difference is the use of the

method to hide the

. Don't forget there will be a

controlling the visibility of the two

. For this to work, one needs to be invisible at the start. Add these lines to set up the second

:

One line worth noting in the above code is the use of the

method of the

. The

value makes the list display the items it contains in two columns. This is called a "newspaper style" and is a nice way to display a list of items rather than a more traditional vertical column.

Adding Finishing Touches

The last component needed is the

to control the visibility of the

s. The value passed in the

constructor sets the label of the button:

This is the only component that will have an event listener defined. An "event" occurs when a user interacts with a graphical component. For example, if a user clicks on a button or writes text into a textbox, then an event occurs.

An event listener tells the application what to do when the event happens. 

uses the ActionListener class to "listen" for a button click by the user.

Create the Event Listener

Because this application performs a simple task when the button is clicked, we can use an anonymous inner class to define the event listener:

This may look like scary code, but you just have to break it down to see what is happening:

• First, we call the

  addActionListener

  method of the

  JButton

  . This method expects an instance of the

  ActionListener

  class, which is the class that listens for the event.
• Next, we create the instance of the 

  ActionListener

  class by declaring a new object using

  new ActionListener()

  and then providing an anonymous inner class — which is all the code inside the curly brackets.
• Inside the anonymous inner class, add a method called

  actionPerformed()

  . This is the method that is called when the button is clicked. All that's needed in this method is to use 

  setVisible()

   to change the visibility of the

  JPanel

  s.

Add the JPanels to the JFrame

Finally, we need to add the two

s and

to the

. By default, a

uses the BorderLayout layout manager. This means there are five areas (across three rows) of the

that can contain a graphical component (NORTH, {WEST, CENTER, EAST}, SOUTH). Specify this area using the

method:

Set the JFrame to Be Visible

Finally, all of the above code will have been for nothing if we don't set the 

to be visible:

Now we're ready to run the NetBeans project to display the application window. Clicking on the button will switch between showing the combobox or list.