Developing Dynamic Web Pages Without Programming

1
Developing Dynamic Web PagesWithout 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 cant write code
• Artists/Designers must know SQL well to generate
  dynamic contents from database

4
SolutionIntegrated 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 WeblogicServer 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)
Sybase
MSAccess
Oracle DB
11
HTTPServlet
Designers and Programmers
12
Old Way vs. New Way
13
Templates Separating the Tasks of Designers and
Programmers
Designers
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 Programmers
Programmers
X
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 doesnt 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
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
  INSTOCKlt" 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.setTex
  t_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.HttpServletReq
  uest),
• Class.forName("javax.servlet.http.HttpServletRes
  ponse")
• Method mtd
• this.getClass().getMethod(mtdname,
  paratypes)
• mtd.invoke(this, new Objectreq, resp)
• // public void act_add(HttpServletRequest req,
• 
  HttpServletResponse resp)
• // public void act_delete(HttpServletRequest req,
  
• 
  HttpServletResponse resp)

39
Objective
WebSheets
Store Retrieve Data
Store Retrieve Data
Databases
XML Files
40
XML Extension. Why?

• Pros
• search engine
• data transfer
• hierarchical
• Cons
• triggers
• security
• queries across multiple tables

41
Code Generation Model
abstract class StorageProxy 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 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
Object
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
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