Escolar Documentos
Profissional Documentos
Cultura Documentos
s ith ra alb G
Founder, Ajaxian.com User interface consultant (Ajax / Swing) Frequent technical speaker / author
Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in whats possible on the Web.
Ajax == DHTML
Key Ajax ingredient: XMLHttpRequest (a.k.a. XMLHTTP) Introduced by MS in 1997 Copied by Mozilla 1.0 in 2002 innerHTML helps a great deal DOM API snobs notwithstanding
XMLHttpRequest
Method
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) send(content) abort() getAllResponseHeaders() getResponseHeader(header) setRequestHeader(label, value)
Description Setup the request (note the asyncFlag parameter) Send the request; content is request body (i.e. POST data) Stop a request in process Return a hash of header/value pairs Retrieve a response header value Set header (overriding browser headers allowed)
XMLHttpRequest
Property
onreadystatechange
Description Reference to callback function Current state of XHR; one of: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4= complete Text value of response body DOM tree of response body Numeric status code (e.g., 200, 404) Text status message corresponding to status code
readyState
responseText
Desktop Advantages
Much faster than JavaScript Advanced graphical capabilities Tight integration with OS Mature UI toolkits Lack of hackability (e.g., security)
Avalon Example
Increase Participation
Richer Interactivity
Ajaxian Frameworks
RAD High-level Tools
(TIBCO, TIBET)
UI Toolkits
(Dojo, Script.aculo.us, Moo.fx)
Remoting Toolkits
(Prototype, Dojo, Mochikit)
XMLHttpRequest
IFrame
...
Ajaxian Frameworks
RAD High-level Tools
(TIBCO, TIBET)
XMLHttpRequest
IFrame
...
Server Push
Problem: How to push data from server to client? Two solutions: Polling (e.g., email) Keep-alive Some call this Comet
Comet
Coined by the Dojo team (Alex Russell et
al.)
Beware the two connection limit Java server implementations: DWR Jetty
Cross-Domain Scripting
Problem: Page may not request resources outside
of originating domain
Proxy Server
May be more useful than you would think Allows you to: Track what your users are doing Control access to third-party services
(when you care)
Browser Hacks
Dozens of ways to do cross-site scripting
(XSS); see http://ha.ckers.org/xss.html
TIBCO GI
Ajaxian Frameworks
Prototype
DWR
jQuery MochiKit
Script.aculo.us
moo tools
Rico GWT
Dojo
Yahoo! UI
11.25%
22.50%
33.75%
45.00%
0%
45%
Prototype
34%
Script.aculo.us
25%
Hand-rolled
18%
Dojo
12%
DWR
11%
Moo.fx
8%
jQuery
5% 5% 4% 4% 3% 1%
Ajaxian Frameworks
A Brief Introduction to Some of My Favorites
Prototype
http://www.sergiopereira.com/articles/ prototype.js.html
Prototype Contents
Utility functions (globally scoped) Custom objects Extended properties on JavaScript native and hosted objects
Basic Utilities
Prototype contains a number of tools that take the pain out of DOM manipulation:
Can take multiple arguments and will return all matching elements
Try.these() function - takes functions as arguments and returns the return value of the rst function that doesnt throw an exception.
var returnValue; for (var i = 0; i < arguments.length; i++) { var lambda = arguments[i]; try { returnValue = lambda(); break; } catch (e) {} } return returnValue;
Ajax Helpers
The Ajax object provides a number of helpful Ajaxrelated functionality At its simplest, can be used to obtain XHR in a crossbrowser way: var xhr = Ajax.getTransport()
Ajax Helpers
Implementation of Ajax.getTransport():
var Ajax = { getTransport: function() { return Try.these( function() { return new ActiveXObject('Msxml2.XMLHTTP') }, function() { return new ActiveXObject('Microsoft.XMLHTTP') }, function() {return new XMLHttpRequest()} ) || false; } }
Ajax Helpers
Performs an XHR request Options argument species XHR conguration parameters and one or more callbacks
Ajax Helpers
Options object:
Supported properties:
method, asynchronous (true/false), parameters, postBody, requestHeaders (hash), onLoading, onLoaded, onInteractive, onComplete
Ajax.Request Example
var request = new Ajax.Request( /someUrl, { method: get, onComplete; myCallBack } ); function myCallBack(xhr) { $(someElementId).innerHTML = xhr.responseText; }
Ajax Helpers
Ajax.Updater() object - takes an element id, a url and an options object as arguments
Executes XHR and displays response as contents (innerHTML) of specied element First argument can be an anonymous object with a success property and a failure property set to the ids of elements Executes JavaScripts contained in response HTML
Ajax.Updater Example
var request = new Ajax.Updater( someElementId, /someUrl, { method: get, parameters: value=foo } );
Ajax Helpers
Ajax.PeriodicalUpdater() object - takes an element id, a url and an options object as arguments
Same behavior as Ajax.Updater() but continuously performs request every 2 seconds frequency property on options object controls the update frequency in seconds stop() function halts the updating; start() function can restart it
JavaScript Extensions
Number.toColorPart() function - converts decimal to hex String.stripTags() function - removes any tags from the string String.escapeHTML(), String.unescapeHTML() Document.getElementsByClassName()
Custom Objects
Custom Objects
Element.addClassName(), Element.hasClassName(), Element.removeClassName() - take two arguments: element id (or reference) and the class name Field.clear() - takes an unlimited number of form element ids or references and clears their values Field.present() - takes form elements ids or references; returns true if all are non-blank Field.focus(), Field.select(), Field.activate() - takes an element id/ref, and focuses, selects, or focuses/selects
Custom Objects
Form.serialize() - takes form element id/ref; returns the HTTP query string Form.getElements() - takes form element id/ref; returns array with all form elements Form.disable(), Form.enable(), Form.focusFirstElement(), Form.reset() - take form element id/ref
Collection inspection and manipulation methods embedded directly on the collection object itself
Closure-centric syntax
each
var Numbers = [0, 1, 4, 5, 98, 32, 12, 9]; Traditional Iteration:
for (var i = 0; i < Numbers.length; i++) { alert(Numbers[i]); }
collect
var Products = [ {name: 'Basecamp', company: '37signals', type: 'Project Management'}, {name: 'Shopify', company: 'JadedPixel', type: 'E-Commerce'}, {name: 'Mint', company: 'Shaun Inman', type: 'Statistics'} ];
collect: iterate over an Array and return the results as a new array:
return Products.collect(function(product) { return product.company; }).join(', ');
include
var Artists = ['Air', 'Bjrk', 'Arturo Sandoval', 'Orb'];
Result: false
Prototype also contains utilities for inserting values into existing HTML content, event handling, JavaScript object denition, HTML element positioning, and more
DWR
DWR (Direct Web Remoting) provides tight integration with Java DWR provides two major functions:
A dynamic JavaJavaScript proxy generation library (engine.js) Utility library of miscellaneous JavaScript functionality (util.js)
Using DWR
Step 1: Add the DWR servlet to your project Step 2: Create a DWR conguration le Step 3: Add DWR JavaScript to your HTML
Conguring DWR
DWR does not allow arbitrary execution of any Java code unless you explicitly expose the Java code Exposure of Java classes occurs in a DWR-specic conguration le: dwr.xml
Simple dwr.xml
Specify how to create the object (i.e., Spring vs new)
* classes not instantiated when a method is static
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create creator="new" javascript="Validator"> <param name="class" value="org.galbraiths.Validator"/> </create> </allow> </dwr>
JavaScript
DWR servlet acts as a mini-server for delivering JavaScript to the browser Dynamically generates JavaScript proxy objects at run-time You must explicitly reference a JavaScript le for each proxy you wish to use
JavaScript Example
Core DWR JavaScript: required for proxy stuff Proxy JavaScript: required to access an instance of the Java Validator type
<script type="text/javascript" src="/dwr/engine.js"></script> <script type="text/javascript" src="/dwr/Validator.js"></script> <script type=text/javascript> Validator.echoMethod(Hello, world!, callback); function callback(data) { alert(data); } </script>
DWR Conguration
Use either an include or exclude model, but not both Can integrate with JAAS to require a role for method invocation
DWR Conguration
Most recent denition wins (is the order guaranteed? not likely)
Example
<dwr> <allow> <create creator="new" javascript="Ledger" scope="request"> <param name="class" value="org.galbraiths.Ledger"/> <exclude method="revealSensitiveFinancialInfo"/> <auth method="cheatEmployeesOutOfMoney" role="boss"/> </create> <create creator="new" javascript="Validator"> <param name="class" value="org.galbraiths.Validator"/> <include method="validateCustomerId"/> <include method="validateTicketNumber"/> </create> <convert converter="bean" match="org.galbraiths.SomeBean"/> </allow> </dwr>
Extensibility
DWR allows you to dene new ways to create beans and custom converters for JavaBeans
"creators" and "converters" must be registered in an <init> element in the conguration le:
<init> <creator id="..." class="..."/> <converter id="..." class="..."/> </init>
Additional Features
Exposes a pre- and post- hook after some remote operation takes place:
DWREngine.setPreHook(function) DWREngine.setPostHook(function)
Additional Features
DWREngine.beginBatch() DWREngine.endBatch()
Script.aculo.us
Requires Prototype Reduces many effects to one line of JavaScript:
<div onclick="new Effect.Fade(this)"> ... </div>
The Effects
Each effect takes either a DOM node or the element id (or multiple element ids) Effect.*:
Appear, Fade, Puff, BlindDown, BlindUp, SwitchOff, SlideDown, SlideUp, DropOut, Shake, Pulsate, Squish, Fold, Grow, Shrink, Highlight
Debugging Tips
Use the DOM Inspector to observe the current state of your page
Use the JavaScript console to check for errors Use MochiKit logging and interpreter Use Venkman or Microsoft Script Debugger to troubleshoot behaviorial problems Or, just use Firebug
Futures?
SVG Canvas JIT Off-line Flash