Upload
gyles-stephens
View
215
Download
1
Embed Size (px)
Citation preview
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