Guía de aprendizaje de herramientas JSF: construir una
aplicación JSF 2.0
Resumen
En esta guía de aprendizaje construiremos y
ejecutaremos una aplicación web de JSF 2.0, y resaltaremos las características
proporcionadas por el proyecto de herramientas JSF.
Introducción
El proyecto Herramientas JSF proporciona herramientas que
simplifican la construcción de aplicaciones web JSF 2.0. Estas incluyen un
Editor de fuente HTML que proporciona asistencia de contenido y validación para
códigos JSF. En esta guía de aprendizaje crearemos y ejecutaremos una aplicación
web JSF 2.0. En la
página
Novedades destacables se indican todas las características de herramientas
disponibles para dar soporte al desarrollo de una aplicación web JSF
2.0.
Configuración
Configurar la instancia del servidor Apache Tomcat
Configure una
instancia del servidor Apache Tomcat con la información de la sección
'Configurar' de esta guía de aprendizaje
Construir
y ejecutar una aplicación web.
Cree un proyecto de JavaServer Faces
Cree una nueva aplicación de web
dinámica con el nombre
JSFFaceletsTutorial. Establezca el tiempo de
ejecución de destino en
Apache Tomcat 6.0
En la sección
Configuración, pulse el botón
Modificar y seleccione la faceta
“JavaServer Faces 2.0”. Sáltese el panel siguiente para pasar a la página
Posibilidades de JSF.
En la página Prestaciones de JSF, en el
desplegable para el Tipo de biblioteca JSF, seleccione
Biblioteca de
usuario.
Pulse el icono
Descargar
biblioteca. Se visualiza el diálogo Descargar biblioteca con la lista de
proveedores para los archivos JAR de implementación de JSF. Seleccione la
biblioteca JSF 2.0 (Mojarra). Pulse
Siguiente. Acepte la licencia y pulse
Finalizar
La herramienta descarga los archivos JAR,
crea una biblioteca de usuario JDT y la añade al proyecto actual. Seleccione el
recuadro de selección para la nueva biblioteca si no está seleccionado. A
continuación, seleccione el icono
Gestionar bibliotecas.
Pulse en el botón
Finalizar
para crear la aplicación de JavaServer Faces. Puede que se le solicite que elija
la perspectiva J2EE al terminar. Pulse Aceptar.
Se ha creado la
aplicación JSF.
Crear páginas de plantillas de facelets
Ahora creará una página de
plantilla de facelets. Cree una carpeta llamada
templates en la carpeta
WEB-INF. Utilice el asistente para crear una página de plantilla llamada
BasicTemplate.xhtml bajo esta carpeta. Pulse con el botón derecho sobre
la carpeta
template, seleccione
Nuevo > HTML para lanzar el
asistente HTML. En la página Seleccionar plantillas del asistente, seleccione la
plantilla
Plantilla de facelet nueva. Pulse Finalizar.
Edite
el archivo de plantilla siguiendo las instrucciones de la plantilla. Creará e
incluirá las plantillas de cabecera y pie de página. La plantilla final debería
tener el aspecto siguiente.
BasicTemplate.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">Guía de aprendizaje de facelets</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
Cree las plantilla de cabecera y pie de página bajo la carpeta
template mediante el
asistente HTML nuevo tal como se describe más
arriba. En la página Seleccionar plantilla del asistente, elija los archivos de
plantilla correspondientes,
Cabecera de facelet nueva y
Pie de página
de facelet nuevo. Haga los cambios en las plantillas tal como se muestran
más abajo.
Crear una página JSF
Cree una página JSF con códigos de facelets que
utilizarán la plantilla creada en el paso anterior. Utilice el asistente de
página HTML para crear una página llamada
login.xhtml en la carpeta
contenido web de la nueva aplicación. En la página Seleccionar plantillas del
asistente, seleccione la plantilla
Página de composición de facelet
nueva. Pulse Finalizar.
login.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="">
<ui:define name="cabecera">
Añada aquí su cabecera o suprima para utilizar el valor predeterminado
</ui:define>
<ui:define name="contenido">
Añada aquí su contenido o suprima para utilizar el valor predeterminado
</ui:define>
<ui:define name="pie de página">
Añada aquí su pie de página o suprima para utilizar el valor predeterminado
</ui:define>
</ui:composition>
</html>
Validación de atributos de código de facelets y asistencia de
contenido
El proyecto de herramientas JSF añade soporte para validar los
atributos de códigos de Facelets y también proporciona asistencias de contenido
sobre ellos. Fíjese en el aviso sobre el atributo
template del código
<ui:composition>.
Sitúe el cursor entre las comillas del
atributo
template y pulse
Control + Barra espaciadora para obtener
la asistencia de contenido. Debería ver un cuadro emergente con una lista de los
directorios bajo la carpeta
WebContent. Seleccione
/WEB-INF/templates/BasicTemplate.xhtml
Completar la página JSF
Suprima los códigos
<ui:define>
para la cabecera y el pie de página. La página obtendrá la cabecera y el pie de
página de la plantilla. Añada los códigos para el inicio de sesión en la sección
content tal como se muestra a continuación. Tenga en cuenta que el
release actual del proyecto de herramientas JSF no soporta la representación
visual de una página XHTML en el Editor de páginas web JSF. Sin embargo todas
las características de productividad disponibles en la Página fuente del Editor
de páginas Web para editar una página JSP están disponibles en el editor de
fuente HTML para construir una página de facelets JSF en
XHTML.
login.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Name"></h:outputText>
<h:inputText value="#{loginBean.name}"></h:inputText>
<h:outputText value="Password"></h:outputText>
<h:inputSecret value="#{loginBean.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton value="Login" action="login"></h:commandButton>
</h:form>
</ui:define>
</ui:composition>
</html>
Configurar el bean gestionado
En el Explorador de proyectos, expanda el
nodo JSFFaceletsTutorial->WebContent. Efectúe una doble pulsación sobre
faces-config.xml . Esto también iniciará el editor de configuración de
Faces. Seleccione la pestaña
ManagedBean.
Pulse el botón
Añadir. Esto
iniciará el asistente Nuevo bean gestionado. Seleccione la opción
Crear una
nueva clase Java. En el siguiente panel del asistente, especifique el
paquete como
com.tutorial y el Nombre de la clase como
LoginBean .
Pulse el botón Finalizar.
Esto creará la clase Java y la registrará como un
bean gestionado. Guarde el editor de configuración de Faces. Para editar la
clase Java, pulse en el hiperenlace
Clase ManagedBean en la página Bean
gestionado tal como se muestra en la siguiente imagen. Esto iniciará el editor
de Java.
Edite la clase Java
com.tutorial.LoginBean. Añada el siguiente código y guarde.
LoginBean.java
/**
* LoginBean.java
*
*/
package com.tutorial;
public class LoginBean
{
private String name;
private String password;
public String getName ()
{
return name;
}
public void setName (final String name)
{
this.name = name;
}
public String getPassword ()
{
return password;
}
public void setPassword (final String password)
{
this.password = password;
}
}
Añadir otra página
Cree una página HTML welcome.xhtml nueva en
WebContent con el contenido siguiente:
welcome.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
</ui:define>
</ui:composition>
</html>
Configuración de reglas de navegación de página
Efectúe una doble
pulsación sobre faces-config.xml para abrir el Editor de configuraciones Faces.
Pulse la pestaña
Regla de navegación. Ahora arrastre los archivos
login.xhtml y welcome.xhtml del Explorador de proyectos a la cuadrícula Regla de
navegación tal como se muestra.
Pulse sobre la herramienta Enlazar en la paleta
de la derecha. Ahora arrastre una flecha de login.xhtml a welcome.xhtml tal como
se muestra.
Ahora, pulse sobre la flecha y abra la vista
Propiedades. Pulse sobre el botón con las elipses junto al campo “De
resultado”
Seleccione “Conexión” en este diálogo. Pulse
Aceptar
Nuestra regla de navegación está ahora configurada.
Ejecutar la página de facelets JSF
Ahora ejecutaremos la página
login.xhtml contra el servidor Apache Tomcat. Elija
Ejecutar en
servidor mediante el menú de contexto mientras selecciona la página
login.xhtml en el navegador. Seleccione el servidor Apache Tomcat y
configúrelo según sea necesario si no lo ha hecho aún. Pulse Finalizar. Debería
ver en la vista Consola que se inicia el servidor Tomcat y, a continuación,
debería ver la página de inicio de sesión ejecutándose aparecer en el navegador
web tal como se muestra a continuación.
¡Felicidades! Ha creado y ejecutado
su primera aplicación de facelets JSF.
