developing dynamic web pages without programming
Download
Skip this Video
Download Presentation
Developing Dynamic Web Pages Without Programming

Loading in 2 Seconds...

play fullscreen
1 / 58

Developing Dynamic Web Pages Without Programming - PowerPoint PPT Presentation


  • 94 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Developing Dynamic Web Pages Without Programming' - arsenio-hood


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
developing dynamic web pages without programming

Developing Dynamic Web PagesWithout Programming

Chia-Han Liu

Helen Kleytman

Pooja Garg

Yih-Tsung Chiang

Yingfeng Su

Research Project Led By:

Professor David Wolber

agenda
Agenda
  • Problems with Traditional Web Development
  • Our solution: WebSheets
  • WebSheets Demo
  • System Internals
  • XML Extension
  • Conclusion
problems of traditional web development
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
solution integrated development environment
Solution:Integrated Development Environment
  • Macromedia DreamWeaver UltraDev4
  • IBM Websphere Studio
  • ASPapp
our solution websheets
Our Solution: WebSheets
  • Programming by Demonstration
  • Query by Example
  • Spreadsheet Functions

Designers

J2EE

WebSheets

IDE

JDBC

Servlet

XMLC

what is an application server
What is an Application Server?

Information

Information

Client

Client

Information

Information

SERVER

Client

Client

bea weblogic server side services
BEA WeblogicServer Side Services:
  • HTTP Servlets

- Composition of Dynamic Web Pages

  • JDBC

- Allows Java programs to access databases

http servlets
HTTP Servlets

HTTPResponse

SERVLET

HTTPRequest

Client

SERVER

jdbc architecture
JDBC Architecture

Servlets

JDBC

Interface

Driver

(Oracle)

Driver

(ODBC)

Driver

(Sybase)

Oracle DB

MSAccess

Sybase

httpservlet
HTTPServlet

Designersand Programmers

templates separating the tasks of designers and programmers
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

java dom manipulation code
JAVA DOM Manipulation Code

Instance of XMLC

Generated class

XMLC provided

Access functions

websheets kills programmers
WebSheets Kills Programmers

Programmers

X

Designers

HTML Template

servlet code including

DOM manipulation

code and JDBC code

XMLC

Java DOM tree code

HTML Output

slide16
Demo
  • Bookstore scenario

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

wysiwyg editor
WYSIWYG Editor
  • Format of the text
  • Hyperlinks
  • Images
  • Static tables
  • Dynamic tables
  • Preview
wizard bar
Wizard Bar
  • A context-sensitive guide
  • Response every time an action is finished
  • List several possible further steps
centralized configuration
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
multiple document
Multiple Document
  • Users can set up the relation between buttons and pages
  • Destination page needs incoming information
code generation
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

code generation1
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”);

code generation2
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 formulasdoc.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());

}

code generation3
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) { … }

objective
Objective

WebSheets

Store & Retrieve Data

Store & Retrieve Data

Databases

XML Files

xml extension why
XML Extension. Why?
  • Pros
    • search engine
    • data transfer
    • hierarchical
  • Cons
    • triggers
    • security
    • queries across multiple tables
code generation model
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();

reusability
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();

dom architecture
DOM ARCHITECTURE

Java Tree

XML Document

XML Parser

Object

Object

Object

Object

Object

manipulation of the dom tree
Manipulation of the DOM tree

Java Tree

Object

Servlet

Hot Spots

Object

Object

Object

Object

Object

Object

act add string value step1
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

act add string value step2
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

creation of xml file
Creation of XML file

Object

Object

Object

DOMSerialization

Object

Object

Object

Object

conclusion
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
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
future work
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
ad