Developing Dynamic Web Pages Without Programming

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