Andrew Ko

Simple UI Toolkits

For most simple UI toolkits, “simple” means Better initial usability and learnabilityLimited scope and expressiveness

A more descriptive term would be “simple gui-glue-scripts”

Most support limited graphical toolkit abilitiesMost are aimed at gluing together applications and components with standard widgets

What does “simple” mean?

Programs are often written in simple scripting languages or subsets of general languagesVery little code required to create basic, default, user interface componentsSome automatically generate code from user interface builders, but don’t generalize from changes in code to interface

Common Characteristics

Object creation (how does a widget get made?)Object properties (position, appearance, etc.)Object architecture (how are objects related?)Connections (how do objects respond to and broadcast messages and events?)

Dimensions of Comparison

Tcl/TkSUITVisual BasicCocoaAliceSummary

Outline

John Ousterhout, 1988, while on sabatticalTcl = Tool Command Language

Intended to be an “embeddable command language”Open source, multi-platform scripting language, much like Perl, Python, and PHPPitched as “application glue”, like other popular scripting languages

Tcl/Tk

Tk

John Ousterhout, 1990Motivation was to test how good Tcl was at integrating componentsUsed in Tcl originally, then Perl and PythonOriginally popular because easiest way to create GUIs on UNIX platformsPorted to Windows and Mac in 1994

Tk

Widgets are the atomic unitAll widgets created are globalContainer hierarchiesThe code to the left represents “the text of label 2 of button 5 of container 3 in window 1 of the application

ArchitectureTk

.w1.c3.b5.l2 - text

Objects created programmatically in a script, then compiled and executedThere are no interface builders directly associated with Tk (I don’t know of any)

Creating ObjectsTk

First line creates a window frame called “My Window” as child of “.”, which represents the shellSecond line sets title of root window to “My Window”Third line creates a button inside “My Window” with text “Quit”

Creating Objectsframe .f -borderwidth 2wm title . "My Window"button .f.b -text "Quit"bind .f.b <Button-2-ButtonRelease { quit }pack .f

Tk

“bind” sets the callback for pressing the button with the second mouse buttonThe callback quits the application“pack” lays out window “My Window”

EventsTk

frame .f -borderwidth 2wm title . "My Window"button .f.b -text "Quit"bind .f.b <Button-2-ButtonRelease { quit }pack .f

Because Tk objects are all global, sending messages is a matter of directly changing widget state and propertiesSame problem of spaghetti code as with other event-based languages

EventsTk

Widgets have standard properties, and widget specific propertiesProperties of widgets are not visible, except through documentationProperties are set using Tcl or other scripting languages

Object propertiesTk

- In regard to Tcl, HCII Ph.D. student Jeff Nichols says

+Very little overhead for creating simple applications

- Unfamiliar syntax for most programmers+Highly portable- No interface builder

Evaluation

“it just has the worst syntax I've ever seen...its really restrictive...its unintuitive for C programmers”

Tk

Simple User Interface ToolkitRandy Pauch at Virginia Tech, 1992Design principles

Exploit knowledge and skills of usersMake easy things easy and hard things possiblePerform end-user testing early and often

SUIT

Built on prototype instance modelOne object is like another, as opposed to inherits fromSame model as Amulet and Garnet

Objects’ properties stored in external database

ArchitectureSUIT

Each object has:State, contained in property list, including position, size, and other basic propertiesC procedure that examines state and rendersC procedure that handles user input and updates state

Objects PropertiesSUIT

Small set of widget creation methodsCode above

Defines callback “hi”Creates button associated with “hi”

Creating ObjectsSUIT

void Hi(SUIT_object obj){ printf("Hello, world\n");}SUIT_createButton("hello", Hi);

Used graphical menu to modify object propertiesInstead of being set,

Booleans were toggled in property editorElements were selected from a listProperties also set programmatically

Properties deleted by dragging to trash

Modifying PropertiesSUIT

Explicitly avoided “code dumping” model of UI interface buildersInstead, layout done at runtime with direct manipulationBuild mode accessed with SHIFT and CONTROLOtherwise, application was in run mode

Modifying PropertiesSUIT

Connections between on screen components achieved by “exporting” propertiesExported by dragging a property to an export buttonSystem would generate a new object that controlled the “exported” propertyNot general component to component communication, but covered most cases

ConnectionsSUIT

No general constraint systemProgrammer registers “interest” in an object by specifying an “interest procedure”When property of interest is changed, property, property name, and old and new values sent to “interest procedure”Allowed for constraining button size to label size

ConnectionsSUIT

In general, three types of connections:Exporting a property to create a widget that affects propertyRegistering interest in a propertyCallbacks

ConnectionsSUIT

- Debugging name space was difficult: misspelling property created new property with 0 value- Common to all prototype instance

models- Hard to create custom widgets without

additional knowledge of toolkit architecture

+Learnable in a few hours by programmers who know C

EvaluationSUIT

BASIC = Beginner’s All-purpose Symbolic Instruction CodeBASIC developed in ‘64 by students at DartmouthEventually sold to Microsoft, and used as a scripting language for Windows OSesOne type of application and component glue for connecting Microsoft appsVB.Net is a whole different (object-oriented) beast, and will not be discussed here

Visual BASIC

“forms” contain widgetsWidgets have lots of propertiesWidgets can see parent form’s properties

ArchitectureVB

Common widgets providedImage, label, text, frame, option, list...

Many useful forms providedAbout dialog, web browser, ok/cancel dialog, ODBC login

Can create custom forms using widgets and defining event handlers

Creating ObjectsVBVB

Every object has default propertiesName, index, dimensions, font...Visible at start and enabled

Most of the details are managed internallyThe focus is on modifying and using user-defined properties

Object PropertiesVB

All properties managed by system can modified through direct manipulation or property editorsProgrammer modifies user-defined properties programaticallyProgrammatically modifying system properties is difficult because

There are many ways to modifyEach way uses a different notation and/or convention

Modifying PropertiesVB

Callbacks can be defined for each widgetIn this example, pressing the okay button executes “OK_Click()”

Pulls the text and height from the text fieldsPuts volume in the volume text field

ConnectionsVB

Private Sub OK_Click( ) r = Val(radius.Text) h = Val(hght.Text) pi = 22 / 7 v = pi * (r ^ 2) * h volume.Text= Str$(v) End Sub

Widgets have many predefined events, which take the shape of callbacks

Initialize, load, activateKey and mouse events also broadcast

Write functions to respond to default set

ConnectionsVB

+Great for creating simple Windows-only applications

- Doesn’t scale to large applications because data management is difficult

- Has a low ceiling: creating custom widgets is nearly impossible

EvaluationVB

Designed to be a rapid prototyping framework for windowed OS X applicationsRoots are in UI toolkit developed for NeXT systemsHighly parameterizable set of standard widgetsNo code necessary for standard behaviors

Cocoa

Object-oriented, model-view-controller architectureNSApplication encapsulates views/controllers

Main event-loopWindows and menusEvent distribution and message passing

Delegate object manages model (data and logic)Delegate is only code written by programmer

ArchitectureCocoa

Small set of highly parameterizable widgetsButtons, sheets, color picker, menus, etc.

Objects are all containers, able to contain other graphical objectsNo programming necessary for drag and drop, spell checking, localization, printing...

ArchitectureCocoa

NSViewHolds the visualization of modele.g., what a button looks like based on properties

NSControlMaintains control logic of modele.g., what happens to button’s state when pressed and released

Object PropertiesCocoa

Use Interface BuilderWYSIWYG, generates “NIB” rather than code

NIB containsMenu, windows, widgets, images, localization info, soundsMessage connections between widgetsView and control object hierarchy

Creating ObjectsCocoa

Modifying view is done in Interface Builder w/ direct manipulationModifying control (creating custom widget logic) is done by changing parameters in Interface BuilderCustom views and controls done programmatically

Modifying PropertiesCocoa

Connections are establish by drawing lines from sending object to receiving objectConnection is stored in NIB and handled automaticallyConnections to custom views and models also done in Interface Builder

ConnectionsCocoa

User input events handled automaticallyResponding to events (defining the model) is done with Java, C, C++, Objective-C, or...AppleScript, which is the “simple” way

Scripting language designed for gluing Mac OS applications together(overly) flexible natural language-like syntax

ConnectionsCocoa

“on” handles event“tell” sends an event to an application or object“try” attempts to do something, and allows for handling failuresEvents go to any application or application object, as defined by Interface Builder

Connectionson clicked theObject tell window of the object try set theRate to contents of text field "rate" as number set theAmount to contents of text field "amount" as number set contents of text field "total" to 0

Cocoa

“should” asks whether operation should take place

“on should close” could see if a window should close based on GUI state

“will” is when on operation is about to take place“on will close” prepares window for closing

“did” is when an operation already took place“on did close” might play an exit sound and quit app

ConnectionsCocoa

Cocoa objects and applications expose their model via “dictionaries”AppleScripts use dictionaries to manipulate model data and behavior

DictionariesCocoa

tell application "Safari"set this_URL to the URL of document 1

end telltell application "Mail"

activateset this_message to make new outgoing message with properties {subject:"Cool URL!",

content:this_URL}end tell

Objects with custom controls (actions and outlets only) created in Interface Builder

Connected in Interface BuilderEvents defined for actions and outlets with Applescript

Objects with custom views also follow this process, but drawRect() function must be defined to visualize

Custom ObjectsCocoa

- Mac OS X only- AppleScript is more difficult to read and

write than VB+UI definition and modification is done

completely by direct manipulation+Highly parameterizable widgets reduce

need for custom widgets+Only programming necessary is definition

of model via response to events

EvaluationCocoa

3D Programming EnvironmentCurrently used for building virtual worlds

Useful for building simple 3D user interfaces

Alice

World objectContains 3D user objects and camera

3D objects contained in worldObjects can be vehicles of other objects

Vehicles define coordinate systemsAll data is global except for local variables

ArchitectureAlice

Arbitrary 3D model“skin” for the modelVisibility, opacity, position, orientationUser-defined dataMethods (side-effects only)Questions (computation only)

Object PropertiesAlice

Select from a list of models and add to the worldNew objects must be modeled in 3D modeling programVehicles can be set programatically or by choosing from a list

Creating ObjectsAlice

Position and orientationby direct manipulationbuilt-in animation methods

Other properties set in property listchanged programmatically

Modifying PropertiesAlice

Since all properties are global, methods directly operate on objects and properties of interest

ConnectionsAlice

Events are defined in global event listWhen the world startsWhile <condition> is true

Begin, during, endWhen key pressedWhen variable changes

ConnectionsAlice

+Powerful 3D user interface toolkit- Must use events provided- All data is global- Reuse is nearly impossible- Aimed at novice programmers, rather

than 3D UI designers

EvaluationAlice

Support very rapid prototypingStandardized interfacesEasier to learn for novices and expertsAllows (motivated) non-programmers to design UIs

Advantages of Simple UI Toolkits

Often have a steep learning curve at a certain level of complexityDomain-specific, so they don’t allow for design exploration in new domainsOften slower, since many are used with scripting languagesEvent-based programming style brings new programming problems

Disadvantages of Simple UI Toolkits

Simple UI toolkits may be all we need for commercial end user applications

Speed is increasingly unimportantNew domains are infrequentIf standard UIs are preferred, programmers may never reach the steep learning curve

New domains still need “complex” UI toolkits to explore design space

Conclusion