David Wolber Yingfeng Su Yih-Tsung Chiang
description
Transcript of 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
• EAGER -- Inferring repetitive tasks
• Graphical Rewrite Rules (Stagecast Creator)
• Programming by Example (Pavlov, Gamut)
Hybrid Tools
• Java Script
• JSP, ASP
• WebMacro
HTML
{program code snippet}
HTML
{program code snippet}
Separating Designer/Programmer
XMLC
Translator
HTMLtemplate
Java representation of HTML
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>
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.
Separating Designer/Programmer Concerns
Code to modify
Sample data(Hotspot)
HTML Template
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
But why can’t the designer specify the computations?
QBE,QBF Formulas
WebSheets Eliminates Programmers
XMLC
Dynamic Page
HTML Template
Java DOM tree code
servlet code including DOM manipulation code and JDBC code
X
1st Attempt: PBE Development
Submit Book
Title: The Stranger
CamusAuthor:
TITLE AUTHOR PRICE
The Trial Kafka $29.99
The Stranger Camus
19.99Price:
STIMULUS
RESPONSE
TEST
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
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.
Our Solution: WebSheets• Programming by Example• Query by Example• Spreadsheet Functions
DesignerWebSheets
IDE
XMLC
Servlet
JDBC
HTML
WebSheets Development
PBE Sample Row Formatting
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
Tabs for each Entry Point
QBE formulas
Specifying Rows to be Added
Specifying Spreadsheet Formulas
Generating/Testing Servlet
Generating/Testing Servlet
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.
Servlet with JDBC and DOM manipulation
Get parameters from input page
Perform some computations
Manipulate DOM
Convert DOM to HTML and send
Commercial IDEs
• Dreamweaver MX – ColdFusion + Macromedia’s Dreamweaver– a.k.a. Ultradev4 a.k.a.,
• WebSphere Studio
• aspApp -- one-click development
Future Work
• Formal Usability Testing
• Complex Databases and GUIs– Relations, Erroneous input
• XML Version– Hierarchical data
• Integrate with Wrapper Capabilities
Any Questions?
Code GenerationClass GeneratedServlet extends HTTPServlet {// other methodspublic void act_delete(HttpServletRequest req,
HttpServletRespons res) { // Access request parameters
String minStock = req.getParameter(“MinStock”);// Access DOM tree created from HTML templateBookListDOM doc = new BookListDOM();Node tempRow = doc.getElementTempRow();// Execute specified delete operations using JDBC
// and SQL Delete statementsstmt.execute("delete from BOOKS where
INSTOCK<" + minStock);// Execute the specified Select statement to obtain
// a resultset.rs =stmt.executeQuery("select * from BOOKS”);
Code Generationwhile(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 rowtempRow.getParentNode().insertBefore(
tempRow.cloneNode(true), tempRow);}// Remove the sample rowtempRow.getParentNode().removeChild(tempRow);// Write the updated DOM tree to the browserout.println(doc.toDocument());
}
Code Generation• The service() method uses Java Reflection to dispatch the
request to the corresponding handlerpublic 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) { … }