Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server Side Frameworks, Web Service APIs Part II May 20, 2008

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation2 Outline AJAX continued Web Application Framework Tutorial Project time/questions

How to Create RIAs Embed code in the web page Client can execute code rather than just render HTML Terms/systems you may have seen –AJAX: Asynchronous JavaScript and XML –Ruby on Rails: Ruby –Django: Python –ICEfaces: Java –Google Web Toolkit (GWT): Java Examples of Web Application Frameworks –differ mainly in language & style CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation3

What is AJAX? AJAX: Asynchronous JavaScript and XML Break this down into: –XHTML w/ embedded JavaScript content & interaction –Cascading Style Sheets (CSS) (see layout & visual style of content –Asynchronous user can still interact w/ page while content loads in background – load in small chunks (div tags your friend) –DOM: document object model (tree of JavaScript objects) modify small pieces to update parts of page quickly –XML data format to communicate data to/from back-end server note JSON: JavaScript Object Notation may be easier to parse Web Frameworks tend to help you a lot with the backend and managing all of this CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation4

DOM CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation5 html bodyhead titleh1div

JavaScript example CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation6 … header stuff here… Click me //more page content could be here… window.onload = pageLoad; // called when page loads; sets up event hndls function pageLoad() { document.getElementById(“ok”).onclick = okayClick; } function okayClick() { document.getElementById(“ok”).style.color = “red”; }

Ajax XMLHttpRequest CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation7 … header stuff here… var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(){ if (ajax.readyState == 4) { //complete if (ajax.status == 200) { do something with ajax.ResponseText; } else { code to handle the error; } }; ajax.open(“GET”, url, true); // true means asynchronous ajax.send(null);

Mashups Backend services that you call with XMLHttpRequest are someone elses –e.g., google maps, google search, yahoo, flickr, etc. –See MashupFeed ( CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation8

Web Application Frameworks Ease the coding of web apps Two interesting short tutorials –Ruby on Rails –TurboGears CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation9

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation10 Further Reading RIAs Professional Rich Internet Applications: AJAX and Beyond by Moore, Budd, and Benson, Wiley, 2007

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation11 Next Time Interactive Prototype Presentations Please practice in advance

CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation12 Project Questions