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 Task System Mental ModelsSight Sound Hands Voice TaskUser Software ModelsKeyboard Mouse Display Speaker 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.