Post on 08-Apr-2018
8/6/2019 Chicken Foot
1/13
IAT 881 End-User Programming, Feb. 19, 2008
End-User Programming for the Web:
Automation and Customization of Rendered WebPages with Chickenfoot
Nazanin Kadivar
M. Bolin, P. Rha, and R. C. Miller, Automation and customization of renderedweb pages, Proceedings of the 18th annual ACM symposium on User interfacesoftware and technology(2005): 163-172.
8/6/2019 Chicken Foot
2/13
IAT 881 End-User Programming, Feb. 19, 2008
Introduction
Windows Application Application controls its user interface down to the last pixel
Web Application
Once a page is delivered to the clients browser, the content providerhas no control over how it will be viewed
An opportunity for end-users to automate and customize their webexperience
The growing complexity of web pages and standards prevent usersfrom realizing this opportunity
8/6/2019 Chicken Foot
3/13
IAT 881 End-User Programming, Feb. 19, 2008
Introduction
Customization possibilities that arise when an application is moved to theweb:
Automating repetitive operations
Integrating multiple web sites Transforming a web sites appearance
Examples involve both automating web user interfaces (clicking links, filing
in forms, extracting data) and customizing them (changing appearance,rearranging components, inserting or removing user interface widgets ordata)
8/6/2019 Chicken Foot
4/13
IAT 881 End-User Programming, Feb. 19, 2008
Introduction
Chickenfoot
Created by Michael Bolin as his Master Thesis at MIT
A programming system embedded in the Firefox web browser whichenables end-users to automate, customize and integrate web applicationswithout examining their source code
Chickenfoot addresses this goal by identifying page components with anovel keyword pattern matching technique
8/6/2019 Chicken Foot
5/13
IAT 881 End-User Programming, Feb. 19, 2008
Three models of a webpage:
Introduction
String model : a webpage is represented as a string of HTML text Document Object Model (DOM): a webpage is represented as a hierarchical
tree of nodes, constructed from the string model using an HTML parser Rendered Model : a webpage is represented a tow-dimensional, typeset
document, created by rendering the DOM (Chickenfoot)
8/6/2019 Chicken Foot
6/13
IAT 881 End-User Programming, Feb. 19, 2008
Chickenfoot
The Challenge for Chickenfoot: a user should never have to view the HTML
source of a web page in order to customize or automate it
It runs inside the browser, so that the rendered view of a web page isalways visible alongside the chickenfoot development environment
Its language primitives are concerned with the web pages user interface,rather than its internal details
It uses pattern-matching techniques to allow users to describe componentsof a web page in terms that make sense for the rendered view
8/6/2019 Chicken Foot
7/13
IAT 881 End-User Programming, Feb. 19, 2008
Programming in Chickenfoot
All commands and capabilities of JavaScript are applicable in Chickenfoot
JavaScripting needs reading and understanding a web pages HTML code
JavaScript + Chickenscratch All powers of JavaScript without the needof understanding the complex HTML source code
Chickenscratch : Chickenfoots programming language, an extension ofJavaScript, which includes commands that make sense for operating on therendered model of a web page
8/6/2019 Chicken Foot
8/13
IAT 881 End-User Programming, Feb. 19, 2008
Pattern Matching
Pattern matching is a fundamental operation in Chickenfoot
Chickenfoot supports:
Keyword Patterns
a string of keywords that are searched in the page to locate a pagecomponent, followed by the type of the component to be found
The component type is one of a small set of primitive names,including link, button, textbox, checkbox, radiobutton, and listbox
search form or Go button
Constraint Patterns
combines a library of primitive patterns (such as link, textbox, orparagraph), literal strings (such as Go), and relational operators
(e.g., in, contains, just before, just after, starts, ends) Text constraint patterns are generally used to identify parts of a
page for modification and extraction
8/6/2019 Chicken Foot
9/13
IAT 881 End-User Programming, Feb. 19, 2008
Pattern Matching - Commands
Find : takes a pattern of either kind and searches for it in the current page
find(Search form) | find(link in bold)
Click : takes a pattern describing a hyperlink or button on the current pageand causes the same effect as if the user had clicked on it
click(Advanced Search) // a hyperlink | click(Im Feeling Lucky) // a button
Enter : enters a value into a textbox
enter(e-mail address, rcm@mit.edu)
Check / uncheck : control checkboxes and radiobuttons check(Yes, I have a password) | uncheck(Remember Me)
Pick : makes a selection from a listbox or drop-down box
pick(California) | pick(State, California)
Go | fetch : retrieve a page with | without displaying it
8/6/2019 Chicken Foot
10/13
IAT 881 End-User Programming, Feb. 19, 2008
Commands
PatternMatching
Clicking andFormManipulation
Navigationand PageLoading
PageModification
Widgets
Commands
Find
Match
Click
Enter
Check
Uncheck
Pick
Go
Back
Forward
Reload
Fetch
Insert
Remove
Replace
New link
New button
8/6/2019 Chicken Foot
11/13
IAT 881 End-User Programming, Feb. 19, 2008
Chickenfoot Demo, Examples of Chickenfoot Code
8/6/2019 Chicken Foot
12/13
IAT 881 End-User Programming, Feb. 19, 2008
References
1. M. Bolin, End-User Programming for the Web (MASSACHUSETTSINSTITUTE OF TECHNOLOGY, 2005).
2. R. C. Miller and M. Bolin, Naming Page Elements in End-User WebAutomation.
3. M. Bolin, P. Rha, and R. C. Miller, Automation and customization ofrendered web pages, Proceedings of the 18th annual ACM symposium onUser interface software and technology(2005): 163-172.
4. Chickenfoot, http://groups.csail.mit.edu/uid/chickenfoot/.
5. Main Page - Chickenfoot Script Repository,http://groups.csail.mit.edu/uid/chickenfoot/scripts/index.php/Main_Page.
6. Chickenfeed, http://groups.csail.mit.edu/uid/chickenfoot/blog/.
8/6/2019 Chicken Foot
13/13
IAT 881 End-User Programming, Feb. 19, 2008
Questions