CS415 Human Computer Interaction

Transcription

1 CS415 Human Computer Interaction Lecture 5 HCI Design Methods (GUI Builders) September 18, 2015 Sam Siewert

2 A Little Humor on HCI Sam Siewert 2

3 WIMP GUI Builders The 2D GUI is the Killer App for WIMP Floating Window in Main Desktop Window Integrates Various Widgets Window Canvas [Background] Buttons (Radio Selection, Single-Click-Icons, Toggles) Text Entry and Display Pop-Up and Pull-Down Menus Sliders and Scrolling (for large windows) Minimization and dismissal Handles Desktop Integration Hide and Expose Events Pointer Selection Events Look and Feel of Existing Windows Sam Siewert 3

4 Elements of a GUI Builder Layout Tool with Code Generation API for Simple Layout Main Window and Realization of it in Main program Canvas (Background) Layout Widget (where to place sub-windows and widgets inside application main window) Active and Passive widgets Active widget event handlers Filling in Event Handling Behavior State machine or State transition design Sam Siewert 4

5 Java OOP Java Calculator Example Main program container class CalculatorGui class Public and Private classes and methods Sam Siewert 5

6 Java Calculator Walkthrough and Demo Import of Java Swing GUI Widget set Instantiation of Calculator GUI Main window configuration and realization import javax.swing.*; import java.awt.*; import java.awt.event.*; Main widget construction public class SwingCalculator { public static void main(string[] args) { CalculatorGui cg = new CalculatorGui(); Main widget configuration cg.setsize(250,400); cg.setresizable(false); cg.setdefaultcloseoperation(jframe.exit_on_close); cg.setvisible(true); Main widget realization Sam Siewert 6

7 Advantages Java for WIMP GUIs Portable runs on Java Virtual Machine Interactive development with IDE (DrJava or Eclipse) Well Designed OOP Widely Used Lots of Tutorials and Documentation Good for mobile systems (e.g. Android OS) Disadvantages Interpreted Byte Codes or Just-in-Time Compilation (Slower than Native Compiled code) Requires installation of JVM (Java Virtual Machine) Distribution requires JAR (Java Archvie) Security Concerns Oracle Resources Sam Siewert 7

8 import javax.swing.*; import java.awt.*; import java.awt.event.*; Deeper Dive public class CalcTemplateGui extends JFrame { JFrame frame = new JFrame("My Simple Calculator"); JTextField answerfield; JButton add, sub, div, mul, equals; JButton one, two, three, four, five, six, seven, eight, nine, zero; JPanel contentpanel; String stemp1=""; // CalculatorGui default constructor - super long constructor public CalcTemplateGui() { super("my Simple Calculator"); private class Operations implements ActionListener { public void actionperformed(actionevent event) { JButton src = (JButton) event.getsource(); private class ArgumentEnter implements ActionListener { public void actionperformed(actionevent event) { JButton src = (JButton) event.getsource(); Event handler Classes for specific Active widgets 0-9 Digits and Arithmetic Operators Sam Siewert 8

9 Connecting Buttons to Event Handlers Instantiate Handler Classes for Button Types Add Action Listener Using Swing Implement Handler Class and Detect Source // layout with specific dimension for each button one.setpreferredsize(dim); two.setpreferredsize(dim); div.setpreferredsize(dim); mul.setpreferredsize(dim); equals.setpreferredsize(dim); // create a private class to handle events detected by an action listener Operations op = new Operations(); ArgumentEnter arg = new ArgumentEnter(); // Add a listener to each button to invoke a handler for arguments entered one.addactionlistener(arg); two.addactionlistener(arg); nine.addactionlistener(arg); zero.addactionlistener(arg); // Add a different listener to each button to invoke a handler add.addactionlistener(op); sub.addactionlistener(op); div.addactionlistener(op); mul.addactionlistener(op); equals.addactionlistener(op); Sam Siewert 9

10 GUI Builder / Code Challenges Builders that Generate Code can get Out of Sync with Event Handlers Generates Separate Handler Files (Classes) Should not Overwrite Handler Logic Structure Logic in External Modular Code GUI Code Becomes Redundant Similar Code for Each Button (Active Widget) Many buttons Similar Code for Layout Similar Code for Panels, Menus, etc., differing only by Labels and Use OOP Can Abstract and Allow for Instances that Inherit and Refine Sam Siewert 10

11 Interactive Feature - Handlers Implements Tasking and State Machine Logic of GUI Function of Current Button Depends on History of Previous Button Events Menus are Context Sensitive (Some Options Grayed Out) Pop-Ups Generated Based on Task Stream and Errors E.g. Are you Sure - Confirm Deletion of File E.g. Exit without Saving? Display Updates Require History Cancel Undo/Redo Context Sensitive Help Pop-Ups Sam Siewert 11

12 Event Handlers Ideally Simple State Machines May Require Concurrency Display Updates (Telemetry, Monitors) Pointer Drive Selections (Buttons, Menus, Sliders, Scrolling) Client/Server Interaction Status Updates [Progress] Seems Simple, but Challenging Due to Multiplicity of Simplicity Verification and Validation Use as Intended, Stress Test (Unexpected Use) Sam Siewert 12

13 GUI Layers GUI Application Build on API or CLI Simply Generates CLI Commands or API Calls Updates Displays with Return Codes or Screen Scraped Messaging Not Always the Best Idea (but Often Done) Sam Siewert 13

14 Prototypes and Mock-ups Early Feedback on Look and Feel Usability Engineering Time to Complete Common Tasks Success Rate for Test Tasks by Different Users Cognitive Load for Tasks using an HCI or GUI Focus Groups for Usability Sam Siewert 14