Dynamic Web Development with Programming by Example Approaches

1. David Wolber Yingfeng Su Yih-Tsung Chiang

2. Programming by Example Conferences: CHI, UIST, IUI

3. Pavlov: Stimulus-Response Demonstration

4. End-User Web Page Development • Static pages • Dynamic Pages with computations/database

5. End-User Programming • Spreadsheets • Macro-Recorders • EAGER -- Inferring repetitive tasks • Graphical Rewrite Rules (Stagecast Creator) • Programming by Example (Pavlov, Gamut)

6. Hybrid Tools • Java Script • JSP, ASP • WebMacro HTML {program code snippet} HTML {program code snippet}

7. Separating Designer/Programmer HTMLtemplate Java representation of HTML XMLC Translator

8. SAMPLE HTML with IDs <table id="_table1">  <tr id="_table1_tempRow">    <td width="25%" align="left" id="_table1_col0">      Jones    </td >    <td width="25%" align="left" id="_table1_col1">      David    </td >  </tr></table>

9. XMLC • Parses HTML into a Java representation of HTML (DOM Tree) • Programmer can begin at root and traverse down with getChildren() (DIFFICULT) • XMLC, however, provides set/gets for components that have ids.

10. Separating Designer/Programmer Concerns Code to modify Sample data (Hotspot) HTML Template

11. Templates: Separating the Tasks of Designers and Programmers HTML Template servlet code including DOM manipulation code and JDBC code XMLC Java DOM tree code Dynamic Page

12. But why can’t the designer specify the computations? Formulas QBE,QBF

13. WebSheets Eliminates Programmers X HTML Template servlet code including DOM manipulation code and JDBC code XMLC Java DOM tree code Dynamic Page

14. 1st Attempt: PBE Development Title: The Stranger Author: Camus Submit Book Price: 19.99

15. PBE Development • For ADD, In “response” mode, copy data from input form to new row in table. • For SELECT/DELETE, enter numerous samples of rows that should be selected

16. PBE is Wrong Medium • Easier to specify ADD/SELECT with spreadsheet formulas/QBE formulas • even though variables necessary • PBE requires a feedback language • Everything visible in spreadsheet • PBE used only to specify formatting of data.

17. Our Solution: WebSheets • Programming by Example • Query by Example • Spreadsheet Functions Designer HTML WebSheets IDE JDBC Servlet XMLC

18. WebSheets Development

19. PBE Sample Row Formatting

20. Mapping Visual Table to DB Table • Existing DB Table • Open a dialogue • Specify mapping between visual columns and db table columns • Administrator has already handled Server Connections • Creating DB Table by example • Enter sample row • Ask Websheets to generate

21. Tabs for each Entry Point

22. QBE formulas

23. Specifying Rows to be Added

24. Specifying Spreadsheet Formulas

25. Generating/Testing Servlet

26. Generating/Testing Servlet • WebSheets generates HTML and servlet. • WebSheets invokes XMLC. • WebSheets registers generated servlet with BEA Weblogic server. • WebSheets invokes browser with dynamic page.

27. Servlet with JDBC and DOM manipulation Get parameters from input page Perform some computations Manipulate DOM Convert DOM to HTML and send

28. Commercial IDEs • Dreamweaver MX • ColdFusion + Macromedia’s Dreamweaver • a.k.a. Ultradev4 a.k.a., • WebSphere Studio • aspApp -- one-click development

29. Future Work • Formal Usability Testing • Complex Databases and GUIs • Relations, Erroneous input • XML Version • Hierarchical data • Integrate with Wrapper Capabilities

30. Any Questions?

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

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

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