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