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.0En 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.
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>
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.
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.
