Developing Dynamic Web Pages Without Programming Research Project Led By: Professor David Wolber Chia-Han Liu Helen Kleytman Pooja Garg Yih-Tsung Chiang Yingfeng Su

Agenda Problems with Traditional Web Development Our solution: WebSheets WebSheets Demo System Internals XML Extension Conclusion

Problems of Traditional Web Development Presentation and logic are mixed together Artists/Designers can’t write code Artists/Designers must know SQL well to generate dynamic contents from database

Solution: Integrated Development Environment Macromedia DreamWeaver UltraDev4 IBM Websphere Studio ASPapp

Our Solution: WebSheets Programming by Demonstration Query by Example Spreadsheet Functions Designers J2EE WebSheets IDE JDBC Servlet XMLC

Key Terms and Concepts

What is an Application Server? Information Information Client Client Information Information SERVER Client Client

BEA Weblogic Server Side Services: HTTP Servlets - Composition of Dynamic Web Pages JDBC - Allows Java programs to access databases

HTTP Servlets HTTPResponse SERVLET HTTPRequest Client SERVER

JDBC Architecture Servlets JDBC Interface Driver (Oracle) Driver (ODBC) Driver (Sybase) Oracle DB MSAccess Sybase

HTTPServlet Designers and Programmers

Old Way vs. New Way

Templates: Separating the Tasks of Designers and Programmers HTML Template servlet code including DOM manipulation code and JDBC code XMLC Java DOM tree code HTML Output

JAVA DOM Manipulation Code Instance of XMLC Generated class XMLC provided Access functions

WebSheets Kills Programmers X Designers HTML Template servlet code including DOM manipulation code and JDBC code XMLC Java DOM tree code HTML Output

Demo Bookstore scenario A bookstore manager who knows little about programming wants to create a dynamic page for customers to search books by title

WYSIWYG Editor Format of the text Hyperlinks Images Static tables Dynamic tables Preview

WYSIWYG Editor

Dynamic Components

Dynamic Components

Create Database from Scratch

Create Database from Scratch

Spreadsheet Formulas

Spreadsheet Formulas

Wizard Bar A context-sensitive guide Response every time an action is finished List several possible further steps

Wizard Bar

Centralized Configuration Administrator can set up the server addresses and database pool names Our system records these configuration User doesn’t need to know the detail of IP and pool Easy deployment

Centralized Configuration (Administrator)

Centralized Configuration (User Side)

Multiple Document Users can set up the relation between buttons and pages Destination page needs incoming information

Multiple Document

Multiple Document

Multiple Document

Multiple Document

WebSheets Code Generator servlet code including Code Generation WYSIWYG specs WebSheets Code Generator HTML Template servlet code including DOM manipulation code and JDBC code XMLC Java DOM tree code HTML Output

Code Generation Class GeneratedServlet extends HTTPServlet { // other methods public void act_delete(HttpServletRequest req, HttpServletRespons res) { // Access request parameters String minStock = req.getParameter(“MinStock”); // Access DOM tree created from HTML template BookListDOM doc = new BookListDOM(); Node tempRow = doc.getElementTempRow(); // Execute specified delete operations using JDBC // and SQL Delete statements stmt.execute("delete from BOOKS where INSTOCK<" + minStock); // Execute the specified Select statement to obtain // a resultset. rs =stmt.executeQuery("select * from BOOKS”);

Code Generation while(rs.next()) { // Use DOM manip. code to enter values in the // DOM tree. doc.setText_table1_col0(rs.getString(1)); doc.setText_table1_col1(rs.getString(2)); doc.setText_table1_col2(rs.getString(3)); // Evaluate the spreadsheet formulas doc.setText_table1_col3( String.valueOf(rs.getInt(2) * rs.getInt(3))); // Clone the sample row tempRow.getParentNode().insertBefore( tempRow.cloneNode(true), tempRow); } // Remove the sample row tempRow.getParentNode().removeChild(tempRow); // Write the updated DOM tree to the browser out.println(doc.toDocument());

Code Generation The service() method uses Java Reflection to dispatch the request to the corresponding handler public void service(HttpServletRequest req, HttpServletResponse resp) { String action = req.getParameter("act"); String mtdname = "act_" + action; Class[] paratypes = new Class[] { Class.forName("javax.servlet.http.HttpServletRequest”), Class.forName("javax.servlet.http.HttpServletResponse") }; Method mtd = this.getClass().getMethod(mtdname, paratypes); mtd.invoke(this, new Object[]{req, resp}); } // public void act_add(HttpServletRequest req, HttpServletResponse resp) { … } // public void act_delete(HttpServletRequest req,

Objective WebSheets Store & Retrieve Data Store & Retrieve Data Databases XML Files

XML Extension. Why? Pros Cons search engine data transfer hierarchical triggers security queries across multiple tables

Code Generation Model abstract class StorageProxy class JDBC_Storage abstract void genAdd(); abstract void genDelete(); abstract void genSelect(); class JDBC_Storage void genAdd(); void genDelete(); void genSelect(); class XML_Storage void genAdd(); void genDelete(); void genSelect();

Reusability abstract class StorageProxy class Other_Storage class abstract void genAdd(); abstract void genDelete(); abstract void genSelect(); class Other_Storage class Other_Storage class JDBC_Storage void genAdd(); void genDelete(); void genSelect(); class XML_Storage void genAdd(); void genDelete(); void genSelect();

*.DTD and *.XML Files

DOM ARCHITECTURE Java Tree XML Document XML Parser Object Object

Manipulation of the DOM tree Java Tree Object Servlet Hot Spots Object Object Object Object Object Object

Servlet : Get Parameters

Servlet : DOM Parser

Servlet : Perform action

act_add(String value) Step1 ROOT Object Object child child child child Object child child child child child child child child Object Object child child child child child child child child

act_add(String value) Step2 ROOT Object Object child child child child Object child child child child child child child child Object Object child child child child child child child child

Servlet : Serialization

Creation of XML file Object Object Object Object Object Object Object DOM Serialization Object Object Object Object

Servlet: Display on the Browser

Resulting HTML Page

Conclusion Artists/designers generate database table management servlets by “teaching” our system without writing any code. WebSheets allows database operations and computations to be specified visually

Conclusion (cont.) WebSheets uses Programming By Demonstration (PBD), Query By Example (QBE), and spreadsheet functions to build dynamic web pages 2 papers based on WebSheets are accepted by IUI2002 and VDB6 conferences

Future Work To support dynamic contents other than table mapping, i.e., parameter mapping on any part of the page, and HttpSession How to visually represent complicated table relationship, such as One-To-Many, Many-To-Many To support button-to-page dataflow Automatically register Servlets in WebLogic configuration file

Any Questions? Thanks…