![Page 1: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/1.jpg)
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
![Page 2: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/2.jpg)
2
AgendaAgendaProblems with Traditional Web
DevelopmentOur solution: WebSheetsWebSheets DemoSystem InternalsXML ExtensionConclusion
![Page 3: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/3.jpg)
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
![Page 4: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/4.jpg)
4
Solution:Solution:Integrated Development EnvironmentIntegrated Development Environment
Macromedia DreamWeaver UltraDev4 IBM Websphere StudioASPapp
![Page 5: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/5.jpg)
5
Our Solution: WebSheetsOur Solution: WebSheets
Programming by DemonstrationQuery by ExampleSpreadsheet Functions
Designers
WebSheets IDE
XMLC
Servlet
JDBC
J2EE
![Page 6: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/6.jpg)
6
Key Terms and ConceptsKey Terms and Concepts
![Page 7: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/7.jpg)
7
What is an Application What is an Application Server?Server?
Client Client
Client Client
SERVER
Information
InformationInformation
Information
![Page 8: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/8.jpg)
8
BEA WeblogicBEA WeblogicServer Side Services:Server Side Services:
HTTP Servlets - Composition of Dynamic Web Pages
JDBC - Allows Java programs to access databas
es
![Page 9: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/9.jpg)
9
HTTP ServletsHTTP Servlets
SERVLET
SERVER
HTTPResponse
HTTPRequest
Client
![Page 10: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/10.jpg)
10
JDBC ArchitectureJDBC Architecture
Servlets
JDBC Interface
Driver (Oracle)
Driver(ODBC)
Driver(Sybase)
SybaseMSAccess Oracle DB
![Page 11: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/11.jpg)
11
HTTPServletHTTPServlet
Designers and Programmers
![Page 12: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/12.jpg)
12
Old Old WayWay vs. New Way vs. New Way
![Page 13: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/13.jpg)
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
![Page 14: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/14.jpg)
14
JAVA DOM Manipulation CodeJAVA DOM Manipulation Code
Instance of XMLC Generated class
XMLC providedAccess functions
![Page 15: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/15.jpg)
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
![Page 16: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/16.jpg)
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
![Page 17: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/17.jpg)
17
WYSIWYG EditorWYSIWYG Editor
Format of the textHyperlinksImagesStatic tablesDynamic tablesPreview
![Page 18: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/18.jpg)
18
WYSIWYG EditorWYSIWYG Editor
![Page 19: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/19.jpg)
19
Dynamic ComponentsDynamic Components
![Page 20: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/20.jpg)
20
Dynamic ComponentsDynamic Components
![Page 21: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/21.jpg)
21
Create Database from ScratchCreate Database from Scratch
![Page 22: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/22.jpg)
22
Create Database from ScratchCreate Database from Scratch
![Page 23: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/23.jpg)
23
Spreadsheet FormulasSpreadsheet Formulas
![Page 24: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/24.jpg)
24
Spreadsheet FormulasSpreadsheet Formulas
![Page 25: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/25.jpg)
25
Wizard BarWizard BarA context-sensitive guide
Response every time an action is finished
List several possible further steps
![Page 26: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/26.jpg)
26
Wizard BarWizard Bar
![Page 27: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/27.jpg)
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
![Page 28: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/28.jpg)
28
Centralized ConfigurationCentralized Configuration(Administrator)(Administrator)
![Page 29: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/29.jpg)
29
Centralized ConfigurationCentralized Configuration(User Side)(User Side)
![Page 30: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/30.jpg)
30
Multiple DocumentMultiple Document
Users can set up the relation between buttons and pages
Destination page needs incoming information
![Page 31: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/31.jpg)
31
Multiple DocumentMultiple Document
![Page 32: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/32.jpg)
32
Multiple DocumentMultiple Document
![Page 33: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/33.jpg)
33
Multiple DocumentMultiple Document
![Page 34: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/34.jpg)
34
Multiple DocumentMultiple Document
![Page 35: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/35.jpg)
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
![Page 36: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/36.jpg)
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”);
![Page 37: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/37.jpg)
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());
}
![Page 38: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/38.jpg)
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) { … }
![Page 39: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/39.jpg)
39
ObjectiveObjective
Databases XML Files
Store & Retrieve Data
Store & Retrieve Data
WebSheets
![Page 40: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/40.jpg)
40
XML Extension. Why?XML Extension. Why?
Pros– search engine– data transfer– hierarchical
Cons– triggers– security– queries across multiple tables
![Page 41: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/41.jpg)
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();
![Page 42: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/42.jpg)
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
![Page 43: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/43.jpg)
43
*.DTD and *.XML Files*.DTD and *.XML Files
![Page 44: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/44.jpg)
44
DOM ARCHITECTUREDOM ARCHITECTURE
XML Document XML Parser Object
Object
ObjectObject
Object
Java Tree
![Page 45: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/45.jpg)
45
Manipulation of the DOM treeManipulation of the DOM tree
ServletObjectObject
Object Object
Object Object
Object
Hot Spots
Java Tree
![Page 46: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/46.jpg)
46
Servlet : Get ParametersServlet : Get Parameters
![Page 47: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/47.jpg)
47
Servlet : DOM ParserServlet : DOM Parser
![Page 48: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/48.jpg)
48
Servlet : Perform actionServlet : Perform action
![Page 49: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/49.jpg)
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
![Page 50: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/50.jpg)
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
![Page 51: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/51.jpg)
51
Servlet : SerializationServlet : Serialization
![Page 52: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/52.jpg)
52
Creation of XML fileCreation of XML file
DOM Serialization
Object
ObjectObject
ObjectObject
ObjectObject
![Page 53: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/53.jpg)
53
Servlet: Display on the BrowserServlet: Display on the Browser
![Page 54: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/54.jpg)
54
Resulting HTML PageResulting HTML Page
![Page 55: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/55.jpg)
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
![Page 56: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/56.jpg)
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
![Page 57: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/57.jpg)
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
![Page 58: Developing Dynamic Web Pages Without Programming](https://reader037.vdocuments.site/reader037/viewer/2022110404/56812f3b550346895d94cf33/html5/thumbnails/58.jpg)
58
Any Questions?Any Questions?
Thanks…