CHI '95 ProceedingsTopIndexes
DemonstrationsTOC

Building Dynamic Graphical Interfaces with Escalante

Jeffrey D. McWhirter

Department of Computer Science
University of Colorado, Boulder, CO, 80309
303-492-7906, jeffm@cs.colorado.edu

© ACM

Abstract

The development of dynamic graphical applications is a difficult and time consuming task. This difficulty stems from the complexity of the applications as well as the lack of adequate development tools. Escalante is an environment that supports the visual specification, rapid prototyping and generation of complex graphical applications. Using Escalante, one can rapidly construct a broad range of highly functional applications with a minimal amount of manual programming.

Keywords:

User interface development environments, visual languages, graph editors.

Introduction

The applications within the domain of Escalante(McWhirter, 1994) can be considered as visual language applications. These systems support the creation and manipulation of complex and dynamic information structures through pictorial representation. Escalante provides a high level of support to developers and enables the rapid development of visual language applications with minimal manual programming.

The approach taken is to provide a rich substrate that is applicable to a broad range of visual languages and provides deep system support for those applications. Features of this substrate include: a highly functional editing module; generalized constraint mechanisms; and a structured graphics package.

FIGURE 1: GrandView Specification Environment

A specification environment, GrandView, is used by the developer to define the constructs and characteristics of a target visual language. Visual language constructs are characterized as entities and relations and are specified through the Class View, shown in Figure 1. GrandView supports the specification of other characteristics of visual languages and applications including the attributes, graphical representation and constraints associated with the basic language constructs. Language construct specifications may be prototyped in the Prototype View which allows for instant feedback as to the state of the specification. The language specific software modules of an application can then be generated from the GrandView specification and combined with the Escalante substrate to realize a working application.

EXPERIENCES

We now present a set of example applications constructed using Escalante including some quantification of the effort required to construct each example.

FIGURE 2: FA Application

FA

Figure 2 shows FA, an application that supports the exploration of regular languages and their closure properties. This application lets one create a number of Machine elements which may contain either a finite state automata or other Machines. One can define a Word and animate the process of a Machine accepting or not accepting the string defined by the Word (e.g., ``abbba''). This application was constructed in two days with 300 lines of manual programming.

FIGURE 3: Boolean Circuit Application

Boolean Logic Circuit

Figure 3 shows a system that supports the creation and manipulation of boolean logic circuits. This application allows the user to connect together a set of AndGate, OrGate, NotGate and Input nodes. The gate nodes apply their respective boolean operations to their set of input values and labels and propagate this change to their set of outputs. This application was constructed in one half a day and required approximately 50 lines of code.

FIGURE 4: WaterWorks

WaterWorks

WaterWorks, shown in Figure 4 is an application for constructing dynamic water systems. The user constructs a series of water sources and pipes. A Drop falls until encountering some object. If it is possible the Drop enters the object, else the Drop undergoes a phase change and turns to Vapor. Vapor behaves likes a Drop except it rises. Pipes accept Drops and carry up to a certain capacity at which time Water backs up in a Pipe. This application was built in two days and required approximately 300 lines of manually written code.

FIGURE 5: Interactive Table

Interactive Table Example

Figure 5 shows an application that supports the interactive creation of tables. The user can add any number of rows or columns and can manipulate their size and position. Text, bitmaps and nested tables can be placed within a table. The full application required approximately 50 lines of manual programming.

THE DEMONSTRATION

The first part of the demonstration will show how GrandView is used to specify, refine and generate a target application. The second part of the demonstration will be a tour of various applications constructed using Escalante. Some of the interaction facilities provided by Escalante (e.g., cut/copy/paste, semantic snapping and attribute based search) will also be shown.

CONCLUSION

There often exists a tradeoff between the breadth of the domain and the depth of support provided by a development environment. Escalante overcomes this tradeoff by focusing on a relatively large class of applications and providing a high level of support for constructing those applications. Providing a functionally rich development environment and an amenable way in which to use the environment allows for the rapid construction of complex applications.

References

Jeffrey D. McWhirter and Gary J. Nutt. Escalante: An Environment for the Rapid Construction of Visual Language Applications. 1994 IEEE/CS Symposium on Visual Languages (VL'94), pages 15-22, 1994.