cnicollonline

Creating a basic Java UI can be a little overwhelming, but once you understand what’s going on there is not a lot to it. This post is about the Java User Interface and components within it. Today i’ll be covering:

• Creating a JFrame
  • Configuring the window
• Adding a menu bar
  • Adding mnemonics
  • Adding key strokes
  • Adding a popup ‘about’ window

File Setup

The following Java libraries that are used for this section are:

• JFrame

To start the project create the project folder with a bin and src folder. Once setup create the default package which will be used to compile and run the application. In the package create MainDisplay.java This will be the class which runs the application.

/**
 * Project: cnicoll_javaUI
 * File: MainDisplay.java
 * Date: May 6, 2009
 * Time: 11:26:07 AM
 */ 

package cnicoll;

import javax.swing.JFrame;

import cnicoll.ui.MainFrame;

/**
 * @author cNicoll
 *
 */
public class MainDisplay {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub

	}

}

Building the MainFrame (JFrame)

Now that we have the basic structure, create a new extended package that will contain the ui. Within this package create a new class called MainFrame.java and have it extend the JFrame class. MainFrame is a class the will be, well, the main frame of the application. It will be a container which will hold all our application elements and components.

/**
 * Project: cnicoll_javaUI
 * File: MainFrame.java
 * Date: May 6, 2009
 * Time: 11:46:14 AM
 */ 

package cnicoll.ui;

import javax.swing.JFrame;

/**
 * @author cNicoll
 *
 */
public class MainFrame extends JFrame {
	// Instance Variables

	/*
	 * Class Constructor
	 */
	public MainFrame() {
		// Window Name
		super("My Demo Application");
	}
}

Not much here is going on.

super("My Demo Application");

Gives a title to the window. Lets add some more properties to the mainframe, by adding the following below the super call. For further explanation read the Java comments.

// call the method and change the width and height.
setSize(700, 600);
// exit the application on the window close
setDefaultCloseOperation(JFrame.EXITONCLOSE);
// disable window resizing
setResizable(false);
// centers window
setLocationRelativeTo(null);

Next go back to the MainDisplay.java class and create an object that will create the MainFrame when the application is run. NOTE: Also import the class ui package. Your MainDisplay.java should now look like this:

/**
 * Project: cnicoll_javaUI
 * File: MainDisplay.java
 * Date: May 6, 2009
 * Time: 11:26:07 AM
 */ 

package cnicoll;

import javax.swing.JFrame;

import cnicoll.ui.MainFrame;

/**
 * @author cNicoll
 *
 */
public class MainDisplay {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		JFrame _frame = new MainFrame();
		// show the frame
		_frame.setVisible(true);

	}

}

Run the MainDisplay.java class and you should see:

Thats about it when it comes to setting up the main frame. Of course a lot more needs to be done which we will get to, but in order to create a simple JFrame.

1. Set up your application working directory
2. Create a new package with a single class that will hold the main string method
3. Create a new package that will be used for your ui. In this package create a new class called MainFrame.ui
4. Extend the JFrame class and assign the window properties

5. 	public MainFrame() {
   		// Window Name
   		super("My Demo Application");
   		// call the method and change the width and height.
   		setSize(700, 600);
   		// exit the application on the window close
   		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   		// disable window resizing
   		setResizable(false);
   		// centers window
   		setLocationRelativeTo(null);
   	}
   	

6. Create the object within your MainDisplay class

At this point:

• MainDisplay.java should look like:

• 	/**
   * Project: cnicoll_javaUI
   * File: MainDisplay.java
   * Date: May 6, 2009
   * Time: 11:26:07 AM
   */ 
  
  package cnicoll;
  
  import javax.swing.JFrame;
  
  import cnicoll.ui.MainFrame;
  
  /**
   * @author cNicoll, A00572953
   *
   */
  public class MainDisplay {
  
  	/**
  	 * @param args
  	 */
  	public static void main(String[] args) {
  		JFrame _frame = new MainFrame();
  		// show the frame
  		_frame.setVisible(true);
  
  	}
  
  }
  	

• MainFrame.java should look like:

• /**
   * Project: cnicoll_javaUI
   * File: MainFrame.java
   * Date: May 6, 2009
   * Time: 11:46:14 AM
   */ 
  
  package cnicoll.ui;
  
  import javax.swing.JFrame;
  
  /**
   * @author cNicoll
   *
   */
  public class MainFrame extends JFrame {
  	// Instance Variables
  
  	/*
  	 * Class Constructor
  	 */
  	public MainFrame() {
  		// Window Name
  		super("My Demo Application");
  		// call the method and change the width and height.
  		setSize(700, 600);
  		// exit the application on the window close
  		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  		// disable window resizing
  		setResizable(false);
  		// centers window
  		setLocationRelativeTo(null);
  	}
  }
  

Adding a menu bar

The following Java libraries that are used for this section are:

• ActionEvent
• ActionListener
• KeyEvent
• JFrame
• JMenu
• JMenuBar
• JMenuItem
• KeyStroke
• SwingUtilities
• UIManager

A menu bar almost every application will use, and with every menu bar there are certain expectations to be met such as names, mnemonics, keystrokes and the display. To start create a new java class within your ui package and give it the name of MainMenuBar.java . Similar to what we did to the MainFrame we are going to extend this class out to JFrame JMenuBar. Your class should now look like this:

/**
 * Project: cnicoll_javaUI
 * File: MainMenuBar.java
 * Date: May 6, 2009
 * Time: 2:52:21 PM
 */ 

package cnicoll.ui;

import javax.swing.JMenuBar;

/**
 * @author cNicoll
 *
 */
public class MainMenuBar extends JMenuBar {
	// Instance Variables

	/*
	 * Class Constructor
	 */
	public void MainMenuBar() {

	}
}

Next define the instance variables that will be used within the menu bar.

// Instance Variables
private JMenu _file;
private JMenu _lookAndFeel;
private JMenu _help;

Also, create the menu item object within the constructor

public void MainMenuBar() {
	// File Menu
	_file = new JMenu("File");
	add(_file);

	// Look and Feel Menu
	_lookAndFeel = new JMenu("Look & Feel");
	add(_lookAndFeel);

	// Help Menu
	_help = new JMenu("Help");
	add(_help);
}

Now, that creates the menu bar, and adds menu items to it - however we have to set the menu bar to our main frame. To do this:

1. Modify your instance Variables and add a frame object reference

2. 	// Instance Variables
   
   	// Adding the frame variable
   	private final JFrame _frame;
   	// What we had before
   	private JMenu _file;
   	private JMenu _lookAndFeel;
   	private JMenu _help;
   	

3. Create a object and a value for the menu at the top of the constructor NOTE: You will need to import the JFrame class

4. 	public MainMenuBar(JFrame frame) {
   		this._frame = frame;
   		//...
   

5. Set the menu at the bottom of the constructor

6. 		//...
   		frame.setJMenuBar(this);
   	}
   	

7. within the constructor of MainFrame.java add the following code at the end. This will create the menubar object within the MainFrame class

8. 	//...
   	// add the menu bar
   	menubar = new MainMenuBar(this);
   	

Go ahead and compile and test. When you it runs, your MainFrame window should now look like this:

At this point:

• MainDisplay.java should look like:

• /**
   * Project: cnicoll_javaUI
   * File: MainDisplay.java
   * Date: May 6, 2009
   * Time: 11:26:07 AM
   */ 
  
  package cnicoll;
  
  import javax.swing.JFrame;
  
  import cnicoll.ui.MainFrame;
  
  /**
   * @author cNicoll
   *
   */
  public class MainDisplay {
  
  	/**
  	 * @param args
  	 */
  	public static void main(String[] args) {
  		JFrame _frame = new MainFrame();
  		// show the frame
  		_frame.setVisible(true);
  
  	}
  
  }
  

• MainFrame.java should look like:

• /**
  * Project: cnicoll_javaUI
  * File: MainFrame.java
  * Date: May 6, 2009
  * Time: 11:46:14 AM
  */
  
  package cnicoll.ui;
  
  import javax.swing.JFrame;
  
  /**
  * @author cNicoll
  *
  */
  public class MainFrame extends JFrame {
  // Instance Variables
  
  /*
  * Class Constructor
  */
  public MainFrame() {
  // Window Name
  super("My Demo Application");
  // call the method and change the width and height.
  setSize(700, 600);
  // exit the application on the window close
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  // disable window resizing
  setResizable(false);
  // centers window
  setLocationRelativeTo(null);
  }
  }
  

• MainMenuBar.java should look like:

• /**
   * Project: cnicoll_javaUI
   * File: MainMenuBar.java
   * Date: May 6, 2009
   * Time: 2:52:21 PM
   */ 
  
  package cnicoll.ui;
  
  import javax.swing.JFrame;
  import javax.swing.JMenu;
  import javax.swing.JMenuBar;
  import javax.swing.JMenuItem;
  
  /**
   * @author cNicoll
   *
   */
  public class MainMenuBar extends JMenuBar {
  	// Instance Variables
  	private final JFrame _frame;
  	private JMenu _file;
  	private JMenu _lookAndFeel;
  	private JMenu _help;
  
  	/*
  	 * Class Constructor
  	 */
  	public MainMenuBar(JFrame frame) {
  		// Create the frame object
  		this._frame = frame;
  
  		// File Menu
  		_file = new JMenu("File");
  		add(_file);
  
  		// Look and Feel Menu
  		_lookAndFeel = new JMenu("Look & Feel");
  		add(_lookAndFeel);
  
  		// Help Menu
  		_help = new JMenu("Help");
  		add(_help);
  
  		// Set the menu bar
  		frame.setJMenuBar(this);
  	}
  
  }
  

Adding menu items and key strokes to the menubar

We have our frame, we have a menu bar within the frame, and it looks pretty snazzy, but… It doesnt do a whole lot. In this section I’ll be adding menu items to the menus as well as adding mnemonics and keystrokes.

Open MainMenuBar.java and add the following instance variables:

//...
private JMenuItem _exit;
private JMenuItem _about;

And within the class constructor of MainMenuBar.java add the following to the pre-existing code.

// File Menu
_file = new JMenu("File");
_file.setMnemonic('F');
add(_file);
_exit = new JMenuItem("Exit", 'x');
_file.add(_exit);

// Help Menu
_help = new JMenu("Help");
_help.setMnemonic('H');
add(_help);
_about = new JMenuItem("About", 'A');
_about.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_F1, 0));
_help.add(_about);

Go ahead and test this, you will now see drop downs within your menus.

Now for the big bit of code which will add an ActionListeners to tell ‘exit’ to quit the program, also create a popup for the about window. Add this to MainFrame.java. The reason I put this within the MainFrame class is because of the MVC design pattern.

menubar.exit.addActionListener(new ActionListener() {

	public void actionPerformed(ActionEvent e) {
		System.exit(0);
	}
});

menubar.about.addActionListener(new ActionListener() {

	public void actionPerformed(ActionEvent e) {
		JOptionPane.showMessageDialog(MainFrame.this, "My own pop up window\nBy cNicoll", "My Pop Up Window",
				JOptionPane.INFORMATION_MESSAGE);
	}
});

Finally i’ll add the Java GUI’s to the ‘Look and Feel’ menu. I’m not going to into detail of how it works. Basically it Java has pre-built in GUI’s, this will display them and allow for you to change them.

First off, add the following to the look and feel menu.

// add the look and feel GUIs
UIManager.LookAndFeelInfo[] infos = UIManager.getInstalledLookAndFeels();
for (UIManager.LookAndFeelInfo info : infos) {
	makeMenuItem(info.getName(), info.getClassName());
}

Next add a new method within the same class.

/**
 * Makes a button to change the pluggable look and feel.
 *
 * @param name
 *            the button name
 * @param plafName
 *            the name of the look and feel class
 */
private void makeMenuItem(String name, final String plafName) {
	// add button to panel

	JMenuItem item = new JMenuItem(name);
	lookAndFeel.add(item);

	// set button action
	item.addActionListener(new ActionListener() {

		public void actionPerformed(ActionEvent event) {
			// button action: switch to the new look and feel
			try {
				UIManager.setLookAndFeel(plafName);
				SwingUtilities.updateComponentTreeUI(MainMenuBar.this);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	});
}

After you compile and run the application you should have something looking like this.

At this point:

• MainDisplay.java should look like:

• /**
   * Project: cnicoll_javaUI
   * File: MainDisplay.java
   * Date: May 6, 2009
   * Time: 11:26:07 AM
   */ 
  
  package cnicoll;
  
  import javax.swing.JFrame;
  
  import cnicoll.ui.MainFrame;
  
  /**
   * @author cNicoll
   *
   */
  public class MainDisplay {
  
  	/**
  	 * @param args
  	 */
  	public static void main(String[] args) {
  		JFrame _frame = new MainFrame();
  		// show the frame
  		_frame.setVisible(true);
  
  	}
  
  }
  	

• MainFrame.java should look like:

• 	/**
   * Project: cnicoll_javaUI
   * File: MainFrame.java
   * Date: May 6, 2009
   * Time: 11:46:14 AM
   */ 
  
  package cnicoll.ui;
  
  import java.awt.event.ActionEvent;
  import java.awt.event.ActionListener;
  
  import javax.swing.JFrame;
  import javax.swing.JOptionPane;
  
  /**
   * @author cNicoll
   *
   */
  public class MainFrame extends JFrame {
  	// Instance Variables
  	private final MainMenuBar menubar;
  
  	/*
  	 * Class Constructor
  	 */
  	public MainFrame() {
  		// Window Name
  		super("My Demo Application");
  		// call the method and change the width and height.
  		setSize(700, 600);
  		// exit the application on the window close
  		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  		// disable window resizing
  		setResizable(false);
  		// centers window
  		setLocationRelativeTo(null);
  
  		// add the menu bar
  		menubar = new MainMenuBar(this);
  
  		menubar._exit.addActionListener(new ActionListener() {
  
  			public void actionPerformed(ActionEvent e) {
  				System.exit(0);
  			}
  		});
  
  		menubar._about.addActionListener(new ActionListener() {
  
  			public void actionPerformed(ActionEvent e) {
  				JOptionPane.showMessageDialog(MainFrame.this, "My own pop up window\nBy cNicoll", "My Pop Up Window",
  						JOptionPane.INFORMATION_MESSAGE);
  			}
  		});
  	}
  }
  

• MainMenuBar.java should look like:

• 	/**
   * Project: cnicoll_javaUI
   * File: MainMenuBar.java
   * Date: May 6, 2009
   * Time: 2:52:21 PM
   */ 
  
  package cnicoll.ui;
  
  import java.awt.event.ActionEvent;
  import java.awt.event.ActionListener;
  import java.awt.event.KeyEvent;
  
  import javax.swing.JFrame;
  import javax.swing.JMenu;
  import javax.swing.JMenuBar;
  import javax.swing.JMenuItem;
  import javax.swing.KeyStroke;
  import javax.swing.SwingUtilities;
  import javax.swing.UIManager;
  
  /**
   * @author cNicoll
   *
   */
  public class MainMenuBar extends JMenuBar {
  	// Instance Variables
  	private final JFrame _frame;
  	private JMenu _file;
  	JMenuItem _exit;
  	private JMenu _lookAndFeel;
  	private JMenu _help;
  	JMenuItem _about;
  
  	/*
  	 * Class Constructor
  	 */
  	public MainMenuBar(JFrame frame) {
  		// Create the frame object
  		this._frame = frame;
  
  		// File Menu
  		_file = new JMenu("File");
  		_file.setMnemonic('F');
  		add(_file);
  		_exit = new JMenuItem("Exit", 'x');
  		_file.add(_exit);
  
  		// Look and Feel Menu
  		_lookAndFeel = new JMenu("Look & Feel");
  		add(_lookAndFeel);
  		// add the look and feel GUIs
  		UIManager.LookAndFeelInfo[] infos = UIManager.getInstalledLookAndFeels();
  		for (UIManager.LookAndFeelInfo info : infos) {
  			makeMenuItem(info.getName(), info.getClassName());
  		}
  
  		// Help Menu
  		_help = new JMenu("Help");
  		_help.setMnemonic('H');
  		add(_help);
  		_about = new JMenuItem("About", 'A');
  		_about.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_F1, 0));
  		_help.add(_about);
  
  		// Set the menu bar
  		frame.setJMenuBar(this);
  	}
  
  	/**
  	 * Makes a button to change the pluggable look and feel.
  	 *
  	 * @param name
  	 *            the button name
  	 * @param plafName
  	 *            the name of the look and feel class
  	 */
  	private void makeMenuItem(String name, final String plafName) {
  		// add button to panel
  
  		JMenuItem item = new JMenuItem(name);
  		_lookAndFeel.add(item);
  
  		// set button action
  		item.addActionListener(new ActionListener() {
  
  			public void actionPerformed(ActionEvent event) {
  				// button action: switch to the new look and feel
  				try {
  					UIManager.setLookAndFeel(plafName);
  					SwingUtilities.updateComponentTreeUI(MainMenuBar.this);
  				} catch (Exception e) {
  					e.printStackTrace();
  				}
  			}
  		});
  	}
  
  }
  	

Conclusion

It seems like a lot but in the end its really not much, theres a lot more we can do - but all the hard work is done. In my next entry I plan on picking up from this and adding tabs to it. To download this project please click here.

---