Ejemplo de DWR

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 Application 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_class>
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 || parameters
X.getClientID().length()< =0){
14. responseX.setErrorCode(10001);
15. responseX.setErrorDescription("Debe indicar ID Cliente. Give us Cl
ient 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 Ca
rd");
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/d
wr20.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://www.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="formProductType" siz
e="15"/></td>
24. </tr>
25. <tr>
26. <td colspan="2" align="right">
27. <input type="button" value="OK" onclick="javascript:submitProductsRe
quest()"/>
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.i
d != "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.