1. Graphical User Interfaces and Java Display Components Session 6 LBSC 790 / INFM 718B Building the Human-Computer Interface

2. Agenda Questions Human-Computer Communications Graphical User Interfaces GUI’s 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 Task System Mental ModelsSight Sound Hands Voice TaskUser Software ModelsKeyboard Mouse Display Speaker Human 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 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

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 today’s class.