David Wolber Yingfeng Su Yih-Tsung Chiang
description
Transcript of David Wolber Yingfeng Su Yih-Tsung Chiang
![Page 1: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/1.jpg)
David Wolber
Yingfeng Su
Yih-Tsung Chiang
![Page 2: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/2.jpg)
Programming by Example
Conferences: CHI, UIST, IUI
![Page 3: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/3.jpg)
Pavlov: Stimulus-Response Demonstration
![Page 4: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/4.jpg)
End-User Web Page Development
• Static pages
• Dynamic Pages with computations/database
![Page 5: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/5.jpg)
End-User Programming• Spreadsheets
• Macro-Recorders
• EAGER -- Inferring repetitive tasks
• Graphical Rewrite Rules (Stagecast Creator)
• Programming by Example (Pavlov, Gamut)
![Page 6: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/6.jpg)
Hybrid Tools
• Java Script
• JSP, ASP
• WebMacro
HTML
{program code snippet}
HTML
{program code snippet}
![Page 7: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/7.jpg)
Separating Designer/Programmer
XMLC
Translator
HTMLtemplate
Java representation of HTML
![Page 8: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/8.jpg)
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>
![Page 9: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/9.jpg)
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.
![Page 10: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/10.jpg)
Separating Designer/Programmer Concerns
Code to modify
Sample data(Hotspot)
HTML Template
![Page 11: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/11.jpg)
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
![Page 12: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/12.jpg)
But why can’t the designer specify the computations?
QBE,QBF Formulas
![Page 13: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/13.jpg)
WebSheets Eliminates Programmers
XMLC
Dynamic Page
HTML Template
Java DOM tree code
servlet code including DOM manipulation code and JDBC code
X
![Page 14: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/14.jpg)
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
![Page 15: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/15.jpg)
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
![Page 16: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/16.jpg)
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.
![Page 17: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/17.jpg)
Our Solution: WebSheets• Programming by Example• Query by Example• Spreadsheet Functions
DesignerWebSheets
IDE
XMLC
Servlet
JDBC
HTML
![Page 18: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/18.jpg)
WebSheets Development
![Page 19: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/19.jpg)
PBE Sample Row Formatting
![Page 20: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/20.jpg)
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
![Page 21: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/21.jpg)
Tabs for each Entry Point
![Page 22: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/22.jpg)
QBE formulas
![Page 23: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/23.jpg)
Specifying Rows to be Added
![Page 24: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/24.jpg)
Specifying Spreadsheet Formulas
![Page 25: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/25.jpg)
Generating/Testing Servlet
![Page 26: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/26.jpg)
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.
![Page 27: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/27.jpg)
Servlet with JDBC and DOM manipulation
Get parameters from input page
Perform some computations
Manipulate DOM
Convert DOM to HTML and send
![Page 28: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/28.jpg)
Commercial IDEs
• Dreamweaver MX – ColdFusion + Macromedia’s Dreamweaver– a.k.a. Ultradev4 a.k.a.,
• WebSphere Studio
• aspApp -- one-click development
![Page 29: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/29.jpg)
Future Work
• Formal Usability Testing
• Complex Databases and GUIs– Relations, Erroneous input
• XML Version– Hierarchical data
• Integrate with Wrapper Capabilities
![Page 30: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/30.jpg)
Any Questions?
![Page 31: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/31.jpg)
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”);
![Page 32: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/32.jpg)
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());
}
![Page 33: David Wolber Yingfeng Su Yih-Tsung Chiang](https://reader035.fdocuments.in/reader035/viewer/2022062304/56813d27550346895da6eb99/html5/thumbnails/33.jpg)
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) { … }