Tutorial:Combos dependientes con JSP, Ajax y Postgresql en Netbeans

Hola otra vez por aqui retomando el blog despues de un largo receso, como comprenderan con la familia y el trabajo se nos hace dificil a veces publicar algun post, pero bueno manos a la obra.

Este post es ha solicitud de unos compañeros que estan aprendiendo a trabajar con jsp, ajax y postgresql y necesitaban alguna guía práctica para trabajar la parte del llenado de combos de forma dependiente justamente utilizando ajax y obteniendo la data desde una base de datos.

Bueno, lo primero que debemos tener en cuenta es la estructura de tablas en la base de datos desde donde obtendremos la informacion. Para este ejemplo tome como ejemplo la siguiente estructura.

como podemos observar la base de datos se llama bd_tutorial y las tablas serian productos y detalle_producto respectivamente.

Una vez creado las tablas, ahora lo que hacemos es crear nuestro proyecto web al cual llamaremos webapp_ajaxDemo y comenzar armar nuestra estructura de archivos jsp, javascript y clases java, las cuales accederan a la informacion de la base de datos. Creamos el proyecto y generamos la siguiente estructura propuesta:

Ahora, lo que haremos sera ver como obtener la informacion de la base de datos, para esto vamos a trabajar nuestras clases java empezando por los beans en donde almacenaremos la informacion  y terminando por las clases  DAO , las cuales seran las que recogeran la informacion de la base de datos.  Lo primero es tener la estructura de los archivos productoBean.java y detalleProductoBean.java, mas o menos seria la siguiente:

Una vez detallada la clases Bean, ahora nos enfocamos en las clase BO y DAO, yo siempre hago esta distribucion para tener en cuenta el manejo de capas, esto ayuda mucho. Ahora veremos la estructura de la clase productoBo.java, aqui es donde definiremos los metodos que tendran acceso a los métodos de las clase DAO.

Los métodos que usaremos getProducto y getDetalleProducto los cuales nos devuelven como resultado un ArrayList de Beans esto con la finalidad de poder tener toda la informacion y poder seleccionar lo necesario. Ademas hacen referencia a métodos de las clases DAO la cuales ya tenemos definidas.

Ahora, veremos las estructuras y codificacion de las clases  que obtienen la información de la BD productoDao.java y detalleProductoDao.java respectivamente:

Para las clases productoDao.java y detalleProductoDao.java, por cuestiones de espacio solo estoy mostrando los métodos que acceden a la información, se asume que ustedes ya tienen definido los métodos de conexion y desconexion respectivamente.

productoDao.java:

detalleProductoDao.java:

Una vez ya completada la estructura y codificacion de las clases java, ahora pasaremos a codificar las paginas JSP, lo primero que haremos sera mostrar el primer combo que serian los productos, para esto mostraremos una parte de la codigo del archivo index.jsp la cual sufrira alguna moficiacion mas adelante, por el momento tenemos lo siguiente:

 

Fijemos en los recuadros de color rojo, en el primer recuadro lo que hago es importar la clase productoBo y productoBean, dado que en el primero se tiene el metodo que obtendria la informacion de los productos, y en el segundo recuadro es donde muestro los productos los cuales son almacenados en beans del tipo productoBean por eso la declaracion en el primer recuadro.

Deben tener en cuenta que en la linea de código en donde muestro el detalle del producto en la opcion value el combo se esta poniendo el id del producto, esto para que cuando mandemos el producto se tome el id para poder realizar la busqueda en el detalle y no el nombre del producto.

Ahora veremos la parte de AJAX, para esto tenemos un archivo javascript ajax_producto.js en el cual tendremos el siguiente código:

Vemos que estamos declarando la funcion getDetalleProducto al cual le estamos enviando como parametro id_pro, luego en la parte mas abajo vemos que hacemos la referencia a la pagina ajax_detalleProducto.jsp, que en la que recuperaremos la informacion de la tabla de detalles enviando como parametro el id_pro y ademas un identificador para hacer refresco a nuestras busquedas, esto por un problema en algunos navegadores con el manejo de su cache. Y la funcion resultado_detalle que es donde le indicamos donde mostrarnos el resultado.

Fijarse bien en esto ultimo ya que como veran estamos utilizando el identificador del elemento en donde pondremos el resultado que para este caso es result_detalle.

una vez terminado esto lo que haremos sera codificar la pagina que obtendra la informacion del detalle de producto, que en este caso es ajax_detalleProducto.jsp

Ahora solo nos queda adecuar la pagina index.jsp para que pueda hacerse la invocación, mostraremos el codigo segmentado por cuestiones de espacio.

En este primer segmento, podemos ver que aqui se hace la llamada a la libreria javascript ajax_producto.js la cual contiene a la función getDetalleProducto, fijense en el evento onchange del combo, alli es donde llamamos a la funcion que retornaria la informacion del detalle.

Ahora para el segundo segmento vemos el id=”result_detalle” que es el identificador que se utiliza para mostrar el combo con el detalle.

Y practicamente esto seria todo. Se debe tener en cuenta que esto se hizo de forma rápida solo para cuestiones de enseñanza, esto se puede mejorar notablemente tal vez utilizando algun framework como jQuery o mejorando el código propuesto. Espero les sea de utilidad para algunos que recien empiezan con esto

PD: Los errores ortográficos son aproposito.

Descarga el ejemplo: webapp_ajaxDemo (Ejemplo modificado para trabajar con 3 combos)