uso de select en dwr (ajax java) en tomcat

 A menudo es necesario desplegar un menú; de opciones de forma dinámica , cuando se está usando DWR (ajax para java) esta tarea se simplifica bastante bastante.

Vamos a centrar de forma especifica en el tema del select, se supone que se tiene un conocimiento de DWR y como funciona conectando el backend con el frontend y permitiendo pasar datos desde una base datos para ser desplegados desde el front mediante el select.

Todo se hace en java script y htlm, ( teniendo  luego instaladas la libreias DWR.

algo como lo siguiente.

<!-- Al activar el DWR se debe re-iniciar tomcat para que tome el handler dwr -->

   <script src="<%=pageContext.getServletContext().getContextPath()%>/dwr/engine.js"></script>

   <script src="  <%=pageContext.getServletContext().getContextPath()%>/dwr/interface/ejemploHandler.js"></script>

   <script src="<%=pageContext.getServletContext().getContextPath()%>/dwr/util.js"></script>

Y tener parametrizado el archivo de configuración de dwr en 

../../WEB-INF/dwr.xml

Algo como lo siguiente:

-------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
     "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
     "http://getahead.org/dwr/dwr30.dtd">

<dwr>

  <allow>

    <create  creator="new" javascript="ejemploHandler" scope="session">
      <param name="class" value="dwr.ejemplo.EjemploHandler"/>
    </create>
  

    <convert converter="bean"
             match="dwr.ejemplo.**"/>

      <convert converter="collection"
             match="java.util.Collection"/>

    <convert match="java.lang.Exception" converter="exception">
       <param name='include' value='message,lineNumber'/>
    </convert>

    <convert match="java.lang.StackTraceElement" converter="bean"/>

 </allow>

</dwr>

En este ejemplo vamos a traer un set de referencias de productos con sus respectivos código
se supone que existe en el backend un función denominada ReferenciassID() que iteractúa
con la base de Datos y no trae la información con formato json del par referenciaId y referencia
nombre. y mediante el arreglo json c={referenciaI=""} en este caso y definido en el backend le
pido que muestre todos los productos disponibles.
-------------------------------------------------------------------------------------------------------

Con esto ya funcionado podemos hacer uso de las librerias DWR, entre otras la librería de

utilidades que tiene la función select , que vamos a utilizar.

<html>

  <head>

 <script src="<%=pageContext.getServletContext().getContextPath()%>/dwr/engine.js"></script>

   <script src="  <%=pageContext.getServletContext().getContextPath()%>/dwr/interface/ejemploHandler.js"></script>

   <script src="<%=pageContext.getServletContext().getContextPath()%>/dwr/util.js"></script>

  </head>

  <script>

function Referencias(seleccion)

    {

     referenciaSelect = seleccion                   ;

     var c = {

                   referenciaId : ""

                 }                                                  ;

                                                                    ;

        ejemploHandler.ReferenciasID( usuarioDB,

                                                            c,

                                                           ReferenciasMostrar

                                                            )                            ;

    }


 function ReferenciasMostrar(referenciaInfo)
    {
      // ReferenciaId() no pasa un arreglo JSON con id y nombre que guardamos
      // en el arreglo opcionsR , pasarlo al select en forma de value, text
      //  opcionesR[p.referenciaId] es el value
      //  = p.referenciaNombre le asigna el texto que va a deplegar.
      // en la funcion paso el parametro que identifica el nombre del select que va
      // invocar la función que dispara el proceso Referencias().

      var p            = ""                                     ;
      var opcionesR = {};

      var sel = dwr.util.getValue(referenciaSelect)                 ;
      dwr.util.removeAllOptions(referenciaSelect)                ;

           for ( i = 0 ; i < referenciaInfo.length ; i++)
              {

               p = referenciaInfo[i]                                               ;
               opcionesR[p.referenciaId] = p.referenciaNombre ;
              }

           dwr.util.addOptions(referenciaSelect, opcionesR)    ;
           dwr.util.setValue(referenciaSelect, sel )                    ;

    }
 </script>

<!-- Defino el select que necesita desplegar en Html -->

      <label class="mostrar"  for="referenciaItems" > *Referencia </label>

      <select

             id="referenciaItems"

             <!-- El onclick lanza la funcion Referencias previamente definida en javascript

                    y despliega el menú del select

                    Pasamos como parámetro a Referencias el Id del select , en este caso ReferenciaItems 

             -->

             onclick="Referencias('referenciaItems')"

    >

    <option value="" disabled selected hidden >Elija referencia</option>

    </select>

   </html>









Comentarios

Publicar un comentario

Entradas populares