Resources‎ > ‎Java Basics‎ > ‎

GUIs

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);
  • The JFrame constructor takes as input a String representing the title you will see at the top of the window.
  • The setDefaultCloseOperation method takes as input an int specifying what the program should do if the user closes the window.
  • The setSize method takes as input a Dimension object specifying the width and height of the window.  The Dimension class is in the java.awt package, which preceded swing as the Java GUI library.
  • The setVisible method takes a boolean value specifying whether the frame is visible or not.

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);
  • The setBackground method of JPanel allows you to set the color of the background.  The Color class is in the java.awt package.
  • The setPreferredSize method takes as input a Dimension object specifying the width and height of the window.  When adding a panel to a frame, set the preferred size of the panel (not the frame).
  • To add the panel to the frame, get the content pane frame from the frame object first, the call the add method passing in the panel.
  • The pack method tells the frame to resize itself based on the preferred size of the components it contains.

Components

  • JButton
  • JLabel
  • JTextArea
  • JTextField
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
  }
}
}
  • Your code can be notified when an action occurs by adding an ActionListener to a button component.  When the button is pressed, the ActionListeners will be notified that an action has been performed and they can take appropriate action.
  • It is up to you to specify what happens when an action occurs.  You do this by implementing the ActionListener interface.  A class that implements the ActionListener interface must implement the actionPerformed method.  This is the method that is invoked when the action occurs.
  • Inner classes can be useful for this purpose.  They are defined within other classes with which they have a"intimate relationship".  In this case, on the TipPanel class has access to the ButtonListener class.  
  • Inner classes have access to the members of the enclosing class.

ButtonExample

TipCalculatorTest.java
TipPanel.java

PanelChangerExample

PanelChanger.java
ButtonPanel.java
ColorPanel.java

Exercise

  1. Modify the Tip Calculator example to accept the percentage of the tip as input in the GUI.
  2. Implement a new GUI that will allow the user to select a file using the javax.swing.JFileChooser class and will show the selected file in a JTextField.

ċ
ButtonPanel.java
(1k)
Sami Rollins,
Feb 3, 2009, 5:01 PM
ċ
ColorPanel.java
(0k)
Sami Rollins,
Feb 3, 2009, 5:01 PM
ċ
PanelChanger.java
(1k)
Sami Rollins,
Feb 3, 2009, 5:01 PM
ċ
TipCalculatorTest.java
(0k)
Sami Rollins,
Feb 3, 2009, 5:01 PM
ċ
TipPanel.java
(2k)
Sami Rollins,
Feb 3, 2009, 5:01 PM
Comments