Building an SDI Application with NetBeans

by Chuck Emerson-Henry

This tutorial shows you how to build a Single Document Interface (SDI) application with NetBeans. It presumes that you know what an SDI user interface is and that you want to build one with NetBeans.

You can find more about SDI interfaces here: additional SDI information.

In this tutorial you will build a NetBeans project with a main window and two child windows that display traffic camera pictures that update several times per minute. The traffic cam images are from the Minnesota Department of Transportation Web site. You can see that site here: MDOT Traffic Cameras .

Prerequisites for this tutorial

• This tutorial presumes that you have some programming experience, but not necessarily Java nor NetBeans experience.
• If you are not familiar with building a GUI application with NetBeans, see Talley Mulligan's tutorial, GUI Building in NetBeans IDE 5.5 .

Software Needed for the Tutorial

The software you need for this tutorial includes NetBeans IDE 5.5 and JDK 6. download NetBeans 5.5 with JDK 6 .

Creating the Application's Main Window

In this part of the tutorial you will create a NetBeans project and the main window for the application.

Create the Project

To create the main window for the SDI application you first create a NetBeans project. To create the SDI application project do the following:

1. Close all projects
2. From the main File menu choose File then from the popup menu choose New Project -- a New Project dialog box will open
3. In the Categories panel select General and in the Projects panel select Java Application, then click the Next button -- a New Java Application dialog box opens (Figure 1)
4. For Project Name enter: SDIApplication
5. If the Project Location is not where you want the application to reside, type the location or use the browse button to set the project location
6. Be sure that the Set as Main Project check box is selected and that the Create Main Class check box is not selected (Figure 1)
7. Click the Finish button
   

Figure 1

The IDE creates the project subdirectories and populates them with project files. The Projects window and the Navigation window in Figure 2 show files and components created by the IDE. (Figure 2 also shows the JFrame that you will create next.)

Figure 2

Create the Application Window

The next thing to do is to create an application GUI container with a JFrame. The JFrame container is where the GUI components for the application's main window will reside. To create the main application window, do the following:

1. In the Projects panel, right click on Source Packages (Figure 3)
2. From the popup menu choose New, then choose JFrame Form -- a New JFrame Form dialog box displays (Figure 4)
3. For Class Name enter SDIAppMainWindow and for Package enter sdiappgui
4. Click the Finish button.
   

Figure 3


Figure 4

NetBeans creates the SDIAppGui package and the Java file for the SDIAppMainWindow class, then shows the blank JFrame in the Design Editor window (Figure 2). The Projects window, Projects tab, shows the files created for the project and the Navigator window Inspector tab shows components created for the application.

If you try to run the application you won't see much, but try running it anyway. To compile and run the application click on the Run menu then click on Run Main Project. (Or click on the tool bar button for running the main project.)

You should see a dialog box telling you that there is no main application class to compile and run. Recall that earlier you told NetBeans not to create a main class. SDIAppGui.SDIAppMainWindow should be highlighted as a suggested class to create and compile. Click the OK button. NetBeans will chug away compiling the application and in a moment a blank window will display. That's the application thus far. Close the window.

Figure 3. Creating a JFrame Form

What you put on your main application window is up to you, but for this tutorial you will need to put a few things on it to open other windows.

All you have at this point is a JFrame with nothing on it. You will add a JPanel onto the JFrame to have a container to hold stuff. You will also add a menu to invoke the secondary or child windows that you will create shortly.

Before you start adding components to the JFrame you might want to make the main application window open in the center of the screen and give the application a title in the main window title bar. To center the main application window do the following:

1. Right-click the JFrame and choose Properties
2. Click on the Code tab (Figure 5)
3. For Form Size Policy choose Generate Resize Code
4. Be sure Generate Center is checked
5. Click the Close button
   

Figure 5

Your application will now open in the center of the screen. Run the application to test it.

To give your application a title, right click on the JFrame again and re-open its properties dialog box. Click the properties tab. For the title property type: Traffic Cameras. Close the dialog box and rerun the application. You should see the title in the window's title bar when you run the application.

Add Components to the Application Window

Before you add components to your application, you might want to think about naming conventions. You will be placing Swing components onto the JFrame and NetBeans will create default names for those components, for example, jPanel1, jLabel1, etc. It is good policy to give meaningful names to components so that you later can easily identify them.

Rename the JFrame to: frameMain. To do this, reopen the frame's properties dialog box. Click the Properties tab and scroll down to the name property. Type frameMain for the name property. Close the dialog box.

Now add Swing components to the JFrame. The NetBeans IDE will have to be displaying the Design Editor window as shown in Figure 2. The Palette window is in the upper right of the IDE. You can add components by dragging them to the JFrame, or by clicking on a component in the palette, then clicking on the JFrame.

Add a menu to the main application window:

1. In the Swing palette, click on JMenuBar
2. Move your mouse curser to the JFrame and click on it, or drag the menu component and drop it on the JFrame
3. On the Inspector tab of the Navigation window, right click on jMenuBar1 [JMenuBar] (Figure 6) and change the menu's name to: menuMain.
4. In the Navigation window expand jMenuBar1 [JMenuBar] and and you will see that NetBeans created a menu item: jMenu1 [JMenu].
5. Right click on jMenu1 [JMenu], choose Edit Text, then change the text to Quit
6. Right click on jMenu1 [JMenu], choose Change Variable Name..., and change the component's name to menuMainQuit
7. Right click on menuMain [JMenuBar] and from the popup menu choose Add jMenu -- a new menu item, jMenu1 [JMenu] is added.
8. Right click on jMenu1 [JMenu], choose Edit Text, then change the text to Cam 1
9. Right click on jMenu1 [JMenu], choose Change Variable Name..., and change the component's name to menuMainCam1.
10. Right click on menuMain [JMenuBar] and from the popup menu choose Add jMenu -- a new menu item, jMenu1 [JMenu] is added.
11. Right click on jMenu1 [JMenu], choose Edit Text, then change the text to Cam 2
12. Right click on jMenu1 [JMenu], choose Change Variable Name..., and change the component's name to menuMainCam2.

Add a JPanel:

1. Scroll down in the Swing palette until you see the JPanel component
2. Click on the JPanel component in the palette, then click on the JFrame
3. Position the JPanel in the upper left of the JFrame, about 1/8 inch from the top and left
4. Move your mouse cursor over the bottom right of the JPanel and drag the panel to the right and down such that it is equally spaced on the top, left, right and bottom of the JFrame

Add a border to the JPanel:

1. Right click inside the JPanel, then select Properties from the popup menu
2. In the properties dialog box click on the Properties tab then click on (No Border) -- a border dialog box pops up.
3. Choose EtchedBorder, then click the OK button
4. Close the properties dialog box -- the Inspector tab in the Navigator window (Figure 6) shows the JPanel that you just added.
5. Right click on jPanel1 [JPanel] in the Navigator window (Figure 7) and choose Change Variable Name... -- a dialog box pops up.
6. Change the panel name to panelMain
7. Click the OK button

Run your application. You should see a menu at the top of the application and a frame inside the application window.

Figure 6


Figure 7

You now have a NetBeans project, an application window, and a menu for the application. Later you will add code to menu events. The next thing to do is to create the child windows.

Creating the Child Windows

Now that you have your main application window you can create the child windows. For this tutorial you will create two windows. In a real application you would likely have numerous child windows, but for this tutorial two child windows will suffice to demonstrate an SDI user interface.

Your child windows will be JDialog components. You will be adding two JDialog components to your main application to create the child windows. Go to the NetBeans Design Editor window.

Create the Child Windows

1. From the Swing palette find the JDialog component and click on it
2. In the Design Editor window click on the Jpanel or the JFrame -- a JDialog is added to your application and shows on the Navigator window Inspector tab (Figure 6)
3. In the Navigator window, right click on jDialog1 [JDialog] and select Change Variable Name...
4. In the pop up dialog box enter the name cam1Win
5. Click the OK button -- the Navigator window shows the new JPanel name
6. Open the properties dialog box for cam1Win and change the title property to: Camera 1

Repeat steps 1 through 6 above for the second child window, but in step 4 name the window cam2Win, and in step 6 change the title to Camera 2.

Add JLabels to the Child Windows

1. In the Navigator window Inspector tab, double click on firstChildWin [JDialog] -- the dialog box shows in the Design Editor window.
2. From the Swing Palette, click on Label then click on the JDialog panel in the Design Editor Window
3. Position the JLabel such that it is about 1/8 inch inside the JDialog panel on all sides
4. In the Navigator window right click on jLabel1 [JLabel] and choose Edit Text
5. Delete the text
6. Right click on jLabel1 [JLabel] again and choose Change Variable Name... and change the name to lblImage1.

Repeat steps 2 through 6 above for the second child window, but in step 6 name the JLabel lblImage2.

The JLabel components are containers for the traffic camera images.

Your child windows are ready to be used by the main application window. Now you will add Java code to open the child windows and to display the traffic images.

Adding Code

In this part of the tutorial you will add code to the main menu to close the application and code to open the child windows. You will also add code to the child windows to display the highway camera images.

Rather than typing the code in the steps below, copy the code from this Web page and paste it into your application source at the appropriate places.

Add Import Statements

Before adding code in the steps below, add the necessary import statements. This will prevent NetBeans from complaining that it can't find classes used in the code that you will be adding.

• From the Source Editor window, at the top of the code immediately below package SDIAppGu; add these import statements:

import java.awt.Image;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.net.MalformedURLException;
import java.net.URL;
import javax.swing.AbstractAction;
import javax.swing.Action;
import javax.swing.ImageIcon;
import javax.swing.Timer;

Add Code to the Main Menu

On the main menu you need to add code to quit the application and code to open the child windows. Click on the design button so that the design editor window shows.

1. From the Inspector tab in the Navigator window, right click on menuMainQuit [JMenu]
2. From the popup menu choose Events > Mouse > mouseClicked
3. NetBeans creates the following code:

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

1. Replace the comment // TODO add your handling code here: with System.exit(0);.

The System.exit(0); statement closes the application, destroys all objects created by the application, and frees memory used by application objects.

1. Go back to the design editor window and in the Navigator window right click on menuMainCam1 [JMenu] and from the popup menu choose Events > Mouse > mouseClicked.
2. NetBeans creates the following code:

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

1. Replace the comment with this code:

 
      cam1Win.setBounds(0,0,400,400);
      cam1Win.setVisible(true);

The first statement sets the location of the child window to the top left of the screen with a width and height of 400 pixels. The second statement displays the window.

1. Right click on menuMainCam2 [JMenu] and from the popup menu choose Events > Mouse > mouseClicked.
2. NetBeans creates the following code:

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

1. Replace the comment with this code:

      cam2Win.setBounds(400,0,400,400);
      cam2Win.setVisible(true);

Note that this second window has a setBounds statement that positions it 400 pixels from the left so that it does not overlap the first window.

Now the main application menu items have code to quit the application and to open the child windows. Run the program and click on the menus to see that they work. Notice that with the child windows open, when you close the main application window, the child windows also close.

Add Code to the Child Windows to Create the Highway Cams

Now you will create the highway camera objects for the child windows. When run, this code will connect to the Minnesota Department of Transportation Web site and retrieve camera images. Before you run the application be sure your computer is connected to the Internet.

1. In the Navigator window Inspector tab right click on firstChildWin [JDialog] and from the popup menus select Events > Window > windowActivated.
2. NetBeans creates the following code:

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

1. Replace the comment with this code:

      Action updateImage1 = new AbstractAction() {
        public void actionPerformed(ActionEvent e) {
          URL u = null;
          lblImage1.setIcon(null);
          try {
            u = new URL("...");
            Image img = Toolkit.getDefaultToolkit().createImage(u);
            ImageIcon pic = new ImageIcon(img);
            lblImage1.setIcon(pic);
          }
          catch (MalformedURLException mue){
            mue.printStackTrace();
          }
        }
      };     
      new Timer(7000, updateImage1).start(); 

This code retrieves a highway camera image from the MNDOT web site and creates an image object for it. Then the code assigns the image to the JLabel (lblImage1.setIcon(pic)) icon property. An action even is wrapped around the image retrieval so that a Swing timer can repeatedly call the code to refresh the image. The last statement in this code, new Timer(7000, updateImage1).start();, starts a Swing timer that refreshes the image about four times a minute.

1. In the Navigator window Inspector tab right click on secondChildWin [JDialog] and from the popup menus select Events > Window > windowActivated.
2. NetBeans creates the following code:

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

1. Replace the comment with this code:

      Action updateImage2 = new AbstractAction() {
        public void actionPerformed(ActionEvent e) {
          //System.out.println("object doesn't exist" );
          URL u = null;
          lblImage2.setIcon(null);
          try {
            u = new URL("...");
            Image img = Toolkit.getDefaultToolkit().createImage(u);
            ImageIcon pic = new ImageIcon(img);
            lblImage2.setIcon(pic);
          }
          catch (MalformedURLException mue){
            mue.printStackTrace();
          }
        }
      };     
      new Timer(7000, updateImage2).start();    

This code is slightly different from that in the first child window. The action event name, the image URL camera number, and the JLabel name that contains the image are different. The MNDOT traffic cameras do go down occasionally, so if, when you run the application, a child window does not display an image within a couple minutes, go to the MNDOT site and choose a camera. Then use that camera number in place of the 624 or 848 in the above code.

That's it. You now have an SDI application that does something (Figure 8). A couple notes before you run the application. When you run the application it will take a minute for the images to show in the child windows. It takes a minute or so for the timers to start, get the images from the URL and display the image. Also, because you have a timer or two running, when you try to close the application, it will not respond immediately.
Figure 8

Summary

This tutorial showed you how to create a Java SDI application using NetBeans. You saw how to create a NetBeans project and an application window, and how to create child windows that are invoked from the main application window.

Attachments

---