AJAX, DWR and Spring

Bram Smeets

Interface21

Topics

� History of dynamic web applications

� Web 2.0 and AJAX

� The DWR approach to AJAX

� Using Spring & DWR (by example)

� Best practices

� Tools and widgets

� DWR roadmap

� Conclusion

History of dynamic web applications

Web 2.0

The term "Web 2.0" refers to development of the World Wide Web, including its architecture and its applications.

As used by its proponents, the phrase currently refers to one or more of the below :� a transition of websites from isolated information silos to sources of content and functionality,

thus becoming a computing platform serving web applications to end users� a social phenomenon referring to an approach to creating and distributing Web content itself,

characterised by open communication, decentralization of authority, freedom to share and re-use, and "the market as a conversation"

� a more organized and categorized content, with a more developed deeplinking web architecture. � a shift in economic value of the web, potentially equalling that of the dot com boom of the late

1990s

However, a consensus upon its exact meaning has not yet been reached. Skepticsargue that the term is essentially meaningless, or that it means whatever its proponents decide that they want it to mean in order to convince the media andinvestors that they are creating something fundamentally new, rather than continuingto develop and use well-established technologies.

Many recently developed concepts and technologies are seen as contributing to Web 2.0, including weblogs, wikis, podcasts, rss feeds and other forms of many to many publishing; social software,web APIs, web standards, online web services, AJAX, and others.

Wikipedia, November 29, 2005

Web 2.0 (continued)

…the ‘Web 2.0 seems carefully crafted as a way to denegrate the clueless "Web 1.0" idiots, poor children, in the same way the first round of teenagers starting dotcoms in 1999 dissed their elders with the decade's mantra, "They just don't get it!"

…I'll do my part. I hereby pledge never again to use the term "Web 2.0" on this blog… Joel Spolsky, October 21, 2005

What is AJAX?

?

AJAX – The Hype

March 16, 2005

AJAX – Example

� Google Suggest

AJAX

� Not one technology, several technologies� XHTML and CSS

� Document Object Model (DOM)

� XML (and XSLT)

� XMLHttpRequest (XHR)

� JavaScript

Asynchronous JavaScript And XmlJesse James Garrett, 2005

AJAX = DHTML + XHR

AJAX – Architecture (1)

� Classic MVC vs. AJAX

Jesse James Garrett, 2005

AJAX – Architecture (2)

� Classic MVC vs. AJAX

Jesse James Garrett, 2005

AJAX - Issues

� Browser incompatibilities

� ActiveX in IE

� Native in Mozilla/Firefox

� Back button and browser history

� Working with XML in JavaScript

� Accessibility

AJAX – Framework overview

� JSON-RPC

� Sajax

� DWR

� Many more…

� Why DWR?

� Mostly used framework (according to Google and Burton Group)

� Integrates best with Spring!

DWR – Architecture (1)

DWR – Architecture (2)

� Java to JavaScript marshalling (and vice versa)

� Uses JavaScript objects

� Facilitate browser incompatibilities

� Supports most browsers

� Even allows fallback to iframes

DWR – Configuration (1)

� Declare DWRServlet in web.xml

<servlet><servlet-name>dwr</servlet-name><servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class><init-param>

<param-name>debug</param-name><param-value>true</param-value>

</init-param></servlet>

<servlet-mapping><servlet-name>dwr</servlet-name><url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

DWR – Configuration (2)

� Add dwr.xml in /WEB-INF

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC

"-//GetAhead Limited//DTD Direct Web Remoting 1.1//EN"

"http://www.getahead.ltd.uk/dwr/dwr11.dtd">

<dwr>

<allow>

<create creator="new" javascript="AjaxFacade">

<param name="class"

value=“com.interface21.dwr.AjaxFacade"/>

</create>

</allow>

</dwr>

AJAX – Debug pages

� Set the init-param of the DWRServlet to true

DWR – A sample web page

� In your web page add:

<script type="text/javascript"

src="/dwr/interface/AjaxHelper.js"></script><script type="text/javascript" src="/dwr/engine.js"></script>

� Call methods on the exposed object

<script type=“text/javascript”>function getData() {AjaxHelper.getData(handleData);

}

function handleData(data) {alert(‘data: ‘ + data);

}</script>

� Creates Java objects to call

� Most needed creators are build-in

� new

� scripted

� spring

� Allows scoping of created objects

� Page

� Request

� Session

� Application

DWR – Creators (1)

DWR – Creators (2)

getInstance(AjaxHelper)

getData()

DWR

Handler

AjaxHelper.getData()

Creator

Ajax

Helper

< creates >

Servlet Container

DWR – Creators (3)

� Using the ‘new’ creator

<create creator="new" javascript="AjaxHelper" scope="session">

<param name="class" value="com...AjaxHelper"/>

</create>

� Using the ‘spring’ creator

<create creator="spring" javascript="AjaxHelper">

<param name="beanName" value=“ajaxHelper"/>

</create>

DWR – Custom creators

� Implement custom creator...public interface Creator {

void setProperties(Map params) throws IllegalArgumentException;

Class getType();

Object getInstance() throws InstantiationException;

String getScope();

}

� Declare the Creator implementation

<init><creator id=“mine" class=“com.interface21.dwr.create.MyCreator"/>

</init>

DWR – Converters (1)

� Converts Java objects to JavaScript objects

� and vice versa

var customer = new Object();

customer.firstName = “Joe”;

customer.address.street =

“Collins Avenue”;

….

Customer customer =

new Customer();

customer.setFirstName(“Joe”);

Address address =

new Address();

address.setStreet(

“Collins Avenue”);

customer.setAddress(address);

….

DWR – Converters (2)

� Many build-in converters

� Primitives

� Collections

� JavaBeans (supports compound objects)

� Many more…

� Declare converters for domain objects

<convert converter=“bean”

match=“com.interface21.dwr.data.Customer”/>

DWR – Custom converters

� Implement custom converter...public interface Converter {

void setConverterManager(ConverterManager config);

Object convertInbound(Class paramType,

InboundVariable data,

InboundContext inctx)

throws ConversionException;

OutboundVariable convertOutbound(Object data,

OutboundContext outctx)

throws ConversionException;

}

� Declare the Converter implementation

<init><converter id=“mine" class=“com.interface21.dwr. MyConverter"/>

</init>

Security

� All methods on exposed objects are exposed by default� Use include/exclude rules per method

� Only objects are marshaled for which a converter is registered

� Role restrictions� Use security constraints on DWR paths� Specify an auth constraint per creator (JAAS)� Use Spring Security interceptors

� Disable debug mode in live environment!!

DWR – Utilities

� Include the utility script

<script type="text/javascript" src="/dwr/util.js"></script>

� Among others, it offers:� $(‘id’)

• Works on most browsers

� DWRUtil.toDescriptiveString(val)

• Generic toString() method

� DWRUtil.useLoadingMessage()

� DWRUtil.setValue(element, val)� DWRUtil.getValue(element)

� DWRUtil.addOptions(list)� DWRUtil.removeAllOptions(element)� DWRUtil.addRows(element, data, …)� DWRUtil.removeAllRows(element);

Demo

DWR

DWR & Spring

� DWR = AJAX with Spring made easy!

� Expose Spring-managed beans by means of JavaScript

DWR & Spring – Option 1

� Define a ContextLoaderListener inweb.xml to load the beans to expose

<listener>

<listener-class>

org.springframework.web.context.ContextLoaderListener

</listener-class>

</listener>

� Add a create statement to dwr.xml

<create creator="spring" javascript="CustomerManager">

<param name="beanName" value="customerManager"/>

</create>

DWR & Spring – Option 2

� Use the ServletWrappingController to wrap the DWRServlet

<bean id="dwrController" class="org.sfw.web.servlet.mvc.ServletWrappingController">

<property name="servletClass“ value="uk.ltd.getahead.dwr.DWRServlet"/>

<property name="initParameters">

<props>

<prop key="debug">true</prop>

</props>

</property>

</bean>

� Pros

� Reuse Spring MVC services (LocaleResolver, etcetera)

� No need to define a ContextLoaderListener

� Cons

� Need to use Spring MVC

DWR & Spring – Option 3

� Have DWR load the application context(s)

<create creator="spring" javascript="CustomerManager">

<param name="beanName" value="customerManager"/>

<param name="location-1" value="persistence-tier.xml"/>

<param name="location-2" value="business-tier.xml"/>

</create>

� Pros� No need for ContextLoaderListeneror Spring MVC

� Cons

� Creates an application context for each creatorUse SpringCreator.setOverrideBeanFactory(BeanFactory) to create global application context for all spring creators

Demo

DWR & Spring

DWR – Advanced features (1)

� Batching� beginBatch();

� Make some DWR requests� endBatch();

� Signatures

� Explicitly specify method signatures

<signatures>

<![CDATA[

import java.util.List;

import com.interface21.dwr.data.Customer;

CustomerManager.batchUpdate(List<Customer> list);

]]>

</signatures>

DWR – Advanced features (2)

� Accessing servlet parameters� Use WebContext

WebContext ctx = WebContextFactory.get();

ctx.getHttpServletRequest();

ctx.getHttpServletResponse();

ctx.getServletContext();

...

� Or add them to the method signature on your exposed beans� Auto filled in by DWR

List getCustomer(HttpServletRequest request,

Long id);

DWR – Advanced features (3)

� GMail style loading messages

� DWRUtil.useLoadingMessage();

� DWRUtil.useLoadingMessage(‘Waiting…’);

� Customize even further: • $('disabledZone').style.color = white;

DWR – Advanced features (4)

� Other options� Globally: DWREngine.setX()

� Per call: { timeout: 500, callback: myCallback }

� timeout

� errorHandler/warningHandler

� preHook/postHook

� method (DWREngine.XMLHttpRequest or DWREngine.IFrame)

� verb (GET or POST)

Best practices (1)

� Avoid overuse

� Use when appropriate

� Single Page vs. Multi Page

Best practices (2)

� Reuse of domain objects

� Hibernate lazy-loading issues

� Special facades or service objects

� No HTML over the wire

Tools

� Venkman

� Selenium

� Log4js

Widgets

� DOJO

� Prototype

� Script.aculo.us

� And many, many others…

DWR Roadmap (1)

� AJAX Filters, transparently filter requests

� Latency filter (simulate actual latency with connection)

� Reverse AJAX

� Send JavaScript to the browser

� Back button support

DWR Roadmap (2)

� Tighter integration with Spring

� No more dwr.xml but ordinary Spring XML

� DWR controller (instead of DWR Servlet)

� Extra form controllers e.g. for validation

� Use Spring scoping

� What feature(s) would you like?

Demo

Spring integration

Conclusion

� AJAX improves the user experience

� Avoid overuse

� DWR provides easy AJAX

� DWR integrates nicely with Spring

� Still more to come…

Questions?