Enterprise Systems Development

Direct Web Remoting (DWR): Ajax made easy…

Daniel BryantDaniel Bryant

Department of Computing, FEPS (d.bryant@surrey.ac.uk)

Tai-Dev Ltd, (daniel.bryant@tai-dev.co.uk)

Today’s roadmap...

• My life story (in under 3 minutes)…

• Quick review - so, what is Ajax? (Old school vs new school)

• DWR

� Introduction

� Looking deeper into DWR (client-side/server-side)

� Design Patterns� Design Patterns

� Implementation

� Demo (and debugging)

• Quick case study – TriOpsis Ltd

• DWR is awesome!! But are there any disadvantages?

• Review

My life story (abridged)…

• Studying at Surrey for 8 years

� BSc Computing and IT - Placement at DTI (now called BERR, DBIS etc. etc...)

� MSc Internet Computing

• PhD Student within the Department of Computing� Argumentation “how humans reason”

� Software Agents “mobile and/or intelligent code”

• JEE, Web 2.0, J2ME & RDBMS Consultant

� Working freelance for the past 5 years

� Started Tai-Dev Ltd 1 year ago (http://tai-dev.blog.co.uk/)

� J2EE, JEE 5, JSE, J2ME

� Spring, Hibernate, MySQL, GlassFish v2

� HTML, CSS, Javascript

� Prototype, Script.aculo.us, JQuery

� Direct Web Remoting (DWR)…

So, just what is Ajax?

• “Asynchronous JavaScript and XML”

� “…group of interrelated web development techniques used for creating interactive web applications or rich Internet applications.” (Wikipedia, 2008)

• Building block for “Web 2.0” applications

� Facebook, Google Mail and many more (auto-complete forms)

• Applications can retrieve data from the server asynchronously in the background

without interfering with the display and behaviour of the existing page

� No browser plugins (a’la Flash, Flex, SilverLight)

• The use of JavaScript, XML, or its asynchronous use is not required…

Ajax - the old school way…

ClientServer

http://java.sun.com/developer/technicalArticles/J2EE/AJAX

Old school, not so cool…

• Client-side� Browser incompatibilities (Microsoft, and then the rest of the world...)

� Long-winded

� Error prone

� Responsible for parsing return data, often XML-based (not OO)

� Responsible for handling application errors (response codes?)

� Large amount of repeated “boiler plate” code

• Server-side� Create Servlets (no abstraction, and limited chance to allow design patterns)

� Construct XML document of data

� Responsible for “flattening” Objects and Collections

� Set content-type of return data manually

� Manual error handing (convert Exceptions into response codes?)

Introducing the alternatives…

• JavaScript Libraries/Frameworks� dojo, JQuery, Prototype

� Greatly simplify client-side code

� Not so helpful on server-side…

• JSP Taglibs/JSF Components� jMaki, Ajax4jsf� jMaki, Ajax4jsf

� Very easy to utilise

� Limited server-side configuration (majority of focus on existing widgets and services)

• Proxy-based Frameworks� Direct Web Remoting (DWR), Rajax

� Best of both worlds

� Language specific on backend (Java)

• Tip: Always new stuff coming out – check blogs and news sites...

Direct Web Remoting (DWR)Overview

• DWR allows easy implementation of Ajax functionality

� Homepage @ http://directwebremoting.org/

� Open source

� JavaScript “client-side”

� Java “server-side”

• Proxy-based framework

� Client-side code can call Java server-side methods as if they were local

JavaScript functions.

� Converts or “marshalls” parameters and return variable to/from Java/JavaScript

• DWR generates the intermediate code (“piping” or boilerplate code)

• Also provides Utility classes

DWR in pictures

Image from http://directwebremoting.org/dwr/overview/dwr

• Core components� DWR JavaScript engine (‘engine.js’)

� JavaScript “interface” definitions of remote methods

� JavaScript Object Notation (JSON) used instead of XML

• Call Java methods as if local JavaScript functions� Albeit with callbacks…

Client-side

• Hides browser incompatibilities (via “engine.js”)� XMLHttpRequest Object

� Maps function calls to URLs

• Converts or “marshalls” data� Java ArrayLists into JavaScript arrays

� Java Objects into JavaScript object (eg we can say user.firstname)

• Simplifies error-handling� Maps Java Exceptions to JavaScript errors

• Core components� DWR JAR Library

� Proxy generator

� DWRServlets

• Easy framework configuration� XML or Annotations (Java 5+)

� Care needed…

Server-side

� Care needed…

• Not tied to writing Servlets or Spring Controllers� Promotes good OO coding and design patterns

• Simply expose (existing) Application Services� Specify order and types of parameter

� Can return any type of Collection or Object

� Can utilise Spring, Struts, JSF…

Design Patterns

• “A design pattern in architecture and computer science is a formal way of documenting a solution to a design problem in a particular field of expertise.”

(Wikipedia, http://en.wikipedia.org/wiki/Design_patterns, accessed 30/11/2009)

• Already covered Model, View, Controller (MVC) – utilised within Spring “MVC”

• Difficult to use MVC with Ajax/DWR - Sacrificing some benefits� MVC isolates business logic from input and presentation,

� MVC permits independent development, testing and maintenance of each� MVC permits independent development, testing and maintenance of each

� With MVC we can have multiple views...

JSP

Your Business Objects (User, Address Location) and Business Logic (Application Services?)

Spring Dispatcher-Servlet

Design Patterns (continued...)

• DWR based on other Design Patterns - We gain simplicity of implementation� Business Objects – basic POJOs, beans

� Application Service - our business logic classes. Note, these can/should be Unit Tested

� View is determined by calling HTML/JSP and JavaScript

� Front Controller taken care of – the DWRServlet

• When combining Spring MVC and DWR we have to be careful when managing state shared between the two (such as security info). � We can overcome this using other patterns, such as the Intercepting Filter

� Could be implemented using Aspect Oriented Programming e.g. Spring AOP?� Could be implemented using Aspect Oriented Programming e.g. Spring AOP?

• Images taken from http://www.corej2eepatterns.com/ (accessed 30/11/2009)

Your Application Servicesand Business Objects

DWRServlet

Javascript in browser (engine.js)

Intercepting Filter Would be implemented here

Implementation in 5 (easy) steps…

1. Copy DWR Library files into project

2. Configure your existing framework to handle DWR requests

3. Create your Data Model (Business Objects) and Application Services3. Create your Data Model (Business Objects) and Application Services

4. Inform DWR of these classes and their required exposure client-side1. dwr.xml configuration file

2. Annotations (Java 5+)

5. Create your client-side functions

Handling http requests (web.xml)….

…

<servlet>

<servlet-name>dispatcher</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-

class>

<load-on-startup>2</load-on-startup>

</servlet></servlet>

<servlet-mapping>

<servlet-name>dispatcher</servlet-name>

<url-pattern>*.htm</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>dispatcher</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

…

Cooking the Spring Beans…

<!-- DWR configuration (wrapping Spring ServletWrappingController around

standard DWR Servlet, and specifying init-params (including the location

of annotated classes -->

<bean id="dwrController"

class="org.springframework.web.servlet.mvc.ServletWrappingController">

<property name="servletClass" value="org.directwebremoting.servlet.DwrServlet">

</property>

<property name="initParameters">

<props><props>

<!-- remember to disable in production use -->

<prop key="debug">

true

</prop>

<!—Location of annotated classes that DWR should scan for use -->

<prop key="classes">

esd.model.Location,

esd.service.LocService

</prop>

</props>

</property>

</bean>

Create the Model (Business Objects)

package esd.model;

import org.directwebremoting.annotations.DataTransferObject;

import org.directwebremoting.annotations.RemoteProperty;

@DataTransferObject

public class Location {

@RemoteProperty

private String address1;private String address1;

@RemoteProperty

private String address2;

@RemoteProperty

private String city;

@RemoteProperty

private String county;

@RemoteProperty

private String country;

@RemoteProperty

private String postcode;

public Location(String address1, String address2, String city,

String county, String country, String postcode) {

…

Create your Application Services…

import …

@RemoteProxy

public class LocService {

private List<Location> initialLocs = new ArrayList<Location>();

//

// -------------- Constructors -----------------

////

public LocService() {

…

}

@RemoteMethod

public List<Location> findLocs(String postcode) {

List<Location> results = new ArrayList<Location>();

if (postcode == null || postcode.equals("")) {

results = initialLocs;

} else {

//perform search

//TODO

}

return results;

}

}

Create your client-side functions…

<script src='dwr/interface/LocService.js'></script>

<script src='dwr/engine.js'></script>

<script>

function searchForLocs() {

LocService.findLocs("", {

callback:function(dataFromServer) {

updateResults(dataFromServer);

},

errorHandler:function(errorString, exception) {

import …

@RemoteProxy

public class LocService {

private List<Location> initialLocs = new

ArrayList<Location>();

//

// -------------- Constructors -----------------

//

public LocService() {

…

}

@RemoteMethod

public List<Location> findLocs(String postcode) {

List<Location> results = new ArrayList<Location>();

if (postcode == null || postcode.equals("")) {

results = initialLocs;

} else {

//perform searcherrorHandler:function(errorString, exception) {

alert("Error: " + errorString);

}

});

}

function updateResults(locList) {

for (var i = 0, l = locList.length; i < l; i++) {

var txt = document.createTextNode(locList[i].address1 + "," + locList[i].postcode);

document.getElementById("results").appendChild(txt);

}

var br = document.createElement("br");

document.getElementById("results").appendChild(br);

}

</script>

//TODO

}

return results;

}

}

Lights, camera, action...(oh yes, and debugging)

• Quick demo of slide material

• Quick look at debugging� Client-side – Firefox’s Firebug� Client-side – Firefox’s Firebug

� Server-side – Netbeans’ debugger

• Tip: If you want to be a professional software developer debugging

efficiently should become as natural as breathing…� Not emphasized enough in teaching (but this is just my opinion)

� Probably a worthwhile skill for those MSc Dissertations as well…

Real world case study... TriOpsis Ltd

• Highly innovative start-up company based at the Research Park (STC)

• Check out www.triopsis.co.uk for more information

• Experts in the emerging field of Visual Business Information

• Specialising on ‘in the field’ data capture via mobile devices

• Images and associated metadata reporting relevant to target customer

Real world case study... TriOpsis Ltd

Screenshot of TriOpsis Flagship product – the ‘Asset Manager’ (implemented by yours truly!)

And finally…There are some disadvantages with DWR…

• As with any framework that generates (blackbox) “piping”� Sometimes difficult to know what is happening “in the pipe”

• Potentially difficult to debug� Spans across client and server domain

� Can use Netbeans debugger and FireFox’s Firebug

• Maintaining http session information� Hybrid of POSTed forms and Ajax

• Can cause unexpectedly large amounts of http traffic� Passing of complete object graphs (typically developer error ☺ )

• Potential security implications � Exposing incorrect methods etc.

� Easy to pass sensitive data in plaintext (passwords etc.) without knowing

Conclusions

• We know what Ajax is…

• We examined old school/new school approaches to implementation

• We learned that DWR is a “proxy-based” framework

� Providing (JavaScript) client and (Java) server-side Ajax support

� Allows exposure of Java model (BOs) and services

� DWR “handles the details”..� DWR “handles the details”..

• We’ve seen how to implement DWR

• We’ve had a look at an often undervalued skill – debugging

• Seen real case study using this technology, TriOpsis, which is actively used within Industry

• And we are always aware of potential disadvantages

� Beware of “black box” implementations…

� Security, session and http traffic

Thanks for your attention…

• I’m happy to answer questions now or later...

• We will learn more about DWR in the lab session

� Sorry, but I can’t promise to answer individual emails...� Sorry, but I can’t promise to answer individual emails...

• Feedback, comments, constructive criticism...