Creando una Aplicación J2EE con JSF y Base de …geocities.ws/wlopezm/articulos/j2ee_jsf.pdf ·...

27
Java Server Faces (JSF) NetBeans 5.5 Copyright © Wilder López M. 1 Creando una Aplicación J2EE con JSF y Base de Datos en NetBeans 5.5 Autor: Wilder López Meléndez 1 [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.

Transcript of Creando una Aplicación J2EE con JSF y Base de …geocities.ws/wlopezm/articulos/j2ee_jsf.pdf ·...

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 1

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 2

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

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 3

Elegimos una aplicación Web (Web Application)

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 4

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

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 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

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 6

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

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 7

Finalmente debemos tener en el paquete Libraries todos los componentes añadidos.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 8

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”

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 9

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)

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 10

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 11

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 12

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…

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 13

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 14

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 15

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

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 16

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

Nombre del paquete a

crearse

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 17

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 18

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

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 19

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 20

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 21

Tenemos los datos cambiados y un mensaje enviado por el Controlador

Lo mismo observamos con mantenimiento de escuela.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 22

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 23

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 24

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.

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 25

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 26

Java Server Faces (JSF) NetBeans 5.5

Copyright © Wilder López M. 27

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. 1Acerca del Autor

• �������������� ���������������������������� ������������������������������������

��������������������������������������• ������������������������ ����������������������� �!����"�#���������• $����������%&��'������( ���������������������������������� �!���)�����������

*������&+��'����������(������������������,����-��• .�� ����������������������,������� ������������������ �!����"�#�• �� ����/0 �1���� ���������� ����������� ������� ��� �� ����������.������ �� ������ 2�

3��4���5�.��*�