Getting Started

A Scorekeeper is valuable for all kinds of situations. Keeping Score in games, counting the males/females in a room, and playing the 50 states game, in which you try to name all 50 states, and you get close to the end and you have no idea whether you got them all. (you could use the counter and know when you hit 50) Another really useful and simple program that we are not going to make is program the has a list of strings, and it tells you if a new string is in the list or not. and lets you add it if not. (try playing categories without it, "have we said that already???") I leave this as an excersize to the reader.

This tutorial will show you how to create a Java program with a Graphical User Interface (GUI), using Netbeans.

We will be making a Scorekeeper, because I often need one, and it's a good simple GUI program. The Scorekeeper will allow you to increment one or more counters by pushing buttons. This program will show you the current count of each counter, and allow you to reset them.

Start a new desktop application in netbeans

First, you will need Netbeans. Download it, install it, and run it. You should see something like this when you start the program.

Select "New Project" from the file menu.

The "New Project" dialog menu comes up. Select "Java" in the Categories menu, and "Java Desktop Application" in the Projects menu, then click next twice.

The next important screen is the Name and Location. The only thing you need to change here is the name. Please call your project "Scorekeeper" so your file names will be the same as the ones you see here.

After clicking finish, Netbeans will change the view and open a few files. wait for everything to come to a complete stop before messing with anything. This could take about 15 seconds.

Netbeans has done all the work for you! You already have a program with a window, menu, and status bar. This is the starting place of most GUI programs. The view you are seing is a WYSIWYG editor for the window layout. Netbeans allows you to build GUIs by dragging things like buttons and text fields into the window from the pane at the right.

Go ahead and run the program now to make sure everything is configured correctly, and to familiarize yourself with the method.

To run the program, click the big green play button at the top of netbeans.

You should see this window pop up. Take a look around and close it before returning to Netbeans.

At this point we are also going to deploy the application so we know how to do that as well. With a typical project, you would repeat this step often, so it is wise to go ahead and do it right away, to be familiar with it.

Click "Clean and Build". It's a hammer and broom icon right next to the big play button.

This will create a .jar file which contains the entire application. You could send people just that file, and (almost) anyone with a JVM will be able to run it by just double clicking it.

To find the .jar file, look in the output pane for this line, and copy the path. Your's will not be in the same location as mine. Go find it, and double click it just to make sure it works.

Back in Netbeans, take a look at the tabs. These are the files Netbeans has open (and a worthless tab called "Start Page" which you may close) You may have to use the arrows to navigate if your window is small.

All of these are Java source files. Each one defines a single class. The two on the right define graphical elements, and Netbeans allows you to either look at the WYSIWYG editor or the source, using the two buttons that say "Source" and "Design". Switch back and forth and take a look at the source code Netbeans generated, but don't change anything yet.

I will be talking about switching between different files often in these tutorials, and you need to know where your files are, and how to switch to any file, and view it in either Source, or Deisgn mode if applicable.



Designing the scorekeeper interface

We could allow the user to change the number of counters, but that is beyond the scope of this tutorial, because dynamic interfaces (when the visible GUI elements are changing at run time) requires us to change the code that Netbeans generated. It's a bad design anyways, because it adds complexity for a feature you will almost never need.

We know we need some buttons to push to increment the counters, and we need the see the counts. We need to decide where to put these elements.

We also need to decide how many counters there should be. 4 is probably enough.

We will also need a way to reset the counters, We could have a button that resets them all at once, or buttons for each one. Good interfacce designers recognise that even though both of these designs are good enough, One of them is better and that you need to think about how the program will be used enough to know which one it will be. I don't know yet, but after I use the scorekeerep a few times in real situations, I'll know which one it is. (I may not need it at all because I'll just close the program when I'm done with it.) When in doubt, remember K.I.S.S. - Keep It Simple Stupid.

In keeping with the principle of modularity, we will design one counter, and copy it 4 times.

Go to ScorekeeperView.java, in Design mode, and from the "Swing Containers" section in the "Pallete" pane (the thing full of GUI elements on the right), drag a "Panel" onto the main window of our project.

The pane below the Pallete is the properties editor. It allows you to change the properties of the selected GUI element. Select the panel if it is not already selected, and change it's background color to blue and the border to BevelBorder. (So you can see it) You must click on the small button with "..." on it to get a color picker or option picker. In case you have never noticed, The elipsis has long been used in menus and buttons to inidcate that a dialog window will open when you click the item.

Drag a Button and a Label in to the blue panel and arrange them like they are in this screenshot. Change the font of the label to 36 point Helvetica, and the text of the label to a three digit number for now so you can see how well it fits in the panel.

Remember, you change all of these things in the property editor, simply scroll down to "Text" or Font", and click the "..." button. If you can't find them, make sure you have "Properties" selected. That pane has several modes, as you can see from the buttons.

Duplicate may not exactly copy the element. It somehow loses the fonts of labels, so you will have to fix that manually for each one.

When you are done arranging the counter, save all files.

Right click the blue panel, (not the button or label, you may have to click it at the edge) and select "Duplicate".


If you somehow get yourself in this situation:
Just open the "Inspector" pane and double click "FrameView" to get back to the whole window.

Do that 4 more times until you have 4 counters.

The font sizes of the labels may not copy correctly, and you will have to fix them. Also, the sizes of everything will be messed up and you will have to fix that too. These are typical disadvantages of working with a WYSIWYG editor.

In the screenshot below I have also arranged them all and changed the colors. I have deleted the menu bar and the status bar, and I have changed the "Preferred Size" of the main frame.



Adding Functionality

Actually you should remove some functionality (the menu and statusbar). This is optional but suggested.
Removing the Menu and Statusbar

Now we are going to make those buttons actually increment the counters when we click them.

In the Design mode of ScorekeeperView.java, select the button on the first counter, and click "Events" near the Properties pane.

In the events panel, find mousePressed and click the elipsis button (...). It will bring up this window. We are going to add an event handler to the button, so that we can execute some code when it is pressed.

Click Add...

When you get back to the previous screen, click OK.
Netbeans will create a method for you, and take you to the source view, and place your cursor in the method. This is where you will put the code that will be executed when the button is pushed.

Increment a counter, and change the text of the corresponding label.
We'll declare the variable for the counter in just a second.

Put these two lines in the event handler.

    private void count1Pressed(java.awt.event.MouseEvent evt) {
        counter1++;
        jLabel2.setText(""+counter1);
    }

Also, declare these variables after all the other variable declarations.

    private int counter1 = 0;
    private int counter2 = 0;
    private int counter3 = 0;
    private int counter4 = 0;

Repeat the process of adding event handlers for all the other buttons.

Change the default value of the labels to 0 and test the application.

Save it, clean and build, then test the .jar

Finished Product!


Download the Netbeans Project
Download the runnable .jar file