Graphical User Interfacesand

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

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

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.