1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers Programming buttons Other GUI Components

2 Introduction We want to communicate with the user through a Graphical User Interface (GUI), rather than using a text-based interface.

3 GUIs written in Java Nothing to do with Java interface keyword! Java provides two sets of facilities for writing GUIs: –the Abstract Window Toolkit (AWT) –Swing AWT is part of the core Java classes ( java.awt ), whereas Swing is part of the Java Foundation Classes ( javax.swing ). From a programmer’s perspective, Swing is an alternative to using the Java AWT, although technically Swing extends (but does not replace the AWT).

4 GUIs written in Java Java GUIs are platform independent as well. The graphical components (like windows) of different operating systems look and operate differently. However, the Java AWT and Swing facilities are the same across all platforms. Java maps its components onto components provided by the operating system it is running on. Same Java GUI can run on many platforms.

5 Understanding Events An event is defined as a: “happening, occurrence” Something happening somewhere. In GUIs, an event (usually) results from a user’s action. Eg. The user clicks the mouse on a button..

6 Understanding Events An event is defined as a: “happening, occurrence” Something happening somewhere. In GUIs, an event (usually) results from a user’s action. Eg. The user clicks the mouse on a button..

7 Understanding Events Text interface There is a set sequence of actions. The program stops when it expects input from the user and continues on the same set path after it receives the input. Graphical Interface The user can do any number of things (type in a text box, resize window, press a button). These actions by the user are called events. An event loop constantly checks for any new event and responds accordingly. Java’s event loop is hidden from the programmer. We say the program is event- driven. Note: Pressing the “Cancel” button... Note: Pressing the “Cancel” button...

8 How to write GUIs We write GUI programs in Java by creating instances of components or deriving new classes from the existing component classes. Eg. JButton b1 = new JButton("Button 1"); We construct one or more listeners which “listen” for an event and respond accordingly. To program a GUI we: 1. Decide on GUI components (buttons etc.) and their layout. [Today] 2. Write listeners to handle the events. [Tomorrow]

9 The Swing class that implements an independent window on the screen A first Swing Application import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { JFrame frame = new JFrame(“Swing Application”); frame.setVisible(true); }

10 The Swing class that implements an independent window on the screen A first Swing Application import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { JFrame frame = new JFrame(“Swing Application”); frame.setVisible(true); } Displays the JFrame and enters the event loop, waiting for events

11 A first Swing Application import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { JFrame frame = new JFrame(“Swing Application”); frame.setVisible(true); }

12 import java.awt.*; import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { Dimension d = new Dimension(300, 200); JFrame frame = new JFrame(“Swing Application”); frame.setSize( d ); frame.setVisible(true); } A first Swing Application

13 import java.awt.*; import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { JFrame frame = new JFrame(“Swing Application”); frame.setSize(new Dimension(300,200)); frame.setVisible(true); } A first Swing Application

14 Problem:. –When we click to close the window, the Java program keeps running! –Default behaviour is just to close window - nothing more. Solution: –When we click on, we need to exit our program. –Call setDefaultCloseOperation method with the static value of JFrame.EXIT_ON_CLOSE. A first Swing Application

15 Shutting down properly import java.awt.*; import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { JFrame frame = new JFrame(“Swing Application”); frame.setSize(new Dimension(300,200)); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); frame.setVisible(true); }

16 The Top-Level Container Every GUI program contains at least one top-level Swing container (usually JFrame, JDialog, or JApplet ) Every top-level container indirectly contains an intermediate container known as a content pane. Components (such as buttons or text fields) are added to this content pane. To add a button to our frame: –create an instance of JButton –add it to the content pane of the frame –before you set the frame to be visible, call the pack() method.

17 Adding Components import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { JFrame f = new JFrame(“Swing Application”); f.getContentPane().add(new JButton(“Button 1”) ); f.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); f.pack(); f.setVisible(true); }

18 The Containment Hierarchy There are 3 main types of components: –top-level containers (JFrame, JDialog, JApplet) –intermediate containers (The purpose is to contain other components. Examples: JPanel, JTabbedPane) –atomic components (They do not contain other components. Examples: JButton, JLabel, JTextField, JComboBox, JList, JTable). For every Swing application, we can draw a containment hierarchy which shows how the components fit together.

19 Component Hierarchy The above GUI contains 4 components: –A frame, or main window (JFrame) –A panel (JPanel), also called a pane. –A button (JButton), which has “I’m a Swing button” on it. –A label (JLabel), showing the Number of button clicks. The frame is a top-level container, which provides a place for the components to paint themselves. The panel is an intermediate container, used to simplify the position of the button and label (which are atomic components). JFrame (with its own content pane) JPanel JButtonJLabel

20 Component Hierarchy import javax.swing.*; public class SimpleSwing { public static void main(String[] args) { JFrame f = new JFrame("Swing Application"); JPanel p = new JPanel(); p.add(new JLabel("Label 1") ); p.add(new JButton("Button 1") ); f.getContentPane().add( p ); f.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); f.pack(); f.setVisible(true); }

21 Component Hierarchy: Exercise JLabelJTextField JSlider ColorBlock (extends JLabel) JButton

22 Component Hierarchy: One Solution JSlider JButton (Reset) JPanel JFrame (with its own content pane) JPanelColorBlock JPanel (Red)JPanel (Blue)JPanel (Green) JLabelJTextFieldJSliderJLabelJTextField JSliderJLabelJTextField