Ajax and Java Frameworks

Ryan Asleson and Nathaniel T. Schutta

Who Are We?

Ryan Asleson Nathaniel T. Schutta www.ntschutta.com/jat/ First Ajax book!

The Plan
What the heck is Ajax? Server agnostic frameworks Java and Ajax Give me tools! Patterns and best practices

What is Ajax?

A cleaner? A Greek hero? A soccer club?

http://www.v-bal.nl/logos/ajax.jpg http://movies.yahoo.com/shop?d=hv&id=1808444810&cf=pg&photoid=521827&intl=us http://www.cleansweepsupply.com/pages/skugroup1068.html

Give me an A

Ajax is a catch-phrase - several technologies Asynchronous, JavaScript, XML, XHTML, CSS, DOM, XMLHttpRequest object More of a technique than a specic thing Communicate with XHR, manipulate the Document Object Model on the browser Dont repaint the entire page! We gain exibility

http://www.adaptivepath.com/publications/essays/archives/000385.php

Whats old is new again

XHR was created by Microsoft in IE5 Of course it only worked in IE Early use of JavaScript resulted in pain Many developers shunned the language XHR was recently adopted by Mozilla 1.0 and Safari 1.2 And a new generation of web apps was born

Google Suggest

Google Maps

Typical Interaction
Ajax Enabled Web Application 3 XHR 2 1 Event 6
function callback() { //do something }

Web Container Server Resource

4 Data store

Client

Server

Frameworks

Dont do the heavy lifting yourself! There are dozens and dozens of frameworks to choose from Some are specic to a server side language, many are not No reason to roll your own Beware the namespace issue

Prototype

Popular JavaScript library Integral part of Ruby on Rails (written by core team member Sam Stephenson) Small focussed framework Not great documentation (code is easy to read) Provides a number of very helpful methods! Extends the DOM and core objects Ruby avored JavaScript

Helper Methods

$() instead of document.getElementById getElementsByClassName $F() - gets the value of a form element $A() - converts argument to an Array object $H() - converts argument to Hash object Other useful methods on core objects like String, Array, Number, etc. Try.these() - lets you attempt various code paths

DOM Manipulation

Element.toggle() - ips the visibility Element.remove() - removes element from DOM Element.update() - replaces inner html Insertion

Before/Top/Bottom/After Inserts HTML into various locations

Ajax.Request

Easy to use wrapper around XHR Handles browser detection

new Ajax.Request(url, { asynchronous: true, method: "get", parameters: "foo=bar", onComplete: function(request) { showResults(request.responseText); } });

Ajax.Updater

Similar to Ajax.Request Expects HTML in return Automatically updates the element supplied with the value returned from the server!

new Ajax.Updater(replaceMe url, { asynchronous: true, method: "get" });

Event.observe

With Ajax, we tend to have lots of: onclick=coolThing() like code in our HTML Bind the elements to events Clutters the markup

Event.observe(observeMe, click, act,);

Prototype

http://prototype.conio.net/ http://www.sergiopereira.com/articles/ prototype.js.html http://encytemedia.com/blog/ http://particletree.com/

script.aculo.us

Built on top of Prototype Adds a number of snazzy effects

Drag and Drop Autocomplete text eld Various visual effects

Also maintained by Rails core team member (Thomas Fuchs) Handful of JS les

Effect.Highlight

Asynchronous calls arent obvious to users Need to provide some indication of a change Fade Anything Technique

new Effect.Highlight('fadeMe', { startcolor: '660000', endcolor: 'FFFF00', restorecolor: '#ffffff'});

Combination Effects

Effect.Parallel allows you to do a lot Prebuilt combinations of effects including:

Appear Puff Shake Fold Grow

Remember the blink tag!

Autocomplete
The missing widget! Simple to use: new Ajax.Autocompleter(textField, div, url, options) Tell it:

The eld to observe The div to populate The resource to call Polling frequency, min # of characters required

Server must return an unordered list to the client CSS magic makes it pretty!

Dojo

Open source JavaScript toolkit Abstraction layer on top of XHR - allows graceful degradation to older browsers via iframe As you would expect, contains effects and widgets More than just a pretty face

Includes logging, event system, packaging Support for back button, bookmarks

Very ambitious! Recently announced support from IBM and Sun

Effects

Using Dojos animation library, you can create virtually anything Prebuilt HTMLEffects are useful day to day Fade effects (in, out, hide, show) Slider effects (to, by) Fades with color Wipe in/wipe out Effects look like this (with different parameters) dojo.graphics.htmlEffects.fadeIn(element, 2000);

dojo.io.bind

As you would expect, no need to work directly with XHR Provides graceful degradation - falls back to iframe Support for submitting a form via io.bind Number of options, basic looks like this:

dojo.io.bind({ url: url, load: function(type, data, evt){ show(data) }, mimetype: "text/plain" });

DWR

Direct Web Remoting Relies on Java and JavaScript Automates common tasks Essentially a remote procedure call framework Uses a conguration le to make objects scriptable Can interact with Java objects on the server as if they were in the browser BeanName.methodName([parameters, ] callbackFunction);

Google Web Toolkit

Announced at JavaOne (*the* talk of the show) Build Ajax apps in Java Reusable components Simple RPC Handles browser history Full featured *Java* debugging Best practices and accumulated knowledge of Google

Yahoo!

Yahoos JavaScript and Design Pattern Library Set of utilities

Logging Events DOM convenience methods AutoComplete Calendar Menu

Set of controls

Struts

Ajax interactions benet from all of Struts' features including:

Declarative input validation Automatic creation of form beans

Beware of DispatchActions and validation errors

JSF

Number of Ajax components available Can create your own custom Ajax components Make requests inside or outside the lifecycle IDEs offer drag and drop Ajax

Tapestry

Ajax support is still relatively new Tacos components are still in beta - some work well, some not so much Howard Lewis Ship is adding support Lots of promise!

Spare me the pain

Even with frameworks, still some JavaScript Tools are coming, for now check out these: Firefox JavaScript Console Microsoft Script Debugger Venkman JavaScript Debugger (http://www.mozilla.org/projects/venkman/) Firefox Extensions

Web Developer Extension (http://chrispederick.com/work/webdeveloper/)

DOM Inspector

http://www.mozilla.org/projects/inspector/

JsUnit

http://www.edwardh.com/jsunit/

Selenium
http://www.openqa.org/selenium/

FireBug
https://addons.mozilla.org/refox/1843/previews/

http://www.joehewitt.com/software/rebug/ https://addons.mozilla.org/refox/1843/

Whats next?

Better tool support starting to arrive MyEclipse 4.1 - JS editing and debugging Open Ajax project - industry initiative (IBM, BEA, Borland, Eclipse, Google, etc.) NetBeans has a JS plugin Library/toolkit space will consolidate User expectations will increase More sites will implement

Proceed with caution

Unlinkable pages - Link to this page option Broken back button Code bloat Graceful fallback - older browsers, screen readers Breaking established UI conventions Lack of visual clues - Loading cues

Tips and Tricks

First rule of JS - use Firefox Use static HTML or XML les to simulate the server TEST with your users

Now what?

Start small Validation is a good rst step Auto complete More dynamic tool tips Partial page updates Recalculate Its all about the user!

Give me more!

www.ajaxpatterns.org www.ajaxmatters.com/r/welcome www.ajaxblog.com/ http://labs.google.com/ www.adaptivepath.com/ http://www.ntschutta.com/jat/ Lots of books...

To sum up

Ajax changes the request/response paradigm Its not rocket science, its not a cure all Test it with your users Start slow Embrace change!

Discount code!
Interested in an e-book version of our second book Pro Ajax and Java Frameworks? Use this code: THCHOPGBXVSZ at http://apress.com/ Want to get a great deal on our rst book, Foundations of Ajax? Head to Barnes and Noble (or go online) to get great deals on Apress books from now until the 9th of August (you could even win an iPod)!! http://www.apress.com/promo/bnj/

Questions?!? Thanks!

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License