Escolar Documentos
Profissional Documentos
Cultura Documentos
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.
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 sourceprint?
01.< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04. <title>Editable Table Demo</title>
05. <meta http-equiv="Content-Type" content="text/html; charset=us-
ascii" />
06. <script type='text/javascript'
src='/dwrEasy/dwr/interface/EasyService.js'></script>
07. <script type='text/javascript'
src='/dwrEasy/dwr/engine.js'></script>
08. <script type='text/javascript' src='/dwrEasy/dwr/util.js'>
</script>
09. <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" size="15"/></td>
24. </tr>
25. <tr>
26. <td colspan="2" align="right">
27. <input type="button" value="OK"
onclick="javascript:submitProductsRequest()"/>
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 sourceprint?
01.function submitProductsRequest() {
02. var idX=dwr.util.getValue("formClientID");
03. var typeX=dwr.util.getValue("formProductType");
04.
05. var parametersX={clientID:idX,productType:typeX};
06.
07. EasyService.getProducts(parametersX,showProducts);
08.
09. }
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.
cientemente acabo de terminar unas pruebas usando DWR (Direct Web Remoting).
DWR es un proyecto open source (ASL 2.0) que facilita el uso de AJAX en una aplicación web basada
en Java server-side.
DWR está compuesto principalmente por dos partes:
• Clases Java que permiten que código JavaScript recupere datos desde un servlet-container,
usando los principios AJAX.
• Una biblioteca JavaScript que facilita al desarrollador el actualizar dinámicamente la página
web con los datos recuperados desde el servlet-container.
Lo que considero más “novedoso” de DWR es que genera dinámicamente código JavaScript basado en
clases Java. Esto permite al desarrollador usar código Java desde JavaScript como si este fuese local al
web-browser, cuando en realidad el código Java se ejecuta en el servidor. Este enfoque es una
alternativa interesante al uso de RMI o SOAP.
La “aplicación” de prueba que hice, está basada en Spring (1.2.1) , Hibernate (3.0.5) y DWR (0.8.5, al
momento de escribir este post la versión más reciente es la 1.0RC1 - el proyecto está bien activo).
La aplicación muestra los datos de una tabla Oracle de forma paginada y permite visualizar el detalle
de cada fila, tanto la paginación como la visualización del detalle se hace vía AJAX (la página web se
actualiza dinámicamente).
Cree un bean en Spring (subclase de HibernateDaoSupport) que implementa dos métodos principales:
• Uno que realiza un query “paginado” (el query recupera de la base de datos una cantidad de
datos fija, a partir de un desplazamiento). Este query es óptimo en el sentido en que solo se
recuperan de la base de datos las filas necesarias, y no como hacen algunos proyectos
(displayTag, ValueList, etc) que fallan cuando la tabla tiene una gran cantidad de filas, ya que
por lo general estos proyectos o recuperan TODOS los datos y luego paginan este resultado o
están basados en features como Scrollable Resultsets (que no siempre está disponible en el
driver JDBC que se use) donde por ejemplo ir al último registro es extremadamente “costoso”
en recursos, ya que igualmente se hace scroll a través de TODA la data.
• El otro método permite recuperar un objeto dado un primary key.
Luego de tener listo el bean, simplemente le indiqué a DWR que me hiciera “disponible” el bean vía
JavaScript, y voilâ! , ya podia acceder desde JavaScript en mi jsp a los métodos del bean.
A DWR todavía le faltan algunas cosas (por lo menos hasta la 0.9 que fue la última que revisé) por
ejemplo, no soporta la ejecución de métodos en el bean que estén definidos con parámetros que son
interfaces (lo cual rompe el patrón de programar orientado a interfaces). Aunque se que ya están
trabajando en ello, como dije el proyecto está bien activo.
DWR - Easy Ajax for JAVA DWR - Ajax fácil para Java
DWR version 3.0.rc1 is the most recent development release. DWR version 2.0 is the current stable
release. Download them now and use DWR in your website in minutes . versión 3.0.rc1 DWR es el
desarrollo más reciente lanzamiento. DWR la versión 2.0 es la versión estable actual. Descárgalos
ahora y el uso de DWR en su sitio web en cuestión de minutos .
DWR will generate the JavaScript to allow web browsers to securely call into Java code almost as if
it was running locally. DWR generará el JavaScript para permitir a los navegadores web para llamar
de forma segura en el código Java como si se ejecutan localmente. It can marshal virtually any data
including collections, POJOs, XML and binary data like images and PDF files. Puede mariscal
prácticamente todos los datos, incluidas las colecciones, POJOs, XML y datos binarios como
imágenes y archivos PDF. All that is required is a security policy that defines what is allowed. Todo lo
que se requiere es una política de seguridad que define lo que está permitido.
With Reverse Ajax , DWR allows Java code running on a server to use client side APIs to publish
updates to arbitrary groups of browsers. Con inversa Ajax, DWR permite al código Java se ejecuta en
un servidor para utilizar las API de cliente de lado la publicación de cambios a grupos arbitrarios de los
navegadores. This allows interaction 2 ways - browser calling server and server calling browser .
Esto permite la interacción dos formas - servidor y servidor llamando llamando navegador
navegador. DWR supports Comet, Polling and Piggyback (sending data in with normal requests) as
ways to publish to browsers. DWR soporta Comet, votación y Piggyback (envío de datos en las
solicitudes normales) como medios para publicar en los navegadores.
DWR provides integration with Spring , Struts , Guice , Hibernate and others. DWR proporciona
integración con la primavera , Struts , Guice , Hibernate y otros.
DWR is Open Source, available under the Apache Software License v2 . DWR es de código abierto,
disponible bajo la licencia de software Apache v2 .
We would like to thank ... Nos gustaría dar las gracias ...
YourKit YourKit
YourKit is kindly supporting open source projects with its full-featured Java Profiler. YourKit es
amable apoyo a los proyectos de código abierto con todas las funciones de perfiles Java. YourKit, LLC
is the creator of innovative and intelligent tools for profiling Java and .NET applications. YourKit, LLC
es el creador de herramientas innovadoras e inteligentes para crear perfiles de aplicaciones Java y.
NET. Take a look at YourKit's leading software products: YourKit Java Profiler and YourKit .NET
Profiler . Echa un vistazo a los productos de software líderes de YourKit: YourKit Java Profiler y
Profiler YourKit NET. .
Atlassian Atlassian
Descargar DWR
The following download packages are available. Los paquetes de descarga están disponibles las
siguientes. If you are just getting started with DWR, the JAR download is probably the best place to
start. Si se acaba de empezar con DWR, la descarga JAR es probablemente el mejor lugar para
empezar. See the Getting Started Guide for instructions as to what to do with these downloads.
Consulte la Guía de inicio rápido para obtener instrucciones sobre qué hacer con estas descargas.
If you are upgrading from a previous version of DWR then you should read the upgrading instructions.
Si va a actualizar desde una versión anterior de DWR entonces usted debe leer la mejora de las
instrucciones.
Documentación Índice
On this site, there are a number of documents to help you get started with DWR: En este sitio, hay una
serie de documentos que le ayudarán a empezar a trabajar con DWR:
• The overview of what DWR does . La visión general de lo que se DWR .
• A basic getting started guide (Your first DWR page). Una base para empezar guía (página Sus
DWR primero).
• An introduction to writing JavaScript that calls DWR (Your second DWR page). Una
introducción a la escritura de JavaScript que llama a DWR (página Sus DWR segundo).
• Some examples to demonstrate basic functionality. Algunos ejemplos para demostrar la
funcionalidad básica.
• A page containing answers to common questions pulled from our mailing list . Una página que
contiene respuestas a preguntas comunes extraídos de nuestra lista de correo .
• A list of troubleshooting advice and common errors and how to fix them . Una lista de consejos
para solucionar problemas y errores comunes y cómo solucionarlos .
Outside of this site there is a growing collection of tutorials from around the web . Fuera de este sitio
existe una creciente colección de tutoriales de todo la web .