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
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.