ajax and java - intertech and java.pdf · the plan • what the heck is ajax? • server agnostic...
TRANSCRIPT
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