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

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

Our Open Source Projects

3

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

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

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

Our Commercial Products

SpringSourcePerformance

Suite

SpringEnterprise

Edition

SpringSourceSupport

SpringSource Enterprise

5

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

Application Server

6

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

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

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

The State of Ajax Today

• Too much choice?

8

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

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

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

The Cream Is Rising...

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

10

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

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

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

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

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

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

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

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

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

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

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

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

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

Spring Booking-MVC

Code Examples and Demo

20

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

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

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

Spring Faces

Code Examples and Demo

22

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

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

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

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

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

RESTful Spring

Code Examples and Demo

25

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

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

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

Spring Flex?

Code Examples and Demo

27

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

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

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

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