ajax and java - intertech and java.pdf · the plan • what the heck is ajax? • server agnostic...

Ajax and Java FrameworksRyan Asleson and Nathaniel T. Schutta

Who Are We?

• Ryan Asleson

• Nathaniel T. Schuttawww.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?

http://movies.yahoo.com/shop?d=hv&id=1808444810&cf=pg&photoid=521827&intl=us http://www.cleansweepsupply.com/pages/skugroup1068.html

http://www.v-bal.nl/logos/ajax.jpg

A cleaner? A Greek hero?A soccer club?

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 Maps

Google Suggest

Ajax Enabled Web Application Web Container

6

XHR

function callback() {//do something}

Event

Server Resource

Data store

ServerClient

1

2

3

4

5

Typical Interaction

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 browserBeanName.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

://w

ww

.ope

nqa.

org/

sele

nium

/

FireBug

https://addons.mozilla.org/firefox/1843/

http

s://a

ddon

s.m

ozill

a.or

g/fir

efox

/184

3/pr

evie

ws/

http://www.joehewitt.com/software/firebug/

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:

THCHOPGBXVSZat

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