Graphical User Interfaces
and
Java Display Components
Session 6
LBSC 790 / INFM 718B
Building the Human-Computer Interface
Agenda
• Questions
• Human-Computer Communications
• Graphical User Interfaces
• GUI’s in Java
• Event handling
Interaction Styles
• Language-based interfaces
– Command line interfaces
– Interactive voice response systems
• Graphical User Interfaces (GUI)
• Virtual Reality (VR)
• Ubiquitous computing
Human-Computer Communication
Human
Mental Models
Task
System
Software Models
Task
Computer
User
Sight
Sound
Hands
Voice
Keyboard
Mouse
Display
Speaker
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
Human Senses
• Visual
– Position/motion, color/contrast, symbols
• Auditory
– Position/motion, tones/colume, speech
• Haptic
– Mechanical, thermal, electrical, kinesthethic
• Olfactory
– Smell, taste
• Vestibular
Computer Output
• Image
– Fixed view, movable view, projection
• Acoustic
– Headphones, speakers, within-ear monitors
• Tactile
– vibrotactile, pneumatic, piezoelectric
• Force feedback
– Joystick, pen, dexterous handmaster
Computer Output
• Inertial
– Motion-based simulators
• Locomotive
– Stationary bicycle, treadmill, ...
• Olfactory
– Chemical (requires resupply)
• Temperature
Visual Perception
• Closely spaced dots appear solid
– But irregularities in diagonal lines can stand out
• Any color can be produced from just three
– Red, Blue and Green: “additive” primary colors
• High frame rates produce apparent motion
– 24 fps (16mm film), 30 fps (NTSC video)
• Visual acuity varies markedly across features
– JPEG and MPEG suppress imperceptible features
Input Devices
• Text
–
–
–
–
Keyboard
Optical character recognition
Speech recognition
Handwriting recognition
• Direct manipulation
– 2-D: mouse, trackball, touch pad, touch panel
– 3-D: wand, data glove
• Remote sensing
– Camera, speaker ID, head tracker, eye tracker
2-D Direct Manipulation
• Match control actions with on-screen behavior
– Use a cursor for visual feedback if needed
• Rotary devices
– Mouse, trackball
• Linear devices
– Touch pad, touch panel, touch screen, joystick
• Rate devices
– Laptop eraserhead
WIMP Interfaces
• Windows
– Spatial context
• Icons
– Direct manipulation
• Menus
– Hierarchy
• Pointing devices
– Spatial interaction
GUI Interaction Options
• Direct manipulation
– Point and click, scrolling, sliders, …
• Menus
• Text
– Complete or dynamic queries
Direct Manipulation
• Select a metaphor
– Desktop, CD player, map, …
• Use icons to represent conceptual objects
– Watch out for cultural differences
• Manipulate those objects
– Select (e.g., left click, right click, double click)
– Move (e.g., drag and drop)
Menus
• Conserve screen space by hiding functions
– Menu bar, pop-up
• Can hierarchically structured
– By application’s logic
– By convention (e.g., where is the print function?)
• Tradeoff between breadth and depth
– Too deep  can become hard to find things
– Too broad  becomes direct manipulation
Dynamic Queries
• What to do when menus become too deep?
– Merge keyboard and direct manipulation
• Select menu items by typing part of a word
– After each letter, update the menu
– Once the word is displayed, user can click on it
• Example: Windows help index
GUI Components
• Windows (and panels)
– Resize, drag, iconify, scroll, destroy
• Selectors
– Menu bars, pulldown lists
• Buttons
– Labeled buttons, radio buttons, checkboxes
• Icons
– Text, images
GUI Design Strategies
• Platform-specific
– Development tool tuned for a windowing system
• Microsoft Windows, Mac, Unix X Windows
• Native look and feel (Optional in Java)
– Design using capabilities available on every system
• Separation of content management and display functions
• Common look and feel (Default in Java w/Swing)
– Adopt a common look and feel across platforms
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()
Java Event Model
• Create a GUI object
– JButton swapButton = new JButton(“swap”);
• Register the class containing the event listener
– swapButton.addActionListener(swapHandler);
• 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
– actionPreformed()
Standard Swing Listeners
• componentListener
– size, position, visibility
• focusListener
– gain or lose keyboard input
• keyListener
– keyboard input
• mouseListener
– mouse clicks and window entry/exit
• mouseMotionListener
– cursor position
Java Containers
• Displayable windows
– JFrame
• Subordinate windows (“dialogs”)
– JOptionPane, JColorChooser, JFileChooser
• Grouping for layout management
– JPanel
• Specialized containers
– JScrollPane
– JTabbedPane
– JSplitPane
Some Layout Managers
• GridLayout:
graph paper, identical shapes
• BoxLayout:
one column (or row)
• FlowLayout:
rows, with “component wrap”
(default for JPanel)
• BorderLayout: top, bottom, sides, center
(default for JFrame)
• GridBagLayout: graph paper w/different shapes
Muddiest Point
On a blank sheet of paper, write a
single sentence that will convey
to me what you found to be the
most confusing thing that was
discussed during today’s class.