El Mejor Ejemplo DWR, o El Mejor Tutorial DWR

Java Add comments

DWR (Direct Web Remoting)es una librería Javascript que permite el uso de Ajax
(Asynchronous JavaScript and XML) de forma mucho más simple (Este artículo asume
que se entiende los conceptos de Ajax, y de Java).

DWR es una librería mas orientada a apoyar la integración, que a apoyar la parte
gráfica, de hecho si se buscan Widgets (objetos gráficos) esta no es la librería, pero por
otro lado lo fuerte de DWR es que permite “publicar” fácilmente funcionalidad de
clases Java para accederlas vía Javascript.

Luego si nuestra funcionalidad o lógica de negocio esta en Java, DWR es una de la

mejores opciones para aprovecharla, ya que usar una clase Java que tenemos en un
servidor de aplicaciones vía Javascript es tan fácil como definir un archivo de
configuración en el servidor.

Ahora si se requiere además darle una interfaz más rica (rich interface) a los usuarios, es
bueno combinar DWR con otras librerías Ajax como YUI (Yahoo User Interface),
JQuery, Prototype, Scriptaculous, Dojo, o Spry.

Con Ajax se terminan las paginas JSP, o ASP (o deberían terminarse), porque Ajax solo
necesita Javascript y HTML para la parte de presentación, esto lo explicaremos mejor
en otro articulo, pero por ahora créannos. Y con DWR ni siquiera son necesarios los
Servlets, esto en el sentido de que no se necesitan desarrollar servlets para implementar
la lógica de negocio, porque DWR si internamente esta basado en Servlets, en otras
palabras gracias a DWR no necesitamos implementar nuestros servlets sino solo
necesitamos clases Java (POJO).

Si se conoce la tecnología Axis, que permite publicar clases Java como Webservices,
este es el símil para publicar clases Java como objetos Ajax (objetos Javascripts), de
hecho es muy fácil publicar con DWR un servicio realizado para Axis. Incluso las
buenas prácticas o blueprints de Axis para publicar clases como Webservices se aplican
totalmente para publicar clases para Ajax., ya que hay que tener los mismos cuidados en
cuanto a seguridad y manejo de desempeño (performance).

La definición oficial de DWR es:

DWR permite a Javascript (en un Browser) interactuar con las clases Java en
un Servidor, y ayuda a manipular las paginas Web con los resultados.

Si, porque otra característica importante de DWR es que ofrece funcionalidades

Javascript que permiten fácilmente manipular el HTML de la página: como obtener los
datos de un formulario (HTML Form), o de cualquier otro tag HTML, o setear
fácilmente los valores de los tags HTML, ademas aporta facilidades para clonar tags, lo
que permite por ejemplo crear nuevas filas (rows) en una tabla (HTML Table), muy útil
para mostrar una consulta. DWR no nos provee ningun objeto grafico prehecho, pero si
nos permite la flexibilidad para hacer cualquier cosa con el HTML.

Bueno basta de conceptos y vamos directo al código.

Hemos llamado a este tutorial “el Mejor”, solo para llamar su atención, pero la verdad
es que es bastante bueno, por lo siguiente:

• Es lo mas simple posible, tiene lo justo y necesario para entender el concepto principal de DWR,
y como funciona.

• Esta actualizado, otros ejemplos están basados en versiones anteriores de DWR.

• Esta completo, otros ejemplo ponen solo parte del código.

• Usa clases y colecciones de clases (Collection) como parámetros de entrada y parámetros de

salida, que es lo que típicamente se va a usar en un sistema real, otros ejemplos usan datos más
básicos. De esta forma también se muestra como se manejan las colecciones y las clases en
Javascript.

Tutorial DWR en 10 Simples Pasos

1. Lo primero es bajar DWR (http://getahead.org/dwr/download), basta bajar solo la librería

(dwr.jar).
2. Luego hay que modificar el archivo “web.xml”, este se encuentra bajo el directorio “WEB-INF”,
ejemplo: ”\dwrEasy\WEB-INF”, se debe incluir las definiciones de los servlets que atienden los
requerimientos DWR-AJAX.
Web.xml:

view plaincopy to clipboardprint?

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

2. < !DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Applicatio
n 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
3. <web_app>
4. <display_name>dwrEasy</display_name>
5. <servlet>
6. <servlet_name>dwr-invoker</servlet_name>
7. <display_name>DWR Servlet</display_name>
8. <description>Direct Web Remoter Servlet</description>
9. <servlet_class>org.directwebremoting.servlet.DwrServlet</servlet_clas
s>
10. <init_param>
11. <param_name>debug</param_name>
12. <param_value>true</param_value>
13. </init_param>
14. </servlet>
15. <servlet_mapping>
16. <servlet_name>dwr-invoker</servlet_name>
17. <url_pattern>/dwr/*</url_pattern>
18. </servlet_mapping>
19. </web_app>

3. A continuación se debe implementar la clase Java que va a ofrecer los servicios, esta basta que
sea un clase Java simple (POJO), con un constructor sin parámetros, y donde cada método de la
clase es un “potencial” servicio Ajax.

Esta clase va a estar del lado del servidor de aplicaciones (ejemplo: Tomcat,
JBoss, o Websphere) no necesariamente tiene que ser un servidor J2EE.

EasyService.java:

view plaincopy to clipboardprint?

1. package com.soaagenda.services;
2.
3. import com.soaagenda.valueobjects.*;
4.
5. public class EasyService {
6. public EasyService() {
7. }
8.
9. public EasyResponse getProducts(EasyParameter parametersX){
10. EasyResponse responseX= new EasyResponse();
11.
12. // si parametros vacios devuelve error, error if empty parameters
13. if (parametersX==null || parametersX.getClientID()==null || parameter
sX.getClientID().length()< =0){
14. responseX.setErrorCode(10001);
 15. responseX.setErrorDescription("Debe indicar ID Cliente. Give us Client
ID");
16. return responseX;
17. }
18.
19. //crea lista productos del cliente, fill the client product list
20. //para ejemplo en duro, for the example fixed data
21. Product[] productsListX= new Product[2];
22.
23. Product productX= new Product();
24. productX.setBarCode("0001");
25. productX.setName("Tarjeta Visa, Visa Credit Card");
26. productsListX[0]= productX;
27.
28. productX= new Product();
29. productX.setBarCode("0002");
30. productX.setName("Tarjeta American Express, American Express Credit
Card");
31. productsListX[1]= productX;
32.
33. //respuesta exitosa, sucessfull response
34. responseX.setErrorCode(0);
35. responseX.setErrorDescription("Consulta Banco Exitosa, Succesfull Bank
Query");
36. responseX.setProducts(productsListX);
37.
38. return responseX;
39. }
40. }

Este ejemplo simula una consulta de los productos bancarios de un cliente como
Tarjetas de Crédito (VISA, Master Card, Dinners, American Express), Cuentas
Corrientes, o Creditos de Consumo, para esto se le pasa como parámetro un
objeto que tiene el ID del cliente, y el tipo de producto a consultar, el servicio (o
método) devuelve otra clase con el código de error, mensaje de error, y la lista
de productos (un arreglo de clases producto).

4. También hay que definir las clases de datos (Value Objects) que va a utilizar el servicio, esta
clases deben ser javabeans (atributo privados, con getters y setters):

EasyParameter.java: define los parámetros de entrada del servicio.

view plaincopy to clipboardprint?

1. package com.soaagenda.valueobjects;
2.
3. public class EasyParameter {
4. private String clientID;
5. private String productType;
6. public EasyParameter() {
7. }
 8.
9. public void setClientID(String clientID) {
10. this.clientID = clientID;
11. }
12.
13. public void setProductType(String productType) {
14. this.productType = productType;
15. }
16.
17. public String getClientID() {
18. return clientID;
19. }
20.
21. public String getProductType() {
22. return productType;
23. }
24. }

EasyResponse.java: define la estructura para los resultados del servicio.

view plaincopy to clipboardprint?

1. package com.soaagenda.valueobjects;
2.
3. public class EasyResponse {
4. private int errorCode;
5. private String errorDescription;
6. private Product[] products;
7.
8. public EasyResponse() {
9. }
10.
11. public void setErrorCode(int errorCode) {
12. this.errorCode = errorCode;
13. }
14.
15. public void setErrorDescription(String errorDescription) {
16. this.errorDescription = errorDescription;
17. }
18.
19. public void setProducts(Product[] products) {
20. this.products = products;
21. }
22.
23. public int getErrorCode() {
24. return errorCode;
25. }
26.
27. public String getErrorDescription() {
28. return errorDescription;
29. }
30.
31. public Product[] getProducts() {
32. return products;
33. }
34. }

Product.java: define la estructura de un producto.

view plaincopy to clipboardprint?

1. package com.soaagenda.valueobjects;
2.
3. public class Product {
4. private String barCode;
5. private String name;
6. public Product() {
7. try {
8. jbInit();
9. } catch (Exception ex) {
10. ex.printStackTrace();
11. }
12. }
13.
14. private void jbInit() throws Exception {
15. }
16.
17. public void setBarCode(String barCode) {
18. this.barCode = barCode;
19. }
20.
21. public void setName(String name) {
22. this.name = name;
23. }
24.
25. public String getBarCode() {
26. return barCode;
27. }
28.
29. public String getName() {
30. return name;
31. }
32. }

5. Vamos a indicarle a DWR que clases vamos a publicar para Javascript (Ajax), esto se hace en el
archivo “dwr.xml”, y también corresponde a un esquema de seguridad porque podemos llegar a
especificar solo que métodos de una clase queremos exponer, y que atributos.

Para nuestro ejemplo vamos a publicar toda la clase servicio

(com.soaagenda.services.EasyService), es decir todos sus métodos, y todas las
clases de datos (com.soaagenda.valueobjects.*).

dwr.xml

view plaincopy to clipboardprint?

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

2. < !DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0/
/EN" "http://getahead.org/dwr/dwr20.dtd">
3. <dwr>
4. <allow>
5. <!-- define la clase de servicios que se va a publicar mediante DWR -->
6. <!-- defines the service class to share across DWR -->
7. <create creator="new" javascript="EasyService">
 8. <param name="class" value="com.soaagenda.services.EasyService"/>
9. </create>
10. <!-- define las clases de datos que utiliza el servicio -->
11. <!-- defines the data classes to share across DWR -->
12. <convert converter="bean" match="com.soaagenda.valueobjects.*"/>
13. </allow>
14. </dwr>

6. Ahora si compilamos las clases, y publicamos nuestro ejemplo Web (deploy), DWR nos presta
una utilidad para probar que todo anda bien, esta se accede desde un Browser, en el path
“/dwr/”, dentro de nuestro sitio (ejemplo: http://localhost:8028/dwrEasy/dwr/)

Seleccionado el servicio, nos aparece primero las librerías javascript necesarias para
implementar una pagina Web, luego la lista de servicios (métodos de las clase servicio)
a los que tenemos acceso (getProducts).
 Como no restringimos los métodos de la clase, incluso nos aparecen los métodos
que hereda por ser una clase Java (como hashCode, getClass).

Si presionamos el botón “Execute”, ejecuta el servicio, y para el caso de nuestro

ejemplo este retorna un error “Debe indicar ID Cliente”, lo que esta bien porque
no le hemos indicado parámetros de entrada, con esto sabemos que todo anda
bien, porque esa respuesta la da nuestra clase que esta en el servidor, es decir,
ejecutamos desde Javascript (Browser) una clase que esta del lado del servidor,
eso es Ajax y DWR!!.

7. Lo siguiente es crear nuestra pagina HTML que va a consultar los resultados y mostrarlos, esta
pagina es sumamente simple, tiene un formulario (Html Form), en realidad solo tiene las
 variables del form, porque ya no es necesario el tag “<form>” (recuerden que con Ajax la forma
de hacer request al Server cambia, ahora es asíncrona), y tiene una tabla (html table) para
mostrar el resultado.

dwrEasyPage.html

view plaincopy to clipboardprint?

1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

ww.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>Editable Table Demo</title>
5. <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /
>
6. <script type='text/javascript' src='/dwrEasy/dwr/interface/EasyService.js'>
</script>
7. <script type='text/javascript' src='/dwrEasy/dwr/engine.js'></script>
8. <script type='text/javascript' src='/dwrEasy/dwr/util.js'> </script>
9. <script type="text/javascript" src='dwrEasyJS.js'> </script>
10. </head>
11.
12. <body>
13. <h1>Easy DRW Demo</h1>
14. <h3>Buscar / Search</h3>
15.
16. <table>
17. <tr>
18. <td>ID Cliente / Client ID:</td>
19. <td><input name="formClientID" type="text" id="formClientID" size=
"15"/></td>
20. </tr>
21. <tr>
22. <td>Tipo Producto / Product Type</td>
23. <td><input name="formProductType" type="text" id="formProductTy
pe" size="15"/></td>
24. </tr>
25. <tr>
26. <td colspan="2" align="right">
27. <input type="button" value="OK" onclick="javascript:submitProducts
Request()"/>
28. </td>
29. </tr>
30. </table>
31.
32. <h3>Productos / Products</h3>
33. <p>Respuesta / Response:
34. <input name="serviceResponse" type="text" id="serviceResponse" size
="50"/>
35. </p>
36.
37. <table border="1">
38. <thead>
39. <tr>
40. <th>Codigo / BarCode</th>
41. <th>Nombre / Name</th>
42. </tr>
43. </thead>
44. <tbody id="myTable">
45. <tr id="myPattern" style="display:none">
46. <td>
47. <span id="codePattern">code example</span></td>
48. <td>
49. <span id="namePattern">name example</span></td>
50. </tr>
51. </tbody>
52. </table>
53. </body>
54. </html>

Si analizamos el código, lo primero es la referencia a las librerías Javascript

(“EasyService.js”, “engine.js”, “util.js”), estas fueron generadas por DWR, luego
aparece la librería (“dwrEasyJS.js”) que ya es propietaria (custom), y que
 debemos construir para realizar la lógica de interacción (esta redescribe a
continuación).

Luego aparecen las variables del formulario a solicitar (formClientID,

formProductType), y el botón que define la acción de consulta, ejecuta la
función Javascript “javascript: submitProductsRequest()”, esta funcion es la que
se encuentra definida en la librería (“dwrEasyJS.js), la cual vamos a tener que
contruir.

Después viene la tabla que mostrará los datos (myTable).

Podemos ver que hay ciertas características especiales en el código Html, estas
le van a servir a DWR para encontrar donde obtener, o donde mostrar los datos:

Los “Id” de los tags html le sirven a DWR para manejar los datos:

· Los id “formClientID”, “formProductType” le permiten encontrar loas

parámetros de entrada.

· El id “myTable”, le servirá para saber que tabla limpiar.

· El id “myPattern”, le indicará a DWR que filas (rows) debe “clonar” para

mostrar cada registro de producto de la lista, como es un “patrón” en
principio va oculto (style=”display:none”).

· Los id “codePattern”, “namePattern” servirán para qeu DWR sepa donde

colocar los datos de cada producto, en este caso se usan tags “<span>”.

Como vemos esta pagina es solo Html, y Javascript, que “hermosamente

simple”, nada de JSP, ni de ASP, una pagina que se puede publicar en cualquier
servidor Web.

8. Lo que sigue es la librería Javascript propia.

dwrEasyJS.js
view plaincopy to clipboardprint?

1. function submitProductsRequest() {
2. var idX=dwr.util.getValue("formClientID");
3. var typeX=dwr.util.getValue("formProductType");
4.
5. var parametersX={clientID:idX,productType:typeX};
6.
7. EasyService.getProducts(parametersX,showProducts);
8.
9. }
10.
11. function showProducts(responseX) {
12.
13. // borro filas excepto el patron, delete rows except pattern row
14. dwr.util.removeAllRows("myTable", { filter:function(tr) { return (tr.id !
= "myPattern");}});
15.
16. if (responseX.errorCode!=0){
17. alert('Error: '+responseX.errorDescription);
18. return;
19. };
20. var productsX=responseX.products;
21. var lengthX=productsX.length;
22. var itemProductX;
23.
24. if (lengthX==0){
25. alert('No hay productos, Cant find products');
26. return;
27. };
28.
29. dwr.util.setValue("serviceResponse", responseX.errorDescription);
30.
31. var id="00";
32. for (var i=0 ; i<lengthx ; i++)
33. {
34. temProductX= productsX[i];
35. id="00"+i;
36. dwr.util.cloneNode("myPattern", { idSuffix:id });
37. dwr.util.setValue("codePattern" + id, itemProductX.barCode);
38. dwr.util.setValue("namePattern" + id, itemProductX.name);
39. $("myPattern" + id).style.display = "";
40. }
41. }

9. Esta librería tiene dos funciones: “submitProductsRequest” la que obtiene los parámetros de
entrada y ejecuta el servicio correspondiente (clase Java EasyService.getProducts() vía DWR), y
la función que muestra los datos (showProducts).

Finalmente hay que subir las páginas (Deploy) en el sitio Web, quedando el
proyecto con la siguiente estructura:
.

Ejecutamos la pagina de prueba “dwrEasyPage” en nuestro Browser (ejemplo

“http://localhost:8028/dwrEasy/dwrEasyPage.html”), ponemos un dato en “ID
Cliente”, presionamos “OK”, y listo!, nuestra primera aplicación Ajax-DWR.

10. The End

*******************************************************************

Ajax Facilito en Java - DWR

Wednesday, December 24, 2008 at 2:38am

Volviendo otra vez al proyecto actual en el que estamos asignados Dani Gonzalez y yo,
nos hemos encontrado con que las versiones de Portlet y de JSF utilizadas no permiten
el uso de componentes con comportamiento AJAX. En versiones posteriores estos
problemas tienen solución e incluso existen librerías de componentes JSF muy potentes
en este sentido (ICE Faces, RichFaces, Oracle ADF) pero como todos os imagináis a los
dueños de una aplicación no suele gustarles que les digas que vas a invertir un
tiempecito migrando a una nueva versión de algo que no conocen y que además para
utilizarla es necesario cambiar la versión del servidor de aplicaciones en producción…
así que hemos tenido que “invertar” alguna cosa, para dar ese comportamiento dinámico
que nos requería el usuario final. Concretamente la primera petición de nuestros
usuarios vino para recuperar la irradiación (cantidad de sol recibido por un punto de la
superficie terrestre) a partir de las coordeandas seleccionadas por el usuario en un mapa
(en este caso generado con Google Maps) sin necesidad de realizar un submit y recargar
toda la página…
Estuvimos viendo distintas alternativas como dojo (aunque se caracteriza más por su
librería de componentes gráficos javascript también tiene funcionalidad para realizar
llamadas ajax), prototype, el uso del objeto XMLHttpRequest, y otros aunque
finalmente nos decidimos por DWR dada la facilidad con la que se puede utilizar en un
entorno Java. En realidad, después de un poco de tiempo trabajando con DWR coincido
bastante con la forma en que ellos se definen en su site: “DWR es una librería java que
permite al código java ejecutado en un servidor de aplicaciones y al código Javascript
ejecutado en un navegador interactuar entre ambos de la manera más simple posible” y
su eslogan es: “DWR is Easy Ajax for Java”

Bueno, a grandes rasgos nos encontramos con dos piezas que son necesarias para que
esto funcione:

• Un servlet java ejecutándose en el servidor que procesa las peticiones Ajax recibidas y
devuelve la respuesta al navegador
• Una librería javascript en el navegador utilizada para enviar peticiones al servidor y recibe
las respuestas desde éste para actualizar la página que se muestra

Vale y como funciona realmente?

• DWR genera dinámicamente el código javascript para que cada una de las clases java de
servidor expuestas como servicios AJAX puedan ser accedidas desde javascript. Es decir el
javascript generado por DWR crea un objeto javascript que puede ser referenciado desde
cualquier parte de nuestro código js en el navegador.
• El objeto creado se encarga de abstraernos de la comunicación con el servidor. Cuando se
invoca a alguno de los métodos javascript ofrecidos se desencadena una llamada al
servidor en la que DWR se encarga del envío y recepción (marshalling / unmarshalling) de
los parámetros de forma transparente.

Y aquí tenemos un diagrama sencillo de como funciona.

Si queréis ver un ejemplo muy sencillo de lo que hay que hacer para poner esto a
funcionar podéis ir a un tutorial en la página oficial de DWR

A partir de la versión 2 (la actual es la 3) ofrece una funcionalidad que ellos llaman
“reverse ajax” que permite realizar acciones “push” al estilo comet… También ofrecen
dentro de la librería javascript un conjunto de funciones de utilidad para manejar los
objetos HTML / JS en cliente / navegador. Y parece que también están trabajando en
integrarse con algunos frameworks de componentes de interfaz de usuario como Dojo o
Yahoo YUI .

En mi opinión hay otros frameworks / especificaciones que ofrecen una solución

completa cubriendo el ciclo de peticiones en servidor (como por ejemplo JSF), pero
para algo rápido, sencillo y fácil merece la pena… y si finalmente se integran con
alguno de los frameworks de componentes gráficos que hemos dicho antes no habría
que perderles la pista…