Java Server Faces (JSF)                                                             NetBeans 5.5    Creando una Aplicación...
Java Server Faces (JSF)                                                           NetBeans 5.5JSF (Java Server Faces) es u...
Java Server Faces (JSF)                         NetBeans 5.5Elegimos una aplicación Web (Web Application)Copyright © Wilde...
Java Server Faces (JSF)                                                    NetBeans 5.5Elegimos el nombre el directorio de...
Java Server Faces (JSF)                                                       NetBeans 5.5Ahora tendremos un entorno de tr...
Java Server Faces (JSF)                                                         NetBeans 5.5Comprobamos si el paquete lib ...
Java Server Faces (JSF)                                                      NetBeans 5.5Finalmente debemos tener en el pa...
Java Server Faces (JSF)                                                         NetBeans 5.5Como ya tenemos los componente...
Java Server Faces (JSF)                                                        NetBeans 5.5Cambiamos el HOST, PORT y DB2.2...
Java Server Faces (JSF)                                                        NetBeans 5.5En esta cuadro de dialogo debem...
Java Server Faces (JSF)                                                         NetBeans 5.5Ahora colocamos un nombre y se...
Java Server Faces (JSF)                                                          NetBeans 5.5Pulsamos clic en Finalizar y ...
Java Server Faces (JSF)                                                       NetBeans 5.5En esta ventana colocamos el nom...
Java Server Faces (JSF)                                                        NetBeans 5.52.3. Creando el la aplicación M...
Java Server Faces (JSF)                                                          NetBeans 5.5Repetimos el paso 1 y selecci...
Java Server Faces (JSF)                                                  NetBeans 5.5                                     ...
Java Server Faces (JSF)                                                      NetBeans 5.52. Ahora nos toca crear los JSF P...
Java Server Faces (JSF)                                                       NetBeans 5.5Nos aseguramos que el paquete se...
Java Server Faces (JSF)                                                     NetBeans 5.5Vamos a cambiar los datos que se e...
Java Server Faces (JSF)                                                          NetBeans 5.5Pulsando clic en el link Mant...
Java Server Faces (JSF)                                               NetBeans 5.5Tenemos los datos cambiados y un mensaje...
Java Server Faces (JSF)                                                    NetBeans 5.5Para crear una nueva escuela pulsam...
Java Server Faces (JSF)                                                        NetBeans 5.5Para validar el campo de ingres...
Java Server Faces (JSF)                                                   NetBeans 5.5Observemos ahora el archivo faces-co...
Java Server Faces (JSF)       NetBeans 5.5Copyright © Wilder López M.            25
Java Server Faces (JSF)       NetBeans 5.5Copyright © Wilder López M.            26
Java Server Faces (JSF)                                                         NetBeans 5.5III. Conclusiones.Como habrán ...
Próxima SlideShare
Cargando en…5
×

J2ee jsf

1.708 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.708
En SlideShare
0
De insertados
0
Número de insertados
6
Acciones
Compartido
0
Descargas
89
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

J2ee jsf

  1. 1. 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 wlopezm@yahoo.com Fecha: 28 de junio de 2007I.- IntroducciónComo analistas y programadores vamos desarrollando a diario nuestras habilidades pararesolver problemas usuales que se presentan en el desarrollo del software. Por cada problemaque se nos presenta pensamos distintas formas de resolverlo, incluyendo soluciones exitosasque ya hemos usado anteriormente en problemas similares. Es así que a mayor experienciaque tengamos, nuestro abanico de posibilidades para resolver un problema crece, pero al finalsiempre 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. Existenmuchas formas de implementar patrones de diseño. Los detalles de las implementaciones sonllamadas estrategias, es decir soluciones típicas de desarrollo. Hay patrones que abarcan lasdistintas etapas del desarrollo; desde el análisis hasta el diseño y desde la arquitectura hasta laimplementación.Un patrón es una solución comprobada para un problema en un contexto, cuanto más ampliosea 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 sobrelo 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 inventoresni los únicos involucrados, pero ese fue luego de la publicación de ese libro que empezó adifundirse con más fuerza la idea de patrones de diseño. El grupo de GoF clasificaron lospatrones en 3 grandes categorías basadas en su propósito:Creacionales: Patrones creacionales tratan con las formas de crear instancias de objetos. Elobjetivo de estos patrones es de abstraer el proceso de instanciación y ocultar los detalles decómo los objetos son creados o inicializados.Estructurales: Los patrones estructurales describen como las clases y objetos pueden sercombinados para formar grandes estructuras y proporcionar nuevas funcionalidades. Estosobjetos adicionados pueden ser incluso objetos simples u objetos compuestos.Comportamiento: Los patrones de comportamiento nos ayudan a definir la comunicación eiteración entre los objetos de un sistema. El propósito de este patrón es reducir el acoplamientoentre los objetos.La arquitectura Modelo-Vista-Controlador es un patrón de diseño clásico que es muy usadoen aplicaciones que requieren la habilidad de mantener múltiples vistas del mismo dato; esdecir, se usa para administrar la información y notificar algún cambio en la misma, por lo que sufuncionalidad está dirigida a un propósito común.Utilizando este tipo de patrones conseguimos: más calidad, mejor mantenibilidad, perder elmiedo a empezar un proyecto desde cero, pero una de las cosas más importantes es lanormalizació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. Losframeworks son muy útiles ya que nos permiten no tener que reinventar la rueda cada vez. Esdecir el framework no sólo sigue el patrón, sino que me da unas directrices de trabajo, y nos dagran parte del trabajo ya hecho.Copyright © Wilder López M. 1
  2. 2. Java Server Faces (JSF) NetBeans 5.5JSF (Java Server Faces) es un framework de desarrollo basado en el patrón MVC (ModeloVista Controlador). Al igual que Struts, JSF pretende normalizar y estandarizar el desarrollo deaplicaciones web. Hay que tener en cuenta JSF es posterior a Struts, y por lo tanto se a nutridode 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 mepermitan Crear un nuevo registro, modificarlo, eliminarlo y mostrar en una lista los registros delas tablas.Debo mencionar que realizar este tipo de aplicación por más sencilla que parezca sin utilizar unframework demanda mucho tiempo su realización, obviamente respetando todas las reglas delPatró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 deDesarrollo donde trabajo, desarrollamos estos tipos de aplicaciones, bajo este esquema.II. Desarrollo de la aplicación JSFPrimero 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 omuchas escuelas, esto lo vemos por que el campo (PK) Facultad.idfacultad a migrado a la tablaEscuela.idfacultad como (FK).Después de descargar el NetBeans 5.5 desde http://www.netbeans.org vamos a crear unnuevo proyectoCopyright © Wilder López M. 2
  3. 3. Java Server Faces (JSF) NetBeans 5.5Elegimos una aplicación Web (Web Application)Copyright © Wilder López M. 3
  4. 4. Java Server Faces (JSF) NetBeans 5.5Elegimos 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 - JSFCopyright © Wilder López M. 4
  5. 5. Java Server Faces (JSF) NetBeans 5.5Ahora tendremos un entorno de trabajo de JSF, por defecto nos proporciona dos JSPVamos a conectarnos a la base de datos donde se encuentran nuestras tablas Facultad yEscuela.2.1. Conexión a la Base Datos en Forma NativaPara 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 esnecesario primero copiarlos a la carpeta src en la carpeta donde se esta grabando nuestroproyecto. Para nuestro caso la ruta exacta es:D:DataWLMProyectosArticuloswebJSFsrcjava Copiar la carpeta lib, a este lugarCopyright © Wilder López M. 5
  6. 6. Java Server Faces (JSF) NetBeans 5.5Comprobamos si el paquete lib ya se muestra en nuestro proyecto.Añadimos los .Jar al paquete Libraries, pulsando clic derecho sobre el paquete y seleccionandola opción Add JAR/Fólder …Seleccionamos la carpeta donde esta la carpeta lib que copiamos en el párrafo anterior yempezamos a añadir uno a uno los componentes mbase.jar, mssqlserver.jar, msutil.jar,sqljdb.jarCopyright © Wilder López M. 6
  7. 7. Java Server Faces (JSF) NetBeans 5.5Finalmente debemos tener en el paquete Libraries todos los componentes añadidos.Copyright © Wilder López M. 7
  8. 8. Java Server Faces (JSF) NetBeans 5.5Como ya tenemos los componentes para poder conectarse con el motor de Base de Datos,pasemos hacer justamente eso. Para ello pulsamos clic en Runtime, DatabasesPrimero debemos crear el Driver, clic derecho New Driver, luego pulsamos clic en Add … yañadiremos el Jar mssqlserver.jarAhora 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 vamosa utilizar lo siguiente: jdbc:microsoft:sqlserver://localhost:1432;DatabaseName=demo. Usuario yclave “sa”Copyright © Wilder López M. 8
  9. 9. Java Server Faces (JSF) NetBeans 5.5Cambiamos el HOST, PORT y DB2.2. Conexión a la Base Datos Por medio del ODBCTambién pueden conectarse a la Base de Datos por medio del Windows con ODBC, con estaopción no necesitas tener los drivers del motor de la Base Datos, el Sistema Operativo seencarga de hacer un puente entre el JDBC de java el Motor de BD. Seguramente te estaráspreguntando cual de las dos opciones es la ¿más adecuada y la más rápida?. La respuestaes“, 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ónHerramientas Administrativas – Orígenes de datos (ODBC)Copyright © Wilder López M. 9
  10. 10. Java Server Faces (JSF) NetBeans 5.5En esta cuadro de dialogo debemos agregar un origen de datos de usuario, pulsando clic en elbotón Agregar.Seleccionamos el motor de base datos en nuestro caso SQL Server.Copyright © Wilder López M. 10
  11. 11. Java Server Faces (JSF) NetBeans 5.5Ahora colocamos un nombre y seleccionamos la base de datos, de nombre pondremosdbDemo, 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 dosopciones autentificación de Windows o la autentificación de Sql Server, estas autentificacionesdepende 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
  12. 12. Java Server Faces (JSF) NetBeans 5.5Pulsamos clic en Finalizar y con esto ya tenemos creado nuestro DSN de usuarioPulse clic en el botón probar origen de datos, si muestra la ventana de resultados de pruebas elmensaje “PRUEBAS COMPLETAMENTE CORRECTAMENTE”, todo fue exitoso. Pulse aceptaren todas la ventanas abiertasNos vamos al entorno de NetBeans 5.5, a la pestaña Runtime para conectarnos al ODBC quehemos creado. Pulsar clic derecho en el Drriver JDBC-ODBC Bridge y elegimos la opciónConnect Using…Copyright © Wilder López M. 12
  13. 13. Java Server Faces (JSF) NetBeans 5.5En esta ventana colocamos el nombre del ODBC que creamos anteriormente en el campoDatabase 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 losdatos.Copyright © Wilder López M. 13
  14. 14. Java Server Faces (JSF) NetBeans 5.52.3. Creando el la aplicación Mantenimiento de las tablas Escuela y Facultad con JSF1 Nos vamos a Project y pulsamos clic derecho en el proyecto webJSF del sub menúseleccionamos New – Entity Classes from DatabaseSi les presenta un mensaje de que no puede crear clases entity en este Project, debemos subirel nivel del origen de java a level 1.5, tal como se muestra en la figuraPara solucionar este problema, vamos a pulsar clic derecho sobre el proyecto y seleccionamosla opción Properties, y cambiamos el Source Level a 1.5, con esto podremos crear una clasede tipo Entity clases desde base de datos.Copyright © Wilder López M. 14
  15. 15. Java Server Faces (JSF) NetBeans 5.5Repetimos 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 tendremoscargado las tablas que en ella existe, trasladamos la tabla Escuela al lado derecho con el botónAdd >, automáticamente pasará la tabla Facultad porque se encuentra relacionado, finalmentepulsamos el botón Next >Escribimos un paquete llamado demo para agrupar las clases que se van autogenerar, tambiéndebemos pulsar clic en el botón Create Persistente Unit, en el cuadro de dialogo pulsamoscreate. Pulse clic en el botón finalizar para terminarCopyright © Wilder López M. 15
  16. 16. Java Server Faces (JSF) NetBeans 5.5 Nombre del paquete a crearseCon esto tenemos dos clases creados de tipos persistentes, la clase Escuela y la claseFacultad.El código fuente de la clase Escuela.javaCopyright © Wilder López M. 16
  17. 17. Java Server Faces (JSF) NetBeans 5.52. Ahora nos toca crear los JSF Pages a partir de las clases creadas, para ello pulsar clicderecho sobre la carpeta Web Pages, seleccionamos del sub menú la opción New – JSPPages 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
  18. 18. Java Server Faces (JSF) NetBeans 5.5Nos 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 lastablas escuela y facultad, como podrás observar, ahora tenemos dentro de Web Page lospaquetes escuela y Facultad, dentro de ellos tenemos los jsp’s Detail, Edit, List, y New queincluyen 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 primerarepresenta al controlodor del M-V-C, la segunda sirve de enlace entre controladores. Lasclases creados en el punto 1 representan al modelo del M-V-CCopyright © Wilder López M. 18
  19. 19. Java Server Faces (JSF) NetBeans 5.5Vamos a cambiar los datos que se encuentran en el index.jsp.Por estos datosEjecutemos la aplicación pulsando clic derecho sobre el proyecto y seleccionando la opciónRun Project del menú contextual.Copyright © Wilder López M. 19
  20. 20. Java Server Faces (JSF) NetBeans 5.5Pulsando clic en el link Mantenimiento de facultad tenemos la lista de facultades con losbotones de New, Edit DestroySi seleccionamos la opción Edit, podremos editar los datos de la fila seleccionada pulsando clicen Save guardaremos los datos, todo esto es administrado por FacultadController.java pormedio de los Beans creados.Copyright © Wilder López M. 20
  21. 21. Java Server Faces (JSF) NetBeans 5.5Tenemos los datos cambiados y un mensaje enviado por el ControladorLo mismo observamos con mantenimiento de escuela.Copyright © Wilder López M. 21
  22. 22. Java Server Faces (JSF) NetBeans 5.5Para crear una nueva escuela pulsamos New EscuelaPodemos definir la cantidad de registros a mostrar en la lista, entrando a la claseEscuelaController.java, y allí cambiamos la variable batchSze = 5;Validación en JSFJSF traen validación que se pueden hacer a campos de ingreso, de tal forma que no tengasque programar la validación de la misma. Analicemos New.jsp del paquete Facultad.Copyright © Wilder López M. 22
  23. 23. Java Server Faces (JSF) NetBeans 5.5Para validar el campo de ingreso de datos sea obligatorio bastará con poner la propiedadrequired=”true”. Para validar la longitud del ingreso de un campo tenemos que utilizar laetiqueta <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
  24. 24. Java Server Faces (JSF) NetBeans 5.5Observemos ahora el archivo faces-config.xmlEste fichero es donde configuramos JSF. Es como el “pegamento” que une modelo, vista ycontrolador. En este fichero por un lado declaramos los beans que vamos a utilizar pararecoger la información de los formularios, y por otro lado las reglas de navegación.Copyright © Wilder López M. 24
  25. 25. Java Server Faces (JSF) NetBeans 5.5Copyright © Wilder López M. 25
  26. 26. Java Server Faces (JSF) NetBeans 5.5Copyright © Wilder López M. 26
  27. 27. Java Server Faces (JSF) NetBeans 5.5III. Conclusiones.Como habrán notado no tuvimos que trabajar con HttpSession. HttpRequest, como tienen losservlets, pero esto no es necesario en JSF.Hemos trabajado generando las cosas a partir de una tabla de BD, y luego metimos mano en elcódigo para darle forma y validaciones, esto es fastidioso para alguno desarrolladores quevienen de Microsoft.Existen Entornos que nos permiten trabajar directamente los datos del diseño, tal como lo haceSwing, NetBeans cuenta con el Visual Web Aplicattion, también existe el jCreator que trenincluido el Framework JSF.Los Frameworks nos ahorran tiempo a la hora de desarrollar una aplicación WEB, perodebemos comprender también que quedamos atados al mismo.Es muy importante tener definidos nuestra bases de datos a la hora de desarrollar aplicacionesWeb, 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 suproductividad, estoy seguro que los nuevos desarrolladores lo adoptarán sin ningúninconvenienteEn nuestro país el Framework más utilizado es el Struts, y migrar a otro demanda muchosrecursos económicos y tiempo, algo que las empresas no están dispuestos a invertir.1 Acerca del Autor•• ! " #• $ % & ( ! ) * & + ( , -• . , ! " #• / 1 0 . 2 3 4 5. *Copyright © Wilder López M. 27

×