Unit 09 1

Introduction to GUI Programming

• Introduction to User Interfaces

• Introduction to GUI Programming

• GUI Design Issues

• GUI Programming Issues

• Java GUI Library Evolution

• GUI Components and Containers

• Swing's Top-level Containers

• Learning Outcomes

o Explain the motivation for, and usefulness of GUIs.

o List and explain seven principles of good GUI design and their benefits.

o Discuss what GUI programming involves, and explain how Java's GUI library evolved.

Exercises

Unit 09 2

GUIs—Graphical User Interfaces

• In a text-based UI the commands are entered from the keyboard.

• In a console program, the system usually controls user actions.

> Enter number of classes: 3

> Enter number of students: 15

> You have 45 students

• Most modern programs use a GUI (pronounced “gooey”):

• Graphical: Not just text or characters but windows, menus, buttons, ..

• User: Person using the program

• Interface: Way to interact with the program

Graphical elements include:

• Window: Portion of screen that serves as a smaller screen within the screen

• Menu: List of alternatives offered to user

• Button: Looks like a button that can be pressed

• Text fields: The user can write something in

Unit 09 3

A New Approach to Programming

Previous Style of Programming:

• List of instructions performed in

order

• Next thing to happen is next thing in

list

• Program performed by one agent—

the computer

Event-Driven Style of Programming:

• Objects that can fire events and

objects that react to events

• Next thing to happen depends on

next event

• Program is interaction between user

and computer

Unit 09 4

Event-Driven Programming

• Programs with GUIs often use Event-Driven Programming

• A user interacts with the application by: – Clicking on a button to choose a program option.

– Making a choice from a menu.

– Entering text in a text field.

– Dragging a scroll bar.

– Clicking on a window's close button.

• Program waits for events to occur and then responds

• Firing an event: When an object generates an event

• Listener: Object that waits for events to occur

• Event handler: Method that responds to an event

Unit 09 5

Principles of GUI Design

• Give time for GUI design and integration.

• Have a simple and clear layout.

• Use graphics objects and terminology consistently.

• Be functionally intuitive and visually attractive.

• Provide visual and audible feedback.

• Be responsive.

• Be flexible and customizable.

Unit 09 6

Benefits of Good GUIs

• Facilitate higher user productivity and lower long-term costs.

• Improve integrity of underlying application.

• Improve the reliability and safety of mission-critical applications.

• Improve user confidence.

• Make software more marketable.

Unit 09 7

GUI Programming Issues

• What do I need to know to write good GUI applications?

• Writing GUI applications requires knowledge of:

1. Graphics

2. Media

3. Windows

4. Events

5. Multithreading

Unit 09 8

Three Parts of a GUI Program

• A GUI program consists of three types of software:

1. Graphical Components that make up the GUI.

2. Listener methods that receive the events and respond to them.

3. Application methods that do useful work for the user.

• In Java, you can get the GUI components you want by asking for them. Most of the work has already been done and is contained in the Swing/AWT packages. Swing/AWT contains windows, frames, buttons, menus and other components.

• You get graphical components by constructing Swing/AWT objects.

• Listener methods and application methods are Java methods that you write or invoke from JDK.

• To write a GUI application, keep the three types software separated (while keeping the big picture in mind).

Unit 09 9

Building a GUI

• Create:• Frame/JFrame• Panel/JPanel• Components• Listeners

• Add: • Listeners into components• Components into panel• Panel into frame

JPanel

JButton

Listener

JFrame

JLabel

Unit 09 10

Using a GUI Component

1. Create it

2. Configure it

3. Add children (if container)

4. Add to parent (if not JFrame)

5. Add Listeners of events

Order isimportance

Unit 09 11

Using a GUI Component

1. Create it

• Instantiate object:

JButton b = new JButton();

2. Configure it

• Methods:

b.setText(“Press me”);

3. Add it

• panel.add(b);

4. Listen to it

• Events: Listeners

Press me

Unit 09 12

Application Code

import javax.swing.*;

class Hello {public static void main(String[] args){

JFrame f = new JFrame(“Hello World”);JPanel p = new JPanel();JButton b = new JButton(“press me”);p.add(b); // add button to panelf.getContentPane().add(p); // add panel to

framef.show();

}}

press me

Unit 09 13

Java GUI API Evolution

• Java provides classes representing UI items like windows, buttons, menus etc.

• The GUI toolkit in older versions of Java is called AWT.

• An enriched version the toolkit, Swing, was developed in later versions of Java.

• AWT and Swing are part of the

Java Foundation Classes (JFC).

• Why was Swing developed in addition to AWT?

• Special library of classes that allows Java programs to have a windowing interface

• An improved version of older library called Abstract Window Toolkit (AWT).

• Standard part of all versions of Java 2 (JDK 1.2)

Unit 09 14

Java GUI API Evolution (cont'd)

AWT components:– Heavyweight components– Associated with native components called peers– Same behaviour, but platform-dependent look– Package java.awt

• By relying on native peers, AWT components are limited: • Slow on some platforms.• Portability problems.

Swing components:– Lightweight components – Are rendered and controlled by the JVM.– Swing has more powerful options– Swing can be shipped with application

as it is non-native.– Package javax.swing

Unit 09 15

• Swing is based on a composite design• Top-Level Container

– Example: JFrame– Holds all other swing components– Other options: JDialog and JApplet

• Intermediate Container– Example: JPanel– Used to control placement of GUI components– Acts as a middle person– Other options: JScrollPane, JTabbedPane, …

• Atomic Components– Example: JButton– Used for self-contained GUI components– Other options: JTextField, JTable,

Swing Features and Concepts

Unit 09 16

Containment hierarchy

Top level containers: JFrame, JDialog, JApplet

Basic controls: JButton, JComboBox, List, Menu, Slider, JTextField, JLabel, progress bar,

tool tip

Content pane: the main container in JApplet, JDialog, and JFrame Objects

General purpose containers: Panel, scroll pane, split pane,

tabbed pane, tool bar

Unit 09 17

Review Exercises

1. Explain the advantages of graphics-based over text-based user

interfaces.

2. What is a good and effective GUI? Why is it necessary to design GUI

for all on-trivial applications? Explain..

3. Explain the implications of good as well as badly designed GUIs.

4. What is JFC? What Swing? Why was the JFC enriched with Swing?

5. AWT components are said to be heavy weight while Swing

components are said to be light weight. Explain what these notions

mean.

6. Enumerate the major knowledge units that must be understood for

developing effective GUI applications. Briefly explain each of these

knowledge units.