1. 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

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

3. 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

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

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

6. Key Terms and Concepts

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

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

9. HTTP Servlets
HTTPResponse
SERVLET
HTTPRequest
Client
SERVER

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

11. HTTPServlet
Designers and Programmers

12. Old Way vs. New Way

13. 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

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

15. WebSheets Kills ProgrammersX
Designers
HTML Template
servlet code including
DOM manipulation
code and JDBC code
XMLC
Java DOM tree code
HTML Output

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

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

18. WYSIWYG Editor

19. Dynamic Components

20. Dynamic Components

21. Create Database from Scratch

22. Create Database from Scratch

23. Spreadsheet Formulas

24. Spreadsheet Formulas

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

26. Wizard Bar

27. 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

28. Centralized Configuration (Administrator)

29. Centralized Configuration (User Side)

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

31. Multiple Document

32. Multiple Document

33. Multiple Document

34. Multiple Document

35. 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

36. 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”);

37. 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());

38. 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,

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

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

41. 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();

42. 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();

43. *.DTD and *.XML Files

44. DOM ARCHITECTURE Java Tree XML Document XML Parser Object Object

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

46. Servlet : Get Parameters

47. Servlet : DOM Parser

48. Servlet : Perform action

49. 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

50. 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

51. Servlet : Serialization

52. Creation of XML file Object Object Object Object Object Object Object
DOM Serialization
Object
Object
Object
Object

53. Servlet: Display on the Browser

54. Resulting HTML Page

55. 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

56. 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

57. 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

58. Any Questions?
Thanks…