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.
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.
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
Se ha creado la aplicación JSF.
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.
<!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.
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>
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
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.
<!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>
/**
* 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;
}
}
Cree una página HTML welcome.xhtml nueva en WebContent con el contenido siguiente:
<!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>
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.
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.