This document discusses using Spring JavaScript to integrate Ajax toolkits like Dojo into Spring web applications. It provides an overview of Ajax and different Ajax approaches. Spring JavaScript makes it simple to enhance DOM nodes with new behaviors and styles. It supports rendering page fragments and built-in response types. Advanced techniques include custom response handling, modular JavaScript code, and consuming RESTful services that return JSON.
2. Slide Title
In this session, you will learn how Spring JavaScript
makes it simple to integrate rich Ajax toolkits such
as Dojo into a Spring Web application to create
compelling user interfaces.
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
3. Introduction
• Who am I???
– Jeremy Grelle
• Senior Software Engineer, SpringSource
• Member of Spring Web Products team in San
Francisco, CA
• Lead of Spring Faces, Spring JavaScript, Spring
BlazeDS Integration
• JSF 2.0 EG member.
• SpringSource's resident Ajax ninja.
• Rock Star / Geek
3
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
4. Topics in this session
• Overview of Ajax
• Introduction to Spring JS
• Spring JS Building Blocks
• Spring JS Advanced Solutions
• Spring JS + RESTful MVC
4
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
5. What is Ajax?
• An ever-evolving definition
• Philosophy of User Experience
• Search for the right balance between client and
server
• AJAX != Ajax
5
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
6. The Building Blocks of Ajax
• Document Object Model (DOM)
– tree HTML representation
– easy to target parts of dynamic web page
– e.g. 'disable all fields within a div'
• Cascading Stylesheets (CSS)
– separates content (HTML) from style
– CSS selectors apply style across DOM elements
• XMLHttpRequest
– JavaScript API for asynchronous requests
• JavaScript Object Notation (JSON)
6
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
7. Different Ajax Approaches
• JavaScript toolkit
– Dojo, YUI, jQuery
• JavaScript wrapped
– in JSF components (ICEfaces, RichFaces)
– in JSP custom tags (AjaxTags)
• JavaScript generated
– GWT
• JavaScript RPC-style invocations
– DWR, JSON-RPC
• RIA - Not necessarily based on JavaScript
7
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
8. Different Kinds of Frameworks
• Lightweight libraries
– jQuery, Prototype, Scriptaculous
• Full solution frameworks
– Dojo, YUI, Ext, GWT
8
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
9. Different Application Types
• Applications based on browsing model
– document-like, bookmarks, back button, refresh
– example: infoq.com
• Very rich applications in a browser
– desktop style, window panes, menus
– example: Google Maps, Bespin
• Many applications somewhere in between
– finding the right balance is important
9
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
10. The User Experience
• Ajax can do pretty “cool” things
– it's easy to be awed at first BUT...
– harder to predict the overall experience
• Consider the following “disruptive” effects
– back/forward button
– bookmarking
– JavaScript turned off
– support for accessibility features
• It's necessary to be pragmatic in using Ajax
techniques
– find the right blend of document-based vs. rich client
10
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
11. Ajax and Server-Side
Frameworks
• Ajax agnostic to server-side framework
– plain HTTP request
• The response is the contract
– HTML (partial DOM update), JSON, XML, ...
• Full HTML still required even for RIA
– login page, help pages, ...
11
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
12. Spring MVC with Ajax
• A swiss army knife for Web developers
– very flexible, pluggable
• Well-suited to handle Ajax requests
– supports many rendering technologies
– easy to expose HTTP endpoints
– RESTful architecture is an ideal Ajax back-end
• Versatility truly matters here!
12
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
13. Topics in this session
• Overview of Ajax
• Introduction to Spring JS
• Spring JS Building Blocks
• Spring JS Advanced Solutions
• Spring JS + RESTful MVC
13
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
14. Spring JavaScript Overview
• JavaScript abstraction framework
– builds on existing toolkits
– introduced as a SWF 2 module, moving to top-level
project for 2010
• Public API with implementations
– currently Dojo
– others possible (jQuery next)
• A pragmatic approach
– baked-in performance (Yahoo guidelines)
– progressive enhancement
14
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
15. Progressive Enhancement
(client side)
• Add Ajax behavior unobtrusively
– avoid proliferation of JavaScript
• Manipulate DOM nodes
– “enhance” plain HTML elements
• Page functions with or without JavaScript
15
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
16. Progressive Enhancement
(server side)
• Avoid separate controllers for Ajax
– use same request handling methods
• Render a page partially
– composition-based template approach
• Alternate response types
– HTML, JSON, XML, ...
16
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
17. The Parts of Spring JS
• JavaScript libraries
– public API + implementations
• Bundled (optimized) toolkits
– currently Dojo 1.2
• “Starter” CSS framework
– Mike Stenhouse's CSS framework
• ResourceServlet
– efficient rendering of static resources in a war or
a jar
• Spring MVC infrastructure for Ajax
– AjaxUrlBasedViewResolver, AjaxTilesView, ...
17
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
18. The ResourceServlet
• Generic servlet to serve static resources
– .js, .css, .jpeg, .gif, etc.
• Locates resources given the path info
– first under the Web application root
– the classpath as a fall back
• Writes the resource to the HTTP response
– gzip compression
– set response headers: last modified, content
type, ...
18
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
19. Serving Spring JS Files
• Spring JS distributed as a jar
– bundles JavaScript, CSS, and other resources
• Serve them with the ResourceServlet
• Possible to override bundled resources
– include your own in the webapp root
<servlet>
<servlet-name>Resources Servlet</servlet-name>
<servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Resources Servlet</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>
19
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
20. Spring JS Resources
• Underlying library
– /resources/dojo/dojo.js
• Public API
– /resources/spring/Spring.js
• Toolkit-specific implementation
– /resources/spring/Spring-Dojo.js
• Additional underlying library resources
– /resources/dijit/themes/tundra/tundra.css
20
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
21. Including Spring JS On a Page
• Include required files
<link type="text/css" rel="stylesheet"
href="<c:url value="/resources/dijit/themes/tundra/tundra.css" />" />
<script type="text/javascript"
src ="<c:url value="/resources/dojo/dojo.js" />"><script/>
<script type="text/javascript"
src ="<c:url value="/resources/spring/Spring.js" />"><script/>
<script type="text/javascript"
src ="<c:url value="/resources/spring/Spring-Dojo.js" />"><script/>
• Add Dojo “tundra” style to body tag
<body class="tundra" > ...
21
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
22. Topics in this session
• Overview of Ajax
• Introduction to Spring JS
• Spring JS Building Blocks
• Spring JS Advanced Solutions
• Spring JS + RESTful MVC
22
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
23. Enhancing a DOM Node
• DOM nodes can be manipulated
– decorate with new look and/or behavior
– via JS and CSS
• A common technique for “enhancing” plain HTML
– separates static from dynamic parts
– easier to understand & maintain
• Supported by underlying toolkit
– e.g. turn HTML form fields to rich widgets
23
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
24. Spring JS Decorations
• Mechanism for DOM node enhancements
– abstracts underlying toolkit
• A function for applying decorations
– Spring.addDecoration(/*Object*/decoration)
• Several available decorations
– Element decoration
– Ajax event decoration
– Validate All decoration
24
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
25. Fragment Rendering
• An Ajax call refreshes parts of a page
– response must contain a “fragment”
– not HTML for entire page
• Yet controllers should not be aware of Ajax
– easier to maintain that way
• Spring JS provides special Spring MVC view
– renders a fragment of the response only
– works transparently
25
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
26. The “Fragments” Parameter
• Ajax event decoration submits special parameter
– a hint for what HTML to be rendered
• Server notices special parameter
– renders only specified fragment
• Composition-based view technology is required
– currently JSP/Tiles supported only
– fragment names match to a Tiles attribute
26
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
27. Built-In Response Handling
Types
• Refresh portions of the page
– grab top-level DOM nodes
– replace equivalent nodes on existing page
• Present Ajax popup
– a modal dialog with the returned HTML
– enable via AjaxEventDecoration “popup” attribute
• Client side redirect
– detects server response requesting client-side
redirect
– requires AjaxUrlBasedViewResolver
27
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
28. Demo
Spring JS Building Blocks
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
29. Topics in this session
• Overview of Ajax
• Introduction to Spring JS
• Spring JS Building Blocks
• Spring JS Advanced Solutions
• Spring JS + RESTful MVC
29
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
30. Common Questions
• The fundamental pieces of Spring JS seem nice,
but how do I...
– perform custom response handling?
– make my code more terse?
– keep things DRY?
– organize and modularize my growing amount of
JavaScript code?
30
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
31. Demo
Spring JS Advanced Solutions
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
32. Topics in this session
• Overview of Ajax
• Introduction to Spring JS
• Spring JS Building Blocks
• Spring JS Advanced Solutions
• Spring JS + RESTful MVC
32
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
33. The Evolving Web Platform
• Capable browsers with advanced JavaScript VM’s
are becoming more commonplace
– Safari, Firefox, and Chrome
– Webkit-based mobile browsers
• As the platform evolves, boundaries can be pushed
further on the client
– see Canvas, SVG, Video in HTML 5
• RESTful services provide the perfect compliment
on the server-side
– JSON representations easy to consume
33
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
34. JSON support in Spring 3.0
• MappingJacksonJsonView
– renders the model as JSON
– customizable via annotations
– high-performance
• MappingJacksonHttpMessageConverter
– easy binding from a JSON payload
34
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
36. Summary
• Spring MVC very useful for Ajax
– a swiss-army knife
• Spring JS provides simple abstraction
– builds on existing Ajax toolkits
– provides both client and server side components
• Many common enterprise scenarios made easy
– rich forms
– partial page updates
– Ajax popups
– JSON
36
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.
37. Q&A
SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.