Introduction to GUI Programming with Java

Graphical User Interfaces With AWT and Swing

Towson University 2013.

*Ref: http://chortle.ccsu.edu/java5/index.html

Graphical User Interface

3

- Users interact with application programs using graphical components such as buttons, text boxes, and menus as well as console.

- Hard to write a GUI application, but most of functions are provided by a set of classes called Swing

• Swing– A large package– Composed of graphical components:

•Windows•Buttons•Menus•Text fields

– Built on the fundamental classes of the Abstract Windowing Toolkit (AWT)

– Come with recent Java releases

GUI

4

- Users controls the application by interacting with the graphical components, generating events.

• GUI Events– Mouse clicking on a button– Making a choice from a menu– Entering text in a text box– Dragging a scroll bar

• Event-driven programming– Users cause events on the GUI components and the

program responds to these events.– Programming by organizing the GUI components

contained in the Swing package.

Events

5

●GUI Program– Graphical Components: Swing objects or extended one– Listener methods: Java methods the interface GUI

components with the application tasks by calling application methods

– Application methods: Java methods performing specific functional tasks

GUI Program

GUI Component

7

Container Classes

●Window– A fundamental container – Includes other GUI components– Ex) Browser is a window (container) containing buttons,

menus, slides, icons, and other GUI components.

• Container– A container can contain another container.– Ex) Main window contains frames which contain other

components.

8

Java Classes

●AWT and Swing – Inherited from Java Object class

• AWT– Contains the fundamental classes used for constructing

GUIs.– Component class is defined as the base abstract class.– AWT classes: Button, Canvas, and Container inherited

from Component class

• Swing classes– Swing JComponent(derived rom AWT Container class)

•one of the base class of Swing

– Swing JFrame(from AWT Frame class)•Usually the main container for a GUI application

9

Swing component hierarchy

• Graphical components in Java form an inheritance hierarchy:

java.lang.Object +--java.awt.Component +--java.awt.Container | +--javax.swing.JComponent | +--javax.swing.JButton | +--javax.swing.JLabel | +--javax.swing.JMenuBar | +--javax.swing.JOptionPane | +--javax.swing.JPanel | +--javax.swing.JTextArea | +--javax.swing.JTextField | +--java.awt.Window +--java.awt.Frame +--javax.swing.JFrame

• When doing GUI programming, always import these packages:import java.awt.*;import javax.swing.*;

10Java Programming: Program Design Including Data Structures 10

Inheritance Hierarchy

11

Java GUI: AWT and Swing

• Sun's initial idea: create a set of classes/methods that can be used to write a multi-platform GUI (Abstract Windowing Toolkit, or AWT)– problem: not powerful enough; limited; a bit clunky to use

• Second edition (JDK v1.2): Swing– a newer library written from the ground up that allows

much more powerful graphics and GUI construction

• Drawback: Both exist in Java now; easy to get them mixed up; still have to use both sometimes!

12

JComponent Classes

●Container family – Can contain components– Can be placed inside containers– Can be displayed on the monitor– Can generate events– Can register event listeners

• Swing classes– All Swing classes are descendants of Container class.– In addition to JComponent, JLabel, JPanel, JSlider, JTextComponent, JButton, …

13

JFrame class

●JFrame – Represents the window of a GUI application program– Can hold the components and methods of your

application

• Methods– setSize()– setBounds()– setVisible()– setDefaultCloseOperation()

●Frame in Java – A window containing borders, buttons, and other features.

14

JFrame example 1

• A simple program that creates and shows a JFrame:

import javax.swing.*;

public class SimpleFrame { public static void main(String[] args) { JFrame frame = new JFrame(“SimpleFrame”);

frame.setSize(300,200); frame.setVisible(true); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); }}

• Graphical output:

15

JFrame example 2

import java.awt.*;import javax.swing.*;

public class SimpleFrame2 { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setForeground(Color.WHITE); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setLocation(new Point(100, 50)); frame.setSize(new Dimension(300, 120)); frame.setTitle("A frame"); frame.setVisible(true); }}

• Graphical output:

16

A frame is a graphical window that can be used to hold other components

• public JFrame()public JFrame(String title)Creates a frame with an optional title.

• public void setTitle(String text)Puts the given text in the frame’s title bar.

• public void setDefaultCloseOperation(int op)Makes the frame perform the given action when it closes. Common value: JFrame.EXIT_ON_CLOSE

• public void add(Component comp)Places the given component or container inside the frame.– How would we add more than one component to the frame?

• NOTE: Call setVisible(true) to make a frame appear on screen after creating it.

JFrame

17

JButton class

●JButton – Inherited from AbstractButton which is inherited from JComponent

– Can contain other components– ButtonFrame and ButtonDemo

18

Components example• This program attempts to show 2 buttons:

import java.awt.*;import javax.swing.*;

public class ComponentsExample1 { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(new Dimension(300, 100)); frame.setTitle("A frame");

JButton button1 = new JButton(); button1.setText("I'm a button."); button1.setBackground(Color.BLUE); frame.add(button1);

JButton button2 = new JButton(); button2.setText("Click me!"); button2.setBackground(Color.RED); frame.add(button2);

frame.setVisible(true); }}

19

Changing layouts

• We can correct the program's appearance by changing the frame's layout manager .

• Change the layout by calling the setLayout method on the frame and passing a layout manager object.– We will see several layout managers later.– We'll use one called a FlowLayout, which sizes each

component to its preferred size and positions them in left-to-right rows.

– If the following line is added to the preceding program just before calling setVisible(true), its appearance will be:

frame.setLayout(new FlowLayout());

Action events withActionListener

21

Event-driven programming

• program's execution is indeterminate

• on-screen components cause events to occur when they are clicked / interacted with

• events can be handled, causing the program to respond, driving the execution thru events (an "event-driven" program)

22

Java Event Hierarchyjava.lang.Object

+--java.util.EventObject

+--java.awt.AWTEvent

+--java.awt.event.ActionEvent

+--java.awt.event.TextEvent

+--java.awt.event.ComponentEvent

+--java.awt.event.FocusEvent

+--java.awt.event.WindowEvent

+--java.awt.event.InputEvent

+--java.awt.event.KeyEvent

+--java.awt.event.MouseEvent

•import java.awt.event.*;

23

Action events: ActionEvent• most common / simple event type in Swing• represent an action occurring on a GUI component

• created by:– button clicks– check box checking / unchecking– menu clicks– pressing Enter in a text field– etc.

24

Listening for events• attach a listener to the component

• listener’s appropriate method will be called when event occurs (e.g. when the button is clicked)

• for Action events, use ActionListener

• ActionListeners are event handlers to define what should be done when an user performs certain operation.

25

Writing Action Listener

• Declare an event handler class by specifying that the class either implements an ActionListener interface or extends a class that implements an ActionListener interface.

public class MyHandler implements ActionListener {

…

}

• Register an instance of the event handler class as a listener on one or more components

someComponent.addActionListener(instanceOfMyHandler);

• ActionListener interface is special, enforcing the inclusion of the method, actionPerformed().

Public void actionPerformed(ActionEvent e) {

…

}

26

Writing an ActionListener// part of Java; you don't write this

public interface ActionListener {

public void actionPerformed(ActionEvent event);

}

// Prints a message when the button is clicked.

public class MyActionHandler

implements ActionListener {

public void actionPerformed(ActionEvent event){

JButton.showMessageDialog(null,

"An event occurred!");

}

}

27

Attaching an ActionListener

import java.awt.*;

import java.awt.event.*;

public class MyAH extends Frame implements WindowListener,ActionListener {

TextField text = new TextField(20);

Button b;

private int numClicks = 0;

public static void main(String[] args) {

MyAH myWindow = new MyAH("My first window");

myWindow.setSize(350,100);

myWindow.setVisible(true);

}

public MyAH(String title) {

super(title);

setLayout(new FlowLayout());

addWindowListener(this);

b = new Button("Click me");

add(b);

add(text);

b.addActionListener(this);

}

public void actionPerformed(ActionEvent e) {

numClicks++;

text.setText("Button Clicked " + numClicks + " times");

}

public void windowClosing(WindowEvent e) {

dispose();

System.exit(0);

}

...

} // end of class MyAH

28

Text Field Example

• Capturing user input from a text field

public void actionPerformed(ActionEvent e) {

String textFieldValue = text.getText();

text.setText(textFieldValue + " PASSED.....");

}

29

JTextField methods

• getText()• setText()

30

import java.awt.*;import java.awt.event.*;import javax.swing.JTextField;import javax.swing.JTextArea;import javax.swing.JButton;import javax.swing.JLabel;

public class MyAH extends Frame implements WindowListener,ActionListener { JTextField text = new JTextField(20); JLabel label1 = new JLabel("AWT Button Example"); Button b; private int numClicks = 0; JLabel label2 = new JLabel("Please type numeric expression"); JTextField input = new JTextField(20); JButton bSubmit; //ButtonFrame frm = new ButtonFrame("Button Demo"); JTextArea output = new JTextArea(20, 20);

public static void main(String[] args) { MyAH myWindow = new MyAH("My first window"); myWindow.setSize(350,250); myWindow.setLayout(new FlowLayout()); myWindow.setVisible(true); }

31

public MyAH(String title) {

super(title); setLayout(new FlowLayout()); addWindowListener(this); b = new Button("Click Me!"); bSubmit = new JButton("Submit"); // construct a JButton add(label1); add(b); add(text); add(label2); add(input); add(bSubmit); //input.setText("Type numeric expression. "); add(output); b.addActionListener(this); MyActionHandler calcHandler = new MyActionHandler(); bSubmit.addActionListener(calcHandler); }

32

public void actionPerformed(ActionEvent e) { numClicks++; String textFieldValue = text.getText(); text.setText("Button has been pressed " + numClicks + " times."); /* String inputTextFieldValue = inputTextFieldValue = input.getText(); Double outputValue = calculate(inputTextFieldValue); input.setText(inputTextFieldValue); //output.setText("Result equals" + i*100); output.setText("Result equals " + inputTextFieldValue);

//output.setText("Result equals" + outputValue);*/ }

public double calculate(String exp) { return 100; } public void windowClosing(WindowEvent e) { dispose(); System.exit(0); }

33

public void windowOpened(WindowEvent e) {} public void windowActivated(WindowEvent e) {} public void windowIconified(WindowEvent e) {} public void windowDeiconified(WindowEvent e) {} public void windowDeactivated(WindowEvent e) {} public void windowClosed(WindowEvent e) {}

public class MyActionHandler implements ActionListener {

public void actionPerformed(ActionEvent e) { String inputTextFieldValue = input.getText(); Double outputValue = calculate(inputTextFieldValue); input.setText(inputTextFieldValue); output.setText("Result equals " + inputTextFieldValue); }

} // end of class MyActionHandler } // end of class MyAH