1 / 58

Developing Dynamic Web Pages Without Programming

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

Download Presentation

Developing Dynamic Web Pages Without Programming

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Developing Dynamic Web PagesWithout Programming Chia-Han Liu Helen Kleytman Pooja Garg Yih-Tsung Chiang Yingfeng Su Research Project Led By: Professor David Wolber

  2. Agenda • Problems with Traditional Web Development • Our solution: WebSheets • WebSheets Demo • System Internals • XML Extension • Conclusion

  3. 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

  4. Solution:Integrated Development Environment • Macromedia DreamWeaver UltraDev4 • IBM Websphere Studio • ASPapp

  5. Our Solution: WebSheets • Programming by Demonstration • Query by Example • Spreadsheet Functions Designers J2EE WebSheets IDE JDBC Servlet XMLC

  6. Key Terms and Concepts

  7. What is an Application Server? Information Information Client Client Information Information SERVER Client Client

  8. BEA WeblogicServer Side Services: • HTTP Servlets - Composition of Dynamic Web Pages • JDBC - Allows Java programs to access databases

  9. HTTP Servlets HTTPResponse SERVLET HTTPRequest Client SERVER

  10. JDBC Architecture Servlets JDBC Interface Driver (Oracle) Driver (ODBC) Driver (Sybase) Oracle DB MSAccess Sybase

  11. HTTPServlet Designersand Programmers

  12. Old Way vs. New Way

  13. 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

  14. JAVA DOM Manipulation Code Instance of XMLC Generated class XMLC provided Access functions

  15. WebSheets Kills Programmers Programmers X Designers HTML Template servlet code including DOM manipulation code and JDBC code XMLC Java DOM tree code HTML Output

  16. Demo • 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 Editor • Format of the text • Hyperlinks • Images • Static tables • Dynamic tables • Preview

  18. WYSIWYG Editor

  19. Dynamic Components

  20. Dynamic Components

  21. Create Database from Scratch

  22. Create Database from Scratch

  23. Spreadsheet Formulas

  24. Spreadsheet Formulas

  25. Wizard Bar • A context-sensitive guide • Response every time an action is finished • List several possible further steps

  26. Wizard Bar

  27. 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

  28. Centralized Configuration(Administrator)

  29. Centralized Configuration(User Side)

  30. Multiple Document • Users can set up the relation between buttons and pages • Destination page needs incoming information

  31. Multiple Document

  32. Multiple Document

  33. Multiple Document

  34. Multiple Document

  35. 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

  36. 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”);

  37. 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()); }

  38. 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) { … }

  39. Objective WebSheets Store & Retrieve Data Store & Retrieve Data Databases XML Files

  40. XML Extension. Why? • Pros • search engine • data transfer • hierarchical • Cons • triggers • security • queries across multiple tables

  41. 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();

  42. 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();

  43. *.DTD and *.XML Files

  44. DOM ARCHITECTURE Java Tree XML Document XML Parser Object Object Object Object Object

  45. Manipulation of the DOM tree Java Tree Object Servlet Hot Spots Object Object Object Object Object Object

  46. Servlet : Get Parameters

  47. Servlet : DOM Parser

  48. Servlet : Perform action

  49. 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

  50. 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

More Related