JPA y JSF

Mi primera aplicación - JPA y JSF

En esta primera aplicación desarrollaremos un pequeño sistema para dar mantenimiento a una tabla de base de datos. Será lo más sencillo posible.

1. Ambiente de desarrollo
- JDK v1.7
- Eclipse
- Apache Tomcat v7.0.22 
- MySql v5.1.61

 2. Crear la Base de datos 

 

3. Crear un proyecto llamado desarrollo

 

4. Crear un package llamado com.carritojava.model dentro de ella Proveedor tala como se obserba en la IMG 3

 En esta imagen se observa los metodos del crud

 

 

Dejo el link de descargar del primer avance

Descargar

Generando una base de datos con Erwin Data Modeler

Generando una base de datos con Erwin Data Modeler
Para esta demo tenemos que tener instalado SQL Server 2008 y Erwin Data Modeler.
1) Abrimos el Erwin Data Modeler y seleccionamos : File > New

2)  Nos aparecerá esta ventana en la cual nos pide seleccionar el modelo que deseamos crear tenemos 3 opciones :
     – Lógico
     – Físico
     – Lógico/Físico
Para nuestra demostración seleccionaremos la ultima opción y escogemos con que Sistema Gestor de Base de Datos trabajaremos y la versión correspondiente, en este caso seleccionamos SQL Server y la versión 2005/2005, pero no solamente podemos trabajar con SQL Server, también lo podemos hacer con Oracle , MySql, etc.



3) Una vez creado nuestro modelo, pasaremos a crear nuestras Entidades (tablas en SQL Server), si observamos en la parte derecha vemos Model_2 que es el nombre del modelo (Se puede cambiar con tan solo seleccionarlo y presionar F2) y dentro de su lista desplegable observamos Entities la cual seleccionaremos y daremos click derecho y seleccionar New


4) Creamos nuestras entidades, las relacionamos


5) Ahora establecemos el tipo de dato que le corresponda a cada atributo de la entidad, dando click derecho sobre la entidad y seleccionando Atributtes…


6) Al momento de crear nuestro modelo escogimos la opción Lógico/Físico, entonces cambiaremos nuestro modelo desplegando la lista que se encuentra en la parte superior y seleccionamos Physical

7) Ahora debemos establecer una conexión a la base de datos, seleccionamos Database > Database Connection

8) En esta parte podemos modificar el modo de autenticación, recordemos que en SQL Server existen 2 tipos, Windows Authentication y SQL Server Authentication, seleccionamos Windows Authentication si desean seleccionan la otra opción y deberan ingresar sus credenciales, en la parte de Server solamente ingreso . (punto) debido a que la instancia de SQL Server instalada es una instancia por default, y en Database coloco el nombre de la base de datos la cual ya debe de estar creada y le doy click en connect, si todo esta correcto no se debe mostrar nada solamente se desaparece la ventana.


9) Ahora seleccionamos Tools > Forward Engineer > Schema Generation


10) En esta ventana podemos seleccionar que deseamos que se genere, si queremos que se creen las tablas, vistas etc, seleccionamos preview.


11)  En esta ventana podremos observar todo el código que se va a ejecutar, seleccionamos Generate para que se ejecute el código.


12)
 Y finalmente podemos ver el resultado que dice Execution SuccessFul que significa que todo esta OK!.

13) Finalmente nos dirigimos a SQL Server y podemos ver que se genero la BD con sus respectivas tablas.

Pero no solamente podemos crear las tablas, también podemos crear Store Procedures, Triggers, Vistas , etc.

jsf crud

Nuestro proyecto cada vez va tomando más forma, solo faltaría agregar clases al paquete Bean y modificar nuestra vista.
Por ahora esto es lo que tenemos en nuestro proyecto:



Primero añadiremos un bean a nuestro paquete, se llamará personaBean y manejará la vista en la cual gestionaremos nuestra tabla Persona. Para poder crear este bean, le damos clic derecho a nuestro paquete Bean, New -> Other, seleccionamos JavaServer Faces y luego JSF Managed Bean. Como Scope seleccionaremos View.



Ahora modificaremos el bean de la siguiente manera: primero crearemos un objeto Persona y luego una lista de objetos persona, a estos objetos les crearemos getters y setters para que puedan ser accedidos desde la vista. Además añadiremos los métodos insertar, modificar, eliminar y mostrar, los cuales accederán a los métodos establecidos en nuestro DAO.

Dentro del constructor personaBean() definir lo siguiente: persona = new Persona() para que deje de ser un objeto nulo.

Primero modificaremos el getPersonas() que devuelve una lista de personas con la siguiente estructura para que se cargue desde la base de datos:



Luego crearemos los métodos de los que se hablo anteriormente:



Ahora procederemos a eliminar nuestro welcomePrimefaces.xhtml y a modificar nuestro index.xhtml para hacerle una gestión a la tabla persona anteriormente creada.

Para poder agregar componentes en Primefaces es necesario que visiten su página oficial y revisen el showcase, en este showcase se muestran todos los elementos de Primefaces y la forma correcta de usarse, como se puede ver en la página, cada uno de estos usa un bean.

Para acceder al showcase por favor ingresen a este link: Clic aquí.




En nuestro index.xhtml, dentro de las etiquetas <h:body> crearemos un formulario, con la siguiente estructura



Lo que se está haciendo acá es que para cada inputText se le asigna un valor, ese valor es un atributo del objeto de la clase Persona que se encuentra en personaBean, entonces al llenar el campo de texto y apretar el boton de insertar, se mandan esos atributos al objeto del bean.

En nuestra vista, lo que quedaría es lo siguiente:



Entonces, al ingresar una nueva persona, esta quedaría registrada en nuestra base de datos:



Ahora, una vez que ya inserta procederemos a mostrar todas las personas que están registradas en nuestra base de datos. Para esto usaremos un DataTable, la información sobre este componente la pueden encontrar en el showcase que les brindé al inicio de la guía.

Agregaremos el siguiente formulario con el DataTable y las distintas columnas de cada objeto de la clase Persona, como se puede observar, el componente dataTable solicita una lista de objetos, en este caso #{personaBean.personas} y le asigna una variable, en este caso: "per" a cada uno de los registros.



Entonces, nuestra vista quedaría de esta forma:




Adicionalmente, en el botón del formulario de insertar, se añadirá el siguiente atributo: update=":formMostrar" que hace que mediante Ajax, se actualice la tabla de datos sin necesidad de actualizar la página:



Con esto, solo faltaría modificar y eliminar: Agregaremos a la dataTable un campo con un botón de eliminar y otro de modificar:



Y crearemos dos p:dialog, uno para modificar y otro para eliminar como se puede apreciar a continuación:

Para modificar:



La vista quedaría así al dar clic en botón modificar:



Para eliminar:



Y la vista quedaría así al dar clic en eliminar:



Con esto concluiría el tutorial, espero que les haya gustado y que hayan podido comprender un poco más sobre hibernate, JSF Primefaces y Mysql. Si tienen alguna duda, pueden dejarla en comentario y responderé en cuanto la vea. Muchas gracias.