Collaboration and Sequence Diagrams

and

Graphical User Interfaces

Session 7LBSC 790 / INFM 718B

Building the Human-Computer Interface

Agenda• Project deliverables

• Collaboration and Sequence Diagrams

• Human-Computer Communications

• Graphical User Interfaces

• Wrap-up– Change in homework due date– Feedback: stop/start/continue

Project deliverables

• Project description – due 10/19

• Specification 1– due 10/26

• See me after class if:– You don’t have a team yet– Your team hasn’t sent your 2

sentences

Rapid prototyping process

Evaluate

RefineDesign

Specification

Identify needs/ establish

requirements

BuildPrototype

Final specification

Exemplifies a user-centered design approach

Start

Modeling the system

• Capturing the big picture

• Designing the object structure– Class diagram (“entity-relationship” diagram)– Object diagram (used to show examples)

• Represent object interactions for a scenario

• Represent event-object interactions

Bill’s Budget Flight Finder

Fli

es b

etw

een

*

0..11

1

FlightFinder Class DiagramRoute

GUI

Map

Timeline

Location

Airfield

Leg

AircraftType

Schedule

Flight

1

*

1..9 11..**

Sequence ofSequence of

2

1

Travelbetween

+addLeg(l:Leg)+summary():String

+search(p:Param)+display(r:Route)

+draw(r:Route)

+draw(r:Route)

-seats: integer-departureTime: Time-arrivalTime:Time+parse(s:String)+summary():String

-name:String-icaoIdentifier:String{4}

-latitude:double-longitude:double-timeZone:TimeZone+distanceTo(l:Location)

-flightNumber:String

+parse(s:String)

-updated:Time-source:URL

+parse(f:File)

-name:String-speed:int

+flightTime(o:Location, d:Location)

Con

tain

s

Use

s

Dis

play

ed in

Dis

play

ed in

1

1

Displayedin

1

*

2

*

D

FlightFinder Object Diagram

1:Route

:GUI

:Map

:Timeline

DC:Location

Andrews:Airfield

:Leg

C-9B:AircraftType

Sep26:Schedule

AF302:Flight

-seats=3-departureTime=1200Z-arrivalTime:1400Z

-name=Andrews AFB-icaoIdentifier=KADW

-latitude:38-48N-longitude:076-51W-timeZone=EASTERN

-flightNumber:AF302

-updated:Sep 26/1200Z-source:http://www…

-name=C-9B-speed=450 knots

LA:Location

-latitude=33-57N-longitude=118-24W-timeZone=PACIFIC

Scott:Airfield

-name=Scott AFB-icaoIdentifier=KBLV

Lambert:Airfield

:Leg

-seats=34-departureTime=1600Z-arrivalTime=1900Z

-name=Lambert Field-icaoIdentifier=KSTL

LAX:Airfield

-name=LA Intl Airport-icaoIdentifier=KBLV

NV514:Flight

-flightNumber:NV514

O

D

O

O

D

1st

2nd

Key: O = Origin D = Destination

Collaboration Diagram1:Route

:GUI

:Map

:Timeline

DC:Location

Andrews:Airfield

second:Leg

C-9B:AircraftType

Sep26:Schedule

AF302:Flight

LA:Location

Scott:Airfield

Lambert:Airfield

first:Leg

LAX:Airfield

NV514:Flight

1:ge

tTex

t() 7:getText()

2:getText()

5:ge

tTex

t()

6:ge

tTex

t()

3:getText()

4:ge

tTex

t()

10:g

etT

ext(

)

11:g

etT

ext(

)

8:getText()

9:ge

tTex

t()

13:g

etL

atL

ong(

)

12:g

etL

atL

ong(

)

15:p

lot(

r:R

oute

)

14:p

lot(

r:R

oute

)

Scenario: First route selected

Sequence Diagram

:GUIall:Airfieldsnear:Airfields andrews:Airfield first:Leg

findNear(dept):Airfields

return near

nextAirfield():Airfield

return andrews

nextLeg():Leg

return first

getDestination():Airfield

return scott

return near

findNear(scott):Airfields

Continue depth-first search, pruning unsuccessful routes after 9 legs

Interaction Styles

• Language-based interfaces– Command line interfaces– Interactive voice response systems

• Graphical User Interfaces (GUI)

• Virtual Reality (VR)

• Ubiquitous computing

Human-Computer Communication

Task System

Mental Models SightSound

HandsVoice

Task User

Software Models KeyboardMouse

DisplaySpeaker

Human

Computer

Mental Models

• How the user thinks the machine works– What actions can be taken?– What results are expected from an action?– How should system output be interpreted?

• Mental models exist at many levels– Hardware/operating system/network– Application programs– Information resources

WIMP Interfaces

• Windows– Spatial context

• Icons– Direct manipulation

• Menus– Hierarchy

• Pointing devices– Spatial interaction

GUI Components

• Windows (and panels)– Resize, drag, iconify, scroll, destroy

• Selectors – Menu bars, pulldown lists

• Buttons– Labeled buttons, radio buttons, checkboxes

• Icons– Text, images

Java Swing• Swing: High-level abstract operations

– Containers– Components

• Layout managers– Relative positioning

• Low-level operations for detailed control– Absolute positioning– Drawing (Graphics)

Swing Controls• JButton• JToggleButton• JRadioButton• JCheckBox• JList• JMenuBar, JMenu, JMenuItem• JComboBox (pop up menu)• JTree• JSlider• JTextField, JTextArea

Display Elements

• JLabel

• Icon

• JProgressBar

• setToolTipText()

Swing application structure

• Create top-level container– JFrame mainWindow = new JFrame();

• Create and add components– JPanel newPane = new JPanel();

– mainWindow.setContentPane(newPane);

• Arrange (layout) components

• Handle events

• Make visible

Java Event Model• Create a GUI object

– JButton swapButton = new JButton(“swap”);

• Create an inner class to “handle” the event– “implements” the appropriate listener interface(s)

• class swapHandler implements actionListener { … }

• Create appropriate listener methods in that class– actionPerformed()

• Register the class containing the event listener– swapButton.addActionListener(swapHandler);

Java Event Model• Create a GUI object

– JButton swapButton = new JButton(“swap”);

• Register the class containing the event listener– swapButton.addActionListener(swapHandler);

• Create a method to “handle” the event– “implements” the appropriate listener interface(s)

• class E5b implements ActionListener { … }

• Create appropriate listener methods in the class– actionPerformed()

Standard Swing Listeners• ActionListener• ComponentListener

– size, position, visibility

• FocusListener– gain or lose keyboard input

• KeyListener– keyboard input

• MouseListener– mouse clicks and window entry/exit

• MouseMotionListener– cursor position

Coming up

• Homework 3– Will post Friday evening– Graded – due 10/26– Added optional exercise

• Project description – due 10/19• Next week:

– Java display components– Algorithms

• Reading on reserve in EPSL

Stop / Start / Continue

• Please write one thing that you would like me or us to…– Stop doing– Start doing– Continue doing

…in class