Download WebDev is a programming in the what-you-see-is-what-you

Designing Dynamic Web Pages in the WYSIWYG Interface
David Wolber, Yingfeng Su, Yih Tsung Chiang,
Department of Computer Science, University of San Francisco
2130 Fulton St., San Francisco, CA. 94117
(415) 422-6451 [email protected]
ABSTRACT
this way, the designer is shielded from the complexities of
WebDev is a programming in the WYSIWYG interface
SQL and programming syntax in general.
tool for building dynamic web pages that connect to
Both spreadsheets and QBE systems are examples of
databases. The system allows designers to “program” by
programming in the interface systems, i.e., system in
entering query by example (QBE) and spreadsheet
which the development interface and the target interface
formulas into visual components of HTML documents.
are the same.
The system then automatically generates dynamic web
facilities are of this type, as are programming by example
pages that can be executed in a browser.
(PBE)[] systems like SmallStar[] Eager[] and Mondrian[].
INTRODUCTION
These systems are powerful because the developer
WYSIWYG HTML editors such as Microsoft’s Front
programs using the same operations and same interfaces
Page [] have made the design of static web pages easy for
as an end-user.
end-users (designers who are not programmers). Tools
such as WebMacro[] and XMLC[] go a step further by
easing the task of designing dynamic web pages. With
these tools, the designer works with sample data to
specify the presentation of the dynamic page. The
programmer is allowed to specify the dynamic content of
the page separately.
Applications with macro-recording
Programming in the WYSIWYG interface tools are slightly
different. Here, the development interface is not the target
run-time interface, but a facsimile of it. The developer
still gains some benefit from visualizing the development
interface as the target interface, but he must mentally map
the operations he performs during development to the
actual operations that will occur at run-time. These tools
None of these tools, however, allow a designer to create a
are freer, in a sense, as they can provide guides and even
complete dynamic web page, including both presentation
dialogs that help the developer. Of course the more guides
and content. The designer is still dependent on a
and helper dialogs, the less WYSIWYG the interface is.
programmer. This is unfortunate, especially since enduser programming techniques have proven viable in other
domains.
The Spreadsheet is a prime example of an end-user
programming environment. The “developer” enters his
programs (formulas) directly in table cells, so the
Interactive development environments like Visual Basic
are programming in the WYSIWYG tools, but mostly
they provide visual methods of designing the static layout
of an interface. Specifying the dynamic parts of a
program, e.g., what occurs when a button is clicked,
requires coding.
“programming” is concrete and direct, and immediate
feedback is provided.
In the world of dynamic web page development,
Macromedia's Ultradev 4 [4] is as close to a programming
Query by example (QBE)[] formulas from the database
world are similar. The designer/user enters query
expressions directly in table cells, and the system
automatically displays the rows that fit the expressions. In
in the WYSIWYG system as there exists. Unlike Visual
Basic, it allows dynamic parts of a program, even one that
views and manipulates a database, to be specified without
writing code.
1
Unfortunately,
Ultradev
4’s
programming
knowledge;
process
requires
Through the use of formulas, the designer can directly
partially
connect input form parameters with database operations,
programming in the WYSIWYG. For instance, instead of
and thus bypass the circuitous specification necessary in
directly specifying how input form parameters of one
Ultradev 4 and hand-coded web paged development.
page affect a visual table on another page, the Ultradev
At any time during development, the designer can press a
developer must specify how the input data of one page
button and WebDev will generate code, register it with a
maps to parameters of the other page, how those
server, and run the new dynamic page in a browser.
parameters map to database operations on a result set, and
WebDev generates an HTML template file and a Java
finally, how the result set is mapped to a visual table.
Figure 1. WebDev Development of a Bookstore page
servlet. The template file is sent to the Lutris XMLC
it
is
still
only
compiler, which generates a Document Object Model
Some of this specification occurs in an interface
(DOM) tree representation. The servlet then manipulates
resembling the target interface, but much of it does not,
that DOM tree to add the dynamic content.
and much of it involves programming concepts such as
Experience with the first users of the system suggest that
parameters and result sets. Because of this, one might say
the tool can significantly reduce development time for
Ultradev 4 is more of a visual interface to a program, as
programmers, and increase the pool of designers that can
opposed to a programming in the WYSIWYG tool.
build complete dynamic web pages.
We have designed a tool, WebDev, that allows a dynamic
OVERVIEW OF THE DEVELOPMENT PROCESS
web page to be designed directly in the context of the
When an HTML table is inserted into the editor, the
WYSIWYG interface. With WebDev, the designer first
designer can either map it to existing database table(s) by
maps visual tables to database tables, either using a dialog
entering information in a dialog, or enter sample data for
or by asking the system to generate a table from a sample
it, and tell the system to create the database table
row. After mapping, visual tables appear with some
automatically. The development-time HTML table then
special rows that guide the designer in specifying add,
represents both a run-time visual component and the
delete, and select operations (see Figure 1). The designer
mapped database table (s).
enters QBE and spreadsheet formulas in these rows.
Figure 2 shows one of the dialogs used to map a visual
When the designer enters these formulas, he is not
table to a database. Note that the mapping is not from
specifying them for the sample data that appears at
visual table to database table, but from visual table
development time, as in a spreadsheet. Instead, the
column to database table column. Thus, one visual table
expressions entered in the WYSIWYG table map to run-
can be mapped to multiple databases, and one database
time operations that access and manipulate the underlying
table can be viewed in multiple tables.
database table, and, in some cases, also manipulate the
If the designer saves the program immediately after
run-time view of that table.
mapping the database, the resultant web page will display
This programming in the WYSIWYG scheme allows for
all records of the mapped database table in the visual
more concrete specification of dynamic web pages. The
table. Most the time, of course, the designer desires a
designer never need enter an entire SQL or programming
more complex web page.
statement, or refer to result sets, parameters, or other
After the mapping, the development-time table appears
items other than named items from the user interface.
with one sample row of "live" database data, and four
other rows, empty except for labels in the left-most
2
column that help guide the designer (see Figure 1). The
constant data in the add row, a record containing that
first row is an optional header row. The second row
constant data is entered in the database table each time the
displays sample “live” data from the mapped database.
page is invoked.
The view select, delete select, and add rows are used to
Input Forms
specify the database operations that should be performed.
Selects, deletes, and adds are often based on something
PBE Formatting
other than the constant data provided in the samples
The designer formats the sample data in each cell of the
above. In many interfaces, the operations will depend on
sample row. At run-time, the sample formatting of each
data entered by the user in an input form.
column is applied to all database data (rows) that appear
WebDev allows expressions and formulas to include
(e.g., all titles in the table of Figure 1 will appear
references to the names of input form data. For instance,
italicized).
in the add row of Figure 1, the designer has entered the
View Select
names of the input form text boxes.
The designer enters QBE expressions in the view select
At run-time, when the Add Button is selected, the values
row to specify the database rows that should be displayed.
in the text boxes will be used to add a record to the
The designer need not understand SQL syntax, as all
database. Note that the visual table will then be updated
expressions are entered in the context of table cells. For
using the criteria in the view select row (InStock>10 and
example, suppose the designer enters expressions in the
Price>22.00).
view select row as in Table 1. The system will build the
query:
Query formulas and add expressions can also refer to
input form data from another page in the development
SELECT * from BookTable
environment. The designer just qualifies the component
where InStock>10 and Price>22.00
name with the page name, e.g., "page1.minimumPrice".
and use it in the generated servlet so that only the selected
Entry Points
books are displayed.
A dynamic web page can be invoked from various other
Delete Select
pages and from the page itself. WebDev allows the
The delete select row is similar to the view selection row,
designer to specify the result page of a button by right-
but the QBE entered is used to choose which rows are
clicking on the button and specifying the name of any
deleted from the database when the page is invoked. If
open page in the development environment.
“Kafka” were entered in the author column of the delete
When a page is specified as a result page of a button, a
selection row in Figure 1, the following SQL statement
new tab appears in the page's development-time window.
would be generated:
In Figure 1, there are two tabs—the selected one
DELETE * from BookTable where Author=Kafka
If the delete row is left blank, then no deletions will
occur.
Add
corresponding to the Add button in the page, and the
“Page1.submit” one corresponding to a button in another
page. Each tab panel specifies the actions that will occur
when the page is loaded as a result of clicking the button
the tab represents. For the example in Figure 1, the
The add row facilitates the creation of pages that allow
designer chooses the Add tab to specify what should
the end-user to enter new records in a table. If one enters
occur when the Add button is clicked.
3
Note that when the designer adds new components or
using input form data. In UltraDev4, the designer must
modifies the layout of a page, these changes are reflected
create a ResultSet object that is mapped to the database
in all tab panels, no matter which is currently selected.
table. He then maps the columns of this ResultSet to
Spreadsheet Formulas
columns of the visual table- a mapping unnecessary in
The facilities described above allow for the development
WebDev since the visual table represents the database
of web pages that access database data, but they don't
table and a view of the table.
allow computations on the data. Fortunately, WebDev
Next, the UltraDev4 developer maps the AddRecord
provides enhanced spreadsheet functionality, similar to
operation to the Add button by choosing it from a list of
[1], which allows computations to be entered. The user
operations. He then maps the input form's text boxes to
can enter complex formulas both in the add row and in
the parameters of the page being built. Finally, he maps
table columns that are not mapped to database fields.
the page parameters to the parameters of the AddRecord
When the initial mapping to the database is made, any
operation created earlier.
number of columns in the visual table can be left
Schema-Based Web Interface Generators
unmapped. Those unmapped are called "expression"
ASPapp [] is indicative of tools that generate dynamic
columns. In expression columns of the sample row, the
web pages directly from a database schema. These tools
designer can enter formulas that refer to any of the
provide an immediate (one-click) web front-end to any
column names of the table. For instance, in Figure 1,
existing database. Most provide wizards that allow some
“Total” is an expression column, and the designer has
specialization of the generated pages. A designer can also
entered “Instock*Price” as its formula.
edit the generated code after the fact to make layout and
On entry, the formulas are evaluated using the live
other modifications, using whatever tools and editors are
database data in the other columns of the sample row.
available.
This is done only to provide immediate feedback to the
Designing web pages in WebDev requires some work, but
user. The computed value (e.g., 340.00) is placed in the
more customization is possible than with schema-based
cell and the formula appears in the toolbar (as it is in
generators. The designer can specify pages that display
Excel and most spreadsheets). At run-time, the formula is
and allow any add/delete modification of any number of
evaluated, in the generated code, for all rows in the
database tables, and that display database data in lists and
database that are to be displayed.
combo boxes as well as tables. Because mapping is based
on columns, a single visual table can show data from
GENERATED CODE
various database tables, and a single database table can be
viewed across multiple visual tables. Because the designer
can specify the relationship between various submit
RELATED WORK
UltraDev4 is the union of Dreamweaver with the system
events and pages, more customization is possible in terms
of how various pages are related.
formerly known as Cold Fusion. Much can be specified
Furthermore, since specialization is facilitated through a
without programming, but not in the direct, in-context
wizard in schema-based generation, row selection criteria
manner of WebDev. Take, for instance, the development
must be specified out of context with an SQL-like
of a simple page that allows an end-user to add a record
statement. In WebDev, this criteria is specified in the
context of the target interface.
4
Forms/3
there other ways in which relations can be demonstrated,
Forms/3 is a programming environment based on the
such as inferring them from the QBE and spreadsheet
spreadsheet. Spreadsheet formulas need not be placed
formulas entered by the designer?
only in cells of a table, but can be entered in any visual
component or even as a property of some complex
component such as a graphic. Tables need not be of a
fixed size, but can contain a variable number of rows and
columns.
SUMMARY
WebDev allows database operations and computations to
be specified in the context of the HTML interface.
Like with regular spreadsheets, the data entered in a
Forms/3 interface is persistent. But though there is the
REFERENCES
concept of dynamically sized tables, there is no notion of
1. ASPAPP Inc., http://www.aspapp.com
an underlying store beneath the visible data that the
2. Bauer, M. Dengler, D.,Paul, G., Meyer, M.,
designer manipulates. Forms/3 is thus more concrete, as
Programming by Demonstration for Information Agents,
the designer need not mentally map the development-time
in Your Wish is my Command, Henry Lieberman, Ed. San
tables to run-time database tables. However, it cannot be
Francisco: Morgan Kaufmann, 2001
used to create interfaces to existing databases or to
3. Burnett, M. Atwood, J., Djang, R. , Reichwein, J.,
specify traditional database operations.
Gottfried, H. and Yang,S. Forms/3: A First-order Visual
DODS
Language to Explore the Boundaries of the Spreadsheet
Programming by Example
Paradigm. Journal of Functional Programming,
PBE systems such as [] have focused on dynamic web
page development, but all in the context of building
wrapper programs, i.e., pages that get input from the user,
invoke other web page(s), then parse the resultant data
11(2):155-206, March 2001
4. Cypher, A., Watch What I do: Programming By
Demonstration, MIT Press, London, England, 1993.
and display it to the user.
5. Lutris, Inc., http://www.lutris.com/products/index.html
Our original idea was to apply PBE to the development of
6. Macromedia, Inc., http://www.macromedia.com/
web pages that connect to databases.
7.. Miller, R., Myers, B., Creating Dynamic World Wide
STATUS AND FUTURE WORK
The version of WebDev reported in this paper was only
recently completed.
Web Pages by Demonstration. Carnegie Mellon
University School of Computer Science Technical Report,
no. CMU-CS-97-131 and Human Computer Interaction
Institute Technical Report, CMU-HCII-97-101. May,
1997.
Our experience with users has been encouraging, but
extensive usability testing is needed.
One direction of future work concerns the specification of
relational tables in the WebDev framework. Can a table
relation be inferred if a designer enters multiple sample
rows, where the value of some columns are the same? Are
5