¡Bienvenidos a todos! Esta publicación formará parte de una serie de 13 publicaciones que estaré desarrollando para aprender a desarrollar una aplicación web pura en Java bajo la plataforma JEE usando Servlets y JSPs. Este será un curso en forma de guía para aquellas personas que recién estén empezando en el mundo de la programación web y que todavía no hacen uso de ningún framework.
Haciendo uso de JSPs y Servlets construiremos nuestras aplicaciones webs los cuales se ejecutarán en Apahe Tomcat (Contenedor de Servlets), el cual lo usaremos como servidor de aplicaciones para ejecutar nuestro proyecto. Asimismo, usaremos Eclipse como herramienta IDE (Entorno de Desarrollo Integrado) para la edición y compilación de nuestro código.
Haciendo uso de JSPs y Servlets construiremos nuestras aplicaciones webs los cuales se ejecutarán en Apahe Tomcat (Contenedor de Servlets), el cual lo usaremos como servidor de aplicaciones para ejecutar nuestro proyecto. Asimismo, usaremos Eclipse como herramienta IDE (Entorno de Desarrollo Integrado) para la edición y compilación de nuestro código.
Clase 9a
Recordando un poco, sabemos que Ajax permite realizar cambios sobres las páginas sin necesidad de recargarlos. Con el uso de la librería DWR podemos acceder mediante código Javascript a la funcionalidad de nuestras clases Java y manipular las páginas webs con el resultado. No es necesario desarrollar Servlets sino que podemos acceder directamente a los métodos de nuestros DAOs con tan solo definir un archivo xml. Otra cosa que debemos de saber de esta librería es que esta más orientado a la integración y no tanto a la parte gráfica; por lo que, podemos utilizarlo con otras librerías como Jquery para enriquecer las interfaces.
Mi primer proyecto Ajax usando DWR 2
1. Importamos el siguiente proyecto que les dejaré, el cual ya tiene preparada las clases java y los daos. Clic aquí para descargar.
Si lo ejecutamos veremos unas interfaces, las cuales serán cargadas cuando invoquemos a los métodos de los daos; y para ello usaremos Ajax DWR.
El primer ejemplo carga la información del vendedor ingresando su código.
El segundo ejemplo carga la información de la Sede ingresando su código.
El tercer ejemplo carga los productos en una lista al cargar la página.
El cuarto ejemplo es un abigeo que carga los departamentos en una lista, al seleccionar un departamento cargará las provincias de éste en otra lista y al seleccionar una provincia cargará sus distritos.
2. Descargamos la librería dwr.jar. (Clic aquí para descargar.) y lo copiamos dentro de la carpeta /WEB-INF/lib/.
3. Registramos el servlet que atiende los requerimientos de Ajax DWR en el archivo descriptor web.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <? xml version = "1.0" encoding = "UTF-8" ?> xmlns = "http://java.sun.com/xml/ns/javaee" xmlns:web = "http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id = "WebApp_ID" version = "2.5" > < display-name >LP2-Semana08b - AJAX DWR2</ display-name > < welcome-file-list > < welcome-file >principal.jsp</ welcome-file > </ welcome-file-list > <!-- Registramos el servlet DWRServlet --> < servlet > < servlet-name >dwr-invoker</ servlet-name > < servlet-class >uk.ltd.getahead.dwr.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 > |
DWR internamente esta basado en Servlets, en otras palabras gracias a DWR no necesitamos implementar nuestros servlets sino solo necesitamos clases Java (POJO).
4. Creamos el archivo dwr.xml dentro de la carpeta /WebContent/WEB-INF/ donde crearemos nuestras funciones javascript que invocarán a los métodos de nuestras clases java.
5. Para los 2 primeros ejercicios de búsqueda creamos el archivo ajaxDWRBusqueda.js dentro de /WebContent/js/ e implementamos las siguientes funciones.
La función javascript buscarVendedor() obtiene el código que hemos ingresado en la caja de texto, luego invoca al método obtenerPorPK de la clase MySqlVendedorDAO.java a través de la función VendedorService() definida en el archivo que creamos dwr.xml. luego recupera los datos y mediante la función muestraData() setea los campos con los datos obtenidos. Es el mismo procedimiento para la función buscaSede().
6. Modificamos la página ejemploAjaxBusquedaDWR.jsp, importamos el js que creamos ajaxDWRBusqueda.js incluído los de dwr.xml (Note como llamamos a VendedorService.js y SedeService.js) es por el uri-mapping del servlet definido en el web.xml >>> /dwr/* debe ir primero dwr/ y las otras 2 propias de dwr son necesarias
Llamamos a las funciones
Ejecutamos y comprobamos el resultado
4. Creamos el archivo dwr.xml dentro de la carpeta /WebContent/WEB-INF/ donde crearemos nuestras funciones javascript que invocarán a los métodos de nuestras clases java.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | < dwr > < allow > <!-- Se registram los beans --> < convert converter = "bean" match = "demo.recursos.beans.BeanVendedor" /> < convert converter = "bean" match = "demo.recursos.beans.BeanSede" /> < convert converter = "bean" match = "demo.recursos.beans.BeanUbigeo" /> < convert converter = "bean" match = "demo.recursos.beans.BeanProducto" /> <!-- Se registran los daos y metodos accesibles mediante javascript --> < create creator = "new" javascript = "VendedorService" class = "demo.accesoDatos.MySqlVendedorDAO" > < include method = "obtenerPorPK" /> </ create > < create creator = "new" javascript = "SedeService" class = "demo.accesoDatos.MySqlSedeDAO" > < include method = "obtenerPorPK" /> </ create > < create creator = "new" javascript = "UbigeoService" class = "demo.accesoDatos.MySqlUbigueoDAO" > < include method = "traerDepartamentos" /> < include method = "traerProvincias" /> < include method = "traerDistritos" /> </ create > < create creator = "new" javascript = "ProductoService" class = "demo.accesoDatos.MySqlProductoDAO" > < include method = "listarTodos" /> </ create > </ allow > </ dwr > |
5. Para los 2 primeros ejercicios de búsqueda creamos el archivo ajaxDWRBusqueda.js dentro de /WebContent/js/ e implementamos las siguientes funciones.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | function buscaVendedor(){ var codigo = document.getElementById( "txtCodigo" ).value; VendedorService.obtenerPorPK(muestraData,codigo); } function muestraData(data){ document.getElementById( "txtNombre" ).value = data.nombre; document.getElementById( "txtEdad" ).value = data.edad; document.getElementById( "txtDistrito" ).value = data.distrito; document.getElementById( "txtEstado" ).value = data.estadoCivil; limpiar(); foco(); } function foco(){ document.getElementById( "txtCodigo" ).focus(); } function limpiar(){ document.getElementById( "txtCodigo" ).value= "" ; } function buscaSede(){ var codigo = document.getElementById( "txtSede" ).value; SedeService.obtenerPorPK(muestraSede,codigo); } function muestraSede(data){ document.getElementById( "txtNombreSede" ).value = data.nombre; document.getElementById( "txtDireccion" ).value = data.direccion; document.getElementById( "txtFecha" ).value = data.fecha; document.getElementById( "txtGerente" ).value = data.gerente; document.getElementById( "txtDistritoSede" ).value = data.distrito; } |
La función javascript buscarVendedor() obtiene el código que hemos ingresado en la caja de texto, luego invoca al método obtenerPorPK de la clase MySqlVendedorDAO.java a través de la función VendedorService() definida en el archivo que creamos dwr.xml. luego recupera los datos y mediante la función muestraData() setea los campos con los datos obtenidos. Es el mismo procedimiento para la función buscaSede().
6. Modificamos la página ejemploAjaxBusquedaDWR.jsp, importamos el js que creamos ajaxDWRBusqueda.js incluído los de dwr.xml (Note como llamamos a VendedorService.js y SedeService.js) es por el uri-mapping del servlet definido en el web.xml >>> /dwr/* debe ir primero dwr/ y las otras 2 propias de dwr son necesarias
1 2 3 4 5 | <script src= "js/ajaxDWRBusqueda.js" ></script> <script src= "dwr/interface/VendedorService.js" ></script> <script src= "dwr/interface/SedeService.js" ></script> <script src= "dwr/engine.js" ></script> <script src= "dwr/util.js" ></script> |
Llamamos a las funciones
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | < body leftmargin = "0" topmargin = "0" rightmargin = "0" bottommargin = "0" marginheight = "0" marginwidth = "0" > < jsp:include page = "menu.jsp" /> < br > < table class = "texto" > < tr > < td >Ingrese el codigo de un Vendedor</ td > </ tr > < tr > < td >Teclee aqui:</ td > < td >< input type = "text" id = "txtCodigo" name = "txtCodigo" onkeyup = "buscaVendedor();" ></ td > </ tr > < tr > < td >Nombre</ td > < td >< input type = "text" id = "txtNombre" readonly></ td > </ tr > < tr > < td >Edad</ td > < td >< input type = "text" id = "txtEdad" readonly></ td > </ tr > < tr > < td >Distrito</ td > < td >< input type = "text" id = "txtDistrito" readonly></ td > </ tr > < tr > < td >Estado Civil:</ td > < td >< input type = "text" id = "txtEstado" readonly></ td > </ tr > </ table > < br /> < table class = "texto" > < tr > < td colspan = "2" >Ingrese el código de una Sede</ td > </ tr > < tr > < td >Teclee aquuí:</ td > < td >< input type = "text" id = "txtSede" onkeyup = "buscaSede();" /></ td > </ tr > < tr > < td >Nombre:</ td > < td >< input type = "text" id = "txtNombreSede" disabled /></ td > </ tr > < tr > < td >Dirección:</ td > < td >< input type = "text" id = "txtDireccion" disabled/></ td > </ tr > < tr > < td >Fecha:</ td > < td >< input type = "text" id = "txtFecha" disabled/></ td > </ tr > < tr > < td >Ferente:</ td > < td >< input type = "text" id = "txtGerente" disabled/></ td > </ tr > < tr > < td >Distrito:</ td > < td >< input type = "text" id = "txtDistritoSede" disabled/></ td > </ tr > </ table > </ body > |
Ejecutamos y comprobamos el resultado
7. Para los 2 siguientes ejemplos creamos el archivo ajaxDWRSelector.js con las siguientes funciones.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | function cargaDepartamento(){ DWRUtil.removeAllOptions( "idDepartamento" ); UbigeoService.traerDepartamentos(muestraDataDepartamento); } function muestraDataDepartamento(data){ DWRUtil.addOptions( "idDepartamento" , data, "idDepartamento" , "departamento" ); } function cargaProvincia(){ DWRUtil.removeAllOptions( "idProvincia" ); var departamento = document.getElementById( "idDepartamento" ).value; UbigeoService.traerProvincias(muestraDataProvincia,departamento); } function muestraDataProvincia(data){ DWRUtil.addOptions( "idProvincia" , data, "idProvincia" , "provincia" ); document.getElementById( "idDepartamento" ).disabled = false ; } function cargaDistrito(){ DWRUtil.removeAllOptions( "idDistrito" ); var departamento = document.getElementById( "idDepartamento" ).value; var provincia = document.getElementById( "idProvincia" ).value; UbigeoService.traerDistritos(muestraDataDistrito,departamento,provincia); } function muestraDataDistrito(data){ DWRUtil.addOptions( "idDistrito" , data, "idDistrito" , "distrito" ); } // metodo para carga producto function cargaProducto(){ DWRUtil.removeAllOptions( "idProducto" ); ProductoService.listarTodos(muestraProducto); //listarTodos --> java } function muestraProducto(data){ DWRUtil.addOptions( "idProducto" , //id del combobox data, //la data "codigo" , //atributo del bean que llenara los values "nombre" ); //atributo del bean que llenara la descripcion } |
8. Modificamos la página ejemploAjaxSelector.jsp y de la misma manera agregamos los js creados.
1 2 3 4 5 6 7 8 | <!-- El que tiene que agregar las funciones --> < script src = "js/ajaxDWRSelector.js" ></ script > <!-- Segun los objetos que necesitas del dwr --> < script src = "dwr/interface/UbigeoService.js" ></ script > < script src = "dwr/interface/ProductoService.js" ></ script > <!-- Siempre se realizan estas llamadas --> < script src = "dwr/engine.js" ></ script > < script src = "dwr/util.js" ></ script > |
Llamamos a las funciones
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | < body onload = "cargaDepartamento();cargaProducto();" leftmargin = "0" topmargin = "0" rightmargin = "0" bottommargin = "0" marginheight = "0" marginwidth = "0" > < jsp:include page = "menu.jsp" /> < table class = "texto" > < tr > < td colspan = "2" >Seleccione el Combo</ td > </ tr > < tr > < td >Departamento</ td > < td > < select id = "idDepartamento" onchange = "cargaProvincia();" > < option value = "" >[Seleccione]</ option > </ select > </ td > </ tr > < tr > < td >Provincia</ td > < td > < select id = "idProvincia" onchange = "cargaDistrito();" > < option value = "" >[Seleccione]</ option > </ select > </ td > </ tr > < tr > < td >Distrito</ td > < td > < select id = "idDistrito" > < option value = "" >[Seleccione]</ option > </ select > </ td > </ tr > </ table > < table class = "texto" > < tr > < td colspan = "2" >Seleccione el Combo</ td > </ tr > < tr > < td >Productos</ td > < td > < select id = "idProducto" > < option value = "" >[Seleccione]</ option > </ select > </ td > </ tr > </ table > </ body > |
Ejecutamos y comprobamos el resultado.
Descargar ejercicio
Descargar archivo
No hay comentarios, ¡cuéntame algo!
Me gustaría saber tu opinión. ¡Saludos!