Garnet Comprehensive Support for Graphical, Highly Interactive User Interfaces
Total Page：16
File Type：pdf, Size：1020Kb
Garnet Comprehensive Support for Graphical, Highly Interactive User Interfaces Brad A. Myers, Dario A. Giuse, Roger B. Dannenberg, Brad Vander Zanden, David S. Kosbie, Edward Pervin, Andrew Mickish, and Philippe Marchal Carnegie Mellon University ser interface software is difficult terface Builder, Smethers Barnes’ Proto- and expensive to implement.’ typer for the Macintosh, and UIMX for X U Highly interactive interfaces are Windows. These programs let a designer among the hardest to create, since they Garnet helps create place only preprogrammed interaction must handle at least two asynchronous in- techniques in windows, and they usually put devices (such as a mouse and key- highly interactive user allow only a few parameters to be set. board), real-time feedback, multiple win- interfaces by Often, a designer will type the name of a dows, and elaborate, dynamic graphics. procedure to be called when the interaction The Garnet research project is creating a emphasizing easy technique is executed. Designers cannot set of tools to aid the design and implemen- modify or design the interaction techniques tation of highly interactive, graphical, di- specification of object themselves, and the interface builders do rect manipulation user interfaces. Garnet behavior, often by not address application-specific graphics also helps designers rapidly prototype dif- at all. ferent interfaces and explore various user demonstration and A user interface management system interface metaphors during early product without programming. helps a designer handle the dialogue, or design. sequencing, aspects of the user interface Most graphical interfaces are created - that is, what happens after each user using toolkits, collections of interaction action. Such systems have generally not techniques (sometimes called “widgets” or addressed the creation of toolkit compo- “gadgets”) such as menus, scroll bars, and nents (menus, scroll bars, etc.) or the spec- buttons. Examples include the Macintosh ification or management of application- Toolbox and Xtk for the X Window Sys- underlying graphics package (which usu- specific graphical objects (the contents of tem. Unfortunately, these toolkits are often ally supplies operations such as “draw- application windows). difficult to use, since they contain literally line” and “draw-circle”). Furthermore, A number of features differentiate Gar- hundreds of procedures. Also, many tool- modifying or creating toolkit items is usu- net from other user interface tools, includ- kits do not help the programmer create the ally difficult or impossible. ing an emphasis on handling objects’ run- most important part of the application - Higher level tools such as interface time behavior (how they change when the the graphics that appear in the main appli- builders and user interface management user operates on them) and on handling all cation window. In particular, the applica- systems] have not adequately addressed visual aspects of a program’s user inter- tion must handle all input events (expressed these problems. A conventional interface face, including its graphics and the con- at a low level as “the left mouse button builder lets a designer graphically place tents of all application-specific windows. went down,” “the mouse is at (30,345),” user interface components in a window, For example, when creating an applica- etc.), deciding which operation to perform thereby creating menus, palettes, and dia- tion that lets the user manipulate boxes on objects and drawing objects with the logue boxes. Examples include Next’s In- connected by arrows (such as a graph edi- November 1990 001R-91h2iYOil 100-0071$01 00 G 1990 IEEE 71 Typically, coding application-specific f Brad A. Myers ) firad Uander ZandenT graphics requires 10- 100 times more effort than dealing with menus and buttons, SO Garnet should save programmers signifi- cant time. This article provides an overview of all parts of Garnet, which stands for “generat- ing an amalgam of real-time novel editors and toolkits.” Previous have concentrated on individual aspects of the system. (There is also a complete reference manual for the Garnet Toolkit.6) Garnet is entirely “look-and-feel inde- pendent,” which means the designer can either create user interfaces with an origi- nal graphical appearance and behavior or choose from a set of predefined appear- ances and behaviors. The system contains both low-level and Figure 1. A simple boxes-and-arrows editor created with Garnet. An arbitrary high-level tools. The low-level tools, called number of new boxes and arrows can be added, and their initial position is speci- the Garnet Toolkit, use a number of mech- fied using the mouse. Any existing box or arrow can also be selected, changed in anisms to help implement user interfaces, position or size, and deleted. This entire editor was implemented in about three including a prototype-instance object sys- hours using the Garnet Toolkit. tem, a constraint system (which allows relationships among objects to be declared once and then maintained by the system), automatic graphical object updating (so tor or project-planning chart - see Figure builders in other systems might help build that the system refreshes the display when l), Garnet’s user interface builder lets the the menus and palettes, but they don’t let objects change), and separate specification designer draw the boxes and arrows and the designer implement and manage the of input handling from graphics. demonstrate how they should respond to boxes and arrows themselves. Designers Garnet’s high-level tools include the the mouse. Menus, palettes, and dialogue using those programs must code these ele- Lapidary interface builder; the Jade dia- boxes can be generated automatically or ments directly using the underlying graph- logue box creation system, which automat- added graphically. Toolkits and interface ics package and input device handlers. ically creates menus and dialogue boxes from a list of their contents; and the C32 spreadsheet for specifying complex con- straints. Garnet is implemented in Com- mon Lisp and uses the X Window System through the standard CLX interface from Garnet Othello Common Lisp to X Windows. A version for the Macintosh is also being developed. Garnet is therefore portable and runs (so far) on CMU, Lucid, Allegro, Harlequin, comment3 and TI Common Lisps and on many hard- ware platforms. Garnet does not use the I- Player 2’s moye Common Lisp Object System (CLOS) or any Lisp or X Windows toolkit (such as Interviews,’ CLUE, CLIM, or Xtk). NixlGlmr 16x16 Coverage Garnet is designed to handle user inter- faces that let users operate on graphic ob- jects with the mouse and keyboard. Since the objects often represent application data, Stop and since changes made on the screen to the graphics are translated into changes to the data, the user has the feeling he or she is directly manipulating the data. Similar- ly, the screen reflects changes the applica- Figure 2. An Othello game created with Garnet. tion makes to the data, possibly in response 72 COMPUTER to external events. Garnet is suitable for box and arrow diagram editors (see C32 spreadsheet 1 Figure I), like Macproject; It conventional drawing programs, such Jade dialog box High-level as MacDraw; creation system Garnet tools icon manipulation programs, like the Macintosh Finder; Lapidary graphical graphical programming languages in interface builder which computer programs are con- structed using icons and other pictures, Widget set such as a flowchart; tree and graph editing programs, in- 1 cluding semantic networks. neural net- works, and state transition diagrams: I Garnet Toolkit board games, such as chess or Othello (see Figure 2); Constraint system simulation and process monitoring programs, in which the user interface KR object system shows the status of the monitored sirn- dation or process and lets the user Xi11 Window System manipulate it: or Macintosh Common Lisp user interface construction tools (we implemented Garnet using itself); and some forms of CAD/CAM programs. Operating system Garnet does not have a significant text editing component, but it does provide small editable strings that rnight be used as Figure 3. The structure of the Garnet system. labels or fields in a table or dialogue box. Garnet’s primary influence is Peridot,8a construction tool that lets users create tool- kit items without programming. Peridot lets nonprogrammers create many types of interaction techniques, including most kinds higher layer contains tools that let design- talk and C++. A prototype-instance model of menus, property sheets, buttons, scroll ers draw pictures to show how the interface does not distinguish between instances and bars, percent-done progress indicators. should look and behave and to define parts classes; any instance can be a “prototype” sliders, and iconic and title line window of the interface at a high level. These tools for other instances. All data and methods controls. Like Garnet, Peridot uses con- automatically create code based on the are stored in“slots”(sometimes calledfields straints. However, Peridot lacks a pro- user’s specifications. or instance variables). Slots that are not gramming interface and offers no way to The toolkit itself is divided into several overridden by a particular instance inherit use existing toolkit items or create applica- components (see Figure 3): their values from their prototypes. Actually, tion-specific graphic objects. (Many sys- KR does not distinguish between data and an object-oriented programming sys- tems, including Thinglab9 and Apogee,*O method slots. Any slot can hold any type of tem, have used constraints: see the sidebar.) value, and in Common Lisp a function is a constraint system. Garnet’s Jade dialogue editor, which - just a type of value. Slot names start with a graphical object system, automatically constructs dialogue boxes from colons and can contain any number of a system for handling input, and high-level specifications, was influenced printing characters (for example, :left, :in- a collection of gadgets or widgets. by the Interactive Transaction System.” terim-selected, :obj-over).