1 MB

quaggahooliganInternet and Web Development

Feb 5, 2013 (4 years and 6 months ago)

107 views

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 2008

Web Interface Design, Prototyping, and Implementation

2

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 2008

Web Interface Design, Prototyping, and Implementation

3

What is AJAX?


AJAX: Asynchronous JavaScript and XML


Break this down into:


XHTML w/ embedded JavaScript


content & interaction


Cascading Style Sheets (CSS) (see
www.csszengarden.com
)



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 2008

Web Interface Design, Prototyping, and Implementation

4

DOM

CSE490L
-

Spring 2008

Web Interface Design, Prototyping, and Implementation

5

html

body

head

title

h1

div

JavaScript example

CSE490L
-

Spring 2008

Web Interface Design, Prototyping, and Implementation

6

… header stuff here…

<body>


<button id=“ok”>Click me</button>


//more page content could be here…


<script type=“text/javascript”>

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 2008

Web Interface Design, Prototyping, and Implementation

7

… header stuff here…

<script type=“text/javascript”>

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 (
http://mashupfeed.com
)

CSE490L
-

Spring 2008

Web Interface Design, Prototyping, and Implementation

8

Web Application Frameworks


Ease the coding of web apps


Two interesting short tutorials


Ruby on Rails


www.rubyonrails.org/screencasts



TurboGears


www.turbogears.org/docs/wiki20


CSE490L
-

Spring 2008

Web Interface Design, Prototyping, and Implementation

9

CSE490L
-

Spring 2008

Web Interface Design, Prototyping, and Implementation

10

Further Reading

RIAs


Professional Rich Internet Applications:
AJAX and Beyond
by Moore, Budd, and
Benson, Wiley, 2007

CSE490L
-

Spring 2008

Web Interface Design, Prototyping, and Implementation

11

Next Time


Interactive Prototype Presentations


Please practice in advance

CSE490L
-

Spring 2008

Web Interface Design, Prototyping, and Implementation

12

Project Questions