1 / 33

David Wolber Yingfeng Su Yih-Tsung Chiang

David Wolber Yingfeng Su Yih-Tsung Chiang. Programming by Example. Conferences: CHI, UIST, IUI. Pavlov: Stimulus-Response Demonstration. End-User Web Page Development. Static pages Dynamic Pages with computations/database. End-User Programming. Spreadsheets Macro-Recorders

ckristi
Download Presentation

David Wolber Yingfeng Su Yih-Tsung Chiang

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

More Related