![[Digg!] este articulo](http://digg.com/img/badges/16x16-digg-guy.gif){kind=small}
![[StumbleUpon] este articulo](http://www.stumbleupon.com/images/stumbleit.gif)
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 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
- Lo primero es bajar DWR (http://getahead.org/dwr/download), basta bajar solo la librería (dwr.jar).
- 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:
< ?xml version="1.0" encoding="UTF-8"?>
< !DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web_app>
<display_name>dwrEasy</display_name>
<servlet>
<servlet_name>dwr-invoker</servlet_name>
<display_name>DWR Servlet</display_name>
<description>Direct Web Remoter Servlet</description>
<servlet_class>org.directwebremoting.servlet.DwrServlet</servlet_class>
<init_param>
<param_name>debug</param_name>
<param_value>true</param_value>
</init_param>
</servlet>
<servlet_mapping>
<servlet_name>dwr-invoker</servlet_name>
<url_pattern>/dwr/*</url_pattern>
</servlet_mapping>
</web_app>
- 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:
package com.soaagenda.services;
import com.soaagenda.valueobjects.*;
public class EasyService {
public EasyService() {
}
public EasyResponse getProducts(EasyParameter parametersX){
EasyResponse responseX= new EasyResponse();
// si parametros vacios devuelve error, error if empty parameters
if (parametersX==null || parametersX.getClientID()==null || parametersX.getClientID().length()< =0){
responseX.setErrorCode(10001);
responseX.setErrorDescription("Debe indicar ID Cliente. Give us Client ID");
return responseX;
}
//crea lista productos del cliente, fill the client product list
//para ejemplo en duro, for the example fixed data
Product[] productsListX= new Product[2];
Product productX= new Product();
productX.setBarCode("0001");
productX.setName("Tarjeta Visa, Visa Credit Card");
productsListX[0]= productX;
productX= new Product();
productX.setBarCode("0002");
productX.setName("Tarjeta American Express, American Express Credit Card");
productsListX[1]= productX;
//respuesta exitosa, sucessfull response
responseX.setErrorCode(0);
responseX.setErrorDescription("Consulta Banco Exitosa, Succesfull Bank Query");
responseX.setProducts(productsListX);
return responseX;
}
}
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).
- 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.
package com.soaagenda.valueobjects;
public class EasyParameter {
private String clientID;
private String productType;
public EasyParameter() {
}
public void setClientID(String clientID) {
this.clientID = clientID;
}
public void setProductType(String productType) {
this.productType = productType;
}
public String getClientID() {
return clientID;
}
public String getProductType() {
return productType;
}
}
EasyResponse.java: define la estructura para los resultados del servicio.
package com.soaagenda.valueobjects;
public class EasyResponse {
private int errorCode;
private String errorDescription;
private Product[] products;
public EasyResponse() {
}
public void setErrorCode(int errorCode) {
this.errorCode = errorCode;
}
public void setErrorDescription(String errorDescription) {
this.errorDescription = errorDescription;
}
public void setProducts(Product[] products) {
this.products = products;
}
public int getErrorCode() {
return errorCode;
}
public String getErrorDescription() {
return errorDescription;
}
public Product[] getProducts() {
return products;
}
}
Product.java: define la estructura de un producto.
package com.soaagenda.valueobjects;
public class Product {
private String barCode;
private String name;
public Product() {
try {
jbInit();
} catch (Exception ex) {
ex.printStackTrace();
}
}
private void jbInit() throws Exception {
}
public void setBarCode(String barCode) {
this.barCode = barCode;
}
public void setName(String name) {
this.name = name;
}
public String getBarCode() {
return barCode;
}
public String getName() {
return name;
}
}
- 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
< ?xml version="1.0" encoding="UTF-8"?>
< !DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<!-- define la clase de servicios que se va a publicar mediante DWR -->
<!-- defines the service class to share across DWR -->
<create creator="new" javascript="EasyService">
<param name="class" value="com.soaagenda.services.EasyService"/>
</create>
<!-- define las clases de datos que utiliza el servicio -->
<!-- defines the data classes to share across DWR -->
<convert converter="bean" match="com.soaagenda.valueobjects.*"/>
</allow>
</dwr>
- 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!!.
- 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
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Editable Table Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<script type='text/javascript' src='/dwrEasy/dwr/interface/EasyService.js'></script>
<script type='text/javascript' src='/dwrEasy/dwr/engine.js'></script>
<script type='text/javascript' src='/dwrEasy/dwr/util.js'> </script>
<script type="text/javascript" src='dwrEasyJS.js'> </script>
</head>
<body>
<h1>Easy DRW Demo</h1>
<h3>Buscar / Search</h3>
<table>
<tr>
<td>ID Cliente / Client ID:</td>
<td><input name="formClientID" type="text" id="formClientID" size="15"/></td>
</tr>
<tr>
<td>Tipo Producto / Product Type</td>
<td><input name="formProductType" type="text" id="formProductType" size="15"/></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="OK" onclick="javascript:submitProductsRequest()"/>
</td>
</tr>
</table>
<h3>Productos / Products</h3>
<p>Respuesta / Response:
<input name="serviceResponse" type="text" id="serviceResponse" size="50"/>
</p>
<table border="1">
<thead>
<tr>
<th>Codigo / BarCode</th>
<th>Nombre / Name</th>
</tr>
</thead>
<tbody id="myTable">
<tr id="myPattern" style="display:none">
<td>
<span id="codePattern">code example</span></td>
<td>
<span id="namePattern">name example</span></td>
</tr>
</tbody>
</table>
</body>
</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
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.
- Lo que sigue es
la librería Javascript propia.
dwrEasyJS.js
function submitProductsRequest() {
var idX=dwr.util.getValue("formClientID");
var typeX=dwr.util.getValue("formProductType");
var parametersX={clientID:idX,productType:typeX};
EasyService.getProducts(parametersX,showProducts);
}
function showProducts(responseX) {
// borro filas excepto el patron, delete rows except pattern row
dwr.util.removeAllRows("myTable", { filter:function(tr) { return (tr.id != "myPattern");}});
if (responseX.errorCode!=0){
alert('Error: '+responseX.errorDescription);
return;
};
var productsX=responseX.products;
var lengthX=productsX.length;
var itemProductX;
if (lengthX==0){
alert('No hay productos, Cant find products');
return;
};
dwr.util.setValue("serviceResponse", responseX.errorDescription);
var id="00";
for (var i=0 ; i<lengthx ; i++)
{
temProductX= productsX[i];
id="00"+i;
dwr.util.cloneNode("myPattern", { idSuffix:id });
dwr.util.setValue("codePattern" + id, itemProductX.barCode);
dwr.util.setValue("namePattern" + id, itemProductX.name);
$("myPattern" + id).style.display = "";
}
}
- 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.
- The End
