Ajax Integration Guide

Copyright 2007 SpringSource. Copying, publishing or distributing without express written permission is prohibited.

Ajax Integration Guide for Spring Enterprise Applications

1

Copyright 2007 SpringSource. Copying, publishing or distributing without express written permission is prohibited. 2

Introduction

• Who am I??? – Jeremy Grelle

• Senior Software Engineer, SpringSource • Member of Spring Web Products team in

Melbourne, FL. • Lead of Spring Faces, Spring JavaScript, JSF 2.0 EG

member. • SpringSource's resident RIA ninja. • Rock Star / Geek

2


Our Open Source Projects

3


Spring Uptake

64% of enterprises using Spring source: BEA dev2dev survey

0

750,000

1,500,000

2,250,000

3,000,000

1/1/

088/

1/07

3/1/

0710

/1/0

65/

1/06

12/1

/05

7/1/

052/

1/05

9/1/

044/

1/04

11/1

/03

Cumulative downloads (Sourceforge-only)

4


Our Commercial Products

SpringSourcePerformance

Suite

SpringEnterprise

Edition

SpringSourceSupport

SpringSource Enterprise

5


Application Server

6


Topics

• A Plethora of Choices– JavaScript libraries– JSF components– RIA remoting

• Approaches to integration with Spring– Spring JavaScript– Spring Faces– Spring MVC – RESTful @Controller– Spring Flex?

7


The State of Ajax Today

• Too much choice?

8


How Do We Choose a JavaScript Library???

• Important Features:– Ease of use / Quality of documentation– Supports unobtrusive use / progressive

enhancement– Support for accessibility– Consistent cross-browser support– Vibrant community– Optimized for good performance– Easy to integrate with Java / Spring

9


The Cream Is Rising...

• The major players that are starting to seperate themselves from the rest: – Prototype / Scriptaculous– jQuery– YUI– Ext– Dojo

10


Dojo – Our First Choice

• A complete framework that combines the low-level utility of Prototype / jQuery with an extensive collection of UI widgets.

• A modular packaging system that allows you to “import” other modules, similar to Java's package system.

• Pioneering support for accessibility in their widget system

– ARIA

11


Commonalities

• All of these frameworks are about more than just the asynchronous exchange of data with the server.

• They all focus on improving the quality of your client-side code and enabling you to bring a better experience to your users.

• They are all able to be used in an unobtrusive manner to provide a progressively enhanced UI– Requires careful design.

12


Connecting to Spring

• There are a number of effective techniques available for connecting your Ajax-enhanced UI to take advantage of Spring-based server-side resources

• It is important to strike the right balance between processing on the client and processing on the server.

13


The Progressive Approach

• Ideally take advantage of the existing controller infrastructure.

• We want to have an application that is able to maintain the same functionality without Ajax as it does with Ajax.– Progressively enhanced– Focus on accessibility

14

15Copyright 2008 SpringSource. Copying, publishing or distributing without express written permission is prohibited. 11

Spring Web

15

16Copyright 2008 SpringSource. Copying, publishing or distributing without express written permission is prohibited. 12

Spring JavaScript

• New module introduced in the Web Flow 2 Distribution

• JavaScript abstraction framework that allows you to progressively enhance a web page with behavior– Consists of a public .js API and implementation

• Builds on Dojo, other implementations possible (jQuery probably next)

• Handle the 80% case, while not hiding the underlying library

• API can be used directly, or used by a tag lib

16

17Copyright 2008 SpringSource. Copying, publishing or distributing without express written permission is prohibited.

Spring JavaScript

• Focus on progressive enhancement– A more pragmatic approach than full RIA

• Support for partial fragment rendering from Spring MVC through AjaxTilesView

• Dojo (optimized build) and CSS Framework packaged for convenience and served by the ResourceServlet– Yahoo performance guidelines baked in

13

17


Element Decoration Example

<form:input path="creditCardNumber"/><script type="text/javascript"> Spring.addDecoration(new Spring.ElementDecoration({ elementId : "creditCardNumber", widgetType : "dijit.form.ValidationTextBox", widgetAttrs : { invalidMessage : "Invalid credit card number!", regExp : "\\d{16}", required : true } }));<script/>

18


AJAX Event Decoration Example

<a id="nextUrl" href="...">Next Page</a>

<script type="text/javascript"> Spring.addDecoration(new Spring.AjaxEventDecoration({ elementId : "nextUrl", event : "onclick" }));</script>

• Link decoration

19


Spring Booking-MVC

Code Examples and Demo

20


JSF - Another level of abstraction...

• JSF components can provide another level of abstraction to allow you to add Ajax functionality in a more declarative manner.– Established libraries such as ICEFaces and

Ajax4JSF– Spring Faces

• Aims to ease the integration burden by being compatible with leading Javascript frameworks.

• Builds on Spring JS

21


Spring Faces


22


RESTful Spring

• REST is an important piece of the evolving Spring Web ecosystem.– Central theme in Spring 3.0

• Provide different representations of the same resource.

– HTML for full page display or partial DOM update.– JSON for intelligent widgets such as the Dojo

table widget.• dojo.data

– Any content type is possible

23


RESTful @Controller@RequestMapping(value="/hotels", method=RequestMethod.GET) public String getHotels(ModelMap model) { List<Hotel> hotels = hotelService.getHotels(); model.addAttribute("hotels", hotels); return "hotels";}

@RequestMapping(value="/hotels/{hotel}", method=RequestMethod.PUT)‏public void updateHotel(@UriParam("hotel")long id, Hotel hotel) { hotelService.updateHotel(id, hotel);}

@RequestMapping(value="/hotels/{hotel}/bookings/{booking}", method=RequestMethod.GET) public String getBooking(@UriParam("hotel")long hotelId, @UriParam("booking")long bookingId, ModelMap model) { Hotel hotel = hotelService.getHotel(hotelId); Booking booking = hotel.getBooking(bookingId); model.addAttribute("booking", booking); return "booking";}

@RequestMapping(value="/hotels/{hotel}/bookings", method=RequestMethod.POST)‏public void addBooking(@UriParam("hotel")long hotelId, Booking booking) { // store booking}

24


RESTful Spring


25


RIA Remoting - Spring Flex?

• Basic approaches to integration available now– Adobe's BlazeDS and LiveCycle Data Services

– GraniteDS

• Would be interesting to reduce the conceptual overhead– Reduce configuration required– Expose Spring beans directly

• Prototyping deeper BlazeDS integration for the Spring 3.0 timeframe

26


Spring Flex?


27


Summary

• Spring has always emphasized choice– No different with Ajax and RIA– Same Spring service infrastructure for any

client type

• Spring MVC's flexible infrastructure makes it well-suited to Ajax and RIA

• Choose the client-side technology based on merit and fit for application requirements

28


Resources

• Spring Framework and Spring Web Flow distros:

http://www.springframework.org/downloads

• Dojo

http://www.dojotoolkit.org

• Adobe BlazeDS

http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/

29



http://www.dojotoolkit.org/

http://www.dojotoolkit.org/



Technology

Ajax Integration Guide