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 XMLC Translator HTML template Java representation of HTML

8. SAMPLE HTML with IDs Jones David

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 XMLC Dynamic Page HTML Template Java DOM tree code servlet code including DOM manipulation code and JDBC code

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

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

14. 1 st Attempt: PBE Development Submit Book Title: The Stranger Camus Author: TITLEAUTHORPRICE The TrialKafka$29.99 The StrangerCamus 19.99 Price: STIMULUS RESPONSE TEST

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 WebSheets IDE XMLC Servlet JDBC HTML

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. 1.WebSheets generates HTML and servlet. 2.WebSheets invokes XMLC. 3.WebSheets registers generated servlet with BEA Weblogic server. 4.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 formulas doc.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) { … }