¡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
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.
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
7. Para los 2 siguientes ejemplos creamos el archivo ajaxDWRSelector.js con las siguientes funciones.
8. Modificamos la página ejemploAjaxSelector.jsp y de la misma manera agregamos los js creados.
Llamamos a las funciones
Ejecutamos y comprobamos el resultado.
Descargar ejercicio
Descargar archivo
No hay comentarios, ¡cuéntame algo!
Me gustaría saber tu opinión. ¡Saludos!