Creando una Aplicación J2EE con JSF y BD en

Java Server Faces (JSF)
NetBeans 5.5
Creando una Aplicación J2EE con JSF y
Base de Datos en NetBeans 5.5
Autor: Wilder López Meléndez1
[email protected]
Fecha: 28 de junio de 2007
I.- Introducción
Como analistas y programadores vamos desarrollando a diario nuestras habilidades para
resolver problemas usuales que se presentan en el desarrollo del software. Por cada problema
que se nos presenta pensamos distintas formas de resolverlo, incluyendo soluciones exitosas
que ya hemos usado anteriormente en problemas similares. Es así que a mayor experiencia
que tengamos, nuestro abanico de posibilidades para resolver un problema crece, pero al final
siempre habrá una sola solución que mejor se adapte a nuestra aplicación.
Por lo tanto, los patrones de diseño son soluciones exitosas a problemas comunes. Existen
muchas formas de implementar patrones de diseño. Los detalles de las implementaciones son
llamadas estrategias, es decir soluciones típicas de desarrollo. Hay patrones que abarcan las
distintas etapas del desarrollo; desde el análisis hasta el diseño y desde la arquitectura hasta la
implementación.
Un patrón es una solución comprobada para un problema en un contexto, cuanto más amplio
sea el contexto, más amplio será el campo de aplicación del patrón, en términos de software,
los patrones son esencialmente la destilación de la “sabiduría” obtenida por especialistas sobre
lo que funciona bien a la hora de especificar, diseñar e implementar software.
(GoF, que en español es la pandilla de los cuatro) desde luego que ellos no son los inventores
ni los únicos involucrados, pero ese fue luego de la publicación de ese libro que empezó a
difundirse con más fuerza la idea de patrones de diseño. El grupo de GoF clasificaron los
patrones en 3 grandes categorías basadas en su propósito:
Creacionales: Patrones creacionales tratan con las formas de crear instancias de objetos. El
objetivo de estos patrones es de abstraer el proceso de instanciación y ocultar los detalles de
cómo los objetos son creados o inicializados.
Estructurales: Los patrones estructurales describen como las clases y objetos pueden ser
combinados para formar grandes estructuras y proporcionar nuevas funcionalidades. Estos
objetos adicionados pueden ser incluso objetos simples u objetos compuestos.
Comportamiento: Los patrones de comportamiento nos ayudan a definir la comunicación e
iteración entre los objetos de un sistema. El propósito de este patrón es reducir el acoplamiento
entre los objetos.
La arquitectura Modelo-Vista-Controlador es un patrón de diseño clásico que es muy usado
en aplicaciones que requieren la habilidad de mantener múltiples vistas del mismo dato; es
decir, se usa para administrar la información y notificar algún cambio en la misma, por lo que su
funcionalidad está dirigida a un propósito común.
Utilizando este tipo de patrones conseguimos: más calidad, mejor mantenibilidad, perder el
miedo a empezar un proyecto desde cero, pero una de las cosas más importantes es la
normalización y estandarización del desarrollo de Software.
En este artículo vamos a ver un framework de desarrollo que sigue el patrón MVC. Los
frameworks son muy útiles ya que nos permiten no tener que reinventar la rueda cada vez. Es
decir el framework no sólo sigue el patrón, sino que me da unas directrices de trabajo, y nos da
gran parte del trabajo ya hecho.
Copyright © Wilder López M.
1
Java Server Faces (JSF)
NetBeans 5.5
JSF (Java Server Faces) es un framework de desarrollo basado en el patrón MVC (Modelo
Vista Controlador). Al igual que Struts, JSF pretende normalizar y estandarizar el desarrollo de
aplicaciones web. Hay que tener en cuenta JSF es posterior a Struts, y por lo tanto se a nutrido
de la experiencia de este, mejorando algunas sus deficiencias. De hecho el creador de Struts
(Craig R. McClanahan) también es líder de la especificación de JSF.
Vamos a crear una aplicación típica de mantenimiento de dos tablas relacionadas que me
permitan Crear un nuevo registro, modificarlo, eliminarlo y mostrar en una lista los registros de
las tablas.
Debo mencionar que realizar este tipo de aplicación por más sencilla que parezca sin utilizar un
framework demanda mucho tiempo su realización, obviamente respetando todas las reglas del
Patrón MVC, es decir crear una clase que me permita manejar la Base de Datos (Modelo),
crear un servlets (controlador) para controlar todas las transacciones, y finalmente los JSPs
(Vistas) que me permitirán mostrar los datos al usuario en formato HTML, en el área de
Desarrollo donde trabajo, desarrollamos estos tipos de aplicaciones, bajo este esquema.
II. Desarrollo de la aplicación JSF
Primero empezaremos definiendo nuestra Base de Datos que será como sigue:
Aquí observamos la relación de las tablas facultad a escuela, una facultad puede tener una o
muchas escuelas, esto lo vemos por que el campo (PK) Facultad.idfacultad a migrado a la tabla
Escuela.idfacultad como (FK).
Después de descargar el NetBeans 5.5 desde http://www.netbeans.org vamos a crear un
nuevo proyecto
Copyright © Wilder López M.
2
Java Server Faces (JSF)
NetBeans 5.5
Elegimos una aplicación Web (Web Application)
Copyright © Wilder López M.
3
Java Server Faces (JSF)
NetBeans 5.5
Elegimos el nombre el directorio de trabajo del NetBeans, esto para mi es fundamental,
siempre insisto con mis alumnos a prestar atención a ese cuadro de dialogo, por que aquí
defino donde se guardará mi proyecto.
Elegimos soporte para trabajar con el FrameWork JavaServer Faces - JSF
Copyright © Wilder López M.
4
Java Server Faces (JSF)
NetBeans 5.5
Ahora tendremos un entorno de trabajo de JSF, por defecto nos proporciona dos JSP
Vamos a conectarnos a la base de datos donde se encuentran nuestras tablas Facultad y
Escuela.
2.1. Conexión a la Base Datos en Forma Nativa
Para ello debemos utilizar los drives del motor de base de datos del que se esta utilizando,
para este ejemplo estamos utilizando SQL Server 2000, tengo los drivers en una carpeta, y es
necesario primero copiarlos a la carpeta src en la carpeta donde se esta grabando nuestro
proyecto. Para nuestro caso la ruta exacta es:
D:\DataWLM\Proyectos\Articulos\webJSF\src\java
Copiar la
carpeta lib,
a este lugar
Copyright © Wilder López M.
5
Java Server Faces (JSF)
NetBeans 5.5
Comprobamos si el paquete lib ya se muestra en nuestro proyecto.
Añadimos los .Jar al paquete Libraries, pulsando clic derecho sobre el paquete y seleccionando
la opción Add JAR/Fólder …
Seleccionamos la carpeta donde esta la carpeta lib que copiamos en el párrafo anterior y
empezamos a añadir uno a uno los componentes mbase.jar, mssqlserver.jar, msutil.jar,
sqljdb.jar
Copyright © Wilder López M.
6
Java Server Faces (JSF)
NetBeans 5.5
Finalmente debemos tener en el paquete Libraries todos los componentes añadidos.
Copyright © Wilder López M.
7
Java Server Faces (JSF)
NetBeans 5.5
Como ya tenemos los componentes para poder conectarse con el motor de Base de Datos,
pasemos hacer justamente eso. Para ello pulsamos clic en Runtime, Databases
Primero debemos crear el Driver, clic derecho New Driver, luego pulsamos clic en Add … y
añadiremos el Jar mssqlserver.jar
Ahora ya tenemos conectado el driver SQL Server 2000, pulsamos clic derecho Connect Using,
en esta ventana tenemos que colocar el servidor el puerto y la base de datos
“jdbc:microsoft:sqlserver://<HOST>:<PORT>[;DatabaseName=<DB>]”, en nuestro caso vamos
a utilizar lo siguiente: jdbc:microsoft:sqlserver://localhost:1432;DatabaseName=demo. Usuario y
clave “sa”
Copyright © Wilder López M.
8
Java Server Faces (JSF)
NetBeans 5.5
Cambiamos el HOST, PORT y DB
2.2. Conexión a la Base Datos Por medio del ODBC
También pueden conectarse a la Base de Datos por medio del Windows con ODBC, con esta
opción no necesitas tener los drivers del motor de la Base Datos, el Sistema Operativo se
encarga de hacer un puente entre el JDBC de java el Motor de BD. Seguramente te estarás
preguntando cual de las dos opciones es la ¿más adecuada y la más rápida?. La respuesta
es“, la primera opción”, conectarse por medio de los Drivers que es la forma Nativa del JDBC.
ODBC lo utilizamos con fines académicos, aparte de que esta amarrado al S.O Windows.
Para crear un ODBC debemos entrar al Panel de Control de Windows y seleccionar la opción
Herramientas Administrativas – Orígenes de datos (ODBC)
Copyright © Wilder López M.
9
Java Server Faces (JSF)
NetBeans 5.5
En esta cuadro de dialogo debemos agregar un origen de datos de usuario, pulsando clic en el
botón Agregar.
Seleccionamos el motor de base datos en nuestro caso SQL Server.
Copyright © Wilder López M.
10
Java Server Faces (JSF)
NetBeans 5.5
Ahora colocamos un nombre y seleccionamos la base de datos, de nombre pondremos
dbDemo, y como servidor (local) con esto levantamos la BD instalado en forma local.
Configuramos el modo de autentificación de la base de datos puedes probar con las dos
opciones autentificación de Windows o la autentificación de Sql Server, estas autentificaciones
depende de cómo configuraste el SQL Server, en mi caso seleccionaré la primera opción.
Seleccionamos la base de datos con la que trabajará, aquí seleccionamos la BD Demo.
Copyright © Wilder López M.
11
Java Server Faces (JSF)
NetBeans 5.5
Pulsamos clic en Finalizar y con esto ya tenemos creado nuestro DSN de usuario
Pulse clic en el botón probar origen de datos, si muestra la ventana de resultados de pruebas el
mensaje “PRUEBAS COMPLETAMENTE CORRECTAMENTE”, todo fue exitoso. Pulse aceptar
en todas la ventanas abiertas
Nos vamos al entorno de NetBeans 5.5, a la pestaña Runtime para conectarnos al ODBC que
hemos creado. Pulsar clic derecho en el Drriver JDBC-ODBC Bridge y elegimos la opción
Connect Using…
Copyright © Wilder López M.
12
Java Server Faces (JSF)
NetBeans 5.5
En esta ventana colocamos el nombre del ODBC que creamos anteriormente en el campo
Database URL, y pulsamos OK.
Si logramos conectarnos a la Base de Datos tendremos una ventana con las tablas existentes.
Pulse clic derecho sobre cualquier tabla y seleccione la opción View Data, para mostrar los
datos.
Copyright © Wilder López M.
13
Java Server Faces (JSF)
NetBeans 5.5
2.3. Creando el la aplicación Mantenimiento de las tablas Escuela y Facultad con JSF
1 Nos vamos a Project y pulsamos clic derecho en el proyecto webJSF del sub menú
seleccionamos New – Entity Classes from Database
Si les presenta un mensaje de que no puede crear clases entity en este Project, debemos subir
el nivel del origen de java a level 1.5, tal como se muestra en la figura
Para solucionar este problema, vamos a pulsar clic derecho sobre el proyecto y seleccionamos
la opción Properties, y cambiamos el Source Level a 1.5, con esto podremos crear una clase
de tipo Entity clases desde base de datos.
Copyright © Wilder López M.
14
Java Server Faces (JSF)
NetBeans 5.5
Repetimos el paso 1 y seleccionamos la base de datos en la opción Database Connection,
colocaremos la conexión jdbc:odbc:dbDemo que creamos anteriormente; con esto tendremos
cargado las tablas que en ella existe, trasladamos la tabla Escuela al lado derecho con el botón
Add >, automáticamente pasará la tabla Facultad porque se encuentra relacionado, finalmente
pulsamos el botón Next >
Escribimos un paquete llamado demo para agrupar las clases que se van autogenerar, también
debemos pulsar clic en el botón Create Persistente Unit, en el cuadro de dialogo pulsamos
create. Pulse clic en el botón finalizar para terminar
Copyright © Wilder López M.
15
Java Server Faces (JSF)
NetBeans 5.5
Nombre del
paquete a
crearse
Con esto tenemos dos clases creados de tipos persistentes, la clase Escuela y la clase
Facultad.
El código fuente de la clase Escuela.java
Copyright © Wilder López M.
16
Java Server Faces (JSF)
NetBeans 5.5
2. Ahora nos toca crear los JSF Pages a partir de las clases creadas, para ello pulsar clic
derecho sobre la carpeta Web Pages, seleccionamos del sub menú la opción New – JSP
Pages from Entity Class…
Seleccionamos las clases de donde se crearán los JSF, pulsando clic en el botón Add All >>,
pulsamos Next.
Copyright © Wilder López M.
17
Java Server Faces (JSF)
NetBeans 5.5
Nos aseguramos que el paquete sea demo Pulsamos clic en el botón finís.
Con esto hemos creado todos los JSF y los controladores que nos permitirán gestionar las
tablas escuela y facultad, como podrás observar, ahora tenemos dentro de Web Page los
paquetes escuela y Facultad, dentro de ellos tenemos los jsp’s Detail, Edit, List, y New que
incluyen en su código sentencias de JSF, a esto lo conocemos como las vistas, del M-V-C.
También contamos con dos clases EscuelaController y EscuelaConverter, la primera
representa al controlodor del M-V-C, la segunda sirve de enlace entre controladores. Las
clases creados en el punto 1 representan al modelo del M-V-C
Copyright © Wilder López M.
18
Java Server Faces (JSF)
NetBeans 5.5
Vamos a cambiar los datos que se encuentran en el index.jsp.
Por estos datos
Ejecutemos la aplicación pulsando clic derecho sobre el proyecto y seleccionando la opción
Run Project del menú contextual.
Copyright © Wilder López M.
19
Java Server Faces (JSF)
NetBeans 5.5
Pulsando clic en el link Mantenimiento de facultad tenemos la lista de facultades con los
botones de New, Edit Destroy
Si seleccionamos la opción Edit, podremos editar los datos de la fila seleccionada pulsando clic
en Save guardaremos los datos, todo esto es administrado por FacultadController.java por
medio de los Beans creados.
Copyright © Wilder López M.
20
Java Server Faces (JSF)
NetBeans 5.5
Tenemos los datos cambiados y un mensaje enviado por el Controlador
Lo mismo observamos con mantenimiento de escuela.
Copyright © Wilder López M.
21
Java Server Faces (JSF)
NetBeans 5.5
Para crear una nueva escuela pulsamos New Escuela
Podemos definir la cantidad de registros a mostrar en la lista, entrando a la clase
EscuelaController.java, y allí cambiamos la variable batchSze = 5;
Validación en JSF
JSF traen validación que se pueden hacer a campos de ingreso, de tal forma que no tengas
que programar la validación de la misma. Analicemos New.jsp del paquete Facultad.
Copyright © Wilder López M.
22
Java Server Faces (JSF)
NetBeans 5.5
Para validar el campo de ingreso de datos sea obligatorio bastará con poner la propiedad
required=”true”. Para validar la longitud del ingreso de un campo tenemos que utilizar la
etiqueta <f:validateLength …
Para validar un rango de ingreso de datos, como por ejemplo [0-1500]
Con esto también estamos validando que el dato ingresado sea de tipo Entero.
Copyright © Wilder López M.
23
Java Server Faces (JSF)
NetBeans 5.5
Observemos ahora el archivo faces-config.xml
Este fichero es donde configuramos JSF. Es como el “pegamento” que une modelo, vista y
controlador. En este fichero por un lado declaramos los beans que vamos a utilizar para
recoger la información de los formularios, y por otro lado las reglas de navegación.
Copyright © Wilder López M.
24
Java Server Faces (JSF)
Copyright © Wilder López M.
NetBeans 5.5
25
Java Server Faces (JSF)
Copyright © Wilder López M.
NetBeans 5.5
26
Java Server Faces (JSF)
NetBeans 5.5
III. Conclusiones.
Como habrán notado no tuvimos que trabajar con HttpSession. HttpRequest, como tienen los
servlets, pero esto no es necesario en JSF.
Hemos trabajado generando las cosas a partir de una tabla de BD, y luego metimos mano en el
código para darle forma y validaciones, esto es fastidioso para alguno desarrolladores que
vienen de Microsoft.
Existen Entornos que nos permiten trabajar directamente los datos del diseño, tal como lo hace
Swing, NetBeans cuenta con el Visual Web Aplicattion, también existe el jCreator que tren
incluido el Framework JSF.
Los Frameworks nos ahorran tiempo a la hora de desarrollar una aplicación WEB, pero
debemos comprender también que quedamos atados al mismo.
Es muy importante tener definidos nuestra bases de datos a la hora de desarrollar aplicaciones
Web, también es importante trabajar en forma nativa con la conexión.
Queda como parte de Ud. Investigar más sobre este Frameworks para ir probando su
productividad, estoy seguro que los nuevos desarrolladores lo adoptarán sin ningún
inconveniente
En nuestro país el Framework más utilizado es el Struts, y migrar a otro demanda muchos
recursos económicos y tiempo, algo que las empresas no están dispuestos a invertir.
1
Acerca del Autor
•
•
•
•
•
!
$
*
.
%& '
&+ '
/0 1
3 4 5. *
Copyright © Wilder López M.
(
(
" #
!
,
,
)
!
" #
.
2
27