Graphical User Interfaces (GUI)


Overview

Java provides a large library of graphical user interface components.  The javax.swing package provides several classes using to create graphical user interfaces.  The basic steps of creating and displaying an interface are as follows:
  1. Create a JFrame object.  A frame component handles basic windowing functionality, for example closing.
  2. Create one or more JPanel objects.  A panel is like a window pane.  It is a container that can hold other elements.  
  3. Add elements to your panel.  The swing library provides several types of elements including buttons, labels, and text boxes.
  4. Add your panel to the frame.
  5. Resize everything.
  6. Make the frame visible.

JFrame

JFrame frame = new JFrame("GUITest");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setSize(new Dimension(300, 300));
frame.setVisible(true);

JPanel

JFrame frame = new JFrame("GUITest");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel panel = new JPanel();
panel.setBackground(Color.red);
panel.setPreferredSize(new Dimension(300, 300));

frame.getContentPane().add(panel);
frame.pack();
frame.setVisible(true);

Components

JLabel label = new JLabel("Label Me");
panel.add(label);

JButton button = new JButton("Press Me");
panel.add(button);

JTextArea area = new JTextArea();
area.setPreferredSize(new Dimension(100, 100));
area.setEditable(false);
panel.add(area);

JTextField field = new JTextField();
field.setColumns(50);
panel.add(field);

Layout

BorderLayout provides the ability to place components in five different regions: NORTH, SOUTH, EAST, WEST, and CENTER.  
JPanel panel = new JPanel();
panel.setBackground(Color.red);
panel.setPreferredSize(new Dimension(300, 300));
panel.setLayout(new BorderLayout());

JButton button = new JButton("Press Me");
panel.add(button, BorderLayout.SOUTH);

JLabel label = new JLabel("Label Me");
panel.add(label, BorderLayout.EAST);

JTextArea area = new JTextArea();
area.setPreferredSize(new Dimension(100, 100));
area.setEditable(false);
panel.add(area, BorderLayout.CENTER);

JTextField field = new JTextField();
field.setColumns(50);
panel.add(field, BorderLayout.NORTH);
GridLayout provides the ability to create a grid of a specified size.  Each cell of the grid holds one component.
JPanel panel = new JPanel();
panel.setBackground(Color.red);
panel.setPreferredSize(new Dimension(300, 300));
panel.setLayout(new GridLayout(2, 2));

JButton button = new JButton("Press Me");
panel.add(button);

JLabel label = new JLabel("Label Me");
panel.add(label);

JTextArea area = new JTextArea();
area.setPreferredSize(new Dimension(100, 100));
area.setEditable(false);
panel.add(area);

JTextField field = new JTextField();
field.setColumns(50);
panel.add(field);

ActionListeners


public class TipPanel extends JPanel {

JButton button;

public TipPanel() {

...
button = new JButton("Calculate Tip");
button.addActionListener(new ButtonListener());
...

}

private class ButtonListener implements ActionListener {

public void actionPerformed(ActionEvent event) {
//code executed when button is pressed
  }
}
}

ButtonExample

TipCalculatorTest.java
TipPanel.java

PanelChangerExample

PanelChanger.java
ButtonPanel.java
ColorPanel.java


Sami Rollins

Date: 2007-09-17