Graphical User Interfaces and Java Display Components

1
Graphical User InterfacesandJava Display
Components

• Session 6
• LBSC 790 / INFM 718B
• Building the Human-Computer Interface

2
Agenda

• Questions
• Human-Computer Communications
• Graphical User Interfaces
• GUIs in Java
• Event handling

3
Interaction Styles

• Language-based interfaces
• Command line interfaces
• Interactive voice response systems
• Graphical User Interfaces (GUI)
• Virtual Reality (VR)
• Ubiquitous computing

4
Human-Computer Communication
Human
Mental Models
Sight Sound
System
Task
Hands Voice
Software Models
Keyboard Mouse
Task
User
Display Speaker
Computer
5
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

6
Human Senses

• Visual
• Position/motion, color/contrast, symbols
• Auditory
• Position/motion, tones/colume, speech
• Haptic
• Mechanical, thermal, electrical, kinesthethic
• Olfactory
• Smell, taste
• Vestibular

7
Computer Output

• Image
• Fixed view, movable view, projection
• Acoustic
• Headphones, speakers, within-ear monitors
• Tactile
• vibrotactile, pneumatic, piezoelectric
• Force feedback
• Joystick, pen, dexterous handmaster

8
Computer Output

• Inertial
• Motion-based simulators
• Locomotive
• Stationary bicycle, treadmill, ...
• Olfactory
• Chemical (requires resupply)
• Temperature

9
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

10
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

11
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

12
WIMP Interfaces

• Windows
• Spatial context
• Icons
• Direct manipulation
• Menus
• Hierarchy
• Pointing devices
• Spatial interaction

13
GUI Interaction Options

• Direct manipulation
• Point and click, scrolling, sliders,
• Menus
• Text
• Complete or dynamic queries

14
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)

15
Menus

• Conserve screen space by hiding functions
• Menu bar, pop-up
• Can hierarchically structured
• By applications 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

16
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

17
GUI Components

• Windows (and panels)
• Resize, drag, iconify, scroll, destroy
• Selectors
• Menu bars, pulldown lists
• Buttons
• Labeled buttons, radio buttons, checkboxes
• Icons
• Text, images

18
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

19
Java Swing

• Swing High-level abstract operations
• Containers
• Components
• Layout managers
• Relative positioning
• Low-level operations for detailed control
• Absolute positioning
• Drawing (Graphics)

20
Swing Controls

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

21
Display Elements

• JLabel
• Icon
• JProgressBar
• setToolTipText()

22
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()

23
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

24
Java Containers

• Displayable windows
• JFrame
• Subordinate windows (dialogs)
• JOptionPane, JColorChooser, JFileChooser
• Grouping for layout management
• JPanel
• Specialized containers
• JScrollPane
• JTabbedPane
• JSplitPane

25
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

26
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 todays class.