JavaServer Faces 2.

0 CRUD
Enviar por correo electrnicoEscribe un blogCompartir con TwitterCompartir con Facebook

Mostraremos como hacer una pequeo ejemplo Web en JavaServer Faces 2.0 que permita crear, leer, actualizar y borrar registros en una base datos de MySQL. Todo esto con la ayuda de las herramientas de NetBeans. En este ejemplo haremos uso de las siguientes tecnologas: JavaServer Faces (JSF) 2.0 Java Persistence API (JPA) 2.0 Enterprise JavaBeans (EJB) 3.1 Ser necesario tener instalado el siguiente software: 1. NetBeans IDE 7.0, o superior. 2. Java Development Kit (JDK) 6, o superior. 3. GlassFish Application Server v3, o superior. 4. MySQL 5.x o superior Tambin puedes ver el video donde hacemos este mismo ejemplo saltndonos algunos pasos:

Para este ejemplo seguiremos los siguientes pasos: 1. Crear la base de datos 2. Examinar la estructura de base de datos 3. Crear el proyecto Web 4. Generar las clases de entidad desde la base de datos 5. Generar los JSF desde las clases de entidad 6. Explorando la aplicacin Crear la base de datos Si ya has creado una base de datos en MySQL antes, quiz sabes tambin que hay mas de una forma o herramienta para hacerlo. Aqui te mostraremos como hacerlo desde la seccin de servicios de NetBeans. Si abres la ventana deServicios de NetBeans y despus das click en Databases, podrs ver que existe predefinido un item solo para registrar un servidor de base de datos de MySQL, para iniciar el servicio en NetBeans, debes dar click derecho y despues en propiedades para completar los datos de conexin.

En tu caso los datos de acceso sern los que hayas definido cuando instalaste MySQL y pon la IP del equipo donde lo tengas instalado (tpicamente es localhost o 127.0.0.1).

Cuando hayas teminado de llenar los datos para conectarte, simplemente da click derecho al mouse y despues en conectar.

Ya que te hayas conectado es posible crear una nueva base de datos en las opciones del submenu con click derecho:

Yo he creado una BD llamada: ejemploJSF20. Al crear la base de datos, tambin se crea una conexin a la misma y es posible ejecutar comandos de SQL sobre la nueva base.

Para este ejemplo te proporcionamos dos scripts de SQL que te permitirn crear las tablas necesarias y llenarlas de datos de ejemplo para ejecutar el ejercicio adecuadamente. Descargar script de MySQL: script Examinar la estructura de base de datos Una vez que has ejecutado los scripts puedes explorar la base de datos para ver las tablas y el contenido que has creado. No olvides refrescar el estado de la conexin.

Bien, ya se han creado y poblado las tablas que necesitaremos. La siguiente es una descripcin de las tablas:
Tabla CLIENTE Descripcin Cliente de la agencia de consultoria Un empleado de la agencia de consultora que los clientes pueden contratar sobre una base contractual El estado de un consultor con la agencia de consultora (por ejemplo, activos e inactivos son estados posibles) Un empleado de la agencia consultora responsable de la conexin de los clientes y consultores Un proyecto de los clientes con consultores de la agencia. Caractersticas No-generada, llave primaria compuesta (cuyos campos no constituyen una llave foranea) Incluye un campo resumen de tipo LONG VARCHAR No-generada, llave primaria de tipo CHAR

CONSULTOR

ESTATUS_CONSULTOR

RECLUTADOR

PROYECTO

No-generada, llave compuesta que incluye dos campos constituyendo una llave foranea para la tabla CLIENTE Incluye un campo artefacto de tipo CLOB

Un conjunto de horas trabajadas por un consultor en un proyecto, para los que la FACTURABLE consultora de proyectos facture al cliente en cuestin DIRECCION Direccin de Facturacin Tabla de Union que indica que CONSULTOR_PROYECTO consultores estn asignados a que proyectos.

Referencia-cruzada PROYECTO y CONSULTOR, los primeros tienen una clave primaria compuesta

La base de datos incluye una variedad de relaciones. Al crear clases de entidad de una base de datos, el IDE genera automticamente las propiedades del tipo de Java adecuada basada en el tipo de SQL de las columnas. La siguiente tabla describe las relaciones de entidades para consultar la base de datos. (Relaciones inversas no se muestran)
Entidad Entidad Relacionada Informacin Descripcin

CLIENTE tiene muchos nullable con edicin RECLUTADORES y CLIENTE RECLUTADOR manual; nullable uno-a- RECULTADOR tiene cero o un muchos si no. CLIENTE (si no es editado manualmente) CLIENTE tiene una DIRECCION y CLIENTE DIRECCION non-nullable uno-a-uno DIRECCION tiene cero o un CLIENTE non-nullable uno-amuchos; en una entidad CLIENTE tiene muchos Proyecto, el valor del CLIENTE PROYECTO PROYECTOs y un PROYECTO campo cliente es parte de tiene un CLIENTE la llave primaria del Proyecto CONSULTOR tiene muchos CONSULTOR PROYECTO muchos-a-muchos PROYECTOs y PROYECTO tiene muchos CONSULTORES CONSULTOR tiene muchas non-nullable uno-aCONSULTOR FACTURABLE FACTURABLEs y FACTURABLE muchos tiene un CONSULTOR ESTATUS_CONSULTOR tiene non-nullable uno-amuchos CONSULTOREs y ESTATUS_CONSULTOR CONSULTOR muchos CONSULTOR tiene un ESTATUS_CONSULTOR CONSULTOR tiene cero o un CONSULTOR RECLUTADOR nullable uno-a-muchos RECLUTADOR y RECLUTADOR tiene muchos CONSULTOREs FACTURABLE tiene un non-nullable uno-aFACTURABLE PROYECTO PROYECTO y PROYECTO tiene muchos muchos FACTURABLEs

Crear el proyecto Web Ahora es momento de crear el proyecto Web utilizando el framework de JSF 1. En el men superior debes elegir: File->New Project (Ctrl-Shift-N). 2. Selecciona Web Application de la categora Java Web. Da click en Next. 3. Escribe el nombre del proyecto y la hubicacin, para este ejemplo usamos el nombre ejemploJSF2. Despues da click en el botn Next 4. Selecciona el servidor GlassFish v3 y especifica la versin de Java EE con la Java EE 6 Web. Da un click en Next.

5. En el panel de Frameworks, selecciona la opcin de JavaServer Faces. Da click en Finish.

Cuando das click en Finish, el IDE genera el proyecto de tipo Web y abre index.xhtml en el editor.

Generar las clases de entidad desde la base de datos 1.- Despues de conectar la IDE a la base de datos, usaremos el asistente o wizard que obtiene entidades de la base de datos para generar de forma rpida las clases basadas en las tablas de la base de datos. El IDE puede generar clases de entidad de cada tabla que selecciones, y puede generar adems, cualquier clase de entidades para relacionar las tablas. 2.- En la ventana de Proyectos, dando un click derecho al nodo de ejemploJSF2, y

seleccionando New->Entity Classes from Database. (Si esta opcin no est en la lista, elija Otra. Despues, en el Wizard de File, seleccione la categora de Persistence, despus Entity Classes from Database).

3.- Selecciona New Data Source from the Data Source, arrastra la lista para abrir la ventana de dialogo Create Data Source. 4.- Selecciona el nombre JNDI jdbc/ejemploJSF2 y selecciona jdbc:mysql://localhost:3306/ejemploJSF2 como la base de conexin.

5.- Las tablas de la base de datos debern aparecer en la lista de Tablas disponibles. 6.- Da click en el boton Add All para seleccionar todas las tablas. Da click en Next.

7.- Escribe jpa.ent como nombre de paquete. Asegurate que el checkbox para generar consultas con nombre se ha seleccionado "Generate Named Query Annotations".

8.- Puedes dejar los valores por default que vienen, da click en Finish y el IDE comenzar a crear las entidades en el paquete que especificamos. Al utilizar el asistente para crear clases de entidad de una base de datos, el IDE examina las relaciones entre las tablas de base de datos. En la ventana de Proyectos, si se expande el nodo del paquete jpa.ent, se puede ver que el IDE genera una clase de entidad para cada tabla, excepto para la tabla de PROYECTO_CONSULTOR. El IDE no ha creado una clase de entidad para PROYECTO_CONSULTOR porque la tabla es una union de tablas.

El IDE tambin ha generado dos clases adicionales para las tablas con llaves primarias compuestas: CLIENTE yPROYECTO. Las clases de llave primaria de estas tablas (ClientePK.java y ProyectoPK.java) tiene PKconcatenado. Si nos fijamos en el cdigo generado para las clases de entidad se puede ver que el asistente aade anotaciones@GeneratedValue a los campos auto generados de ID y las anotaciones @Basic (optional = "false") a algunos de los campos en las clases de entidad. En base a las anotaciones @Basic (optional = "false"), las pginas que el asistente JSF Pages from Entity Classes genera, incluyen un cdigo con controles para prevenir las violacines para columnas con valor no nulo.

Generando los JSF desde las clases de entidad Ahora que hemos creado las clases de entidad, haremos la interfaz web para mostrar y modificar los datos. Usaremos el asistente JSF Pages from Entity Classes para generar pginas JavaServer Faces. El cdigo generado por el asistente o wizzard se basa en las anotaciones de persistencia contenidas en las clases de entidad. Para cada clase de entidad, el asistente genera lo siguiente: Un bean de sesin sin estado para la creacin, lectura, modificacin y eliminacin de entidades. Un bean JSF manejador, session-scoped, Un directorio que contiene cuatro archivos Facelets para realizar de CRUD (Create.xhtml, Edit.xhtml, List.xhtml, y View.xhtml) Clases que sern usadas por los beans JSF manejadores (JsfUtil, PaginationHelper) Un paquete de propiedades para los mensajes localizados, y una entrada correspondiente en el archivo de configuracin del proyecto (faces-config.xml se crea si no existe)

Archivos Web auxiliares, incluyendo una hoja de estilos predeterminada para renderear componentes y un archivo plantilla para Facelets. Para generar las pginas JSF 1.- En la ventana Proyectos, haz click en el nodo del proyecto y elije New> JSF Pages from Entity Classes para abrir el asistente. (Si esta opcin no aparece en la lista, elije Otro. Luego, en el asistente de archivos, selecciona la categora JavaServer Faces, a continuacin, JSF Pages from Entity Classes)

La lista de clases de entidad disponibles muestra las siete clases de entidad que figuran en el proyecto. El cuadro no muestra las clases ClientPK.java y ProjectPK.java. 2.- Haz click en Agregar todo para mover todas las clases a la Seleccin de cuadro de clases de entidad.

Haz click en Siguiente. 3.- En el paso 3 del asistente, Generamos pginas JSF y clases, escribe jpa.con para el paquete controlador de JPAy jsf.con para las clases de respaldo de los JSFs. 4.- Escribe jsf para el folder donde estarn los JSFs

5.- Escribe '/Bundle' en el campo "Localization Bundle Name". Esto generar un paquete llamado recursos en donde estar el archivo Bundle.properties (Si se deja en blanco, el paquete de propiedades, se crear en el paquete default del proyecto.) Para que el IDE se adapte mejor a tus convenciones de proyecto, puedes personalizar los archivos generados por el asistente. Haz click en el enlace Customize Template para modificar el archivo de plantillas utilizadas por el asistente.

5.- En general, puedes acceder y realizar cambios en todas las plantillas gestionada por el IDE usando el Administrador de plantillas (Tools > Templates).

Si expandes el nodo Web Pages, veras que el IDE genera una carpeta para cada una de las clases de entidad. Cada carpeta contiene los archivos de Create.xhtml, Edit.xhtml, List.xhtml y View.xhtml. El IDE tambin modific el archivo index.xhtml insertando los enlaces a cada una de las pginas List.xhtml.

Cada bean JSF manejador es especfico para los cuatro archivos Facelets correspondientes e incluye el cdigo que invoca mtodos en el bean de sesin adecuado. Expande el nodo o folder de recursos para localizar la hoja de estilos jsfcrud.css que fue generado por el asistente. Si abres la pgina de la aplicacin de bienvenida (index.xhtml) o el archivo Facelets de plantilla (template.xhtml) en el editor, vers que contiene una referencia a la hoja de estilos. El archivo Facelets de plantilla es usado por cada uno de los cuatro archivos de Facelets para cada clase de entidad.

<h:outputStylesheet name="css/jsfcrud.css"/>

Si expandes los paquetes fuente del nodo se pueden ver los beans controladores de JPA, los bean manejadores de JSF, clases de utilidad, y archivos de propiedades que el asistente genera.

El asistente tambin genera un archivo de configuracin de Faces (faces-config.xml) para registrar la ubicacin del paquete de propiedades. Si expandes el nodo de archivos de configuracin y abres faces-config.xml en el editor de XML, se puede ver que se incluye la siguiente entrada.

<application> <resource-bundle> <base-name>recursos/Bundle</base-name> <var>bundle</var> </resource-bundle> </application>

Adems, si exploras el paquete de recursos, encontrars en el archivo de Bundle.properties, mensajes para el idioma del cliente por defecto. Los mensajes se derivan de las propiedades de la entidad de clase. Para agregar un paquete de propiedades nuevas haz click en el archivo Bundle.properties y selecciona Customize. La ventana de

dilogo Customizer te permite aadir nuevas configuraciones regionales para la aplicacin.

Explorando la Aplicacin Ahora que el proyecto contiene las clases de entidad, los EJBs de sesin para controlar las clases de entidad, y JSF de front-end para mostrar y modificar la base de datos, intenta ejecutar el proyecto para ver los resultados. En seguida se presentan algunos ejercicios opcionales que te ayudarn a familiarizarte con la aplicacin, as como las caractersticas y funcionalidad que el IDE. Examinar el proyecto terminado Rellenar la base de datos con una secuencia de comandos de SQL Explorar el Editor de Facelets Exploracin de la integridad de base de datos, con validacin de campo Edicin de clases de la entidad Examinar el proyecto terminado 1.- Para ejecutar el proyecto, haz click derecho en el nodo del proyecto en la ventana de proyectos y selecciona Run oEjecutar.

Como puedes ver, nuevos enlaces se han aadido a la pgina de bienvenida (index.xhtml) con ayuda del asistente. Los enlaces creados se ofrecen como puntos de entrada a las pginas de Facelets que proporcionan la funcionalidadCRUD sobre la base de datos de la aplicacin. 2.- Haz click en el vnculo Show All Consultor Items. Tomando en cuenta el cdigo anterior, puedes ver que la pgina de destino es /consultor/List (En JSF 2.0, la extensin de archivo se infiere debido a la navegacin implcita) Si no olvidaste ejecutar el segundo script de SQL que se encarga de rellenar algunas tablas podrs ver algunos datos, para el caso de Consultores se muestra al menos un registro.

Como podrs ver, las ociones: crear, ver, editar y elimimar son generadas tambin por el asistente.

Explorar en el Editor de pginas Facelets

1.- Abra el archivo /consultor/List.xhtml en el editor. Lnea 8 indica que la pgina se basa en el archivo Faceletstemplate.xhtml para crearse.

2.- Busca el archivo template.xhtml. 3.- En plantilla se usa la etiqueta

<ui:insert>

para insertar contenido como el ttulo y el cuerpo. 4.- Regresa al archivo List.xhtml (presiona Ctrl-Tab). La etiqueta ui:define ui:define se utiliza para definir el contenido que se aplicarn al ttulo de la plantilla y el cuerpo. Este patrn se utiliza para todos los cuatro archivos de Facelets (Create.xhtml, Edit.xhtml, List.xhtml, y View.xhtml) generados para cada clase de entidad. 5.- Coloca el cursor sobre cualquiera de las expresiones EL que usan los mensajes

localizados contenida en el archivo Bundle.properties. Presiona Ctrl-Espacio para ver el mensaje localizado.

6.- Desplazate hasta el final del archivo y busca el cdigo para el enlace Crear nuevo consultor (Lnea 92). Este es el siguiente:

<h:commandLink action="#{consultorController.prepareCreate}" value="#{bundle.ListConsultorCreateLink}"/>

7.- Presiona Ctrl-Espacio en la accin del atributo commandLink para invocar el pop-up de la documentacin. El atributo action indica el mtodo que controla la solicitud cuando se hace click en el enlace en el navegador. La siguiente documentacin se proporciona: MethodExpression representa la accin de la aplicacin que se invoca cuando este componente es activado por el usuario. La expresin debe evaluar un mtodo pblico que no toma parmetros y devuelve un objeto (el mtodo toString () se llama para obtener el resultado lgico), que se pasa a NavigationHandler para esta aplicacin.

En otras palabras, el valor de accin generalmente se refiere a un mtodo en un bean JSF manejador que se evala a una cadena. La cadena es utilizada por NavigationHandler de JSF de remitir la solicitud a la vista apropiada. Podrs verificar esto en los siguientes pasos. 8.- Pon el cursor en consultorController y presione Ctrl-Space. La funcionalidad de completado del editor, indica que consultorController es un bean JSF controlador.

9.- Mueve el cursor a prepareCreate y pulsa Ctrl-Espacio. La funcin de completado de cdigo enumera los mtodos que figuran en el bean ConsultorController.

Explorando la integridad de base de datos con validacin de campos

1.- Desde la pgina con la Lista de Consultores en el navegador, haz click en 'Create New Consultor". Deber aparecer el formulario de creacin de Consultores. 2.- Ingresa los siguientes datos en el formulario. Por el momento, dejar los campos RecruiterId y StatusId en blanco.

Campo Valor ConsultorId 2 Email jorge.listo@consultores.com Password jorge.listo TarifaPor 75 TarifaPorHoraFacturable 110 FechaContratacion 07/22/2008 Resumen Soy el mejor Contratame! ReclutadorId --EstatusId ---

3.- Haz click en Guardar. Al hacerlo, un error de validacin se marca para el campo EstatusId.

Por qu ocurri esto? Reexamina el diagrama entidad-relacin de la base de datos. Como se indica en la tabla de relaciones, CONSULTOR y ESTATUS_CONSULTOR comparten una relacin nonula, uno-a-muchos. Por lo tanto, cada entrada en la tabla CONSULTOR debe contener una referencia a una entrada en la tablaESTATUS_CONSULTOR. Esto se denota por la clave externa consultor_fk_estatus_consultor que une las dos tablas.

4.- Para superar el error de validacin, selecciona entity.ConsultorStatus [EstatusId = A] de la lista de EstatusIddesplegable. Nota: Puedes dejar el campo en blanco RecruiterId. Como se indica en el diagrama de relacin, la relacin entreCONSULTOR y la tabla de RECLUTADOR puede ser nula, uno-a-muchos, lo que significa que las entradas deCONSULTOR no necesitan estar asociadas con una entrada en RECLUTADOR. 5.- Haz click en Guardar. Aparecer un mensaje indicando que la entrada consultor se ha guardado correctamente. Si haces click en Show All Consultor Items, vers la entrada que se ha guardado en la tabla.

En general, las pginas Facelets generadas, proveen de errores para facilitar la entrada que el usuario introduce: * Campos vacos para campos no-nulas. * Modificaciones a los datos que no puede ser alterados (por ejemplo, las claves primarias). * Introduccin de datos que no son del tipo correcto. * Modificaciones a los datos cuando la vista de un usuario ya no est sincronizada con la base de datos.

Editando las Clases de Entidad En la seccion anterior vimos cmo la lista desplegable de EstatusId no era muy amigable. Quiz ya te has dado cuenta de que el texto que se muestra para cada elemento es una representacin en cadena de cada entidadEstatusConsultor encontrada. Veremos cmo usar completamente el editor de cdigo, documentacin y apoyo a la navegacin como conclusin. Tambin modificaremos el mensaje que se enva al usuario para que sea ms amigable.

1.- Abre el archivo /consultor/Create.xhtml. Este es el formulario Create New Consultor que acabas de ver en el navegador. Desplazate hacia abajo para ver el cdigo del la lista desplegable EstatusId (en negrita a continuacin).

<h:selectOneMenu id="reclutadorId" value="#{consultorController.selected.reclutadorId}" title="#{bundle.CreateConsultorTitle_reclutadorId}" > <f:selectItems value="#{reclutadorController.itemsAvailableSelectOne}"/> </h:selectOneMenu> <h:outputLabel value="#{bundle.CreateConsultorLabel_estatusId}" for="estatusId" /> <h:selectOneMenu id="estatusId" value="#{consultorController.selected.estatusId}" title="#{bundle.CreateConsultorTitle_estatusId}" required="true" requiredMessage="#{bundle.CreateConsultorRequiredMessage_estatusId}"> <f:selectItems value="#{estatusConsultorController.itemsAvailableSelectOne}"/> </h:selectOneMenu>

2.- Examina el valor aplicado a la etiqueta . El atributo "value" determina el texto que se muestra para cada elemento de la lista desplegable. 3.- Presione Ctrl-Espacio en itemsAvailableSelectOne. La funcin de completar cdigo del editor indica quegetItemsAvailableSelectOne() de EstatusConsultorController devuelve un arreglo de objetos selectItem. 4.- Coloca el cursor sobre el valor de retorno selectItem[] en la firma del mtodo, y pulsa Ctrl-Space para invocar la documentacin pop-up.

Si lo deseas haz click en el navegador web (el icono del navegador web) para abrir la documentacin Javadoc en un navegador web externo. Como puedes ver, la clase SelectItem pertenece al freamwork de JSF. El componente de UISelectOne, como se menciona en la documentacin, est representado por la etiqueta de que se examin en el paso 1. 5.- Presiona Ctrl, a continuacin, pasa el ratn sobre el metodo findAll(). Un pop-up aparece mostrando la firma del mtodo.

Puedes ver que aqu ejbFacade.findAll() devuelve una lista de objetos ConsultantStatus. 6.- Desplazate sobre a JsfUtil.getSelectItems. Mueve el ratn sobre getSelectItems y presiona la tecla Ctrl, a continuacin, haz click en el enlace que aparece. Nota: Recuerda que JsfUtil es una de las clases de que se genera cuando se complet del asistente para JSF Pages from Entity Classes. El mtodo que itera a travs de la lista de entidades (es decir, la lista de objetos EstatusConsulor), creando unSelectItem para cada uno. Como se indica en negrita a continuacin, cada SelectItem se crea usando el objeto de entidad y una etiqueta para el objeto.

public static SelectItem[] getSelectItems(List<?> entities, boolean selectOne) { int size = selectOne ? entities.size() + 1 : entities.size(); SelectItem[] items = new SelectItem[size]; int i = 0; if (selectOne) { items[0] = new SelectItem("", "---"); i++; } for (Object x : entities) { items[i++] = new SelectItem(x, x.toString()); } return items; }

La etiqueta se crea usando el mtodo toString(), y es la representacin del objeto. (Vase la definicin Javadoc para el constructor SelectItem (valor java.lang.Object, java.lang.String etiqueta))

Ahora que has comprobado que es el resultado de toString() es lo que se representa en el navegador al ver los elementos en una lista desplegable, modificaremos el mtodo toString () de EstatusConsultor. 7.- Abre la clase EstatusConsultor en el editor. Modifica el mtodo toString() para devolver el estatusId ydescripcion. Estos son corresponden a las dos columnas de la tabla ESTATUS_CONSULTOR.

@Override public String toString() { return estatusId + ", " + descripcion; }

8.- Ejecuta el proyecto de nuevo. Cuando el navegador muestra la pgina de bienvenida, haz click en el vnculo Mostrar todos los artculos de consultores, a continuacin, haz click en Crear nuevo consultor.

Inspecciona la lista desplegable EstatusId. Vers que ahora muestra el ID de estado y la descripcin para el expediente de la que figura en el cuadro ESTATUS_CONSUTOR de la base de datos.

Listo, teminamos. Este post esta basado en la traduccin del ejemplo: http://netbeans.org/kb/docs/web/jsf20-crud.html para JSF 2.0 y NetBeans 7.0 o superior Espero que este ejemplo sea de utilidad para ustedes.