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