Download Widgets

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