Ajax and Java

huddleclergymanΛογισμικό & κατασκευή λογ/κού

2 Ιουλ 2012 (πριν από 4 χρόνια και 11 μήνες)

384 εμφανίσεις

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?
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
Server
Client
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 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/
https://addons.mozilla.org/firefox/1843/previews/
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:
THCHOPGBXVSZ
at
http://apress.com
/
Want to get a great deal on our first book
,
Foundations of Ajax
?
H
ead 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