developing dynamic web pages without programming
DESCRIPTION
Developing Dynamic Web Pages Without Programming. Chia-Han Liu Helen Kleytman Pooja Garg Yih-Tsung Chiang Yingfeng Su. Research Project Led By: Professor David Wolber. Agenda. Problems with Traditional Web Development Our solution: WebSheets WebSheets Demo System Internals - PowerPoint PPT PresentationTRANSCRIPT
1
Developing Dynamic Web PagesDeveloping Dynamic Web PagesWithout ProgrammingWithout Programming
Chia-Han LiuHelen Kleytman
Pooja GargYih-Tsung Chiang
Yingfeng Su
Research Project Led By:
Professor David Wolber
2
AgendaAgendaProblems with Traditional Web
DevelopmentOur solution: WebSheetsWebSheets DemoSystem InternalsXML ExtensionConclusion
3
Problems of Problems of Traditional Web DevelopmentTraditional Web Development
Presentation and logic are mixed together
Artists/Designers can’t write codeArtists/Designers must know SQL
well to generate dynamic contents from database
4
Solution:Solution:Integrated Development EnvironmentIntegrated Development Environment
Macromedia DreamWeaver UltraDev4 IBM Websphere StudioASPapp
5
Our Solution: WebSheetsOur Solution: WebSheets
Programming by DemonstrationQuery by ExampleSpreadsheet Functions
Designers
WebSheets IDE
XMLC
Servlet
JDBC
J2EE
6
Key Terms and ConceptsKey Terms and Concepts
7
What is an Application What is an Application Server?Server?
Client Client
Client Client
SERVER
Information
InformationInformation
Information
8
BEA WeblogicBEA WeblogicServer Side Services:Server Side Services:
HTTP Servlets - Composition of Dynamic Web Pages
JDBC - Allows Java programs to access databas
es
9
HTTP ServletsHTTP Servlets
SERVLET
SERVER
HTTPResponse
HTTPRequest
Client
10
JDBC ArchitectureJDBC Architecture
Servlets
JDBC Interface
Driver (Oracle)
Driver(ODBC)
Driver(Sybase)
SybaseMSAccess Oracle DB
11
HTTPServletHTTPServlet
Designers and Programmers
12
Old Old WayWay vs. New Way vs. New Way
13
Templates: Separating the Tasks Templates: Separating the Tasks of Designers and Programmersof Designers and Programmers
XMLC
HTML Output
HTML Template
Java DOM tree code
servlet code including DOM manipulation code and JDBC code
Designers Programmers
14
JAVA DOM Manipulation CodeJAVA DOM Manipulation Code
Instance of XMLC Generated class
XMLC providedAccess functions
15
WebSheets Kills ProgrammersWebSheets Kills Programmers
XMLC
HTML Output
HTML Template
Java DOM tree code
servlet code including DOM manipulation code and JDBC code
Designers
Programmers
X
16
DemoDemo
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 EditorWYSIWYG Editor
Format of the textHyperlinksImagesStatic tablesDynamic tablesPreview
18
WYSIWYG EditorWYSIWYG Editor
19
Dynamic ComponentsDynamic Components
20
Dynamic ComponentsDynamic Components
21
Create Database from ScratchCreate Database from Scratch
22
Create Database from ScratchCreate Database from Scratch
23
Spreadsheet FormulasSpreadsheet Formulas
24
Spreadsheet FormulasSpreadsheet Formulas
25
Wizard BarWizard BarA context-sensitive guide
Response every time an action is finished
List several possible further steps
26
Wizard BarWizard Bar
27
Centralized ConfigurationCentralized ConfigurationAdministrator 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 ConfigurationCentralized Configuration(Administrator)(Administrator)
29
Centralized ConfigurationCentralized Configuration(User Side)(User Side)
30
Multiple DocumentMultiple Document
Users can set up the relation between buttons and pages
Destination page needs incoming information
31
Multiple DocumentMultiple Document
32
Multiple DocumentMultiple Document
33
Multiple DocumentMultiple Document
34
Multiple DocumentMultiple Document
35
Code GenerationCode Generation
WYSIWYG specs
WebSheets Code Generator
XMLC
HTML Output
HTML Template
Java DOM tree code
servlet code including DOM manipulation code and JDBC code
36
Code GenerationCode GenerationClass GeneratedServlet extends HTTPServlet {// other methodspublic void act_delete(HttpServletRequest req,
HttpServletRespons res) { // Access request parameters
String minStock = req.getParameter(“MinStock”);// Access DOM tree created from HTML templateBookListDOM doc = new BookListDOM();Node tempRow = doc.getElementTempRow();// Execute specified delete operations using JDBC
// and SQL Delete statementsstmt.execute("delete from BOOKS where
INSTOCK<" + minStock);// Execute the specified Select statement to obtain
// a resultset.rs =stmt.executeQuery("select * from BOOKS”);
37
Code GenerationCode Generationwhile(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 rowtempRow.getParentNode().insertBefore(
tempRow.cloneNode(true), tempRow);}// Remove the sample rowtempRow.getParentNode().removeChild(tempRow);// Write the updated DOM tree to the browserout.println(doc.toDocument());
}
38
Code GenerationCode Generation The service() method uses Java Reflection to dispatch the request
to the corresponding handlerpublic 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) { … }
39
ObjectiveObjective
Databases XML Files
Store & Retrieve Data
Store & Retrieve Data
WebSheets
40
XML Extension. Why?XML Extension. Why?
Pros– search engine– data transfer– hierarchical
Cons– triggers– security– queries across multiple tables
41
Code Generation ModelCode Generation Model
abstractclass StorageProxyabstract void genAdd();
abstract void genDelete();abstract void genSelect();
class JDBC_Storagevoid genAdd();
void genDelete();void genSelect();
class XML_Storagevoid genAdd();
void genDelete();void genSelect();
42
ReusabilityReusability
abstractclass StorageProxyabstract void genAdd();
abstract void genDelete();abstract void genSelect();
class JDBC_Storagevoid genAdd();
void genDelete();void genSelect();
class XML_Storagevoid genAdd();
void genDelete();void genSelect();
classOther_Storage
classOther_Storage
43
*.DTD and *.XML Files*.DTD and *.XML Files
44
DOM ARCHITECTUREDOM ARCHITECTURE
XML Document XML Parser Object
Object
ObjectObject
Object
Java Tree
45
Manipulation of the DOM treeManipulation of the DOM tree
ServletObjectObject
Object Object
Object Object
Object
Hot Spots
Java Tree
46
Servlet : Get ParametersServlet : Get Parameters
47
Servlet : DOM ParserServlet : DOM Parser
48
Servlet : Perform actionServlet : Perform action
49
act_add(String value) Step1act_add(String value) Step1
ROOT
Object
Object Object
Object
child
child child
child
child child
child child
child
child
child
childchild
child childchild
Object
childchild
child child
50
act_add(String value) Step2act_add(String value) Step2
ROOT
Object
Object Object
Object
child
child child
child
child child
child child
child
child
child
childchild
child childchild
Object
childchild
child child
51
Servlet : SerializationServlet : Serialization
52
Creation of XML fileCreation of XML file
DOM Serialization
Object
ObjectObject
ObjectObject
ObjectObject
53
Servlet: Display on the BrowserServlet: Display on the Browser
54
Resulting HTML PageResulting HTML Page
55
ConclusionConclusionArtists/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.)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 WorkFuture WorkTo support dynamic contents other tha
n 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 dataflowAutomatically register Servlets in WebL
ogic configuration file
58
Any Questions?Any Questions?
Thanks…