Generation of Interactive Visual Interfaces for Resource Management

Transcription

1 Generation of Interactive Visual Interfaces for Resource Management Andreas Dangberg, Wolfgang Mueller C LAB, Fuerstenallee 11, Paderborn, Germany Abstract This paper introduces the VIVID (Visual Interactive VIew Development) framework for generation and customization of advanced visual interactive environments for resource manipulation in databases. The framework covers the definition of symbols, their mapping to database objects, specification of spatial relationships among them, layout assignment as well as the definition of drag&drop-based user interactions. 1 Introduction Though databases are widely accepted for various applications there are presently only very few environments for rapid development of more general interactive visual database interfaces. Database frameworks like Microsoft Access, Borland Paradox, or Visual dbase provide graphical user interface toolkits for client applications. Some databases provide so-called reports for data representation and additional forms for data manipulation. The latter ones are composed of a limited set of tool-specific user interface controls. They are either implemented as builtin functions, like navigation, or as application controls which are bound to specific data sources. Other databases provide data aware controls for input and manipulation which are mostly text-oriented controls like text fields or combo boxes. They allow the creation and modification of textual means from the underlying low level data manipulation language, e.g., SQL. A transformation from stored data to the textual representation has to be explicitly implemented by the user. In those frameworks, the process of adapting GUIs to different views of a database is always error prone and may easily result in significant inconsistency or violated integrity of the underlying database. Current systems only provide facilities to create form-based graphical user interfaces or are limited to one very application-specific visual language or user interface like charting diagrams. On the other hand there exist frameworks for generation and customization of visual language captures like VLCC [4] with graphical rewrite rules for visual language specification. In this paper we present VIVID (Visual Interactive View Development). VIVID provides a general approach for rapid generation of interactive visual interfaces for arbitrary resources managed through databases. The generated visual interface basically provides a capture for a visual language for task-oriented resource management. VIVID is based on the idea that (i) resources are represented as graphical symbols in visual views and (ii) data relationships are given as topological relationships between symbols. Database objects can be directly manipulated through graphical objects, i.e., symbols, via drag&drop. The specification process can be roughly divided into two steps ffl specification of visualization ffl specification of visual interaction The first step covers the definition of symbols, their association to resources, i.e., database objects, and their composition to a layout. Visual interaction is defined through association of database operations with drag&drop operations of symbols and symbol containers. Though VIVID concerns database integration it is not necessarily limited to database applications since symbols can also be associated with files. The remainder of this article is structured as follows. Next section discusses related works in the area of database visualization and visual manipulation as well as visual language compilers. Section 3 introduces the detailed concepts of our approach. Section 4 gives the simple example of the generation of an organization chart. After a short description of the present implementation the final section draws the conclusions. 2 Related Works As related works we consider approaches from three categories (i) tools for application specific visualization and manipulation of databases, (ii) systems for the generation of visual language environments, and (iii) approaches to the generation of interactive visual interfaces. Most of commercial desktop databases like Microsoft Access, Borland Paradox, or Visual dbase provide graphical means for static data visualization. The user typically

2 selects one diagram from a set of predefined standard diagrams and charts. Object values are automatically mapped to x/y dimensions or positions of bars, pies, and points. Export filters support the generation of various file formats. Most spreadsheet programs like Excel come with adaptors to relational databases and often provide a rich set of possible presentations but are still limited to predefined diagrams and charts. For data manipulation, most databases come with so-called data aware controls. Data aware controls are user interface components which are linked to objects in a database. User interface components can be widgets like a text field or complex components like a spreadsheet for the representation of database tables. Data manipulation can trigger the corresponding control which then displays the modified value(s). Data aware controls can also trigger database manipulations from the user interface. However, they have to be individually implemented for each application. The implementation can reach a considerable complexity for a typical desktop database system. All these systems have only very limited flexibility and very little support to the implementation of general graphical editors. A dynamic approach for visualization of relational data has been developed in the SAGE project [10]. SAGE is a tool environment for graphical presentation of information. The system combines user-directed design of visualizations with automatic knowledge-based completion of partial visualization specifications. SAGE allows interactive modification of visualizations at runtime in the sense of data exploration but not in the sense of data manipulation. Schuerr and Rekers [9] present an approach to generate visual language environments with Progres. The visual language is defined by an abstract syntax graph and a spatial relationship graph with graph grammars. The final layout is assigned by the DeltaBlue constraint solver and the Fresco user interface builder. The Visual Language Compiler Compiler (VLCC) [4] supports the automatic generation of environments for visual languages and their manipulation. The visual language is specified by the lexical, syntactical, and semantical definition. The token symbol is first defined by a dedicated symbol editor. The production editor defines visual production rules for tokens by the means of a dedicated graph-grammar. The generated editor supports standard interactions for creation, manipulation, loading, and saving of the visual language. Export for the generation of of a textual counterpart is supported. For this, visual production rules are annotated by textual segments. There exists a couple of other approaches which focus more on user interactions. There are several means for specification of user dialogues in visual intactive systems like Dialogue-Nets [7], Petri-Nets [1], UAN (User Action Notation) [6], and ODSN (Object-oriented Dialogue Specification Notation) [11]. They all come with an environment which support code generation. Some support test and verification of the specification. The Objection [8] environment is a more implementation-oriented approach for rapid development of graphical editors. Objection supports the programming and test of behavior and spatial constraints for application-specific graphical objects by means of dedicated graphical editors. Considering above approaches we can generally observe that user interface builders for databases are limited to form-based visual interfaces or to application-specific graphical visualization. Approaches to user interaction specification mainly focus on the user dialogue rather than on the specification of a visual language. Environments for generation of visual language environments, in contrast, focus on the visual language with standard commands for the editing environment. Those environments additionally have no support for database integration and are typically limited to a set of predefined graphical symbols and widgtes. Furthermore, they are not flexible enough to be easily adapted to different sorts of layout requirements so that they are also limited to a specific class of visual languages like diagramatic languages. We present the VIVID environment which support the generation of visual interactive interfaces for databases. VIVID covers the complete process from database integration and layout generation to the definition of user interactions. In contrast to many other approaches, VIVID covers both, the specification of the visual languages defining which database objects are manipulated and the specification of widgets and components for user interactions with the environment. For graphical objects, VIVID distinguishes containers and graphical primitives like lines, circles, buttons, text fields. Layout managers from an extensible library are easily associated to each container. This provides a very flexible framework for hierarchical specification of layouts where different levels can be manged by different layout managers. Finally, the presently supported specification of user interaction gives simple specification of drag&drop behavior covering a broad range of applications. However, since the specification is presently limited to drag&drop we are currently investigating the possibility to extend definitions to stateoriented interfaces through ODSN- or UAN-like specifications. 3 VIVID The VIVID (Visual Interactive VIew Development) environment is a system for rapid development of interactive diagramatic and icon based visual environments for manipulation of database objects. These objects can be represented by arbitrary graphical symbols. Their relationships are given as spatial relationships or connections

3 Visual Interactive View Visual Interaction Visual View Layout Composition Symbols Symbol Definition Views Data Sources Database Figure 1: Automatic Generation of Interactive GUIs between graphical objects. A visual view in the context of VIVID is given by a visual language. A VIVID view visualizes a database configuration by filtering and transforming data to graphical objects in two-dimensional space. The visual tokens directly correspond to objects or object groups. Their manipulation by drag&drop directly correspond to database operations like creation, deletion, or manipulation of attribute values. As depicted in Fig. 1, the interactive visual environment is automatically generated from the definition of (a) the symbols, (b) the layout compositions, and (c) the visual interactions. The first step concerns the symbol definition. It covers the process of symbol specification and their relations to database objects. The layout composition basically concerns the definition of layout constraints between symbols and the assignment of layout managers which define the placement of graphical objects. Finally, visual interaction is defined by a set of operations which are assigned to user interface events for each symbol like drag & drop. The individual steps of that process are outlined in the remainder of this section. 3.1 Symbol Definition Symbols are defined by a symbol class which covers (i) the definition of its symbol presentation and (ii) the symbol assignment to a data source Symbol Presentation The symbol presentation of a symbol class is defined by the means of a hierarchical structure with containment. For topological arrangements container objects are used. Container objects can include other container objects or graphical primitives. The latter ones denote user interface objects like text fields and buttons and atomic graphical objects like lines, and rectangles. Graphical primitives are defined by their attributes, the so called properties. Figure 2 sketches the basic structure of the hierarchical structure where sourcedef denotes the associated data source which is outlined in the next paragraph. Each container object is associated with a layout manager which implements the placement of the subcontainer and primitives in the container like grid layout, border layout row layout, column layout, table layout, or tree layout. Symbol presentation is generated by an interactive symbol editor which is basically implemented as a GUI builder extended by manipulation of primitive graphical objects dedicated to the generation of VIVID components. SymbolClass container (LayoutManager) container (LayoutManager) container (LayoutManager) primitive primitive property property sourcedef database querystring source attribute attribute Figure 2: Symbol Class Structure Symbol Assignment Symbol assignment covers the definition of a symbol class identifier and its assignment to a data source as well as the association of data object attributes to graphical properties. In the context of a relational database the

4 data source is typically specified by a database address in combination with an SQL select statement which returns a table of objects with their attributes. At runtime one symbol of the corresponding symbol class is created for each data element returned by the query. For symbol assignment of the symbol class S an expression A S (p) over the attributes of the data source has to be defined for each property p in the set of symbol properties P S.The associations define the mapping of data values to their symbol presentation as graphical properties. 3.2 Layout Composition After defining symbol properties and their relation to data objects topological relationships between symbol classes are specified for layout generation. The specification of a layout constraint c is a tuple of P arent Child Condition Container where P arent and Child are symbol classes, Condition is a boolean expression over the source attributes of P arent and Child, and Container is a container within the symbol class P arent. It defines that if Condition evaluates to true for arbitrary instances of P arent and Child then the instance of Child is placed into Container of the P arent symbol. The specification has to define a tree with containment relationships as edges and graphical primitives or containers as nodes. If the resulting containment graph is not a tree the specification is either ambiguous or incomplete. Visual views generated by VIVID check the containment graph and report existing conflicts by error or warning messages. The layout is generated in two phases on the tree applying the layout managers which are associated to symbol containers. The first phase assigns the size in post-order traversal. The second phase assigns the location in pre-order traversal. 3.3 Visual Interaction Previous steps introduced the visualization by static graphical views. We now outline how to extend that definition for interactive manipulation of data objects. However, though the present approach is dedicated to drag&drop-oriented interfaces it is easily extendible to other approaches like classical state oriented captures. For drag&drop we introduce two additional symbol categories of graphical primitives: producer and consumer. Producers are object sources and consumers are object sinks. Whereas the first ones correspond to the creation (insertion) of objects, the latter ones corresponds to object deletion, e.g., trash cans. Creation, deletion, and manipulation (update) is defined by the definition of a drag&drop table S T O which associates database operations 2 O to drag&drop operations from a source symbol 2 S to a target symbol 2 T. The operation is executed whenever an instance of S is dragged and dropped on an instance of T. 4 Example In order to demonstrate the flexibility and the easy use of application of the previously introduced concept this section presents a short example from current practice. We develop the visualization of a organization chart which can be easily modified by drag&drop interaction. Employee N Member 1 Group 1 N Subgroup Name GroupId Figure 3: Entity-Relation Diagram for Example Presume a database with the data schema given by the entity relationship diagram in Figure 3 which defines employees structured into groups. An Employee is M emberof a Group where groups are structured into SuperGroups. In a first step we decide to represent the above entities visually by the symbol classes E and G. Symbol V additionally defines the representation of the complete view for the static part of the user interface of our view. While E and G are data related symbol classes instantiated for each data objects in their data source V is statically instantiated. By the use of the VIVID symbol editor we first compose the visual representation for these symbol classes as shown in Figure 4 as well as the symbol hierarchy given in Figure 5. E is defined as a graphical primitive in form of a label holding the employee s name. G is specified as two embedded containers with a graphical primitive for the group id on top of the innermost container. V is defined with three buttons on the top toolbar and a scrolled area below which is automatically equipped with vertical and horizontal srollbars. Each symbol container is associated with a layout manager from the VIVID layout library. For G, for instance, we assign a T reelayout manager to the root container and a ColumnLayout for the container members which holds the employee symbols.

5 V G toolbar scrolledarea newemployee newgroup delete groupidlabel root group root E namelabel (Label) G root (TreeLayout) group (BorderLayout) groupidlabel members (ColumnLayout) V root (BorderLayout) toolbar (RowLayout) newemployee (Label) newgroup (Label) delete (Label) scrolledarea (RowLayout) members Figure 5: Hierarchical Structure of Symbol Classes E namelabel = Container = Primitive Figure 4: Topological Structure of Symbol Classes Once the symbol classes are defined we first relate symbol classes to data sources. In Table 1 we see that Employees and Groups returned by the SQL statements are defined to be the sources of symbol classes E and G. Note here, that in this article we use the!-operator to refer to objects in the hierarchical structure as well as to select fields of the data source of one symbol class. During the visualization one symbol is instantiated for each object in the table returned by the SQL statement. Property E! sourcedef! querystring G! sourcedef! querystring SQL Statement SELECT Λ F ROM Employee SELECT Λ F ROM Group Table 1: Associatiing Symbol Classes to Source Thereafter, an additional specification gives the mapping between symbol properties and database attributes. The next step defines the composition of the layout Property E namelabel! text G! root! group! groupidlabel! text Attibute Expression source Name source! GroupId Table 2: Mapping Attributes to Symbol Properties specified by constraints as given in Table 3. That table basically defines conditional embeddings of symbol containers. The first row, for instance, defines the case when the source attribute SuperGroup is not defined, i.e., a group has no supergroup. In that case the Child symbol of class G is placed in the container scrolledarea of P arent V. When parent class equals child class then both are distinguished by index 1 and 2. The exact placement of symbols is determined by the layout manager of G! root which refers to tree layout. Table 3 is instantiated with respect to the algorithm given in Section 3.2. The instantiation results in a tree with V as a static symbol as its root. The visual interaction is finally defined by Table 4. This table associates drag&drop of symbol classes with database operations. The first row, for instance, defines that if a symbol of class E is dragged and dropped on symbol of class G then the GroupId is updated to the new group id. The layout update is automatically managed by corresponding layout managers when dropping the symbol. Figure 6 shows the finally generated organization chart from an Access database. Individual employees in white boxes can be moved between groups given as grey boxes via drag & drop. Groups can be easily dragged to different locations in the hierarchy. Three buttons on the top are for the creation and deletion of employees and groups. 5 Implementation The VIVID framework has been implemented as introduced in the previous section. The framework consists of a couple of specification tools and libraries which are controlled by the user through a view management tool (cf. Figure 7). The symbol editor is a sort of a GUI builder which has been extended by graphical object primitives like boxes, lines, circles. The editor addition-

6 Parent Child Condition Symbol Container V G G! source! SuperGroup == NULL V! root! scrolledarea G G G[1]! source! GroupId == G[2]! source! SuperGroup G[1]! root G E G! source! GroupId == E! source! MemberOf G! root! group! members Table 3: Layout Constraints for the Example Drag Drop DB Transaction E! namelabel G! root! UP DAT E EmployeeSET MemberOf = G! source! GroupId group! groupidlabel W HERE Name = E! source! Name E! namelabel V! root! DELET E F ROM Employee toolbar! delete W HERE Name = E! source! Name G! root! V! root! UP DAT E GroupSET GroupId = NULL group! groupidlabel scrolledarea W HERE GroupId = G! source! GroupId G! root! G! root! UP DAT E GroupSET SuperGroup = G[2]! source! GroupId group! groupidlabel group! groupidlabel W HERE GroupId = G[1]! source! GroupId G! root! V! root! DELET E F ROM Group group! groupidlabel toolbar! delete W HERE GroupId = G! source! GroupId V! root! G! root! INSERT INT O Employee toolbar! newemployee group! groupidlabel V ALU ES( 0 N ew Employee ;G! 0 source! GroupId) V! root! G! root! INSERT INT O Group toolbar! newgroup group! groupidlabel V ALU ES( 0 N ew Group ;G! 0 source! GroupId) V! root! V! root! INSERT INT O Group toolbar! newgroup scrolledarea V ALU ES( 0 N ew Group 0 ; NULL) Table 4: Drag&Drop Rules for the Example ally offers a extensive library of layout managers. The constraints editor for layout composition and the interaction editor for drag&drop specifications are implemented as form-based wizards applying to Java Bean technologies. Each editor has a source code generator. VIVID is implemented in Java 2 with JDBC (Java DataBase Connectivity), and Java Foundation Classes (Swing). 6 Conclusions and Outlook We have presented a generic approach for the generation of interactive visual interfaces for resource manipulation in databases. Our framework covers the complete process from the definition of symbols, their mapping to database objects through queries, their spatial arrangements and final layout through layout managers as well as the definition of user interactions. The herein presented simple example of an organization chart provides a good overview on the simplicity and thus efficient applicability of the VIVID framework. The implemented software can be easily customized to Java applets which greatly support remote resource management. Additionally, due to the Java Beans compatibility our framework has an open interface via RMI and Corba to distributed business application. Though, we presented the prototyping of icon/symbol oriented drag&drop user interfaces we think that our approach is basically suitable for other user interface policies and even for general visualization of huge database content. With that regard we investigate extensions towards general (state-oriented) user interaction specification like ODSN [11] or UAN [6]. Though also not presented here, we see a potential application of VIVID for the generation of application-specific editors. Figure 7: VIVID Environment Screenshot

7 Figure 6: Screenshot of a Generated Organization Chart References [1] B. d Ausbourg, G. Durrieu, P. Roche.Deriving a formal model from UIL description in order to verify and test its behavior. In Proceedings of the 3rd Eurographics Workshop on Design, Specification, and Verification of Interactive Systems, Namur, [2] S.K. Chang, et.al., A Visual Language Compiler, IEEE Transactions on Software Engineering, vol. 15, no. 5, pp , May [3] A.L. Chow, et.al., Topological Composition of Systems: Specifications for Lexical Elements of Visual Languages, Proceedings of the IEEE Workshop on Visual Languages 1991, Kobe, Japan, October [4] G. Costagliola, et.al., Automatic generation of visual programming environments, IEEE Computer, vol 28, no. 3, pp , March [5] G. Costagliola, et.al., A Framework of Syntactic Models for the Implementation of Visual Languages, Proceedings of the IEEE Workshop on Visual Languages 1997, Isle of Capri, Italy, September [6] H.R. Hartson, et.al., UAN: A User-Oriented Representation for Direct Manipulation Interface Designs, ACM Transactions on Information Systems, vol.8, no. 3, pp , July [7] C. Janssen. Dialogue Nets for the Description of Dialogue Flows in graphical interactive Systems, (In German). Proceedings of Software-Ergonomie 93, Teubner, Stuttgart, [8] P. Griebel, M. Poepping, G. Szwillus, H. Uhr. Objection - Development of Application-Specific Graphics, (In German). In: Software-Ergonomie 97, March, Dresden, [9] J. Rekers, A. Schuerr. A Graph Based Framework for the Implementation of Visual Environments, Proceedings of the IEEE Symposium on Visual Languages 1996, Boulder, Colorado, Sept. 1996, Los Alamitos: IEEE Computer Society Press, [10] S.F. Roth, et.al., A User Interface Environment for Exploring Information, Proceedings of the IEEE Symposium on Information Visualization 1996, November 1996 [11] G. Szwillus, Object Oriented Dialogue Specification with ODSN, Proceedings of Software- Ergonomie 97, (In German), Teubner, Stuttgart, 1997.