ajax frameworks china

8/8/2019 Ajax Frameworks China

1/57

1

Ajax and Web 2.0 RelatedFrameworks and toolkits

Tao Michael LiTechnology Evangelist

Sun Microsystems, Inc.

1


2/57

Agenda

AJAX Basics> AJAX Interaction:Using Sample Application

AJAX Toolkits and Frameworks> Dojo Client-side JavaScript Library

> jMaki> AJAX-enabledJavaServer Faces

> Wicket

> Google Web Toolkit

> Direct Web Remoting


3/57

AJAX Basics:AJAX Basics:

What is AJAX?What is AJAX?


4/57

What is AJAX?

AJAX= acronym for:> Asynchronous JavaScript and XML

Browser client uses JavaScript toAsynchronouslyget XMLdata from a server and update pagedynamically without refreshing the whole page


5/57

User Interface: Traditional Web vs.AJAX

User operationstops while

the data is being

fetchedStateless

HTML View

Browser

StatefulServer

Synchronous call

New HTML page

01100110

0111100101101011

011001101101

111110010100

011010111101

110011010110

StatefulJavaScript UI

Browser

StatelessServer

Asynchronous call

Data only, not HTML

Eventshandledlocally

0110

0111

0110

1001

1011

AJAX No interruption in user interface display

Onlynew information updated on page


6/57

Traditional Web AJAX

within a browser,

there is AJAX engine


7/57

AJAX Basics:AJAX Basics:

AJAX Interaction:AJAX Interaction:Sample ApplicationSample Application


8/57

Anatomy of an AJAX Interaction

Data Validation Example


9/57

1. A Client event occurs

A JavaScript function is called as the result of anevent

Example: validateUserId() JavaScript function isevent handler to a onkeyupevent on input form field

with id = userid


10/57




11/57

2. An XMLHttpRequest object is created

var req;

function initRequest() {if (window.XMLHttpRequest) {

req = new XMLHttpRequest();} else if (window.ActiveXObject) {

isIE = true;

req = new ActiveXObject("Microsoft.XMLHTTP");}

}

function validateUserId() {

initRequest();req.onreadystatechange = processRequest;if (!target) target = document.getElementById("userid");var url = "validate?id=" + escape(target.value);req.open("GET", url, true);

req.send(null);}

XMLHttpRequest

created


12/57

2. An XMLHttpRequest object is

configured (cont.)var req;function initRequest() {

if (window.XMLHttpRequest) {req = new XMLHttpRequest();

} else if (window.ActiveXObject) {isIE = true;req = new ActiveXObject("Microsoft.XMLHTTP");

}}

function validateUserId() {

initRequest(); req.onreadystatechange = callBack;

if (!target) target = document.getElementById("userid");var url = "validate?id=" + escape(target.value);req.open("GET", url, true);req.send(null);

}

Set Callback function


13/57




14/57

3. XMLHttpRequest object makes anasynchronous request

function initRequest() {if (window.XMLHttpRequest) {

req = new XMLHttpRequest();} else if (window.ActiveXObject) {

isIE = true;req = new ActiveXObject("Microsoft.XMLHTTP");

}}

function validateUserId() {initRequest();req.onreadystatechange = processRequest;

if (!target) target = document.getElementById("userid");varurl = "validate?id=" + escape(target.value);req.open("GET", url, true);req.send(null);

}

requested URL is set

Make request to url asynchronously


15/57




16/57

4. Server component process request

public class ValidateServlet extends HttpServlet {. . .public void doGet(HttpServletRequest request, HttpServletResponse

response) throws IOException, ServletException {

String targetId = request.getParameter("id"); String isValid =null;

if ((targetId != null) && !accounts.containsKey(targetId.trim())) { isValid="true";

} else { isValid="false";

}}

response.setContentType("text/xml");response.setHeader("Cache-Control", "no-cache");response.getWriter().write("" + isValid + "");

}}


17/57




18/57

5. Server component return the result

public class ValidateServlet extends HttpServlet {. . .public void doGet(HttpServletRequest request, HttpServletResponse

response) throws IOException, ServletException {

String targetId = request.getParameter("id");String isValid =null;

if ((targetId != null) && !accounts.containsKey(targetId.trim())) {isValid="true";

} else {isValid="false";

}} response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("" + isValid + "");

}} Cache-control must be no-cache

Content type text/xml


19/57




20/57

6. The XMLHttpRequest object calls the

callback() function and processes the resultThe XMLHttpRequest object calls the callBack()

function when there is a state change. readyState==4 and status==200 mean the request issuccessful.

function callBack() {

if (req.readyState == 4) {

if (req.status == 200) {var isValid= responseXML.getElementsByTagName("message")[0].firstChild.data;

setMessage(isValid);

}

}

}

4= complete

200 = ok

responsemessage= true


21/57




22/57

7. The HTML DOM is updated dynamically

function setMessage(isValid) {

varmdiv = document.getElementById("userIdMessage");

if (isValid == "true") {

mdiv.innerHTML = "Valid User Id";

} else {

mdiv.innerHTML = "Invalid User Id";

}

}


23/57

Current Issues with AJAX

JavaScript> inconsistent support among browsers> requires cross browser testing

> code is visible to a hacker> Can bedifficult to develop, debug, and maintain> automatic testing is hard


24/57

AJAX Toolkits andAJAX Toolkits andFrameworks :Frameworks :

Dojo Client SideDojo Client SideJavaScript LibraryJavaScript Library


25/57

What is Dojo Toolkit? Open Source set ofJavaScript libraries

Simplifies adding AJAX into web pages!

Majorindustry support (Sun, IBM, AOL) http://dojotoolkit.com/

Serverside technology independent

source: dojotoolkit.org


26/57

Dojo Toolkit Libraries

dojo.io: AJAX-basedcommunication with theserver

dojo.event: unified eventsystem

dojo.widget Widgetframework

dojo.dom: DOM manipulationroutines

string, json: utility routines to

make JavaScript easier touse.


27/57

Dojo Pro's And Con's

Pro's> You can use it with any server side technology

> Make Ajax easier, takes care ofbrowser problems

> Can mix with other Javascript frameworks Con's

> Developer still has to learn some JavaScript


28/57

AJAX Toolkits andAJAX Toolkits and

Frameworks :Frameworks :jMakijMaki


29/57

What is jMaki

jMaki is a lightweight AJAX Framework> Make javascript accessible to JSP, JSF, PHP,

Ruby/JRuby and Phobos

AJAX in a tag Widget model

> Leveraging popular toolkits: dojo, Yahoo, Google,Scriptaculous, ...

Layout

Server Model> Mashup with outside services


30/57


31/57

icon.onClick = function (){jmaki.publish("/dojo/fisheye", this);

}

Publish Example


32/57

function fisheyeListener(item) {var targetDiv = document.getElementById("newpage");

var responseText = "";

var index = Number(item.index);

switch(index){

case 1: // Set responseText equal to Jayashri's bio

break;

case 2: // Set responseText equal to Roberto's bio

default: responseText += 'Click on one of the photos above';

break;}

targetDiv.innerHTML = responseText;

}

jmaki.subscribe("/dojo/fisheye", fisheyeListener);

Subscribe Example


33/57

jMaki Demo


34/57

jMaki Pros and Cons

Pros> Works in different platforms/language

> Can be incorporated in existing application

Cons> still need to know javascript


35/57


AJAX-EnabledAJAX-EnabledJavaServer FacesJavaServer Faces


36/57

AJAX enabled Java Server Faces

JSF is Component based

AJAX details hidden inside the components> component provider will provide the details

Dynamic Faces (DynaFaces)> Incremental improvement to JSF 1.2

> Extended life cycle Shale remoting

Developer entry points> Page

> Components


37/57

Demo DynaFaces with NetBeansVWP


38/57

Pro's And Con's Pro's

> Drag-and-dropping AJAX-enabled JavaServer Facescomponents within an IDE for building AJAX application

> Page authorsdo not need to know JavaScript

> Can take advantage of JSF features (rich framework)

Con's> programming AJAX-enabled JavaServer Faces

components is not easy.


39/57


WicketWicket


40/57

What is wicket?

Wicket is a Java Web framework> based on servlet

> component based like JSF but simpler than JSF

> Wicket components are just HTML tag with wicket attribute> i.e. ,

...

> POJO data model

Wicket recipe: desktop GUI like programming

> create a HTML page> put components on the page

> Define how each component reacts to user input

Most recent version 1.3


41/57

Wicket for AJAX

Takes J(Javascript) and X(xml) out of AJAX> pure HTML + Java

Make web development easy for Java developers

Easy to separate presentation and logic


42/57

Wicket Demo


43/57

Pro's And Con's Pro's

> No JavaScript, no XML, pure HTML + Java> Great for Java developers

> Active community

Con's> HTML template tightly coupled with Java

> The Wicket way everything done in Java> Good for Java developers, but not web developers


44/57


Google Web ToolkitGoogle Web Toolkit


45/57

What is GWT (Google Web Toolkit)?

Build AJAX apps with Java technology> Take out J(Javascript) from AJAX

Provides:

> Java-to-JavaScript compiler:>Develop in Java

>At deploy time the compiler translates yourJavaapplication to browser-compliant JavaScript and HTML

> special web browserfordebugging GWT applications


46/57

GWT Demo


47/57

Pro's And Con's

Pro's> Allows Java developers to use Java language for the

development AJAX applications

> No need to learn JavaScript language> It is from Google (Good momentum)

Con's>

When to use> When you prefer using Java for GUI


48/57


Direct Web RemotingDirect Web Remoting::DWRDWR


49/57

Make Server side Java objects available to client asjavascript call.

Framework generates client stub dynamically, whichis a JavaScript code

Client stub (Proxy) handles marshalling ofparameters and return value

https://dwr.dev.java.net/

What is DWR?


50/57


51/57


52/57

DWR Demo


53/57

Pro's And Con's

Pro's> Allows you to expose existing backend business logic toAJAX client with minimum work

> Allows you to use familiarRMI like syntax in the client

side JavaScript code Con's

> Hackers can see what backend methods are available

> Custom converter(mashaller and unmarshaller) needs to

be created forcustom Java objects When to use

> When you want to expose existing backend businesslogic to AJAX client using underlying framework


54/57

Summary &Summary &ResourcesResources


55/57

Summary

AJAX helps make applications more interactive> But AJAX does not come for free

> Start small and dont overdo it> Choose the right Toolkits and Frameworks for your

application


56/57

For More Information The BluePrints Solutions catalog on AJAX:

> https://bpcatalog.dev.java.net/nonav/solutions.html AJAX Q & A> https://blueprints.dev.java.net/ajax-faq.html

Asynchronous JavaScript Technology and XML (AJAX)With Java 2 Platform, Enterprise Edition> http://java.sun.com/developer/technicalArticles/J2EE/AJAX/inde

x.html AJAX Frameworks

> http://ajaxpatterns.org/wiki/index.php?title=AJAXFrameworks

AJAX Library and Frameworks Comparison> http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries AJAX Developer Resource Center

> http://developers.sun.com/ajax/ JavaScript Developer Site

> java.sun.com/javascript


57/57

Ajax and Web 2.0 Related

Frameworks and toolkits

Tao Michael LiTechnology Evangelist

Sun Microsystems, Inc.

ajax frameworks china

Documents