Contacto

Nos puedes enviar un artículo a publicar (si te fue útil, seguro que a otros también).
Nos puedes sugerir temas/profundidad de interés.
correo-e - perfil

Busquedas

Ajax en java - un ejemplo con dwr

 En el artículo anterior (Ajax en java - dwr) se configuró el framework DWR en un proyecto web.
 Continuando con la introducción a dwr, vamos a ver algunas acciones que pueden ser comunes en un proyecto web, como ser:
   Ejecutar (por ajax) un método con parámetros en el servidor (esto lo hacemos usando dwr).
   Acceder a un objeto en sesión con dwr.
   Desde el servidor, retornar al cliente un array de String .
   En el cliente, cargar un combo usando funciones javascript de dwr.
  Para el ejemplo, asumimos que:

  1) DWR está configurado y funciona correctamente en el proyecto (Ajax en java - dwr).
  2) Existe en sesión un objeto del tipo HashMap con el nombre "ciudadesXpais". 
     En el key del Map se guarda la clave de un país, y en al array se guardan las ciudades para ese país.

 En el código (bajar ejemplo), hay una página ciudad.jsp, en que montamos un combo estático con países. Al seleccionar un país del combo, se hace una llamada usando ajax (dwr) a un método, el cual acepta como parámetro el código del país, y retorna un array con las ciudades (obteniendo las ciudades de un objeto en la sesión). Este array de ciudades se usa para cargar otro combo.

 Se ve fácil ... pasemos al código.

  Acceder a un objeto en sesión con dwr
    En la clase java a la cual se quiere acceder desde el cliente por medio de ajax, se tiene que obtener el objeto del tipo WebContext:
     WebContext wctx = WebContextFactory.get();

 Este objeto tiene varios métodos, como ser "getSession" para obtener la sesión, y "getHttpServletRequest" para obtener el request.
     HttpSession session = wctx.getSession(); // obtiene la sesión

   Muy sencillo. A continuación, el método al que se llama desde la página, para obtener la lista con el que se completa el combo. La lista de ciudades se encuentra en la sesión.

     fragmento de código en: CiudadAjx.java
 public String[] getCiudadesXPais(String pais) {
   String[] ciudades = null;
   // obtengo el web context, y de aqui la sesion
   WebContext wctx = WebContextFactory.get();        
   HttpSession session = wctx.getSession();
   try {
           // obtengo el hasmap de las ciudades por pais de la sesion
          Map<String, String[]> ciudadesXpais = (HashMap<String, String[]>)   session.getAttribute("ciudadesXpais") ;
          ciudades = ciudadesXpais.get(pais);
      } catch (Exception ex) { /* manejar error*/ }
    return ciudades;
 }

Configurar dwr.xml
  Como parte de la configuración, se tiene que agregar los datos de las clases a las que se accede desde javascript. Para el código anterior, se tiene que incluir:
      fragmento de código en: dwr.xml
  <create creator="new" javascript="CiudadJS">
    <param name="class" value="dwrjs.CiudadAjx"/>
    <include method="getCiudadesXPais" />
  </create>

 Ejecutando métodos con parámetros desde javascript / dwr.
  La forma de llamar a los métodos en el servidor (como se describió en el artículo anterior) es:
   NombreBibliotecaJavascript.nombreMetodo(arg_1,...,arg_n, nombreMetodoCallBack)

  En nuestro ejemplo, el nombre para la biblioteca de javascript y el nombre del metodo son: CiudadJS y getCiudadesXPais (ver dwr.xml). La función getCiudadesXPais tiene un único argumento. Por lo tanto, desde una función javascrip tendríamos:

     CiudadJS.getCiudadesXPais(codigoPais, crearComboCiudades);

     En donde, "codigoPais" es el String que se pasa al método getCiudadesXPais de la clase CiudadAjx.java, y "crearComboCiudades" es el método javascript que se ejecuta cuando retorna la respuesta del servidor.

  Recordar que se tiene que importar la biblioteca creada por dwr (configurado en dwr.xml):
  <script type='text/javascript'  src='/DWREjemplo/dwr/interface/CiudadJS.js'>
  </script>

 Cargar un combo usando DWR.
   La biblioteca "util" de dwr ( hay que importarlo en la página:
    <script type='text/javascript' src='/DWREjemplo/dwr/util.js'></script> ) tiene varias funciones para el manejo de etiquetas.

   Usamos las siguientes funciones para trabajar con los combos:
      dwr.util.addOptions("ciudad", datosRetorno);  // agrega cada elemento de la lista "datosRetorno", al combo con id "ciudad"
      dwr.util.addOptions("ciudad", [{key:'""', value:'Seleccionar elemento'}], "key", "value"); // al combo con id "ciudad", se agrega un elemento con clave "" y valor a mostrar "Seleccionar elemento"
      dwr.util.removeAllOptions('ciudad'); // elimina todos los elementos del combo con id "ciudad"
      dwr.util.byId("ciudad").disabled = true; // habilita ( y deshabilita) la etiqueta con id "ciudad"

 Se podría tener la siguiente función de javascript para cargar el combo:
    function crearComboCiudades( datosRetorno) {                
       if( datosRetorno != null){                 
          dwr.util.removeAllOptions("ciudad");                    
          dwr.util.addOptions("ciudad", datosRetorno);
       }
       else{
          dwr.util.removeAllOptions('ciudad');
          dwr.util.addOptions("ciudad", [{key:'""', value:'Sin Datos'}], "key", "value");
       }
   }

 El ejemplo completo (y con el único objeo de funcionar como prueba de concepto), con fuentes y el war a ejecutar esta disponible en:  bajar ejemplo
 Es un proyecto netbeans. En la página ciudad.jsp se carga (si no existe) el HashMap necesario . 

No hay comentarios: