Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Widgets Overview Widgets Widget toolkits Lightweight Swing 2 vs. heavyweight widgets Widget Demo CS 349 S13 - Widgets Widget Widget is a generic name for parts of an interface that have their own behavior: buttons, progress bars, sliders, drop-down menus, spinners, file dialog boxes, … widgets Can have their own appearance Receive Put also called “components”, or “controls” and interpret their own events into libraries (toolkits) for reuse Widget from Wow Wow Wubbzy 3 CS 349 S13 - Widgets Logical Input Device defined by its function, not what it looks like Logical Button Device - function: generates a “pushed” event - can look like a push button, a keyboard shortcut, a menu item a widget can be a logical input device with appearance 4 CS 349 S13 - Widgets MVC Widget Architecture Properties present View perceive notify essential geometry express Change Events change translate 5 Model logical device Controller CS 349 S13 - Widgets MVC Widget Architecture Widget Properties present View perceive notify essential geometry express change translate 6 CS 349 S13 - Widgets Model Controller Change Events Categorizing and Characterizing Widgets Three Categories of Widgets: - Simple Widgets Widgets - Abstract Model Widgets (… wait for MVC lecture) - Container Further characterize widgets by: - the model which the widget manipulates - the events that the widget generates - the widget properties which change behaviour and appearance 7 CS 349 S13 - Widgets Simple Widgets 1 Labels and Images - no model, (usually) no event, - e.g. label, icon, spacer, Button - no model, push event, label, size properties Boolean - true/false model, changed event, radio button, checkbox, toggle button - e.g. 8 CS 349 S13 - Widgets “Radio Button” 9 CS 349 S13 - Widgets Simple Widgets 2 Number - bounded real number model, changed event, - e.g. slider, progress bar, scrollbar Text - string model, changed, selection, insertion events, optional formatters (numeric, phone number, …) 10 CS 349 S13 - Widgets Special Value Widgets colour/file/date/time 11 pickers CS 349 S13 - Widgets Container Widgets 1 Menu - hierarchical Choice - list list of (usually) buttons from a List of boolean widgets - e.g. drop-down, combo-box, radio button group, split button 12 CS 349 S13 - Widgets Container Widgets 2 Panel (Pane, Form, Toolbar) - arrangement - e.g. of widgets JPanel, toolbar Tab - choice between arrangements of widgets 13 CS 349 S13 - Widgets Widget toolkits Also called widget libraries or GUI toolkits or GUI APIs Software bundled with a window manager, operating system, development language, hardware platform Defines a set of GUI components for programmers - Examples: buttons, drop-down menus, sliders, progress bars, lists, scrollbars, tab panes, file selection dialogs, etc. Programmers access these GUI components via an application programming interface (API) 14 CS 349 S13 - Widgets Event-driven programming Widget toolkits use event-driven programming model Reactive systems - User action → program response - Most of the time the program sits around doing nothing Widget toolkit supports a mechanism for mapping user action on widget to appropriate application code to handle that action 15 CS 349 S13 - Widgets Widget Toolkit Design Goals: Complete - GUI designers have everything they need Consistent - Behaviour is consistent across components Customizable - Developer can reasonably extend functionality to meet particular needs of application Meeting 16 these requirements encourages reuse CS 349 S13 - Widgets Completeness The “Macintosh 7” (Dix, Finlay, Abowd, Beale, 1998) - Button - Slider - Pulldown menu box - Radio button - Text entry / edit fields - File open / save - Check Java 17 Swing has many widgets … CS 349 S13 - Widgets SwingSet3 Demo - http://download.java.net/javadesktop/swingset3/SwingSet3.jnlp 18 CS 349 S13 - Widgets Consistency Facilitate learning by: - Common - Using 19 look and feel Widgets appropriately CS 349 S13 - Widgets Name that Look 2 1 3 4 5 20 6 CS 349 S13 - Widgets Using Widgets Appropriately People OTR expect widgets to behave in certain ways messaging study by Stedman et al. - Question: How do you initiate verification? - Answer: Right-click on the label at bottom left! http://www.cypherpunks.ca/~iang/pubs/otr_userstudy.pdf 21 CS 349 S13 - Widgets Customizable Two common strategies: Properties 1. - e.g. change colour, font, orientation, text formatter, … Factor out behaviour (Pluggable Behaviour) 2. - Responding to an action: ActionListener UIManager for changing look and feel - JTable example … - Swing’s 22 CS 349 S13 - Widgets Customizable: JTable JTable factors out much of its functionality - The actual data (TableModel) - Selection of items (ListSelectionModel) - Rendering of cells (TableCellRenderer) - Editing of cells (TableCellEditor) Developer has lots of flexibility in the data that can be represented, how it can be selected, its method of presentation, and its method of editing 23 CS 349 S13 - Widgets Implementation Choices Heavyweight Widgets - OS provides widgets and hierarchical “windowing” system - Widget toolkit wraps OS widgets for programming language - BWS can dispatch events to a specific widget - Examples: nested X Windows, Java’s AWT, OSX Cocoa, standard HTML form widgets, Windows MFC Lightweight Widgets - OS provides a top level window - Widget toolkit draws its own widgets and is responsible for mapping events to their corresponding widgets - Examples: Java Swing, JQuery UI, WIndows WPF 24 CS 349 S13 - Widgets Java Abstract Window Toolkit (AWT) Heavyweight toolkit - OS standard widgets, mapped onto the Java language: Button, Canvas, Choice, Frame, Label, List, MenuBar, Panel, PopupMenu, Scrollbar, TextArea, Window - Since BWS is aware of them, can send events directly to them Only components that are supported on most platforms are included, so it’s a minimal widget toolkit - the - so, “least-common denominator” across OSX, Windows, Linux, … no Spinner, no combo box, no progress bar, … Programmers Uses 25 need to re-create/find unsupported widgets exact OS look and feel CS 349 S13 - Widgets Java Swing Widget Toolkit Lightweight Widgets are implemented in Java 2D - essentially, AWT Toolkit custom draw commands in paintComponent() is still required for Window (OS level) BWS only knows about main window, so widget event dispatch is done in Java Mixing Swing and AWT widgets used to be problematic - Fewer - AWT technical problems after Java 6 rendered by OS, Swing rendered by Java (guess who won) Different - (see 26 Swing Look and Feels SwingThemeDemo.java lecture code) CS 349 S13 - Widgets AWT and Swing 27 CS 349 S13 - Widgets Eclipse’s Standard Widget Toolkit (SWT) OS components written in Java but rendered using native OS routines - Unlike AWT, if no corresponding native controls, then SWT has implementations for that platform SWT and Swing are different tools that were built with different goals in mind. - SWT: provide a common API for accessing native widgets across a spectrum of platforms. The primary design goals are high performance, native look and feel, and deep platform integration. - Swing: designed to allow for a highly customizable look and feel that is common across all platforms 28 CS 349 S13 - Widgets Swing Code Demo Add JLabel, set properties Add JButton, JSlider Create JMenuItems, add to JMenu in a JMenuBar Create JRadioButtons, put into ButtonGroup and JPanel Create events for all widgets to setText in label Set layout manager for JFrame 29 CS 349 S13 - Widgets 30 CS 349 S13 - Widgets