Transcript GUI - Faculty Personal Homepage

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
1
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
2
A New Approach to Programming
Previous Style of Programming:
Event-Driven Style of Programming:
• List of instructions performed in
• Objects that can fire events and
order
objects that react to events
• Next thing to happen is next thing in
• Next thing to happen depends on
list
• Program performed by one agent—
next event
• Program is interaction between user
the computer
and computer
Unit 09
3
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
4
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
5
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
6
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
7
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
8
Building a GUI
• Create:
• Frame/JFrame
• Panel/JPanel
• Components
• Listeners
• Add:
• Listeners into components
• Components into panel
• Panel into frame
Unit 09
Listener
JLabel
JButton
JPanel
JFrame
9
Using a GUI Component
1.
2.
3.
4.
5.
Create it
Configure it
Add children (if container)
Add to parent (if not JFrame)
Add Listeners of events
Unit 09
Order is
importance
10
Using a GUI Component
1.
2.
3.
4.
Create it
• Instantiate object:
JButton b = new JButton();
Configure it
• Methods:
b.setText(“Press me”);
Add it
• panel.add(b);
Listen to it
• Events: Listeners
Press me
Unit 09
11
Application Code
press me
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 panel
f.getContentPane().add(p); // add panel to frame
f.show();
}
}
Unit 09
12
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
13
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
14
Swing Features and Concepts
• 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,
Unit 09
15
Containment hierarchy
Top level containers: JFrame, JDialog, JApplet
Content pane: the main container in JApplet, JDialog, and
JFrame Objects
Basic controls: JButton,
JComboBox, List, Menu, Slider,
JTextField, JLabel, progress bar,
tool tip
Unit 09
General purpose containers:
Panel, scroll pane, split pane,
tabbed pane, tool bar
16
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.
Unit 09
17