¡Bienvenidos a todos! Esta publicación formará parte de una serie de 10 publicaciones que estaré desarrollando para aprender a crear una aplicación web en Java, bajo la plataforma JEE usando los frameworks de JPA y JSF. Este será un curso en forma de guía para todas aquellas personas que estén empezando en el mundo de la programación web.
En este curso aprenderemos a desarrollar aplicaciones web en N-CAPAS utilizando los patrones de diseño JEE, el estilo arquitectónico MVC y las funcionalidades provistas por los framework JSF (Java Server Faces) a nivel de vista-controlador y por JPA (Java Persistence API) a nivel de persistencia.
Este curso estará dividido en dos partes, En la primera parte, aprenderemos a configurar y utilizar el framework JPA mediante el desarrollo de aplicaciones Stand.Alone. En la segunda parte, aprenderemos a utilizar el framework JSF para desarrollar aplicaciones web. Por último, integraremos las funcionalidades de ambos frameworks en una aplicación final.
En este curso aprenderemos a desarrollar aplicaciones web en N-CAPAS utilizando los patrones de diseño JEE, el estilo arquitectónico MVC y las funcionalidades provistas por los framework JSF (Java Server Faces) a nivel de vista-controlador y por JPA (Java Persistence API) a nivel de persistencia.
Este curso estará dividido en dos partes, En la primera parte, aprenderemos a configurar y utilizar el framework JPA mediante el desarrollo de aplicaciones Stand.Alone. En la segunda parte, aprenderemos a utilizar el framework JSF para desarrollar aplicaciones web. Por último, integraremos las funcionalidades de ambos frameworks en una aplicación final.
APLICACIÓN
Se presenta un formulario donde se debe ingresar el nombre y apellido de una persona y al presionar el botón “Procesar”. La aplicación responde con una página de saludo (ver imagen 1).
Aplicacion_JSF_01
 |
| Imagen 1 |
(1) Pasos para la configuración del proyecto
Paso 1 - Crear un proyecto web en java
Acceda al siguiente link para saber como crear un "Dynamic Web Proyect" usando Eclipse como IDE.
Paso 2 - Agregar las librerías básicas de JSF
Si se está ejecutando la aplicación en un contenedor web que no soporta a JSF, las librerías del framework deben colocarse en el fólder “lib” de la aplicación (ver imagen 2):
Si se está ejecutando la aplicación en un contenedor web que no soporta a JSF, las librerías del framework deben colocarse en el fólder “lib” de la aplicación (ver imagen 2):
Paso 3 - Configurar el Faces Servlet
Dentro del archivo descriptor o deployment descriptor "web.xml" de la aplicación (ubicado en la carpeta WEB-INF del WebContent), se debe registrar el servlet controlador llamado “Faces Controller”.
Dentro del archivo descriptor o deployment descriptor "web.xml" de la aplicación (ubicado en la carpeta WEB-INF del WebContent), se debe registrar el servlet controlador llamado “Faces Controller”.
faces/inicio.xhtml Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet /faces/* javax.faces.DEFAULT_SUFFIX .xhtml javax.faces.FACELETS_SKIP_COMMENTS true
(2) Crear los Managed Beans
💁 Un "Manged Bean" es una clase java que representa información de un formulario web y existe dos maneras de configurarlos:
➢ Usando anotaciones dentro del programa Java. Es la forma más recomendada pues permite un código más cohesionado y fácil de mantener. Se emplea la anotación @ManagedBean antes de la definición de la clase (desde JSF 2.0).
➢ Usando XML dentro del archivo faces-config.xml. Se emplea el tag <managed-bean> para efectuar la declaración
💁 Un "Manged Bean" es una clase java que representa información de un formulario web y existe dos maneras de configurarlos:
➢ Usando anotaciones dentro del programa Java. Es la forma más recomendada pues permite un código más cohesionado y fácil de mantener. Se emplea la anotación @ManagedBean antes de la definición de la clase (desde JSF 2.0).
➢ Usando XML dentro del archivo faces-config.xml. Se emplea el tag <managed-bean> para efectuar la declaración
Paso 1 - Crear el Managed Bean FormularioBean.java
Crear el Managed Bean "FormularioBean.java" en el paquete "pe.edu.aprender.managed".
💁 Un “managed Bean” típicamente tiene 3 partes:
a) Las propiedades del Bean: generalmente un getter y un setter por cada atributo. Los métodos setter son invocados automáticamente por el JSF cuando el formulario web es enviado.
b) Métodos para controlar acciones: Generalmente es sólo un método, pero podrían ser varios si es que el formulario posee múltiples botones de envío.
c) Un lugar para los datos resultantes: No es invocado automáticamente por JSF. Debe ser llenado por el método controlador en base a los resultados de la lógica de negocio.
Crear el Managed Bean "FormularioBean.java" en el paquete "pe.edu.aprender.managed".
💁 Un “managed Bean” típicamente tiene 3 partes:
a) Las propiedades del Bean: generalmente un getter y un setter por cada atributo. Los métodos setter son invocados automáticamente por el JSF cuando el formulario web es enviado.
b) Métodos para controlar acciones: Generalmente es sólo un método, pero podrían ser varios si es que el formulario posee múltiples botones de envío.
c) Un lugar para los datos resultantes: No es invocado automáticamente por JSF. Debe ser llenado por el método controlador en base a los resultados de la lógica de negocio.
package pe.edu.aprender.managed;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
// Anotaciones
@ManagedBean(name = "formulario")
public class FormularioBean {
// Atributos
private String nombre;
private String apellido;
// Getter/Setter
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getApellido() {
return apellido;
}
public void setApellido(String apellido) {
this.apellido = apellido;
}
public String procesar() {
FacesContext.getCurrentInstance().addMessage(
null,
new FacesMessage("Su nombre completo es: ".concat(getNombre())
.concat(" ").concat(getApellido())));
return "resultado"; // donde resultado = formulario.xhtml
}
}
(3) Crear las páginas XHTML
Paso 1 - Crear las siguientes paginas: inicio.xhtml, formulario.xhtml, resultado.xhtml y final.xhtml en el webContent del proyecto
💁 La construcción de páginas se realiza con “Facelets XHTML” empleando para ello “tag libraries”.
➢ Se puede declarar las librerías usando “XML namespaces”:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
➢ o usando la forma tradicional:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
💁 La construcción de páginas se realiza con “Facelets XHTML” empleando para ello “tag libraries”.
➢ Se puede declarar las librerías usando “XML namespaces”:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
➢ o usando la forma tradicional:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
. inicio.xhtml
. formulario.xhtml
La siguiente expresión en el atributo value de las etiquetas "inputText", es una forma abreviada de invocar a los métodos “getNombre()” y "getApellido()" de un Managed Bean llamado “formulario”:
· La primera parte (en este caso “formulario”) es la “BASE” que indica el ámbito donde buscar.
· La segunda parte (en este caso “nombre”) es la propiedad, la cual puede navegarse usando la notación dot.(.).
Una facilidad que brinda EL (Expressions Languages), es la invocación directa a métodos públicos y no estáticos de los managed beans. Como se puede apreciar en el atributo action de la etiqueta "commandButton procesar"
La siguiente expresión en el atributo value de las etiquetas "inputText", es una forma abreviada de invocar a los métodos “getNombre()” y "getApellido()" de un Managed Bean llamado “formulario”:
· La primera parte (en este caso “formulario”) es la “BASE” que indica el ámbito donde buscar.
· La segunda parte (en este caso “nombre”) es la propiedad, la cual puede navegarse usando la notación dot.(.).
Una facilidad que brinda EL (Expressions Languages), es la invocación directa a métodos públicos y no estáticos de los managed beans. Como se puede apreciar en el atributo action de la etiqueta "commandButton procesar"
. resultado.xhtml
. final.xhtml
Paso 2 - Ejecutar la aplicación
Hay dos formas de poder ejecutar nuestra aplicación para poder probarla. Esto es valido solo si estas usando Apache Tomcat.
1. La primera y la más sencilla es el despliegue automático, es decir, que Eclipse se encargue de ello, tan solo dando clic derecho al proyecto y seleccionar la opción "Run As/Run on Server". Eclipse iniciará el servidor por nosotros y abrirá el navegador con la siguiente URL "localhost:8080/Aplicacion_13_final_JSF_01/faces/inicio.xhtml". Si te preguntas, como es que Eclipse hace este trabajo, es muy sencillo. Lo que hace Eclipse, es publicar el proyecto en un directorio dentro del workspace, en mi caso en la siguiente ruta "G:\Programación\Programas\VersionesEclipse\workspace\indigo\SesionesDAW2\metadata\plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps". Esto se puede ver dando clic derecho al proyecto y seleccionar la opción "Run As/Run Configurations" como se muestra en la siguiente imagen, donde se puede ver como Eclipse inicia Tomcat con la aplicación (ver imagen 3).
2. La segunda es el despliegue mediante un archivo .war (de Web Application Archive- Archivo de Aplicación Web), para luego copiarlo en la carpeta webapps del servidor tomcat y mediante linea de comandos poder deployarlo.
a) Para exportar, clic derecho al proyecto y seleccionar la opción "export/WAR File" (ver imagen 4).
b) Copiamos el archivo .war a la carpeta webapps del servidor tomcat, en mi caso es "C:\Apache\Apache Tomcat 7.0.22\webapps".
c) Abrir la consola de comandos CMD y acceder en mi caso a "C:\Apache\Apache Tomcat 7.0.22\bin".. Para iniciar el servidor digitar el comando "startup" y para apagar el comando "shutdown" (ver imagen 5).
d) Abrir el navegador y acceder en mi caso a la siguiente URL "localhost:8080/Aplicacion_13_final_JSF_01/faces/inicio.xhtml".
ESTRUCTURA FINAL DEL PROYECTO
Paso 2 - Ejecutar la aplicación
Hay dos formas de poder ejecutar nuestra aplicación para poder probarla. Esto es valido solo si estas usando Apache Tomcat.
1. La primera y la más sencilla es el despliegue automático, es decir, que Eclipse se encargue de ello, tan solo dando clic derecho al proyecto y seleccionar la opción "Run As/Run on Server". Eclipse iniciará el servidor por nosotros y abrirá el navegador con la siguiente URL "localhost:8080/Aplicacion_13_final_JSF_01/faces/inicio.xhtml". Si te preguntas, como es que Eclipse hace este trabajo, es muy sencillo. Lo que hace Eclipse, es publicar el proyecto en un directorio dentro del workspace, en mi caso en la siguiente ruta "G:\Programación\Programas\VersionesEclipse\workspace\indigo\SesionesDAW2\metadata\plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps". Esto se puede ver dando clic derecho al proyecto y seleccionar la opción "Run As/Run Configurations" como se muestra en la siguiente imagen, donde se puede ver como Eclipse inicia Tomcat con la aplicación (ver imagen 3).
 |
| Imagen 3 |
a) Para exportar, clic derecho al proyecto y seleccionar la opción "export/WAR File" (ver imagen 4).
b) Copiamos el archivo .war a la carpeta webapps del servidor tomcat, en mi caso es "C:\Apache\Apache Tomcat 7.0.22\webapps".
c) Abrir la consola de comandos CMD y acceder en mi caso a "C:\Apache\Apache Tomcat 7.0.22\bin".. Para iniciar el servidor digitar el comando "startup" y para apagar el comando "shutdown" (ver imagen 5).
d) Abrir el navegador y acceder en mi caso a la siguiente URL "localhost:8080/Aplicacion_13_final_JSF_01/faces/inicio.xhtml".
 |
| Imagen 4 |
ESTRUCTURA FINAL DEL PROYECTO
No hay comentarios, ¡cuéntame algo!
Me gustaría saber tu opinión. ¡Saludos!