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 specific “thing”

• Communicate with XHR, manipulate the Document

Object Model on the browser

• Don’t repaint the entire page!

• We gain flexibility

http://www.adaptivepath.com/publications/essays/archives/000385.php
What’s 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 Web Container
3
XHR Server Resource
6 5
2
function callback() {
//do something
}

4
1
Event Data store

Client Server
 Frameworks
• Don’t do the heavy lifting yourself!

• There are dozens and dozens of frameworks to

choose from

• Some are specific 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 flavored 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() - flips 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 field

• Various visual effects

• Also maintained by Rails core team member

(Thomas Fuchs)

• Handful of JS files
 Effect.Highlight
• Asynchronous calls aren’t 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 field 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 Dojo’s 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 configuration file 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!
• Yahoo’s JavaScript and Design Pattern Library

• Set of utilities

• Logging

• Events

• DOM convenience methods

• Set of controls

• AutoComplete

• Calendar

• Menu
 Struts
• Ajax interactions benefit 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/firefox/1843/previews/
http://www.joehewitt.com/software/firebug/
https://addons.mozilla.org/firefox/1843/
 What’s 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 files to simulate the

server

• TEST with your users

 Now what?
• Start small

• Validation is a good first step

• Auto complete

• More dynamic tool tips

• Partial page updates

• Recalculate

• It’s 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

• It’s not rocket science, it’s 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 first 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