560 likes | 577 Views
Simple UI Toolkits. Andrew Ko. What does “simple” mean?. For most simple UI toolkits, “simple” means Better initial usability and learnability Limited scope and expressiveness A more descriptive term would be “simple gui-glue-scripts” Most support limited graphical toolkit abilities
E N D
Simple UI Toolkits • Andrew Ko
What does “simple” mean? • For most simple UI toolkits, “simple” means • Better initial usability and learnability • Limited scope and expressiveness • A more descriptive term would be “simple gui-glue-scripts” • Most support limited graphical toolkit abilities • Most are aimed at gluing together applications and components with standard widgets
Common Characteristics • Programs are often written in simple scripting languages or subsets of general languages • Very little code required to create basic, default, user interface components • Some automatically generate code from user interface builders, but don’t generalize from changes in code to interface
Dimensions of Comparison • 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?)
Outline • Tcl/Tk • SUIT • Visual Basic • Cocoa • Alice • Summary
Tcl/Tk • John Ousterhout, 1988, while on sabattical • Tcl = Tool Command Language • Intended to be an “embeddable command language” • Open source, multi-platform scripting language, much like Perl, Python, and PHP • Pitched as “application glue”, like other popular scripting languages
Tk Tk • John Ousterhout, 1990 • Motivation was to test how good Tcl was at integrating components • Used in Tcl originally, then Perl and Python • Originally popular because easiest way to create GUIs on UNIX platforms • Ported to Windows and Mac in 1994
Tk Architecture • Widgets are the atomic unit • All widgets created are global • Container hierarchies • The code to the left represents “the text of label 2 of button 5 of container 3 in window 1 of the application .w1.c3.b5.l2 - text
Tk Creating Objects • Objects created programmatically in a script, then compiled and executed • There are no interface builders directly associated with Tk (I don’t know of any)
Tk Creating Objects frame .f -borderwidth 2 wm title . "My Window" button .f.b -text "Quit" bind .f.b <Button-2-ButtonRelease { quit } pack .f • First line creates a window frame called “My Window” as child of “.”, which represents the shell • Second line sets title of root window to “My Window” • Third line creates a button inside “My Window” with text “Quit”
Tk Events frame .f -borderwidth 2 wm title . "My Window" button .f.b -text "Quit" bind .f.b <Button-2-ButtonRelease { quit } pack .f • “bind” sets the callback for pressing the button with the second mouse button • The callback quits the application • “pack” lays out window “My Window”
Tk Events • Because Tk objects are all global, sending messages is a matter of directly changing widget state and properties • Same problem of spaghetti code as with other event-based languages
Tk Object properties • Widgets have standard properties, and widget specific properties • Properties of widgets are not visible, except through documentation • Properties are set using Tcl or other scripting languages
Tk Evaluation • 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 “it just has the worst syntax I've ever seen...its really restrictive...its unintuitive for C programmers”
SUIT • Simple User Interface Toolkit • Randy Pauch at Virginia Tech, 1992 • Design principles • Exploit knowledge and skills of users • Make easy things easy and hard things possible • Perform end-user testing early and often
SUIT Architecture • Built on prototype instance model • One object is like another, as opposed to inherits from • Same model as Amulet and Garnet • Objects’ properties stored in external database
SUIT Objects Properties • Each object has: • State, contained in property list, including position, size, and other basic properties • C procedure that examines state and renders • C procedure that handles user input and updates state
SUIT Creating Objects void Hi(SUIT_object obj) { printf("Hello, world\n"); } SUIT_createButton("hello", Hi); • Small set of widget creation methods • Code above • Defines callback “hi” • Creates button associated with “hi”
SUIT Modifying Properties • Used graphical menu to modify object properties • Instead of being set, • Booleans were toggled in property editor • Elements were selected from a list • Properties also set programmatically • Properties deleted by dragging to trash
SUIT Modifying Properties • Explicitly avoided “code dumping” model of UI interface builders • Instead, layout done at runtime with direct manipulation • Build mode accessed with SHIFT and CONTROL • Otherwise, application was in run mode
SUIT Connections • Connections between on screen components achieved by “exporting” properties • Exported by dragging a property to an export button • System would generate a new object that controlled the “exported” property • Not general component to component communication, but covered most cases
SUIT Connections • No general constraint system • Programmer 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
SUIT Connections • In general, three types of connections: • Exporting a property to create a widget that affects property • Registering interest in a property • Callbacks
SUIT Evaluation • 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
Visual BASIC • BASIC = Beginner’s All-purpose Symbolic Instruction Code • BASIC developed in ‘64 by students at Dartmouth • Eventually sold to Microsoft, and used as a scripting language for Windows OSes • One type of application and component glue for connecting Microsoft apps • VB.Net is a whole different (object-oriented) beast, and will not be discussed here
VB Architecture • “forms” contain widgets • Widgets have lots of properties • Widgets can see parent form’s properties
VB VB Creating Objects • Common widgets provided • Image, label, text, frame, option, list... • Many useful forms provided • About dialog, web browser, ok/cancel dialog, ODBC login • Can create custom forms using widgets and defining event handlers
VB Object Properties • Every object has default properties • Name, index, dimensions, font... • Visible at start and enabled • Most of the details are managed internally • The focus is on modifying and using user-defined properties
VB Modifying Properties • All properties managed by system can modified through direct manipulation or property editors • Programmer modifies user-defined properties programatically • Programmatically modifying system properties is difficult because • There are many ways to modify • Each way uses a different notation and/or convention
VB Connections 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 • Callbacks can be defined for each widget • In this example, pressing the okay button executes “OK_Click()” • Pulls the text and height from the text fields • Puts volume in the volume text field
VB Connections • Widgets have many predefined events, which take the shape of callbacks • Initialize, load, activate • Key and mouse events also broadcast • Write functions to respond to default set
VB Evaluation • 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
Cocoa • Designed to be a rapid prototyping framework for windowed OS X applications • Roots are in UI toolkit developed for NeXT systems • Highly parameterizable set of standard widgets • No code necessary for standard behaviors
Cocoa Architecture • Object-oriented, model-view-controller architecture • NSApplication encapsulates views/controllers • Main event-loop • Windows and menus • Event distribution and message passing • Delegate object manages model (data and logic) • Delegate is only code written by programmer
Cocoa Architecture • Small set of highly parameterizable widgets • Buttons, sheets, color picker, menus, etc. • Objects are all containers, able to contain other graphical objects • No programming necessary for drag and drop, spell checking, localization, printing...
Cocoa Object Properties • NSView • Holds the visualization of model • e.g., what a button looks like based on properties • NSControl • Maintains control logic of model • e.g., what happens to button’s state when pressed and released
Cocoa Creating Objects • Use Interface Builder • WYSIWYG, generates “NIB” rather than code • NIB contains • Menu, windows, widgets, images, localization info, sounds • Message connections between widgets • View and control object hierarchy
Cocoa Modifying Properties • Modifying view is done in Interface Builder w/ direct manipulation • Modifying control (creating custom widget logic) is done by changing parameters in Interface Builder • Custom views and controls done programmatically
Cocoa Connections • Connections are establish by drawing lines from sending object to receiving object • Connection is stored in NIB and handled automatically • Connections to custom views and models also done in Interface Builder
Cocoa Connections • User input events handled automatically • Responding 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
Cocoa Connections on 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 • “on” handles event • “tell” sends an event to an application or object • “try” attempts to do something, and allows for handling failures • Events go to any application or application object, as defined by Interface Builder
Cocoa Connections • “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
Cocoa Dictionaries • Cocoa objects and applications expose their model via “dictionaries” • AppleScripts use dictionaries to manipulate model data and behavior tellapplication "Safari" setthis_URLtotheURLofdocument 1 endtell tellapplication "Mail" activate setthis_messagetomake new outgoing message with properties {subject:"Cool URL!", content:this_URL} endtell
Cocoa Custom Objects • Objects with custom controls (actions and outlets only) created in Interface Builder • Connected in Interface Builder • Events defined for actions and outlets with Applescript • Objects with custom views also follow this process, but drawRect() function must be defined to visualize
Cocoa Evaluation • 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
Alice • 3D Programming Environment • Currently used for building virtual worlds • Useful for building simple 3D user interfaces
Alice Architecture • World object • Contains 3D user objects and camera • 3D objects contained in world • Objects can be vehicles of other objects • Vehicles define coordinate systems • All data is global except for local variables
Alice Object Properties • Arbitrary 3D model • “skin” for the model • Visibility, opacity, position, orientation • User-defined data • Methods (side-effects only) • Questions (computation only)
Alice Creating Objects • Select from a list of models and add to the world • New objects must be modeled in 3D modeling program • Vehicles can be set programatically or by choosing from a list
Alice Modifying Properties • Position and orientation • by direct manipulation • built-in animation methods • Other properties • set in property list • changed programmatically