1 / 20

Introduction

This overview delves into the interaction cycle within graphical user interfaces (GUIs), exploring the layered approach to supporting user interaction and the essential components that constitute GUIs. Key elements include the input and output sides of GUIs, device interactions, window management, and UI toolkits. The layered architecture simplifies application development across various devices, highlighting the role of device drivers, operating systems, and application layers. Practical examples are provided, along with programming illustrations using Java and Tcl/Tk, aiding in the comprehension of interactive systems.

galena
Télécharger la présentation

Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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)

More Related