NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
NSF Proposal
Principal Investigator
David Wolber
Associate Professor
Department of Computer Science
University of San Francisco
2130 Fulton Street
San Francisco, CA. 94117
(415) 422-6451
List of Suggested Reviewers
Brad A. Myers
Senior Research Scientist,
Human Computer Interaction Institute
School of Computer Science
Carnegie Mellon University
5000 Forbes Avenue
Pittsburgh, PA 15213-3891 USA
412-268-5150 [FAX: 412-268-1266]
bam+@cs.cmu.edu
Robert C. Miller
Henry Lieberman
MIT Media Laboratory
20 Ames St. 305 A
Cambridge, MA
02139 USA
(+1-617) 253-0315
Enhydra guy
WebMacro guy
Cover Sheet for Proposal
Project Summary
The objective of the project is to explore end-user techniques for building dynamic database-driven web pages. An exploratory environment will be designed with a what-you-see-is-what-you-get (WYSIWYG) HTML editor as its basis. The research team will explore several visual programming techniques that have been used in other domains, including Query By Example (QBE), spreadsheet formulas, and Programming by Example (PBE) macro-recording. These techniques will allow designers, without coding, to create web pages that display live database data, perform computations on database data, and allow interactive viewing and manipulation of database data.
The principal investigator has extensive experience in building PBE systems, but this project combines knowledge of at least three other areas: databases, spreadsheet paradigm research, and web development. Thus, extensive literature and product surveys will be conducted, along with the exploratory development. The team will also conduct user studies throughout the project to measure the effectiveness of various techniques.
Successful research would impact the creative capabilities of designers in a domain that is growing exponentially. Designers today are often restricted to developing the presentation of client-server applications, and must rely on a programmer to supply the dynamic content. Some emerging commercial systems such as Macromedia’s UltraDev4 do allow the designer to specify some dynamic content visually. However, these systems are dialog based and do not take advantage of the example-based approaches on which this project will focus.
The research can also extend the end-user programming and PBE fields by presenting and answering some new questions. What is the intersection of QBE and spreadsheet formulas? What is a proper user interface for applying them, in combination, to database-driven web applications? Can manipulations of persistent data (database tables) be specified through demonstrating operations on visual tables? Can database table creation, as well as queries and manipulation, be specified by example in the HTML editor interface? Is such a development environment effected if the underlying persistent data is stored in XML instead of a relational database?
B.Table of Contents
Project Description
OUTLINE FROM GUIDE
work to be undertaken
objectives
Develop Programming by Example (PBE) techniques for building dynamic database-driven web pages.
expected significance
Increase the power of web designers who are not programmers
Apply known PBE techniques to a practical domain
Create innovative PBE techniques for the domain and in general
relation to longer-term goals
In the past PI built PBE systems for the creation of animated interfaces.
relation to the present state of knowledge in field
PBE, in general
PBE applied to dynamic web page design (Miller, Myers paper)
Presentation/Templating frameworks for web page design
relation to work in progress elsewhere
work plan
design of activities to be undertaken
Survey of newer PBD research (PI is well versed in general field)
Survey of commercial and research presentation/templating systems
Survey of visual database building tools
description of experimental methods
broader impact
how the project will integrate research and education by advancing discovery and
understanding while at the same time by promoting teaching, training, and learning
The proposed system will generate HTML/XML template files and Java servlets that use JDBC to access databases. In order to write such code generators, students will have to obtain knowledge of all these technologies.
Working with designers who are not programmers will enhance student’s ability to build effective user interfaces.
discuss any ways in which the proposed activity will broaden the participation of
underrepresented groups;
Non-programmers are underrepresented within the software development community. The system built by this project will allow non-programmers to more fully participate in the software creation process.
indicate how the results of the project will be disseminated broadly to enhance scientific and technological understanding; and,
The system will be made publicly available.
identify potential benefits of the proposed activity to society at large.
The system built by this project will allow non-programmers to more fully participate in the software creation process. The system will increase the productivity of all designers.
Programming by Example (PBE) has been applied to a number of domains, including graphics and text editors, but little attention has been given to PBE design of dynamic database-driven web pages.
Such dynamic pages now require significant programming experience.
A number of tools have emerged that enhance the capabilities of non-programmers in dynamic web page design, and help separate the concerns of designers and programmers. For instance, a designer can create an HTML template, or prototype, of how a page should appear, then the XMLC compiler [] can be used to generate a Java-code representation of the page. The programmer can then write a servlet that, when executed in a browser, displays the page in the format specified by the designer but containing dynamic data specified by the programmer.
Such systems limit the creational capabilities of the designer to presentation and formatting. He isn’t allowed to specify dynamic content, such as persistent (database) data, without the help of a programmer. For instance, to create a simple on-line bookstore, a programmer would have to be hired to write servlet and database (e.g., JDBC or EJB) code that controls the background processing for manipulating the book inventory, placing books in a shopping cart, and processing the on-line purchase requests for the user.
The objective of this project is to devise PBE techniques for creating entire web sites like the bookstore example. PBE is often based on an extension of the macro recording concept. For example, to create an add book to inventory web page, the designer would first draw an input form, then enter appropriate information (e.g. Title, ISBN) in the labeled text areas. Next, he would add an insert button to the form, select it, and select “Record Response”. Then he would copy and paste the data from the text areas into columns of an HTML table on another page in the editor.
After the designer deselected the “Record Response” toggle, the system would generalize from the demonstrated example. In this case, the system might infer that 1) the HTML table is a display for a persistent database table, 2) Each time the submit button is hit, the data from the form should be used to create a new record in the persistent table, and 3) The HTML table should always display the updated contents of the database table.
A number of PBE concepts have been introduced, in other domains, which might apply in the area of dynamic web pages. Stimulus-response PBE requires the designer to record both a user action (e.g., entering the form data) and the system response (placing data in HTML table). Such a two-phase approach simplifies the generalization task of the system by providing more data. Snapshot techniques, on the other hand, compare before and after representations of the system to infer the proper response. Hints allow the designer to signify important elements for the inference system. Multiple example approaches require the designer to continually present examples until the system infers correctly. There are also a number of methods for presenting the inferred program to the user so that he can verify its accuracy or edit it.
One sub-objective of this project will be to explore the applicability of various known PBE techniques in this new domain. The applicability of these techniques will be measured through extensive user testing. It is also expected that new techniques will be discovered through this trial-and-error approach.
Another sub-objective is to explore the effectiveness of database design through programming in the interface. The idea is to allow designers to create database tables by creating and manipulating HTML tables in a what-you-see-is-what-you-get (WYSIWYG) editor. By visually inserting a table, and sample data for its column headings and cells, the designer will specify a persistent database table. When the generated servlet is executed, the table will display not the static data entered by the designer, but the contents of the database that the system generated, even if that database has been modified with a DBMS or other program.
Such a method cuts against the grain of the long-held software development theory of separating data (model) from the view. With the above process, there is only one representation of both the model and the view, at least from the designer’s perspective. In the generated code, however, there is a separation of model (database table) and view (HTML table).
One advantage is that designers need learn just one specification method, and its one (WYSIWYG HTML editing) with which they are already comfortable. Another advantage is that the data need not be specified twice, such as traditionally done when a view is created with an HTML editor, and a model is created with a DBMS or newer approaches such as XML and UML [DODS].
A number of questions arise. What if multiple views of the same table should appear in different pages? How are the relations in a relational database specified in this programming in the interface manner?
5. Relation to the present state of knowledge in field
5.1 PBE
Miller and Myers Turquoise system is one PBE system that focuses on creating dynamic web pages. Turquoise focuses on characterizing and accessing information from existing web pages. It does not target data-base driven pages, or the generation of client-server applications.
5.2 End-User Database Manipulation and Query
Zloof’s Query By Example (QBE) system [] from the 70’s allowed end-users to specify queries by entering data in sample table skeletons. The Query By Templates system [] extended this concept to allow queries to be specified for non-tabular data.
The proposed system will apply QBE techniques in the context of web page design, but it will also provide Database Definition by Example and Database Manipulation by Example.
5.3. Spreadsheet Systems
The spreadsheet is the best example of end-user, programming in the interface development. A number of research efforts have focused on extending the spreadsheet paradigm [Burnett] to allow non-tabular data elements and logical instead of spatial generalization of formulas. Some have focused specifically on adding spreadsheet capabilities to user interface design [Hudson,?].
The proposed system will apply spreadsheet capabilities in the context of web pages.
5.4. Presentation Tools for Client-Server software
The Java II Enterprise Edition framework has become extremely popular for client-server applications. Servlets, the basis of the framework, are Java programs that dynamically generate web pages with dynamic data. Unfortunately, many designers cannot write Java code. Because of this, a number of presentation/templating frameworks [] have emerged which allow designers to specify the presentation of a dynamic page visually or in HTML, while a programmer can focus on writing code that accesses and computes the dynamic content.
XMLC is one such tool. It takes an XML page, created by a designer, as input, and outputs a java code representation of the page. A programmer can then write Java code that manipulates this representation to insert dynamic data into the presentation. The designer can edit his “template” even after the dynamic part has been coded, then run the template through the XMLC compiler again. In this manner, the concerns of the designer and programmer are kept separate, and the designer can edit and format the presentation without requiring programmer intervention.
The proposed system will extend the capabilities of the designer beyond presentation and formatting—he will also be able to perform some or all of the work that requires a programmer in XMLC-like development processes. Specifically, the designer will be able to specify dynamic database access and manipulation through PBE, and dynamic data computation through the integrated spreadsheet capabilities. The proposed tool will generate servlet code automatically from the visual specifications of the designer.
D.References Cited
E.Biographical Sketches
David Wolber
a. Education
University of California, DavisB.S. 1986
University of California, DavisM.S. 1988
University of California, DavisPh.D. 1991
b. Appointments
Associate Professor, University of San Francisco, 2000-
Assistant Professor, University of San Francisco, 1993-2000
c. Publications
(i)Closely associated to project
Wolber, D., Myers, B., "PBD Interface Builders: Demonstrating the When as Well as the What", Chapter in Your Wish is my Command, pp. 321-344, Lieberman, Henry, ed., Morgan Kauffman, 2001.
Wolber, D., "Pavlov: Where PBD Meets Macromedia Director", Your Wish is my Command, pp. 345-350, Lieberman, Henry, ed., Morgan Kauffman, 2001.
Myers, B., McDaniel, R., Wolber, D., "Demonstrational Interfaces", ACM Communications, March 2000.
Wolber, D., "An Interface Builder for Designing Animated Interfaces", Transactions on Computer-Human Interface( TOCHI), December 1997.
Wolber, D., "Pavlov: Programming By Stimulus-Response Demonstration", Proceeding of the Conference on Human Computer Interface (CHI '96), 1996.
(ii) Other Significant Publications
Wolber, David, "A Multiple Timeline Editor for Designing Multi-threaded Applications", Proceedings of the User Interface and Software Technology (UIST) Conference, San Francisco, California, 1998.
Wolber, David, "Reviving Functional Decomposition in Object-Oriented Design", Journal of
Object-Oriented Programming (JOOP), October 1997.
Fisher, G., Wolber, D. and Busse, D.*, "Adding Rule Based Reasoning to a Demonstrational Interface Builder", Proceedings of the User Interface and Software Technology (UIST) Conference, Monterey, California, 1992.
Wolber, D., and Fisher, G., "A Demonstrational Technique for Developing Interfaces with Dynamically Created Objects", Proceedings of the User Interface and Software Technology Conference (UIST), Hilton Head, South Carolina, 1991.
Wolber, D., Janne, E.*, Chen, K.*, "Creating Animated Interfaces With Stimulus-Response Demonstration", Proceedings of the Conference on Human-Computer Interaction (CHI '95), 1995.
d. Synergistic Activities
The principal investigator recently designed a new graduate-level course focusing on dynamic web page development. The course made use of a software donation from BEA, Inc., which provided its WebLogic application server software for student use. The course focused on Java-based enterprise development, including servlets, JSP, RMI, JNDI, WebMacro, and XMLC. BEA provided an award to the top student project in the course.
The course was a success and the principal investigator is now scheduled to teach the same material each semester. It should serve as an excellent springboard into the proposed research project.
The relationship with BEA is also significant in that it provides a direct avenue for bridging the research-industry gap.
e. Collaborators and Other Affiliations
(i) Collaborators
The principal investigator served on the dissertation committee of Richard McDaniel, one of Brad Myer’s students at Carnegie Mellon University. He also coauthored two papers with Mr. Myers, one in ACM Communications (along with Rich McDaniel) and a chapter in a recent book on programming by demonstration.
Brad Myers
Senior Research Scientist,
Human Computer Interaction Institute
School of Computer Science
Carnegie Mellon University
5000 Forbes Avenue
Pittsburgh, PA 15213-3891 USA
412-268-5150 [FAX: 412-268-1266]
<bam+@cs.cmu.edu>
(ii) Graduate Advisor
Fisher, Gene
Professor
Department of Computer Science
California State University, San Luis Obispo
(iii) Thesis Advisor and Postgraduate-Scholar Advisor
F.Proposal Budget (cumulative and annual budgets, including subaward
budget(s), if any, and up to three pages of Budget Justification)
Annual Budget
Student Research Assistants’ Summer Salary $24,000
Student Research Assistants’ In-Session Salary$36,000
Principal Investigator Salary$16,606
Fringe Benefit (9.4% of all salary)$ 7,201
Travel Expenses$ 8,100
------
Sub-Total$91,907
USF Indirect Costs (50.9%)$46,781
------
Total (1 year)$138,688
Total (3 years)$416,064
Four students will be hired during the school year and the summer. The students will work twenty hours per week during school, and forty hours a week during the summer.
StudentsWeeksHours/WeekTotal HoursPay ($15/hr)
Summer410401600$24,000
School430202400$36,000
The principal investigator will be paid at his regular pay for two months in the summer. His projected nine-month salary for 2001-2002 is $74,730, which computes to $8303 per month, or $16,606 for two months.
Travel expenses are requested for the attendance of three conferences annually by the principal investigator and one student assistant. Costs are estimated at $1500 per trip for the principal investigator, and $1200 per trip for the student (taking into account student discounts for conference fees). For three conferences, this computes to (1200+1500)*3=$8100.
Budget Justification
USF has the lab facilities necessary for the project, as well as a relationship with BEA, Inc., which provides the necessary server software for the project. The vital need is for funds for student research assistants and the principle investigator.
The principal investigator would like to devote the summer months completely to research and specifically the proposed project. In past summers, he has consulted in the area for his summer salary. Though the proposed salary is significantly less than a consultant salary, it would allow him to do what he likes best—work with students on interesting problems.