Ajax en java - dwr

 Ajax en java fácil usando DWR

  El objetivo de esta primera entrega, es hacer una breve introducción al framework DWR, y que esté instalado / configurado en nuestro proyecto web.

 Por medio de Ajax ( Asynchronous JavaScript and XML ), es posible transferir datos entre el el cliente (el navegador web) y el servidor en "background".
 Esto permite generar un comportamiento dinámico, sin cargar (o refrescar) todo el contenido de la pantalla. Como ejemplo sencillo, podemos imaginar un formulario en el cual hay un combo con una lista de países. Al hacer click en uno de los países, se carga otro combo con sus ciudades.
 Para esta sencilla tarea aparente, es necesario escribir 2 bloques de datos bien diferenciados:
  1) En el cliente: En javascript el código que captura la acción del usuario, envía al server los datos requeridos por esa acción, y espera la respuesta (de forma asincrónica) para generar el nuevo combo (o el comportamiento que corresponda).
  2) En el server escribir un servlet que captura la petición http, y retorne los datos al cliente.

 Bienvenido DWR
  DWR (Direct Web Remoting - http://directwebremoting.org/dwr) es un framework open source en java, que permite escribir aplicaciones AJAX, unicamente escribiendo código java en clases comunes (POJOS), sin necesidad de conocer detalles de ajax, como ser la forma de enviar objetos/datos por medio de javascript desde el cliente al servidor, la captura y lectura de la respuesta.
  De esta forma reducimos casi al mínimo el código nativo en javascript, y tampoco tenemos que escribir los servlets.
  DWR incluye un servlet principal que se tiene que configurar (funciona como controlador), y varias bibliotecas de javascrip necesarias por el propio framework, y que nos son útiles para diferentes tareas.

 Configurar dwr en pocas palabras :)
  Montar el framework en nuestros proyectos web, probablemente no podría ser mas fácil.

  Asumimos que tenemos un proyecto web (en el ejemplo se llama: "DWREjemplo"), y la biblioteca dwr.jar ( http://directwebremoting.org/dwr/download.html ).
    Nota: En los ejemplos usamos la versión estable 2.X. En el momento de escribir el artículo, está disponible también la versión 3 no estable .

 La configuración se puede hacer en dos archivos.
  En web.xml se configura el servlet que funciona como "controlador" en el framework.
  El otro archivo es dwr.xml, aquí se se indica varias configuraciones, como ser las clases java usadas y el nombre lógico con el que se accede a estas clases desde javascript (será el nombre de la libreria javascript a importar en las páginas). También se indica lo métodos a los que se puede acceder, tipos de datos personalizados...

  Básicamente, lo que hace el framework es convertir las clases java configuradas, en bibliotecas javascript. El nombre de la biblioteca es parte de la configuración que tenemos que hacer.

  1) Incluir la biblioteca de dwr al proyecto web (dwr.jar)
     Incluir las bibliotecas commons de apache ( http://commons.apache.org/ ). Algunos servidores ya incluyen estos jars. Puedes arrancar la aplicación, y si tienes algún mensaje del tipo: java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory, agregar commons-logging.jar (y los jars necesarios, según los mensajes).

  2) Agregamos la configuración del servlet de dwr. Para esto agregamos el siguiente contenido en el archivo web.xml.

    <servlet>
     <servlet-name>dwr-invoker</servlet-name>
     <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>

 3) En WEB-INF se crea el archivo dwr.xml.
 En el primer ejemplo, vamos a configurar una clase que llamamos: SaludoAjx (en el paquete dwrjs). En esta clase vamos a tener un método público "getSaludoSimple" que retorna un String. A esta clase, desde javascript, vamos a acceder con el nombre del objeto "SaludoJS".

     WEB-INF/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>
        <create creator="new" javascript="SaludoJS">
            <param name="class"
                   value="dwrjs.SaludoAjx"/>
            <include method="getSaludoSimple" />
        </create>
    </allow>
  </dwr>

 4) Creamos la clase y el método indicado en el paso anterior (la clase SaludoAjx en el paquete dwrjs, y el método getSaludoSimple)
    Esta clase tiene que tener el constructor por defecto sin argumentos.

   dwrjs.SaludoAjx.java
package dwrjs;
public class SaludoAjx {
  public String getSaludo()
    { return "Hola Mundo con DWR"; }
  }

 Ya tenemos configurado el ambiente, ahora, a probar si está funcionando.
 Ejecutamos el proyecto, y en el navegador vamos a la url: host:puerto/proyecto/dwr
 En mi caso: http://localhost:8080/DWREjemplo/dwr/index.html

 Si todo funciona bien, se nos presenta una página con las clases conocidas por DWR, en nuestro ejemplo:
   SaludoJS (dwrjs.SaludoAjx).
   Al hacer click en el link de la clase, se muestra otra página con los métodos disponibles.

   Nota: Para tener esta pantalla de test de dwr, es necesario que esté habilitado en la configuración del serlvet ( paso 2), el parámetro "debug".

 5) Vamos a crear una página sencilla, en el cuál hay un botón que, al hacer click, nos muestra el saludo (el texto desde el server)

     index.html
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type='text/javascript' src='/DWREjemplo/dwr/util.js'></script>
        <script type='text/javascript' src='/DWREjemplo/dwr/engine.js'></script>
        <script type='text/javascript' src='/DWREjemplo/dwr/interface/SaludoJS.js'></script>

        <script type="text/javascript">
            function cargarSaludo(){
                SaludoJS.getSaludo(setMsgSaludo); }

            function setMsgSaludo( strRetorno){
                divTxt=dwr.util.byId("txtDinamico");
                divTxt.innerHTML=strRetorno; }
        </script>
    </head>

    <body >
        <h1>Ejemplo DWR!</h1>
        <button onclick="cargarSaludo();" >Ver Saludo</button>
        <div id="txtDinamico" />
    </body>
</html>

 Descripción de la página
  a) En la etiqueta 'button', indicamos que al hacer 'click' llame a la función de javascript "cargarSaludo()"

 Dentro de la etiqueta "head"
  b) Las primeras 2 lineas cargamos bibliotecas necesarias por dwr (y nosotros)
  c) En la tercer linea importamos nuestra propia libreria SaludoJS.js
       notar la ruta de las bibliotecas, en las propias de dwr están de la forma:
          /proyecto/dwr/biblioteca.js, y las que corresponden a nuestras clases están de
          la forma:  /proyecto/dwr/interface/biblioteca.js

  d) Creamos la función de javascript "cargarSaludo()" (ejecutado al hacer "click" desde el botón).
    En nuestro caso particular, solo tenemos una línea:
          SaludoJS.getSaludo(setMsgSaludo);
    Lo que estamos haciendo es llamar en nuestra biblioteca (SaludoJS), el método que queremos ejecutar (getSaludo), y como parámetro, lo que indicamos
 es el método que se tiene que ejecutar cuando llegue la respuesta del servidor (aquí es donde aparece la "magia" de dwr, y nos abstraemos de todos los detalles de esta comunicación).
  
    En caso de que el método en nuestra clase tenga parámetros, primero se agregan los parámetros necesarios, y por último, el nombre del método a ejecutar al retorno del servidor.

 e) Se crea el método javascript "setMsgSaludo", con un parámetro, que va a contener los datos de la respuesta del servidor.
    Cuando se obtiene la respuesta del server (pto anterior), se ejecuta automáticamente este método, y se agrega como argumento la respuesta del servidor.
    En nuestro ejemplo, lo que hacemos es, al 'div' cuyo id es "txtDinamico", le agregamos directamente la respuesta del servidor.

  Como resultado, al hacer click, tendremos bajo el botón una linea con el texto: Hola Mundo con DWR

  Dejo el paquete con el proyecto de prueba (fuentes y war) bajar ejemplo DWR
  En la página oficial tienen muy buena documentación:  http://directwebremoting.org/dwr/index.html