Building the user interface - PowerPoint PPT Presentation

1 / 72

About This Presentation

Title:

Building the user interface

Description:

high-level events: selecting an item on the menu, pressing a button, entering text in a field. ... mouse event: the mouse is moved or dragged, a button pressed ... – PowerPoint PPT presentation

Number of Views:26

Avg rating:3.0/5.0

Slides: 73

Provided by: hyperspace

Category:

more less

Transcript and Presenter's Notes

Title: Building the user interface

1
Chapter 18

Building the user interface

2
This chapter discusses

Javas graphical user interface.
Swing an enhancement of a library called the
Abstract Window Toolkit (AWT).
Event-driven, window-based applications.
Swing as a case study of how large libraries are
organized.

3
The system interface

The interface and the model are two of the
principal components of a software system.
The interface handles interaction with the
external world.
When the external world is a person, the
interface is called a user interface.

4
Algorithm-driven interfaces

In an algorithm-driven approach, the application
determines exactly what information it needs from
the environment, and when it needs it.
The application has access to several streams of
data.
A stream is a sequence of bytes.

5
Algorithm-driven interfaces (cont.)

A character stream is a set of ASCII characters.
Otherwise it is a binary stream.
Input stream sources can be a users keyboard, a
file, another program, an external device, etc.
Output stream targets can be a users display
screen, a file, another program, an external
device, etc.

6
Java compiler stream

1 input stream
2 output streams

7
Nim game user interface

Enter number of Sticks.
3
Player Player1 takes 2 leaving 1 sticks.
Player Player2 takes 1 leaving 0 sticks.
Game over. Player 1 won.
To Play again, enter 1 to stop enter 0
1
Enter number of sticks.
This game writes output and reads input.

8
Filters

Where input data comes from and where output data
goes often is not important to the application.
Filters read input from a single stream called
standard input, write output to an output stream
called standard output, and write error messages
to a stream called standard error.

9
Event-driven interfaces

The application is active in an
algorithm-driven interface it is passive in an
event-driven system.
An event-driven system waits for something to
happen (an event) in the environment.
event-driven an input-output model in which the
application waits for an event to occur, responds
to the event, and waits for the next event.

10
Event-driven interfaces (cont.)

An application with a window-based interface
provides a graphical control panel containing a
range of options.

11
Event-driven interfaces (cont.)

In a window-based system, we assume that there is
a native windowing system that actually detects
events like mouse clicks, mouse movement, key
strokes, etc., and manages the display.
Java applications interact with the native
windowing system.

12
Swing

A graphical user interface is made up of
components (widgets).
windows
buttons
menus, etc.
Each components has attributes of location, size,
shape, color, etc.
Components are defined in a class library
contained in the package javax.swing

13
(No Transcript)
14
JComponent abstract class
15
JComponent abstract class (cont.)
16
JComponent abstract class (cont.)

JComponent is a subclass of the AWT.
public Color getForeground ()
public Color getBackground ()
public Point getLocation ()
public Dimension getSize ()
public void Color setForeground(Color fg)
public void Color setBackground(Color bg)
public void Point setLocation(Point p)
public void Dimension setSize(Dimension d)

17
JComponent abstract class (cont.)

Many of the methods are overloaded. For
instance, there are versions of setLocation and
setSize that take two int arguments rather than
a Point or Dimension.

18
JComponent abstract class (cont.)

Color, Point, and Dimension are AWT classes.
Instances of Color are immutable.
The class Color defines a number of constant
references. i.e. Color.red
Class Dimension encapsulates width and height.

19
Containers

Objects that contain components are containers.
JComponent is a subclass of Container.
component a distinct element of a graphical user
interface, such as a button, text field, etc.
container a graphical user interface component
that can contain other components.

20
Containers (cont.)
21
JPanel

Used as a place to put a collection of other
components.
Jpanel p new Jpanel()
p.add(new Jbutton(on))
p.add(new Jbutton(off))

22
Manipulating content

Class Container defines an extensive set of
methods for manipulating its content.
public int getComponentCount()
The number of Components in this Container.
public Component getComponent (int n)
The Component with the specified index.
require
0 lt n lt this.getComponentCount()
public void remove (Component comp)
Remove the specified Component.
public void remove (int index)
Remove the Component with the specified index.
require
0 lt index lt this.getComponentCount()

23
Top-level containers

A top-level container is one that is not
contained in any other container. i.e. JApplet,
JDialog, JFrame, and JWindow.

24
JFrame

A window with a title and a border.
JFrame is a subclass of java.awt.Container, not
JComponent.
It delegates the responsibility of managing its
components to another object--JRootPane.

25
JRootPane

JRootPane is a JComponent whose principal
responsibility is to manage the content of some
other container.
It is a composite object, including a content
pane.
The content pane is usually a JPanel, and is the
working area of the JFrame, excluding title,
border, menu.
Components are not added directly to the JFrame,
but to the content pane.

26
JRootPane (cont.)

getContentPane returns a Container.
JFrame f new JFrame(A Frame)
JButton b new JButton(Press)
Container cp f.getContentPane()
cp.add(b)
JApplet, JDialog, JWindow and JInternalFrame also
use JRootPane to manage components.

27
(No Transcript)
28
Peers

JApplet, JDialog, JFrame, JWindow are heavyweight
components.
Instances of subclasses of JComponent are
lightweight components.
When a heavyweight component is created, the AWT
also creates an associated native GUI component
called a peer. i.e. Creation of JFrame, also
creates a frame peer.

29
Peers (cont.)

Peers actually do the work of capturing user
input and managing the screen area in which the
component is displayed.
Lightweights are implemented completely by Java.
Lightweights are drawn on the space provided by
their heavyweight parent containers.

30
Top-level frame

import javax.swing.
public class DisplayFrame
public static void main (String args)
JFrame f new JFrame (A Frame)
f.setSize(300,200)
f.setVisible(true)

31
Adding components

Adding components to the frame wont cause the
component to appear suddenly on the display.
A LayoutManager is an object responsible for
positioning and sizing the components in a
container.
A LayoutManager is specified in the interface
java.awt.LayoutManager.
public LayoutManager getLayout()
public void setLayout (LayoutManager
manager)

32
LayoutManager implementations

FlowLayout left to right, top to bottom.
BorderLayout north, south, east, west,
center.
GridLayout two-dimensional grid.
CardLayout one at a time from a deck
GridBagLayout vertically and horizontally
according to constraints.
BoxLayout either a single horizontal row or
single vertical column.
OverlayLayout specified components align in the
same place components are laid out on top of
each other.

33
FlowLayout
34
(No Transcript)
35
BorderLayout
36
(No Transcript)
37
GridLayout
38

When the GridLayout is created, we specify that
we want a grid of 3 rows and 2 columns. Since
there is more than 6 components, GridLayout
expands the number of columns, while keeping the
number of rows at 3.

39
Container validity

A Container is valid if it does not need to be
laid out. i.e. size is known to the system, and
the layout manager knows about all its
components.
A Container is invalid if its state is
inconsistent with its appearance.
A Container to which a component has been added
after it was last laid out is invalid.

40
Container validity (cont.)

Any number of things can cause the layout manager
to lay out the Container.
validate explicitly sets the Containers valid
property to true, and instructs the layout
manager to lay out the Container.
isValid returns the value of this property.
public boolean isValid()
public void validate()

41
Capturing and handling events

event the occurrence of an action, typically
external to the system, that the system is aware
of and must respond to.
low-level events pressing or releasing a key,
moving the mouse, pressing a mouse button.
high-level events selecting an item on the menu,
pressing a button, entering text in a field.
High-level events usually involve one or more
low-level events.

42
Some high-level events

key event a keyboard key pressed or released.
mouse event the mouse is moved or dragged, a
button pressed or released, the mouse cursor
enters or exits component.
component event a component is hidden, shown,
resized, or moved.
container event a component is added to or
removed from a container.
window event a window is opened, closed,
iconified, de-iconified, activated, deactivated.

43
Some high-level events (cont.)

focus event a component gains or loses focus.
action event a high-level event occurs.
adjustment event a high-level event occurs
representing scrollbar motions.
item event a high-level event occurs when user
selects a checkbox, choice, or list item.
document event a TextComponents content changes.

44
Java event classes
45
Java event classes (cont.)

The source of an event is determined with
public Object getSource()
An object that monitors when an event occurs is
called a listener.
To be notified of an event, a listener must
register with the events source.
The relation between a listener and an event
source is the observes relation.

46
Example

import java.awt.
import javax.swing.
import java.awt.event.
public class OnOffTest
public static void main (String args)
OnOffSwitch sw new OnOffSwitch()
class OnOffSwitch extends JFrame
public OnOffSwitch()
super(On/Off Switch)
JButton button new JButton(On/Off)
Container cp this.getContentPane()
button.setForground(Color.black)
button.setBackground(Color.white)
cp.add(button,BorderLayout.Center)
this.setSize(300,200)

47
Example
48
EventListener classes
49
Adding a listener

There is only one method specified in the
interface ActionListener.
public void actionPerformed(ActionEvent e)
class Switcher implements ActionListener
public void actionPerformed
(ActionEvent e)
When the user presses the button, an ActionEvent
is generated.

50
Example

class OnOffSwitch extends JFrame
public OnOffSwitch()
super(On/Off Switch)
JButton button new JButton(On/Off)
Switcher control new Switcher()
button.addActionListener(control)
Container cp this.getContentPane()
button.setForground(Color.black)
button.setBackground(Color.white)
cp.add(button,BorderLayout.Center)
this.setSize(300,200)
this.setVisible(true)

51
Example (cont.)

public void actionPerformed(ActionEvent e)
Component source
(Component)e.getSource()
Color oldForeground
source.getForegound()
source.setForeground
(source.getBackground())
source.setBackground(oldForeground)

52
Example (cont.)
53
Example (cont.)

Since the listener explicitly determines the
source of the event, it could handle events from
several sources without modification.
class OnOffSwitch extends JFrame
public OnOffSwitch()
super(On/Off Switch)
JButton button1 new JButton(On/Off)
JButton button2 new JButton(On/Off)
Switcher control new Switcher()
button1.addActionListener(control)
button2.addActionListener(control)

54
Adding a window listener

We would like to terminate the application when
the user selects the Close option from the
top-level window menu.
Selecting Close generates a WindowEvent in the
JFrame, specifically a window closing event.
The WindowListener interface is a bit more
complicated than the ActionListener interface it
specifies seven methods.

55
Adding a window listener (cont.)