Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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