Developing dynamic web pages without programming
Download
1 / 58

Developing Dynamic Web Pages Without Programming - PowerPoint PPT Presentation


  • 92 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


Old way vs new way
Old Way vs. New Way


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


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


Any questions

Any Questions?

Thanks…


ad