Widgets Overview Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo 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 also called components, or controls Can have their own appearance Receive and interpret their own events Put into libraries (toolkits) for reuse Widget from Wow Wow Wubbzy
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 MVC Widget Architecture perceive present View notify Properties logical device essential geometry Model Change Events express change translate Controller MVC Widget Architecture Note: We've now introduced MVC at two distinct levels: the widget and the entire application. Widget present View Properties perceive notify essential geometry Model Change Events express change translate Controller
Categorizing and Characterizing Widgets Three Categories of Widgets: - Simple Widgets - Container Widgets - Abstract Model Widgets ( wait for MVC lecture) Further characterize widgets by: - the model which the widget manipulates - the events that the widget generates - the widget properties which change behaviour and appearance 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, - e.g. radio button, checkbox, toggle button Radio Button
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, ) Special Value Widgets colour/file/date/time pickers Container Widgets 1 Panel (Pane, Form, Toolbar) - arrangement of widgets - e.g. JPanel, toolbar Tab - choice between arrangements of widgets
Container Widgets 2 Menu - hierarchical list of (usually) buttons Choice from a List - list of boolean widgets - e.g. drop-down, combo-box, radio button group, split button 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) 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
Swing Code Demo: Listeners Create a frame (window) Add a panel to that holds a single button Hook up the button to respond to events - Using a regular class - Using an inner class - Using an anonymous inner class - See HelloListeners[012] in the provided code 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 See SwingDemo.java 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 these requirements encourages reuse
Completeness The Macintosh 7 (Dix, Finlay, Abowd, Beale, 1998) - Button - Slider - Pulldown menu - Check box - Radio button - Text entry / edit fields - File open / save Java Swing has many widgets Completeness SwingSet3 Demo - http:// download.java.net/ javadesktop/ swingset3/ SwingSet3.jnlp - As of Java7, permissions issues prevent this from being run easily. Pity. SwingSet2 Demo - http://www.oracle.com/technetwork/java/javase/downloads/index.html - Scroll down to Java7 Demos and Samples. Download and unzip the jdk-7*demos.tar.gz - Find demo/jfc/swingset2/swingset2.jar and double-click Consistency Facilitate learning by: - Common look and feel - Using Widgets appropriately
Consistency: Name that Look 1 2 3 4 5 6 Consistency: Using Widgets Appropriately People expect widgets to behave in certain ways OTR 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 Customizable Two common strategies: 1. Properties e.g. change colour, font, orientation, text formatter, 2. Factor out behaviour (Pluggable Behaviour) Responding to an action: ActionListener Swing s UIManager for changing look and feel JTable example
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 Implementation Choices Heavyweight Widgets - OS provides widgets and hierarchical windowing system - Widget toolkit wraps OS widgets for programming language - Base Window System (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 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 least-common denominator across OSX, Windows, Linux, - so, no Spinner, no combo box, no progress bar, Programmers need to re-create/find unsupported widgets Supported widgets use exact OS look and feel
Java Swing Widget Toolkit Lightweight Toolkit Widgets are implemented in Java 2D - essentially, custom draw commands in paintcomponent() AWT 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 technical problems after Java 6 - AWT rendered by OS, Swing rendered by Java (guess who won) Different Swing Look and Feels - See SwingThemeDemo.java lecture code; uncomment desired look and feel; recompile - See SwingSet2 as well AWT and Swing 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
Summary Widgets are a fundamental building block of modern GUIs. MVC is used in individual widgets as well as the application as a whole. More on MVC soon. Widget toolkits or libraries need to be complete, consistent, and customizable. Heavyweight vs. Lightweight: advantages and disadvantages of each