Simple UI Toolkits
description
Transcript of Simple UI Toolkits
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