You know how to create frame using JFrame.
You know how to create container using ContentPane.
You know how to create label using JLabel.
You know how to create text field using JTextField.
You know how to create password field using JPasswordField.
You know how to create button using JButton.
You know how to create check box using JCheckBox.
You know how to create radio button using JRadioButton.
You know how to create layout for container using FlowLayout.
Java class libraries to support building a GUI and graphics functionality.
Allows a consistent user interface for Java programs on different OS (e.g., Windows, Mac OS X or Linux).
APIs (Application Programming Interface) provided in JFC:
– Abstract Window Toolkit (AWT)
– Swing
– Java 2D
Earliest toolkit that provides GUI for Java programs.
Provided in JDK1.0 and 1.1.
AWT provides:
– Basic GUI components
• Examples: Labels, buttons, scrollbars, etc.
– Infrastructure for GUI programming
• Examples: Event handling, layout management.
Same concepts as AWT.
Provided in Java 1.2 onwards.
Swing has more sophisticated interface capabilities than AWT – offers features such as tabbed panes and the ability to change images on buttons.
Step 0: Design the GUI
Sketch the design of your GUI on a piece of paper.
Step 1: Determine the GUI components required
– JButton? JLabel? JTextfield?
JFrame is a type of container (object Container) which has its own window and frame.
JFrame can be the basic container for user interface components in Java GUI applications.
import javax.swing.*;
public class FrameApp extends JFrame{
public FrameApp(){}
public static void main(String[] args){
FrameApp frame = new FrameApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
JFrame also has container ContentPane which becomes the main container on frame window.
All Swing components are put into this ContentPane.
Example:
import java.awt.Color;
import java.awt.Container;
import java.awt.FlowLayout;
import javax.swing.*;
public class FrameApp extends JFrame{
public FrameApp(){
Container pane = getContentPane();
pane.setBackground(Color.gray);
pane.setLayout(new FlowLayout());
}
public static void main(String[] args){
FrameApp frame = new FrameApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
A label is a display area for a short text, an image, or both.
Labels are represented as JLabel objects.
The constructors for JLabel:
JLabel()
JLabel(String text, int horizontalAlignment)
JLabel(String text)
JLabel(Icon icon)
JLabel(Icon icon, int horizontalAlignment)
JLabel(String text, Icon icon, int horizontalAlignment)
import java.awt.Color;
import java.awt.Container;
import java.awt.GridLayout;
import javax.swing.*;
public class FrameApp extends JFrame{
JLabel label1 = new JLabel("Username:", SwingConstants.CENTER);
JLabel label2 = new JLabel("Password:", SwingConstants.CENTER);
public FrameApp(){
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new GridLayout(3,2));
pane.add(label1);
pane.add(label2);
}
public static void main(String[] args){
FrameApp frame = new FrameApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
A text field is an input area where the user can type in characters. Text fields are useful because they allow user to enter in variable data (such as a name or a description).
Text fields are represented as JTextField objects.
The constructors for JTextField are:
JTextField(int columns) Creates an empty text field with the specified number of columns.
JTextField(String text) Creates a text field initialized with the specified text.
JTextField(String text, int columns) Creates a text field initialized with the specified text and the column size.
import java.awt.Color;
import java.awt.Container;
import java.awt.GridLayout;
import javax.swing.*;
public class FrameApp extends JFrame{
JLabel label1 = new JLabel("Username:", SwingConstants.CENTER);
JLabel label2 = new JLabel("Password:", SwingConstants.CENTER);
JTextField username = new JTextField(10);
JPasswordField password = new JPasswordField(10);
public FrameApp(){
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new GridLayout(3,2));
pane.add(label1);
pane.add(username);
pane.add(label2);
pane.add(password);
}
public static void main(String[] args){
FrameApp frame = new FrameApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
The value of a text field can be set by sending a setText() message to the JTextField object.
Example:
JTextField status = new JTextField(10);
… status.setText("Login failed!");
The value of a text field can be retrieved by sending a getText() message to the JTextField object.
Example:
JTextField tfName = new JTextField(10);
… String name = tfName.getText();
The length of a textfield can be changed by sending a setColumns() message to the JTextField object.
Example:
JTextField tf = new JTextField(10);
… tf.setColumns(20);
Sometimes we would like to make a text field non-editable; in other words, the user is not allowed to modify its value.
This is achieved by sending a setEditable() message to the JTextField object.
Example:
JTextField status = new JTextField(10); status.setEditable(false);
A password field is a special kind of text field.
Password fields are represented as JPasswordField objects.
To create a JPasswordField object:
public JPasswordField(int length)
where: length:length of field (in columns)
JPasswordField is a subclass of JTextField – it inherits methods from JTextField.
JButton inherits AbstractButton and provides several constructors to create buttons.
• The constructors for JButton:
public class FrameApp extends JFrame{
JLabel label1 = new JLabel("Username:", SwingConstants.CENTER);
JLabel label2 = new JLabel("Password:", SwingConstants.CENTER);
JTextField username = new JTextField(10);
JPasswordField password = new JPasswordField(10);
JButton button1 = new JButton("Login");
public FrameApp(){
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new GridLayout(3,2));
pane.add(label1);
pane.add(username);
pane.add(label2);
pane.add(password);
pane.add(new JLabel(""));
pane.add(button1);
}
public static void main(String[] args){
FrameApp frame = new FrameApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
Check boxes allow user to choose more than one from many options.
Check boxes are represented as JCheckBox objects.
The constructors for JCheckBox:
import javax.swing.*;
import java.awt.*;
public class JCheckBoxApp extends JFrame{
JCheckBox box1 = new JCheckBox("Java", true);
JCheckBox box2 = new JCheckBox("C++");
JCheckBox box3 = new JCheckBox("Smalltalk");
JCheckBox box4 = new JCheckBox("Ruby");
public JCheckBoxApp(){
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new FlowLayout());
pane.add(box1);
pane.add(box2);
pane.add(box3);
pane.add(box4);
}
public static void main(String[] args){
JCheckBoxApp frame = new JCheckBoxApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
Current status of a check box can be acquired by sending an isSelected() message to the JCheckBox object.
Example:
JCheckBox cbox = new JCheckBox("C");
… if (cbox.isSelected()) { /*
The check box is selected */ …
}
else { /* The check box is not selected*/ …
Radio buttons ensure that user chooses only one from many options.
Radio buttons are represented as JRadioButton objects.
The constructors for JRadioButton:
import java.awt.Color;
import java.awt.Container;
import java.awt.FlowLayout;
import javax.swing.*;
public class JRadioButtonApp extends JFrame{
JRadioButton btn1 = new JRadioButton("Java", true);
JRadioButton btn2 = new JRadioButton ("C++");
JRadioButton btn3 = new JRadioButton ("Smalltalk");
JRadioButton btn4 = new JRadioButton ("Ruby");
public JRadioButtonApp (){
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new FlowLayout());
pane.add(btn1);
pane.add(btn2);
pane.add(btn3);
pane.add(btn4);
}
public static void main(String[] args){
JRadioButtonApp frame = new JRadioButtonApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
Observe what happens when another radio button in the example is selected ..
We need to use a ButtonGroup object to group radio buttons so that only one of them can be selected at a time.
import java.awt.Color;
import java.awt.Container;
import java.awt.FlowLayout;
import javax.swing.*;
public class JRadioButtonApp extends JFrame{
JRadioButton btn1 = new JRadioButton("Java", true);
JRadioButton btn2 = new JRadioButton ("C++");
JRadioButton btn3 = new JRadioButton ("Smalltalk");
JRadioButton btn4 = new JRadioButton ("Ruby");
public JRadioButtonApp (){
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new FlowLayout());
ButtonGroup bgrp = new ButtonGroup();
bgrp.add(btn1);
bgrp.add(btn2);
bgrp.add(btn3);
bgrp.add(btn4);
pane.add(btn1);
pane.add(btn2);
pane.add(btn3);
pane.add(btn4);
}
public static void main(String[] args){
JRadioButtonApp frame = new JRadioButtonApp ();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("Radio Button");
frame.setSize(300, 200);
frame.setVisible(true);
}
}
Step 2: Determine the layout of GUI components for each container
Which layout manager to use? FlowLayout? GridLayout? BorderLayout?
The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container.
Layout managers are set in containers using the setLayout(LayoutManager) method in a container.
A number of layout managers are provided in the java.awt package. Some of them are listed below:
– FlowLayout
– GridLayout
– BorderLayout
– CardLayout
– GridBagLayout
– BoxLayout
A FlowLayout object arranges components in a container from left to right, row by row from top to bottom.
The simplest layout, but difficult to control the position of its components.
The default layout manager for object JPanel and JApplet .
Components can be aligned to the – left – right – center
Constructor FlowLayout()
/*creates a default FlowLayout object (components will be center-aligned)*/
Example:
import javax.swing.*;
import java.awt.*;
class FlowLayoutApp extends JFrame {
public FlowLayoutApp() {
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new FlowLayout());
pane.add(new JLabel("Search"));
pane.add(new JTextField(10));
pane.add(new JButton("Submit"));
pane.add(new JButton("Help"));
}
public static void main(String[] args) {
FlowLayoutApp frame = new FlowLayoutApp();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setTitle("My Frame - FlowLayout");
frame.setSize(400, 200);
frame.setVisible(true);
}
}
change frame size:
frame.setSize(300, 200);
align it to left:
pane.setLayout(new FlowLayout(FlowLayout.LEFT));
change into
pane.setLayout(new FlowLayout(FlowLayout.LEFT, 20, 15));
compile again and look at the output.
Step 3: Determine how to handle events (Event-Driven Programming)
– What to do when the user clicks the OK button