Creando una aplicación Web en Netbeans 6.1 utilizando Bases de Datos.

Preparando la Base de datos en Mysql.

La base de datos almacén a utilizar tendrá únicamente dos tablas, artículo y proveedor contemplando sus llaves
foráneas.

create database almacen;

El siguiente paso es crear las tablas en la base de datos.

CREATE TABLE articulo (

id_articulo INTEGER NOT NULL AUTO_INCREMENT,
nombre VARCHAR(50) NOT NULL,
descripcion VARCHAR(250) ,
id_proveedor INTEGER NOT NULL,
PRIMARY KEY (id_articulo)
)
TYPE = InnoDB;
CREATE TABLE proveedor (
id_proveedor INTEGER NOT NULL AUTO_INCREMENT,
nombre VARCHAR(50) NOT NULL,
PRIMARY KEY (id_proveedor)
)
TYPE = InnoDB;

1
Una vez que se crearon las tablas, es necesario generar la llave foránea. Para que esto funcione las tablas
tienen que haber sido creadas de tipo InnoDB

ALTER TABLE articulo ADD CONSTRAINT FOREIGN KEY(id_proveedor)

REFERENCES proveedor (id_proveedor)
ON DELETE RESTRICT
ON UPDATE RESTRICT;

Configurando la conexión a la base de datos en Netbeans

Selecciona la pestaña de Services y Selecciona el apartado de Databases. La pantalla lucirá de la siguiente
manera:

2
Ahora dentro de databases selecciona la carpeta de drivers y presiona el segundo botón del mouse y selecciona la
opción de New Driver. Ahora aparecerá la ventana donde debe configurar el driver de jdbc para su respectiva
base de datos. En esta ventana se le solicita:

 La dirección local del archivo *.jar de su driver JDBC

 La clase que Driver de su JDBC, como por ejemplo:

3
 MySQL: com.mysql.jdbc.Driver
PosgreSQL: org.postgresql.Driver
 El nombre con el cual NetBeans administrará el driver.

A continuación y una vez configurado el Driver es necesario crear la conexión a la base de datos, por lo cual nos
posicionamos en el Apartad de Databases y con presionando el segundo botón del mouse, aparece un menú en el
cual seleccionamos la opción de New Connection, y aparecerá la siguiente ventana:

4
5
Donde se tiene que definir:

 Name: Nombre del driver de base de datos que se acaba de configurar

 Database URL: El url de conexión a la base de datos, el cual puede variar dependiendo de cada Driver
de JDBC. A continuación se muestran los de MySQL y PostgreSQL
MySQL:
 jdbc:mysql://host:puerto/baseDeDatos

6
  jdbc:mysql://localhost:3306/almacen

PostgreSQL:
 jdbc:postgresql://host:puerto/baseDeDatos
 jdbc:postgresql://localhost:5432/almacen
 User: Es el usuario que tiene acceso a la base de datos
 Password: Contraseña del usuario en la base de datos

En la pestaña de "Advanced" debe ser selecionado el schema: public

Creando la aplicación Web en Netbeans

Seleccione la opción de File -> New Project, Seleccione la categoría de Web, y por último el proyecto de Web
Application.

7
Nota: Asegurese de seleccionar Tomcat 6.0 y la version de JEE 5.0.

8
Presione Next y aparece la siguiente ventana:

9
En esta ventana deberá elegir Visual Web JavaServer Faces y presionar Finish, exactamente después Netbeans
iniciará el proceso de creación de la aplicación, lo cual puede tardar unos segundos.

Creando los Entidades desde la base de datos

Seleccione con el mouse el proyecto que acaba de crear, presione el segundo botón del mouse y Seleccione New
-> Entity classes from database donde aparecerá la siguiente ventana:

10
11
Nota: No olvides indicarle a la base de datos que se conecte utilizando el otro botón del mouse, en caso contrario
pueden existir problemas en este apartado.

A continuación preguntará cual es el DataSource (Conexión a la base de datos) que se desea utilizar, por lo que
se debe seleccionar New DataSource para la cual aparece la siguiente pantalla:

12
13
En esta sección solicitará un nombre de JNDI para la conexión de base de datos, se utilizará almacen y se
seleccionará la conexión que creó con anterioridad para Mysql.

Una vez seleccionado el DataSource, sólo es necesario seleccionar las tablas que se crearon al inicio del manual.
Esto se describe en la siguiente ventana:

14
15
Después de configurar el DataSource y seleccionar las tablas, presionamos "Next" aparecerá una ventana más, en
la cual se debe configurar:

 Cuál es el nombre de cada entidad por cada tabla

 Cuál es el paquete en el cual se guardará todo nuestro modelo de datos. Para este ejemplo utilizaremos
almacen.modelo.
 Permite crear Unidades de Persistencia

Nota: No se presione Next hasta que no se cree la unidad de persistencia.

16
17
Una vez que se configura el paquete, es necesario crear una Unidad de persistencia la cual permitirá registrar las
entidades de acceso de datos. Para realizar esto se necesita presionar el botón de Create Persistence Unit, con
lo que aparecerá el siguiente dialogo:

18
19
En esta pantalla se seleccionará TopLink como administrador de persistencia y se le asignará el nombre a la
unidad de persistencia de JPA. Para este tutorial se utilizará AlmacenPU. Ahora presionar Create y el dialogo se
cerrará, por último se presiona Finish.

Esto creará algunas clases en el paquete almacen.modelo, esto sucede debido a que no se ha agregado la
librería de TopLink Essentials al proyecto. Esta librería es la que se encarga del acceso a la base datos utilizando
JPA.

Para agregar esta librería es necesario seleccionar el proyecto; presionar segundo boton del mouse y seleccionar la
opción de Properties -> Libraries; ahora presiane el botón de Add library y seleccione TopLink Essentials.
Después de realizar estos pasos la pantalla lucirá de la siguiente manera:

20
21
Generadores en JPA
JPA es muy poderoso y está diseñado para que pueda funcionar en varias bases de datos, por lo cual debe
proporcionar mecanismos que nos permitan realizar un buen manejo de las llaves primarias de las tablas. Para
cumplir con este objetivo, JPA utiliza los Generadores, los cuales pueden gestionar el uso de las llaves primarias
para la gran mayoría de las bases de datos.

Para utilizar los Generadores es necesario utilizar el annotation de @GeneratedValue acompañado de un

Strategy. Existen 4 tipos de estrategias para generar las llaves primarias:

 IDENTITY: Especifica al proveedor de persistencia que utilice una columna de identidad en la llave
primaria. Un autoincremental, un campo serial, etc.
 AUTO: Especifica al proveedor de persistencia que utilice el más adecuado para la base de datos
seleccionada.
 SEQUENCE: Especifica al proveedor de persisitencia que es necesario utilizar una secuencia definida en
la base de datos. Este caso en particular requiere del annotation de @SequenceGenerator.
 TABLE: Busca ser la solución a las aplicaciones que son instaladas en varias bases de datos, ya que
especifica al proveedor de persistencia, que las llaves primarias sean asignadas utilizando una tabla en la
base de datos. Es decir el proveedor de persistencia creará una tabla en la cual existirán registros que
controlen las llaves primarias para cada tabla. Este Generador utiliza el annotation de @TableGenerator.

El uso de estos annotation es el siguiente:

@Id

22
 @Column(name = "id_articulo", nullable = false)
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Integer idArticulo;

Recomendación para los generadores

 IDENTITY
MySQL
SyBase
PostgreSQL cuando se utilizan campos seriales
Informix
 SEQUENCE
Oracle

Aplicándolo al manual

Para la aplicación que se está desarrollando se realizarán cambios a las entidades generadas por el Netbeans con
el objetivo de que los INSERT en la base de datos sean exitosos.

Dato que en MySQL se está utilizando el incremental se recomienda utilizar la estrategía de IDENTITY en las dos
entidades que han sido creadas. (Cabe señalar que en este ejemplo han sido omitidos los NamedQuery que
Netbeans crea por default).

Las entidades lucirían de la siguiente manera:

23
@Entity
@Table(name = "articulo")
public class Articulo implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@Column(name = "id_articulo", nullable = false)
@GeneratedValue(strategy=GenerationType.IDENTITY)

....

}
@Entity
@Table(name = "proveedor")
public class Proveedor implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@Column(name = "id_proveedor", nullable = false)
@GeneratedValue(strategy=GenerationType.IDENTITY)

....

24
El archivo persistance.xml
El archivo persistence.xml es de vital importancia para el uso de JPA, ya que es el que mantiene la configuración
para JPA en la aplicación. Para este ejemplo el tipo de configuración será tipo RESOURCE_LOCAL. Lo cual nos
indica que el proveedor de persistencia se hará cargo de la gestión de transacciones.

<?xml version="1.0" encoding="UTF-8"?>

<persistence version="1.0" xmlns="http://java.sun.com/xml/ns/persistence"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/persistence
http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
<persistence-unit name="AlmacenPU" transaction-type="RESOURCE_LOCAL">
<provider>oracle.toplink.essentials.PersistenceProvider</provider>
<class>almacen.modelo.Articulo</class>
<class>almacen.modelo.Proveedor</class>
<properties>
<property name="toplink.jdbc.user" value="almacen"/>
<property name="toplink.jdbc.password" value="almacen"/>
<property name="toplink.jdbc.url" value="jdbc:postgresql://localhost:5432/almacen"/>
<property name="toplink.jdbc.driver" value="org.postgresql.Driver"/>
</properties>
</persistence-unit>
</persistence>

25
Netbeans 6.0 y JSF
Una vez configurada la base de datos, creadas las entidades y las librerías, sigue el momento en el cual se creará
la vista de la aplicación, para después ligarla con el modelo que se acaba de crear.

Netbeans 6.0 tiene un conjunto de componentes de Java Server Faces, creado para facilitar notablemente su
uso, cuenta con:

 Un Editor Visual para JSF.

 Componentes que son utilizados a través de uniones (bindings) a la base de datos.
 Un conjunto de componentes utilis como Tabs, botones de Imagenes, calendarios, etc.
 Un esquema de eventos facil de usar.
 Un editor para las reglas de navegación de la aplicación, el cual se pueden ligar los eventos invocados por
los componentes y el conjunto de páginas creadas en la aplicación.
 Control de los beans utilizados por los JSF que se encuentran en los scopes de:
o Request
o Session
o Application

En esta parte del manual se trabajará ampliamente con la vista y las varias modalidades de los JSF, por lo cual se:

 Iniciará con la creación de la pantalla de captura de artículos

 Se creará la pantalla del listado de los articulos
 Por último se crearán los eventos de navegación entre los Java Server Faces.

26
Creando el JSF
Para crear el JSF de captura de artículos, es necesario seleccionar el proyecto, utilizar el segundo botón del mouse
y buscar la opcion New -> Visual Web JSF Page, en donde aparecerá la siguiente pantalla:

27
Donde se solicita la siguiente información:

28
  File Name: Es el nombre del JSF, en el cual se utilizará capturarArticulo
 Project: El proyecto en el que se está trabajando
 Folder: La carpeta en la cual será guardada el archivo, en este caso. web/articulo. Esta propiedad es
importante para ir organizando nuestro proyecto.
 Created File: El archivo que se creará
 Default Java Page: El paquete por defualt seleccionado cuando se creo el proyecto.

Presionar Finish, para que Netbeans cree el nuevo JSF, en el cual se creará el siguiente formulario:

29
30
Notas para la creación del formulario

 Utilizar siempre los componentes de la Paleta Basic.

 Para las etiquetas del formulario utilice Static text, ya que este texto no requiere de cambios generados
por eventos.
 A los componentes de captura asignarles los siguientes nombres:
o El campo nombre: nombre (Recuerde Java es sensible a mayúsculas).
o El campo descripción: descripcion.
o Al dropdown de proveedor: proveedor.
 Utilice un botón de nombre registrar.

Realizar el binding de los proveedores

Una vez que el formulario ha sido creado es necesario llenar de información el campo de los proveedores, lo cual
se puede hacer utilizando la conexión de la base de datos, para lo cual se llevan a cabo las siguientes actividades:

1. Seleccionar la pestaña de Services

2. Seleccionar la base de datos que se definió
3. Seleccionar el apartado de Tables
4. Seleccionar la tabla de proveedores con el primer botón del mouse, y dejándolo presionado arrastre la
tabla proveedores al dropdown de proveedores

31
32
Esto generará un link entre la base de datos y el Combo box. Con esto los registros que existan en la tabla
proveedor serán desplegados en pantallas para poder seleccionarlos

Ejecutar la aplicación
Para ejecutar la aplicación basta con:

 Seleccionar cual será la página a ejecutar, presionar el segundo botón del mouse y seleccionar Set as
Start Page
 Seleccionar el proyecto y utilizar el segundo botón del mouse para presionar la opción de Run.

Aparecerá una pantalla con el navegador seleccionado en la configuración de Netbeans y la aplicación lucirá de la
siguiente manera:

33
Las vistas del Editor de JSF
El editor que ofrece NetBeans 6.0 para la edición de JSF cuenta con tres vistas:

34
  La vista de diseño
 La vista de JSP
 La vista de Java

Cada una de estas vistas tienen un objetivo especifico en el desarrolla de aplicaciones utilizando Netbeans, es
importante entender cuál es su utilidad y su relación.

La vista de Diseño

Esta vista es la que permite utilizar todos los componentes de Java Server Faces con los que cuenta el Netbeans.
Es un editor visual en el cual se pueden manipular libremente los componentes, asi como también permite realizar
los bindings y la modificación en el estilo y la asignación de eventos de los componentes.

La vista de JSP

Esta vista muestra el código generado en el JSP que es utilizado en la aplicación Web para desplegar e invocar los
componentes. Si no se utilizara Java Server Faces está vista mostraría el HTML que se desplegará al usuario en el
navegador.

La vista de Java

El estar posicionados en la vista de Java indica que se ha pasado a una clase de Java, la cual contiene una
propiedad por cada elemento de la Vista, con el objetivo de mantener la información que el usuario teclea o las
opciones que selecciona. Está clase se asemeja al Backin bean de JSF standar, sin embargo cuenta con algunas
modificaciones importantes:

 Tiene acceso a un bean en cada scope

o Request

35
 o Session
o Application
 Cuenta con métodos que ayudan al a creación, preparación de la página (render) e invocación de rutinas
antes de procesar la forma.
o init(): Es ejecutado cada vez que una página se ejecuta sin importar si fue accedida a través del
URL o redireccionandole. Este método es ideal para cargar la información que siempre debe estar
en pantalla.
o preprocess(): Este método se ejecuta cuando se requiere una actulización en los componentes
antes de que se invoque un evento de Submit.
o prerender(): Se ejecuta antes de que la página sea generada (render)
o destroy(): Se ejecuta una vez que la página ha sido creada, y se utiliza comúnmente para liberar
los recursos utilizados en los métodos anteriores.

Creando el evento y registrando en la base de datos

Una vez que se confirme que la aplicación está funcionando, el siguiente paso es generar un evento para el botón
de registrar para hacer esto sólo se da doble click en el botón y Netbeans cambiará a la vista de código.

Observar en la siguiente pantalla como en la parte superior del editor de código, ahora se encuentra seleccionado
el botón de Java, lo cual indica que se está en la Vista de Java. En la siguiente imagen se puede observar el
código generado para el evento del botón registrar. Observar que la sintaxis es muy sencilla y se asemeja a
cualquier otro método.

36
37
Cabe señalar para unir esta clase de Java con la vista que se encuentra en JSP es necesario hacer un binding en el
componente descrito en nuestro JSP. Esto lo hace el Netbeans automáticamente. Para observar como lo hace es
necesario seleccionar la Vista de JSP y buscar el componente.

El código generado por el Netbeans es algo similar a esto:

<webuijsf:button actionExpression="#{articulo$capturarArticulo.registrar_action}"
binding="#{articulo$capturarArticulo.registrar}"
id="registrar" style="left: 311px; top: 312px; position: absolute" text="Registrar"/>

Aquí es donde se esconde la magia de los JSF utilizando Netbeans.

El código para la agregar el registro en la base de datos

Ahora como ya se tiene el evento preparado es necesario tomar la información de los componentes de pantalla y
generar el objeto de negocio, que en este caso es artículo. Para su facilidad se agrega en texto el código:

public String registrar_action() {

//Obtener el artículo del drop down
Integer idProveedor = (Integer)this.proveedor.getSelected();

// Creando el artículo
Articulo articulo = new Articulo();
// Obtener el contenido de los campos de texto
articulo.setNombre((String) this.nombre.getText());

38
 articulo.setDescripcion((String) this.descripcion.getText());

// Crear el EntityManagerFactory de la unidad de persistencia

// previamente creada
EntityManagerFactory emf = Persistence.createEntityManagerFactory(
"AlmacenPU");

// Crear el EntityManager para accesso a la capa de persistencia

EntityManager em = emf.createEntityManager();
// Se es transacción de escritura, obtener la transacción
// del EntityManager e iniciarla
em.getTransaction().begin();
// Una consulta a la entidad proveedor
Proveedor p = em.find(Proveedor.class, idProveedor);
//Asignación del proveedor al artículo
articulo.setIdProveedor(p);
// Marcar el registro en la base de datos
em.persist(articulo);
// Ejecutar la transacción
em.getTransaction().commit();

return null;
}

Es necesario hacer notar que el método indica el retorno de un String y que este caso se regresa un null, esto es
parte importante para la navegación en JSF y será descrito más delante en este manual.

39
Creando el Listado de Artículos
Una vez que nos es posible agregar artículos a la base de datos, es el momento de listar, para lo cual, se repetirán
los pasos para la creación de un nuevo JSF.

El JSF se creará con base a:

40
 File Name: Es el nombre del JSF, en el cual se utilizará ListarArticulos
 Project: El proyecto en el que se está trabajando
 Folder: La carpeta en la cual será guardada el archivo, en este caso. web/articulo. Esta propiedad es
importante para ir organizando el proyecto.

41
Una vez creada la página hay que hacer que luzca de la siguiente manera;

Donde:

 El botón llevará el nombre de agregarArticulo

 El listado debe ser de tipo Table y con nombre articulos.

Nota: De preferencia no utilizar acentos en los nombres de los componentes, en ocasiones acarrean problemas.

42
Listando los artículos
El componente que a utilizar de los Visual Web JSF, tiene la capacidad de mostrar la información directamente
desde la base de datos. Para lograr esto sólo necesita hacer algo similar a lo realizado en el combo box.

Ir al tab de Servicios; seleccionar la conexión a la base de datos; ahora seleccionar la tabla de artículos, dele click
y arrastré la tabla a su componente de JSF, notar como cambiará después de unos segundos, mostrándo los
campos de la tabla.

Si se desea modificar los encabezados, se necesita:

1. Seleccionar su Componente Table.

2. Presionar el otro botón del mouse y seleccionar la opción de Table Layout

Unos segundos después aparecerá la siguiente pantalla en la cual se pueden hacer modificaciones al listado.

43
44
Esta pantalla permite modificar la información que despliega el componente, así como también la forma en la que
lo hace.

En la parte superior permite seleccionar cuales columnas aparecerán en pantalla y por cada columna se pueden
hacer cambios en las siguientes propiedades:

 Header Text: Es el título de la columna

 Componente Type: Indica en que será el contenido de la columna, puede ser en un cuadró de texto, un
drop down o simplemente texto.
 Value Expresion: Es la manera en la que accede a la que accede a la información a desplegar.
 Width: El ancho de la columna.
 Sorteable: Nos indica si la columna puede ser ordenado presionando click en su título.

Nota: '

Para que la información del listado se actualice, es necesario agregar el siguiente código en el método de
prerender().

public void prerender() {

this.articuloDataProvider.refresh();
}

45
Modificando el EJB-QL de los RowSets
Hasta el momento se ha podido desplegar información en el Listado de artículos, sin embargo quizás se haya
notado que la información que aparece del proveedor es su id, no el nombre del proveedor. Por lo tanto si se
desea modificar los atributos de la consulta que será utilizada en el componente visual, se puede llevar a cabo el
siguiente procedimiento:

1. Seleccionar la modificación del RowSet

46
47
48
Modificar el formato de la tabla

49
50
Creando la navegación entre dos JSF
La navegación en los JSF se hace utilizando reglas de navegación (Navigation Rules), las cuales se describen en
el archivo faces-config.xml, el cual se puede encontrar en Netbeans en la pestaña de Projects abriendo la
carpeta de Configuration files del proyecto, con el que se está trabajando.

Al abrir el archivo aparecerá una pantalla como la siguiente;

51
52
Al observar el editor se pueden apreciar dos vistas en la parte superior. Para realizar la navegación se utilizará la
de Page Flow.

Ahora para realizar la navegación del listado a la captura de artículos se necesita seleccionar el recuadro con el
nombre de artículo/ListarArticulos.jsp y dentro de ese recuadro seleccionar donde dice agregarArticulo, ya
que esté hace referencia al botón que se agregó en un JSF.

Una vez seleccionado el botón se mantiene presionado el mouse con el cual aparecerá una línea que se tiene que
guiar a el cuadro que tiene el nombre de articulo/capturarArticulo.

53
54
Una vez realizado esto, seleccionar la línea direccionada que se acaba de crear y en la paleta de propiedades, se le
asigna a la propiedad de Outcome la palabra capturar. Una vez que el evento de JSF es invocado y regresa una
cadena con la palabra capturar, el manejador de JSF redireccionará al otro jsp.

Ya que se haya registrado este navigation rule, es necesario ir la Vista de Java del JSF ListarArticulos.jsp y ver
que al final nos creó un método como el siguiente:

public String agregarArticulo_action() {

// TODO: Process the action. Return value is a navigation
// case name where null will return to the same page.
return "case1";
}

En caso de que Netbeans no haya detectado el cambio en el nombre del navigation rule, se tendrá que hacer
manualmente, con lo cual el método quedaría de la siguiente manera:

public String agregarArticulo_action() {

return "capturar";
}

Nota:

Es necesario que la cadena que regresa el método sea igual que el nombre del Outcome en el faces-config.xml

55
Navegación de capturar artículo a listar artículo
Ahora se repite el mismo procedimiento, pero seleccionando como origen capturarArticulo en el botón de
registrar y apuntando a ListarArticulo. Cambiar el nombre de la navigation rule por listar.

Es necesario revisar que el método registrar ahora si regrese la cadena listar.

Se prueba la aplicación y cuando se registre un artículo nuevo el sistema deberá mostrar la pantalla de listado de
artículos actualizado.

Con esto se termina el flujo de la captura y listado de información utilizando JSF y JPA con Netbeans.

56
Referencias Bibliográficas:

Tutorial de JPA y JSF, disponible en http://wiki.cetechihuahua.gob.mx/index.php/JPA_y_JSF#Objetivo.

57