The PICASSO Application Frameworkt Lawrence A. Rowe, Joseph A. Konstan, Brian C. Smith, Steve Seitz, and Chung Liu Computer Science Division-EECS University of California Berkeley, CA 94720 Abstract Figure 1 shows a screen dump of a sample application that dis- plays information about employees and departments. The frame, PICASSO is a graphical user interface development system that in- shown on the left, displays information about en employee. It con- cludes an interface toolkit end an application framework. The ap- tains a form with fields that describe the employee (e.g., name, age, plication framework provides high-level abstractions including etc.). Above the form is a menu-bar with pull-down menus that modal dialog boxes end non-modal frames end partels simh.r to contain operations the user can execute. The buttons at the bottom conventional programming language procedures and co-routines. of the frame allow the user to step through the employees in the da- These abstractions can be used to define objects that have local vari- tabase. The panel on the right displays information about the de- ables and that can be called with parameters. partment to which the employee belongs. At the top of the panel is PICASSO also has a constraint system that is used to bind program a hierarchy browser that lists departments and the employees in a variables to widgets, to implement triggered behaviors, and to itn- selected department. Information about the department that the cur- plement multiple views of data. The system is implemented in rent employee belongs to is shown below the browser. The depm- Common Lisp using the Common Lisp Object System and the CLX ment information includes the manager and a graphics field that interface to the X Window System. shows a floor plan with the selected employee and his or her man- Keywords: Graphical User Interface Development Environment, ager’s offices highlighted. If the user selects a button at the bottom Application Frrunewor~ User Interface Toolkit, User Interfaces of the frame to display the previous or next employee end that em- ployee is in a different department, the department information in 1. Introduction the panel is automatically changed (i.e., the data displayed through the frame and panel are synchronized). PICASSO is a graphical user interface development system that PICASSO is an object-oriented system implemented in Com- includes an interface toolkit and an application framework. The mon Lisp that runs on the X Window System [21]. The toolkit, toolkit contains a library of predefine interface abstractions (e.g., framework, and user applications are implemented as Common buttons, scrollbars, menus, forms, etc.), geometry managers, and a Lisp Object System (CLOS) objects [7]. A CLOS class is defined constraint system. Tlte application framework provides high-level for each type of framework object (e.g., application, frame, form, abstractions and other infrastructure to suppert the development of dialog box, and panel). Instances of these classes are called PIC- graphical user interface applications. ASSO objects (PO’s). Each PO type has a different visualization The PICASSO framework includes five object types: applica- and control regime. The toolkit widgets that implement the visual- tions, forms, frames, dialog boxes, and panels. An application is ization and control (e.g., title bars, buttons and menus) are automat- composed of a collection of frames, dialog boxes, and panels. A ically generated when a PO is created. form contains fields through which data can be displaye~ entered PO’s are simihu to procedures and functions in a conventional or edited by the user. A franu specifies the primary application in- programming language. They have a name, local variables, formal terface. It contains a form and a menu of operations the user can arguments, and a lexical parent. A PO can be called and arguments execute. A dialog box is a modal interface that solicits additional passed to it which causes the PO to allocate space for its local var- arguments for an operation or user confirmation before executing a ables and to create X resources to display the values of selected possibly dangerous operation (e.g., deleting a file). A pand is a variables. The user can examine and edit the data or execute code nomnodal dialog box that typically presents an alternative view of attached to buttons and menu operations. Code can be arbitrary data in a frame or enother panel. Lisp expressions that cart, for example, chartge the values of vari- ables, call other PO’s, return to the calling PO, or call a Lisp func- tion. t~i~ ~e~earch ~a~ ~uppofied by the National Science Foundation under PO’s are analogous to familiar programming language concepts grants DCR-85-07256 and MIP-90-14940. The second author was sup- (e.g., procedures, functions, and co-routines). Frames are similar to ported by a NDSEG fellowship adrnimstered by DARPA. procedures. Only one frame can be active at a time. Calling a frame Permission to copy without fee all or part of this material is conceals the current frame and displays the new frame. Returning from the called frame redisplays the calling frame. Dialog boxes granted provided that the copies are not made or dietrlbuted for are similar to functions. Calling a dialog box displays it and the direct commercial advantage, the ACM copyright notice and the user is forced to respond. A dialog box returns a value to the caller title of the publication and its date appear, and notice is given when it returns (e.g., “OK”). Panels are similar [o co-routines. that copying is by permission of tha Association for Compuung Calling a panel displays it in a separate window and the user can im Machinery, To copy otherwise, or to republish, requires a fee and/or specific permission. @1991 ACM o-89791 -451 -l/91 /0010 /0095 ...$505O November 11-13, 1991 UIST’91 95 Figure 1: Example PICASSO application interface teract with it or any other hrne or panel. The location of the mouse Controller (MVC) abstraction [10]. A frame contains local vari- cursor determines which frame or panel receives user inputs. ables which correspond to the model. The form in a fkune is the Variables cart be passed to a PO as parameters in the call. For view. And, a frame implicitly defines the controller. Multiple example, the current employee in the frame above is passed to the views of the same data can be created by calling a panel and passing panel by reference so that the value can be changed in either the the appropriate local variable. The way a variable is passed deter- frame or panel and the update will be propagated to the other PO. mines whether or not and when view updates are propagated back Traditional value, value-result, and reference parameter passing are to the flame. The Navigator Framework extension to MVC devel- provided. In addition, two new mechanisms are provided that imp- oped at ParcPlace Systems provides a similar capability. lement different kinds of synchronization. Value/update parame- We believe that using conventional programming language ab- ters are similar to value parameters except that subsequent updates stractions simplifies the problem of designing and implementing di- to the actual argument are propagated to the copy in the called PO. rect manipulation interfaces. In addition, we believe the PICASSO Value-resultiupdate is similar to valuelupdate except the value is framework is easier to learn and use than the Smalltalk MVC and copied back to the calling environment when the PO returns. These Navigator abstractions because the application developer can use parameter passing mechanisms can be used when changes to a familim programming abstractions (e.g., variables and parameter value displayed through a panel should not be immediately propa- passing) rather than unfamilim abstractions (e.g., active values, gated back to the caller, but changes to the actual argument should message passing, and MVC). be propagated into the panel. This paper describes the PICASSO framework and program- PO’s are stored in an external database and loaded into the ap- ing model. The programming constructs described below are plication when needed. They are shared by different applications shown as extensions to Lisp. Most users will not see these textual because the database is shared. Commonly used PO’s (e.g., a file specifications because a dkect manipulation interface builder is be- directory browser and an error message dialog box) are provided to ing developed to create and modify applications. The interface maintain interface consistency between different applications. builder can be used to define any PO. Forms are defied by select- PICASSO provides a collection of widgets (as is provided by ing widgets from a palette and placing them at the desired location toolkits such as Motif[l 8] or Open Look[6]) including color graph- in a window with the mouse. Field attributes (e.g., border, default ics and tables. PICASSO also provides capabilities that are similar values, etc.) can be changed interactively. Similar interfaces are to other application frameworks including Garnet [16], InterViews provided to define other PO types and code. The toolkit and inter- [12], MacApp [23], NextStep[17], and Smalltalk [5]. PICASSO face builder are extensible so that developers cart add new interface differs from these frameworks in that it clearly separates the frame- abstractions to the system. The toolkit and interface builder are de- work layer from the toolkit layer. The framework provides supprt scribed elsewhere [20]. for defining and accessing local variables, binding variables to The remainder of the paper is organized as follows. Section 2 fields in a form, and passing parameters to other PO’S. These mech- describes an example application used to illustrate features of the anisms encourage the development of reusable interface compo- application framework.