Transcript websheetsStudentFinal

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
1
Agenda
 Problems
with Traditional Web
Development
 Our solution: WebSheets
 WebSheets Demo
 System Internals
 XML Extension
 Conclusion
2
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
3
Solution:
Integrated Development Environment
Macromedia DreamWeaver UltraDev4
 IBM Websphere Studio
 ASPapp

4
Our Solution: WebSheets
Programming by Demonstration
 Query by Example
 Spreadsheet Functions

Designers
J2EE
WebSheets
IDE
JDBC
Servlet
XMLC
5
Key Terms and Concepts
6
What is an Application
Server?
Information
Information
Client
Client
Information
Client
SERVER
Information
Client
7
BEA Weblogic
Server Side Services:
 HTTP
Servlets
- Composition of Dynamic Web Pages
 JDBC
- Allows Java programs to access
databases
8
HTTP Servlets
HTTPResponse
SERVLET
HTTPRequest
Client
SERVER
9
JDBC Architecture
Servlets
JDBC
Interface
Driver
(Oracle)
Driver
(ODBC)
Driver
(Sybase)
Oracle DB
MSAccess
Sybase
10
HTTPServlet
Designers and Programmers
11
Old Way vs. New Way
12
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
13
JAVA DOM Manipulation Code
Instance of XMLC
Generated class
XMLC provided
Access functions
14
WebSheets Kills Programmers
Programmers
Designers
HTML Template
X
servlet code including
DOM manipulation
code and JDBC code
XMLC
Java DOM tree code
HTML Output
15
Demo
 Bookstore
scenario
A bookstore manager who knows
little about programming wants to
create a dynamic page for
customers to search books by title
16
WYSIWYG Editor
 Format
of the text
 Hyperlinks
 Images
 Static tables
 Dynamic tables
 Preview
17
WYSIWYG Editor
18
Dynamic Components
19
Dynamic Components
20
Create Database from Scratch
21
Create Database from Scratch
22
Spreadsheet Formulas
23
Spreadsheet Formulas
24
Wizard Bar
A
context-sensitive guide
 Response
finished
 List
every time an action is
several possible further steps
25
Wizard Bar
26
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
27
Centralized Configuration
(Administrator)
28
Centralized Configuration
(User Side)
29
Multiple Document
 Users
can set up the relation
between buttons and pages
 Destination page needs incoming
information
30
Multiple Document
31
Multiple Document
32
Multiple Document
33
Multiple Document
34
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
35
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”); 36
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());
37
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,
HttpServletResponse resp) { … }

38
Objective
WebSheets
Store &
Retrieve Data
Databases
Store &
Retrieve Data
XML Files
39
XML Extension. Why?
 Pros
– search engine
– data transfer
– hierarchical
 Cons
– triggers
– security
– queries across multiple tables
40
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();
41
Reusability
abstract
class StorageProxy
abstract void genAdd();
abstract void genDelete();
abstract void genSelect();
class
Other_Storage
class JDBC_Storage
void genAdd();
void genDelete();
void genSelect();
class
Other_Storage
class XML_Storage
void genAdd();
void genDelete();
void genSelect();
42
*.DTD and *.XML Files
43
DOM ARCHITECTURE
Java Tree
XML Document
XML Parser
Object
Object
Object
Object
Object
44
Manipulation of the DOM tree
Java Tree
Object
Hot Spots
Object
Servlet
Object
Object
Object
Object
Object
45
Servlet : Get Parameters
46
Servlet : DOM Parser
47
Servlet : Perform action
48
act_add(String value) Step1
ROOT
Object
child
Object
child
child
Object
child child
child
Object
child
child
child child
child
child child
child
child child
Object
child
child
child child
49
act_add(String value) Step2
ROOT
Object
child
Object
child
child
Object
child child
child
Object
child
child
child child
child
child child
child
child child
Object
child
child
child child
50
Servlet : Serialization
51
Creation of XML file
Object
Object
Object
Object
Object
DOM Serialization
Object
Object
52
Servlet: Display on the Browser
53
Resulting HTML Page
54
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
55
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
56
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
57
Any Questions?
Thanks…
58