GUI

GUIGraphical User

Interface

Outline

Introduction Packages Components Layout Manager Events and Listeners Examples

Introduction

Definition Abbreviated GUI (pronounced GOO-ee). Program interface that takes advantage

of the computer's graphics capabilities to make the program easier to use.

User interface based on graphics (icons and pictures and menus) instead of text; uses a mouse as well as a keyboard as an input device.

Includes standard formats for representing text and graphics.

History Douglas Engelbart's Augmentation of Human

Intellect project at SRI in the 1960s developed the On-Line System, which incorporated a mouse-driven cursor and multiple windows.

The first GUI was designed by Xerox Corporation's Palo Alto Research Center in 1973.

Features: 3-button mouse, bit-mapped display,the use of graphical windows, ethernet network.

Macintosh team at Apple Computer (included members of the Xerox PARC group) continued to develop such ideas in the first commercially successful product to use a GUI, the Apple Macintosh, released in January 1984.

One reason for their slow acceptance: require considerable CPU power and a high-quality monitor.

Java GUI GUI frameworks

Part of Java Foundation Classes (JFC) Two important packages:

Abstract Window Toolkit (AWT). Provides the basic support for building GUIs.

Swing. Extension of AWT, provides extensive support for building high-quality GUIs.

Components, also known as widgets, are the building blocks of the visual aspect.

Each GUI is characterized by its visual appearance and its behavior pattern in response to user input.

Packages

Abstract Window Toolkit

What is it? Is a GUI toolkit that is supplied with

all Java systems. Provides the basic support for

building graphical user interfaces using components

Java.awt provides the classes for the interfaces

AWT is designed to be portable and work across multiple platforms

Components: represents something that has a position and size and can be painted on the screen and receive input events. 

Component subclasses of the Component class.

Two types: Primitive components: components that

do not contain other components. Containers: contain other primitive

components and containers.

Component Class

Container Class A container is a type of component that

provides a rectangular area within which other components can be organized by a layout manager.

Container IS-A Component so a Container can go inside another Container

Some subclasses of container class are: Dialog: window that takes input from a user Window: borderless and titleless top-level window Frame: Top-level window with a title and a border.

Swing Package Built on top of Abstract Windows

Toolkit (AWT) Subclass of the Component class Subclass of Container class

What does it do?

Provides components to communicate with user Input from keyboard or mouse Output to console

Similar to AWT but enhanced

Disadvantages of AWT

Poor performance Lack of sophistication Heavyweight Looks determined by Platform

Benefits of Swing

Pluggable look and feel Constant look and behavior Eliminates overhead Lightweight Improved components More robust

Components

AWT Components

Swing Components

Components

Buttons Checkboxes Radio buttons Combo boxes (drop down menus) Textfields Labels

The Button class creates pushbuttons with text labels. Button button = new Button("...");

add(button); A JButton can be instantiated and

used in a GUI just like a java.awt.Button. JButton myButton = new

JButton("Tiger"); add(myButton);

Buttons

Checkboxes Checkboxes are toggle buttons that operate

independently of other checkboxes or can be put into a group so that they operate like radio buttons.

Checkbox cb = new Checkbox("..."); somePanel.add(cb);

JCheckBox is similar to an AWT Checkbox that is not in a CheckboxGroup.

JCheckBox cb1 = new JCheckBox("Choose Me", true);

Radio Buttons In AWT, radio buttons are

checkboxes that belong to the same CheckboxGroup; which ensures that only one checkbox is selected at a time.

CheckboxGroup cbGroup = new CheckboxGroup(); Checkbox cb1 = new Checkbox("...", cbGroup, true); add(cb1);

Each JRadioButton is added to a ButtonGroup so the group behaves as a set of radio buttons.

ButtonGroup rbg = new ButtonGroup(); radioButton = new JRadioButton("$45,000"); add (radioButton);

Combo Boxes Choice produces pull-down menus with a single

selection showing, the other options get displayed when the user clicks with the mouse.

Known as "combo boxes," "drop-down list boxes," or "option menus“.

Choice choice = new Choice(); choice.addItem("..."); choice.addItem("..."); ... somePanel.add(choice);

JComboBox works like AWT's Choice component JComboBox combo1 = new JComboBox();

combo1.addItem (“Mercury”);

TextFields Textfields create boxed areas to display

and/or read a single line of text. (TextArea can display multiple lines, but no ActionEvent).

Java textfields do not permit mixed fonts or colors within a single textfield. TextField lastNameField = new TextField(15);

add(lastNameField); JTextField behaves very similarly to AWT

TextField. JTextField tf = new JTextField();

tf.setText("TextField");

Labels Simple textual displays, without any

associated actions. Label label = new Label("..."); add(label);

A JLabel is a single line label similar to java.awt.Label.

Additional functionality that a JLabel has is the ability to:

Add an Icon Set the vertical and horizontal position of text relative

to the Icon Set the relative position of contents within component

JLabel plainLabel = new JLabel("Plain Small Label");

Layout Manager

What it is

It allows to format components on the screen in a platform-independent way.

LayourtManager interface Programs with a consistent and

reasonable appearance

Flow Layout

Default layout for the Panel class. Components adjust to fit screen. Components’ flow change based

upon the new width and height.

To create a Flow Layout Three constuctors

FlowLayout(align, hGap,vGap) Creates a flow layout with the alignment set to align and the horizontal and vertical gaps.

FlowLayout(align)- creates a flow layout with the given aligh and the horizontal and vertical gaps set to the default value

FlowLayout() – creates a flow layout with the align, horizontal and vertical gap set to the default value.

Example

Grid Layout

What is it and what does it do Layout manager that arranges

components in a rectangular grid All components given same size Components can be stretched

vertically and horizontally

Implementation Constructors

GridLayout (r,c,hGap,vGAp) Creates a grid layout manager with r rows and c

columns and with the horizontal and vertical gaps set to hGap and vGAp

GridLayout (r,c) Creates a grid layout manager with r rows and c

columns and with the horizontal and vertical gaps set to 0

GridLayout () Creates a grid layout manager with a single row and

with the horizontal gap set to 0

Examples

Border Layout

What it is and what it does Layout manager that arranges as

many as five components in five positions identified as North,South,East, and Center

Can be stretched vertically or horizontally to fill the space between components

Constructors

BorderLayout (hGap, vGap) Creates a border layout manager with

the horizontal and vertical gaps set to hGap and vGap

BorderLayout () Creates a border layout manager with

the horizontal and vertical gaps set to 0

Examples

Events and Listeners

Events and Listeners

Events occur when the user interacts with the GUI.

Listeners are used to respond to the event

Each kind of Event is related to is own Listener

Events

The user can interact with the Gui in some different ways: with the mouse with the keyboard with a button others

Listeners “Listen” the information of the

event and respond to it Different mechanisms of adding

listeners: part of the class defining Gui inner class separate class anonymous local class

Types of Events and Listeners

ActionEvent ActionListener

KeyEvent KeyListener

MouseEvent MouseListener

ActionEvent

ActionEvent occurs when the user clicks a button, choose a menu item or press Enter in a Text file.

Methods: String getActionCommand() Int getModifiers() Object getSource()

ActionListener

ActionListener is used to respond to ActionEvent

Methods: actionPerformed(ActionEvent)

KeyEvent

KeyEvents occur when the user type at the keyboard.

Methods: int getKeyChar() int getKeyCode() String getKeyText() others.

KeyListener

KeyListener is used to respond KeyEvents

Methods: keyTyped(KeyEvent) keyPressed(KeyEvent) keyReleased(keyEvent)

MouseEvent MouseEvent occurs when the user

uses the mouse to interact with a component.

Methods: getClickCount() getX() getY() Others.

MouseListener MouseListener is used to respond

to MouseEvents Methods:

mouseClicked(MouseEvent) mousePressed(MouseEvent) mouseReleased(MouseEvent) mouseEntered(MouseEvent) mouseExited(MouseEvent)

Examples

Examples

Bouncing Ball Ball (mouse) Digital Note Word Finder

Bouncing Ball (Framework)

Bouncing Ball (Code)

Ball (mouse)

Ball (mouse)

public boolean mouseDown (Event e, int x, int y){

x_speed = - (x_speed);return true;

}

Word Finder

Digital Note

Questions?