Introduction

1. Introduction CMPT 381

2. Outline • The interaction cycle • Parts of a Graphical User Interface • A layered approach to supporting interaction

3. The Interaction Cycle

4. architecture of interactive systems the human the system view mental model present perceive notify model express translate change controller the interface

5. Example: software thermostat view view mental model mental model Too cold, move to half way present notify notify Value changed Redraw slider model model Max = 250 Min = 160 Temp = 200 express express translate translate Mouse movement Watch mouse change change controller control Change temp. from 20 to 22

6. The GUI

7. Parts of a GUI • Input side: • Input devices • Device drivers • Device interfaces • Window management • Input events • Output side: • Interface widgets • Graphics & sound • Display/output devices

8. Parts of a GUI • Input side: • Input devices • Device drivers • Device interfaces • Window management • Input events • Output side: • Interface widgets • Graphics & sound • Display/output devices UI Toolkit

9. Layered Approach Display Output Application UI Toolkit Windowing System Operating System Devices User Input

10. Layered Approach • Device layer • Hardware level for input and output devices • Device drivers communicate with the OS • OS layer • Turns input signals into events and sends to applications • Provides graphics/sound API • low-level machine-optimized drawing routines • e.g. Windows API, Macintosh Toolbox, X Intrinsics

11. Layered Approach • Windowing system layer • puts applications in separate windows • handles resize, close, and iconify events • enforces a presentation style • UI Toolkit layer • provides a set of high-level interface components • in Java, called the Abstract Windowing Toolkit (AWT) • in Tcl/Tk, called Tk • Handles incoming events • provides support for widget layout and graphics

12. Layered Approach • Application layer • decides what to do with user input • manipulates the UI widgets • controls custom repainting of the screen • The programmer only has to deal with the application and toolkit layers

13. Layered Approach • The layers are much the same whether you’re building for the desktop, amobile device, or a wall display • The specifics capabilities of the UI toolkit will be different, but the basic ideas are similar

14. Window System • Controls mouse, keyboard, monitor settings • Provides windows for applications • Keeps a map of what application is where • Dispatches input to different windows • Uses the map to decide who to inform

15. Window Manager • Controls how windows look and act • Window decoration, Title bar • Window switching, virtual desktops • (Note that a ‘Desktop Environment’ is not the same as the WM; it is an application) • Microsoft Windows: • Combines OS, Window System, Window Manager, and Desktop Environment

16. Olivier Chapuis and Nicolas Roussel • Metisse • http://insitu.lri.fr/~roussel/videos/metisse/metisse/metisse.mov • Compiz Fusion • http://semicolons.org/post/271696242/compiz-fusion

17. Programming the UI

18. Hello World in Java/Swing import javax.swing.*; public class HelloWorldSwing { private static void createAndShowGUI() { JFrame frame = new JFrame("HelloWorldSwing"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); frame.pack(); frame.setVisible(true); } public static void main(String[] args) { javax.swing.SwingUtilities.invokeLater( new Runnable() { public void run() { createAndShowGUI(); } }); } }

19. Hello World in Tcl/Tk label .hi –text “Hello” pack .hi

20. Homework • Work with your three environments • Online tutorials, e-books from U of S library • Textbook: • Chapter 1 (overview) • Chapter 4 (widgets)