Transcript End-User Programming

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
HTML
template
XMLC
Translator
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
HTML Template
XMLC
Java DOM tree code
servlet code including
DOM manipulation
code and JDBC code
Dynamic Page
But why can’t the designer specify
the computations?
QBE,QBF
Formulas
WebSheets Eliminates
Programmers
HTML Template
XMLC
X
servlet code including
DOM manipulation
code and JDBC code
Java DOM tree code
Dynamic Page
st
1 Attempt:
PBE Development
STIMULUS
TITLE
AUTHOR PRICE
The Trial
Kafka
$29.99
The Stranger Camus
Title: The Stranger
Submit Book
Author: Camus
Price: 19.99
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
Designer
WebSheets
IDE
HTML
JDBC
Servlet
XMLC
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 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”);
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());
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) { … }