Widget Toolkits

CS349 -- MVC1

Wid

get t

oolk

its 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)

CS 349 - Widgets2

Even

t-driv

en p

rogr

amm

ing Widget toolkits use event-driven programming model

Reactive systems– User action → program response– Most of the time the program sits around doing nothing

Widget toolkits supports a mechanism for mapping user action on widget to appropriate application code to handle that action

– i.e. event handling mechanisms that we’ve discussed

CS 349 - Widgets3

Rev

iew

: Lig

htw

eigh

t vs.

Hea

vyw

eigh

t • Lightweight widgets– BWS/OS provides a top-level window– Widget toolkit draws its own widgets and is responsible for

mapping events to widgets– Examples: Java Swing, JQuery UI, Windows WPF

• Heavyweight widgets– Each widget is its own window (i.e. every control is essentially

a window)– OS provides a hierarchical “windowing” system for all widgets

across all applications– Widget toolkit wraps OS widgets for programming

language– This allows the BWS to dispatch events to a specific widget– Examples: nested X Windows, Java’s AWT, standard HTML

form widgets, Windows MFC

4 CS 349 S13 - Widgets

Wid

get T

oolk

it D

esig

n G

oals 1. Complete

– “Complete” set of widgets and functionality– Goal: GUI designers have everything they need

2. Consistent– User: Look and Feel is consistent across components– Developer: Consistent usage paradigms

3. Customizable– Developer can reasonably extend functionality to meet

particular needs of application

Meeting these requirements encourages reuse

CS 349 - Widgets5

Com

plet

enes

s The “Macintosh 7” (Dix, Finlay, Abowd, Beale, 1998)– Button– Slider– Pull-down menu– Check box– Radio button– Text entry / edit fields– File open / save

Java Swing has many more widgets …

CS 349 - Widgets6

Com

plet

enes

s SwingSet Demo• Shows lots of

differentwidgets with lots of variations

• Can easily view source code

CS 349 - Widgets7

• To run:– Download jar from course web sitejava –cp SwingSet2.jar SwingSet2

Con

sist

ency Facilitate learning by:

– Common look and feel– Using Widgets appropriately

• Look: consistent visual appearance• Feel: consistent and expected behaviour

Consistency helps users anticipate how the interface will react, and promotes easier discoverability of features.

CS 349 - Widgets8

Con

sist

ency

: Nam

e th

at L

ook

CS 349 - Widgets9

1 23

4 5 6

Cons

iste

ncy:

Usi

ng W

idge

ts A

ppro

pria

tely People expect widgets to behave in certain ways

Off The Record (OTR) messaging study by Stedman et al.– Question: How do you authenticate this buddy?– Answer: Right-click on the label at bottom left!

CS 349 - Widgets10 http://www.cypherpunks.ca/~iang/pubs/otr_userstudy.pdf

Cus

tom

izab

le 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…

CS 349 - Widgets11

Sum

mar

y • Widgets are a fundamental building block of modern GUIs.• MVC is used in individual widgets as well as the application as

a whole. Widget toolkits or libraries need to be complete, consistent, and customizable.

CS 349 - Widgets12

Wrapping Up Layout – Beginning UI Design

Oth

er W

idge

t Too

lkits • Many widget toolkits don’t have layout managers

– In C# many times individuals hand code layouts or fix window size

– Thoughts on this?• Strategy Pattern

– Imagine programming with toolkit which does not have any Layout Manager; what could you do?

– One solution: Absolute position in percentage plus AlgorithmInterface calculates optimal location?

Cre

atin

g U

Is U

sing

XM

L • Many programming languages use XML to create UIs• Rationale (from Android UI programming tutorial):

– It enables you to better separate the presentation of your application from the code that controls its behavior.

– Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile.

– Declaring the layout in XML makes it easier to visualize the structure of your UI, so it's easier to debug problems.

• Problem I see– Android context needs to be considered (config doesn’t

change)– Many xml-based layouts use absolute positioning, relative

positioning, etc.– A lot of burden on programmer to maintain …

• Always, always, always think strategy (and composite) when dealing with layout

Java

scrip

tLay

out • Absolute or Relative layout

– Basically fixed layout process• Why does this work?

Stra

tegy

and

Com

posi

te