ajax and java - intertech and java.pdf · the plan • what the heck is ajax? • server agnostic...
TRANSCRIPT
![Page 1: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/1.jpg)
Ajax and Java FrameworksRyan Asleson and Nathaniel T. Schutta
![Page 2: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/2.jpg)
Who Are We?
• Ryan Asleson
• Nathaniel T. Schuttawww.ntschutta.com/jat/
• First Ajax book!
![Page 3: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/3.jpg)
The Plan• What the heck is Ajax?
• Server agnostic frameworks
• Java and Ajax
• Give me tools!
• Patterns and best practices
![Page 4: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/4.jpg)
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?
![Page 5: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/5.jpg)
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
![Page 6: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/6.jpg)
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
![Page 7: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/7.jpg)
Google Maps
Google Suggest
![Page 8: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/8.jpg)
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
![Page 9: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/9.jpg)
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
![Page 10: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/10.jpg)
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
![Page 11: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/11.jpg)
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
![Page 12: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/12.jpg)
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
![Page 13: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/13.jpg)
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); }});
![Page 14: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/14.jpg)
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"});
![Page 15: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/15.jpg)
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,);
![Page 16: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/16.jpg)
Prototype
• http://prototype.conio.net/
• http://www.sergiopereira.com/articles/prototype.js.html
• http://encytemedia.com/blog/
• http://particletree.com/
![Page 17: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/17.jpg)
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
![Page 18: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/18.jpg)
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'});
![Page 19: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/19.jpg)
Combination Effects
• Effect.Parallel allows you to do a lot
• Prebuilt combinations of effects including:
• Appear
• Puff
• Shake
• Fold
• Grow
• Remember the blink tag!
![Page 20: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/20.jpg)
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!
![Page 21: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/21.jpg)
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
![Page 22: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/22.jpg)
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);
![Page 23: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/23.jpg)
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"});
![Page 24: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/24.jpg)
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);
![Page 25: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/25.jpg)
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
![Page 26: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/26.jpg)
Yahoo!• Yahoo’s JavaScript and Design Pattern Library
• Set of utilities
• Logging
• Events
• DOM convenience methods
• Set of controls
• AutoComplete
• Calendar
• Menu
![Page 27: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/27.jpg)
Struts
• Ajax interactions benefit from all of Struts' features including:
• Declarative input validation
• Automatic creation of form beans
• Beware of DispatchActions and validation errors
![Page 28: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/28.jpg)
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
![Page 29: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/29.jpg)
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!
![Page 30: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/30.jpg)
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/)
![Page 31: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/31.jpg)
DOM Inspector
http://www.mozilla.org/projects/inspector/
![Page 32: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/32.jpg)
JsUnit
http://www.edwardh.com/jsunit/
![Page 33: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/33.jpg)
Selenium
http
://w
ww
.ope
nqa.
org/
sele
nium
/
![Page 34: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/34.jpg)
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/
![Page 35: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/35.jpg)
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
![Page 36: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/36.jpg)
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
![Page 37: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/37.jpg)
Tips and Tricks
• First rule of JS - use Firefox
• Use static HTML or XML files to simulate the server
• TEST with your users
![Page 38: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/38.jpg)
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!
![Page 39: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/39.jpg)
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...
![Page 40: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/40.jpg)
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!
![Page 41: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/41.jpg)
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/
![Page 42: Ajax and Java - Intertech and Java.pdf · The Plan • What the heck is Ajax? • Server agnostic frameworks • Java and Ajax • Give me tools! • Patterns and best practices](https://reader031.vdocument.in/reader031/viewer/2022022409/5bdbeaab09d3f2bc1c8ce84f/html5/thumbnails/42.jpg)
Questions?!?Thanks!
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License