instituto politecnico nacional escuela superior de computó

INSTITUTO POLITECNICO NACIONAL
ESCUELA SUPERIOR DE COMPUTÓ
PRACTICA:
“Introduccion a JavaServer Faces*JSF”
MATERIA:
WEB APPLICATION DEVELOPMENT
PROFESOR:
CIFUENTES ALVAREZ ALEJANDRO SIGFRIDO
ALUMNA:
ANA KAREN ECHAVARRIA ACOSTA
GRUPO:
3CM2
IINTRODUCCION
JavaServer Faces (JSF) es una interfaz de usuario (UI) para las aplicaciones web Java.
Está diseñado para aliviar considerablemente la carga de la escritura y
mantenimiento de las aplicaciones que se ejecutan en un servidor de aplicaciones
Java y prestar sus interfaces de usuario de nuevo a un cliente de destino. JSF
proporciona facilidad de uso de las siguientes maneras:





Hace que sea fácil de construir una interfaz de usuario de un conjunto de
componentes de interfaz reutilizables
Simplifica la migración de los datos de las aplicaciones hacia y desde la interfaz
de usuario
Ayuda a administrar el estado de la interfaz de usuario a través de peticiones al
servidor
Proporciona un modelo simple para el cableado de los eventos generados por
el cliente al código de la aplicación del lado del servidor
Permite que los componentes de interfaz de usuario que se construye
fácilmente y volverse a utilizar
Creación de un nuevo proyecto JSF 2.0
Utilice el asistente del IDE Proyecto para crear una nueva aplicación web en Java.
Para ello, haga clic en el nuevo proyecto (
), Situado en la barra de herramientas
principal del IDE, o presione Ctrl + Mayúsculas + N (⌘ + Mayúsculas + N en Mac). Al
llegar al Paso 4: Marcos, seleccione Java Server Faces.
Después de seleccionar JavaServer Faces, varias opciones de configuración están
disponibles para usted, como se muestra en la imagen de arriba. Puede determinar
cómo su proyecto tenga acceso a las bibliotecas JSF 2.0. Haga clic en la ficha
Configuración para especificar cómo el servlet Faces se registrará en el descriptor de
despliegue del proyecto.
Adición de JSF 2.0 Apoyo a un proyecto existente
Si quiere añadir soporte JSF 2.0 a una aplicación web Java existente, puede hacerlo
desde la ventana de su proyecto en Propiedades.
1. En la ventana de Proyectos (Ctrl-1; ⌘ -1 en Mac), haga clic en el nodo del
proyecto y seleccione Propiedades. La ventana Propiedades del proyecto
muestra.
2. Seleccione la categoría de Marcos, a continuación, haga clic en el botón
Agregar. En el cuadro de diálogo que aparece, seleccione JavaServer Faces.
Adición de JSF 2.0 a una aplicación Web
1. Haga clic en el Open Project (
), Situado en la barra de herramientas
principal del IDE, o presione Ctrl + Mayús + O (⌘ + Mayúsculas + O en Mac).
2. En el cuadro de diálogo Abrir proyecto, vaya a la ubicación en el equipo
donde se almacena el proyecto de tutorial descomprimido. Selecciónelo y
haga clic en Abrir proyecto para abrirlo en el IDE.
3. Ejecutar el proyecto para ver cómo se ve en un navegador. O haga clic con el
jsfDemo nodo del proyecto en la ventana de proyectos y seleccione Ejecutar,
o haga clic en el proyecto de ejecución (
).
4. Haga clic en el botón Enviar. La página de respuesta ( response.xhtml ) muestra
la siguiente manera:
5. En la ventana de Proyectos, haga clic en el nodo del proyecto y seleccione
Propiedades. La ventana Propiedades del proyecto muestra.
6. Seleccione la categoría de Frameworks, a continuación, haga clic en el botón
Agregar. En el cuadro de diálogo que aparece, seleccione JavaServer Faces
continuación, haga clic en Aceptar.
Después de seleccionar JavaServer Faces, varias opciones de configuración
disponibles. En la pestaña Bibliotecas, puede especificar cómo el proyecto JSF
tiene acceso a las bibliotecas 2.0. La opción por defecto es el uso de las
bibliotecas incluidas en el servidor (el servidor GlassFish). Sin embargo, el IDE
también los paquetes de las bibliotecas JSF 2.0. (Usted puede seleccionar la
opción Bibliotecas de registro si desea que su proyecto para utilizar los
mismos.)
7. Haga clic en la pestaña de Configuración. Puede especificar cómo el servlet
Faces está registrado en el descriptor de despliegue del proyecto. También
puede indicar si desea Facelets o páginas JSP para ser el utilizado en el
proyecto.
8. Haga clic en Aceptar para finalizar los cambios y salir de la ventana
Propiedades del proyecto.
Después de añadir soporte JSF para el proyecto, el proyecto web.xml
descriptor de despliegue se ha modificado para tener el siguiente aspecto.
(Los cambios en negrita.)
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Creación de un Managed Bean
Usted puede utilizar JSF Managed Bean para procesar los datos del usuario y
consérvelo entre las solicitudes. Un Managed Bean es un POJO (Plain Old Java
Object) que puede ser usado para almacenar datos, y es gestionado por el
contenedor (por ejemplo, el servidor GlassFish) utilizando el marco JSF.
Un POJO es esencialmente una clase Java pública, sin constructor sin argumentos y
se ajusta a los JavaBeans convenciones de nomenclatura para sus propiedades.
En cuanto a la página estática producida a partir de la ejecución del proyecto, se
necesita un mecanismo que determina si un número introducido por el usuario
coincide con el seleccionado en ese momento, y devuelve la visión de que es
apropiado para este resultado. Utilizar el asistente del IDE de Managed Bean para
crear un Managed Bean para este fin. Las páginas de Facelets que se crean en la
siguiente sección se necesitan para acceder al número que el usuario escribe, y la
respuesta generada. Para permitir esto, añade userNumber y response a las
propiedades del Managed Bean
Usando el asistente de Managed Bean
1. En la ventana de Proyectos, haga clic en el jsfDemo nodo del proyecto y
seleccione Nuevo> JSF Managed Bean. (Si Bean Managed no está en la lista,
elija Otro. A continuación, seleccione la opción de JSF Managed Bean de la
categoría JavaServer Faces. Haga clic en Siguiente.)
2. En el asistente, escriba lo siguiente:
 Nombre de clase: UserNumberBean
 Paquete: guessNumber
 Nombre: UserNumberBean
 Ámbito de aplicación: Sesión
3. Haga clic en Finalizar. El UserNumberBean clase se genera y se abre en el
editor. Tenga en cuenta las siguientes anotaciones (en negrita):
package guessNumber;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="UserNumberBean")
@SessionScoped
public class UserNumberBean {
/** Creates a new instance of UserNumberBean */
public UserNumberBean() {
}
}
Creando un Constructor
El constructor de UserNumberBean debe generar un número aleatorio entre 0 y 10 y
almacenarlo en una variable de instancia. Esta parte constituye la lógica de negocio
para la aplicación.
1. Definir un constructor para la clase UserNumberBean. Escriba el siguiente
código (los cambios que aparecen en negrita).
public class UserNumberBean {
Integer randomInt;
/** Creates a new instance of UserNumberBean */
public UserNumberBean() {
Random randomGR = new Random();
randomInt = new Integer(randomGR.nextInt(10));
System.out.println("Duke's number: " + randomInt);
}
}
El código anterior genera un número aleatorio entre 0 y 10, y muestra el número en el
registro del servidor.
2. Fijar las importaciones. Para ello, haga clic en la insignia de pista ( ) Que
aparece en el margen izquierdo del editor, a continuación, elija la opción de
importar java.util.Random en la clase.
3. Ejecute el proyecto nuevo (haga clic en el proyecto de ejecución ( ), O pulse
F6; Fn-F6 en Mac). Cuando se ejecuta el proyecto, el archivo del servidor de
registro se abrirá automáticamente en la ventana de resultados.
4. Tenga en cuenta que no ve " Duke's number: "aparece en la salida (como se
indica desde el constructor). El objeto UserNumberBean no se creó porque JSF
utiliza “lazy instantiation (instanciación perezosa)” por defecto.
5. Debido a que UserNumberBean es session-scoped,
@ManagedBean(name="UserNumberBean")
@SessionScoped
public class UserNumberBean implements Serializable {
Se tiene que implementar la interfaz serializable.
Agregar propiedades
Las páginas de Facelets que se crean en la siguiente sección se necesitan para
acceder al número que el usuario escribe, y la respuesta generada. Para facilitar
esto, añade userNumber y la response las propiedades a la clase.
1. Empieza por declarar un Integer llamado userNumber .
@ManagedBean(name="UserNumberBean")
@SessionScoped
public class UserNumberBean implements Serializable {
Integer randomInt;
Integer userNumber;
2. Haga clic derecho en el editor de código y elija Insertar. Elija getter y setter.
3. Seleccione userNumber : Integer opción.
Haga clic en Generar. Tenga en cuenta que los métodos getUserNumber() y
setUserNumber(Integer userNumber) se agregan en la clase.
4. Crear la propiedad response. Declarar un String llamado response .
@ManagedBean(name="UserNumberBean")
@SessionScoped
public class UserNumberBean implements Serializable {
Integer randomInt;
Integer userNumber;
String response;
5. Cree un método get() para response . (Esta aplicación no requerirá setter().) Se
puede usar el código que genera la IDE Generar como se muestra en el paso 2
para generar código de la plantilla. Para fines de este tutorial sin embargo,
pegue el siguiente método en la clase.
public String getResponse() {
if ((userNumber != null) && (userNumber.compareTo(randomInt) == 0)) {
//invalidate user session
FacesContext context = FacesContext.getCurrentInstance();
HttpSession session = (HttpSession) context.getExternalContext().getSession(false);
session.invalidate();
return "Yay! You got it!";
} else {
return "<p>Sorry, " + userNumber + " isn't it.</p>"
+ "<p>Guess again...</p>";
}
}
El método anterior realiza dos funciones:
I.
II.
Comprueba si el número introducido por el usuario ( userNumber ) es
igual al número aleatorio generado por el período de sesiones (
randomInt ) y devuelve una String de respuesta en consecuencia.
Se invalida la sesión del usuario si el usuario adivina el número correcto
(es decir, si userNumber igual randomInt ). Esto es necesario para que un
nuevo número se genera si el usuario quiere volver a jugar.
6. Haga clic derecho en el editor y elegir las importaciones Fix (Alt-Shift-I; ⌘ +
Mayúsculas + I en Mac). Declaraciones de importación se crean
automáticamente para:


javax.servlet.http.HttpSession
javax.faces.context.FacesContext
Puede pulsar Ctrl-Espacio en los elementos del editor e invoca la ejecución de
códigos sugerencias y apoyo de documentación. Presione Ctrl-Espacio en
FacesContext para ver la descripción de clase de la Javadoc.
Haga clic en el navegador de Internet ( ) En el icono en la ventana de la
documentación para abrir el Javadoc en un navegador web externo.
Conectando Managed Beans a paginas
Uno de los propósitos principales de JSF es eliminar la necesidad de escribir código
repetitivo para gestionar POJOs y su interacción con los puntos de vista de la
aplicación. Este concepto se conoce como Inversión de Control (COI), que le
permite al contenedor tomar la responsabilidad de la gestión de partes de la
aplicación que de otro modo sería necesario que el desarrollador escribir código
repetitivo.
index.xhtml
1. Abra el index.xhtml en el editor. Haga doble clic en el nodo index.xhtml desde
la ventana de proyectos.
2. Comente el elemento de formulario HTML.
3. Elimine el comentario del formulario JSF HTML.
Tras descomentar el componente JSF formulario HTML, el editor indica que la
<h:form> , <h:inputText> y <h:commandButton> etiquetas no han sido
declaradas.
4. Para declarar estos componentes, utilice la finalización de la IDE de código
para agregar el espacio de nombres de biblioteca de etiquetas a la página de
<html> etiqueta. Coloque el cursor sobre cualquiera de las etiquetas no
declaradas y pulse Ctrl-Espacio. Sugerencias sobre el código de terminación y
muestra la documentación de apoyo.
(Si hay múltiples opciones, asegúrese de seleccionar la etiqueta que se muestra
en el editor antes de hacer clic en ENTRAR.) El JSF etiquetas HTML tag biblioteca
de espacio de nombres se añade a la <html> etiqueta (se muestra en negrita a
continuación), y desaparecen los indicadores de error .
<Xmlns html = "http://www.w3.org/1999/xhtml"
xmlns: h = ""> http://java.sun.com/jsf/html~~HEAD=NNS
5. Utilice el lenguaje de expresiones JSF para unir a la propiedad userNumber de
UserNumberBean al componente inputText. El valor del atributo se puede utilizar
para especificar el valor actual del componente representado. <h:form>
<h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
Lenguaje de expresión JSF utiliza #{} en su sintaxis. Dentro de estos
delimitadores, se especifica el nombre del managed bean y la propiedad del
bean que desea aplicar, separados por un punto ( . ). Ahora, cuando los datos
del formulario se envían al servidor, el valor se guarda automáticamente en la
propiedad userNumber mediante setter de la propiedad ( setUserNumber() ).
Además, cuando se solicita la página y un valor para userNumber ya ha sido
establecido, el valor se mostrará automáticamente al mostrar el componente
inputText.
6. Especifique el destino de la petición que se invoca cuando se hace clic en el
botón de formulario. En la versión HTML del formulario, que fueron capaces de
hacer esto utilizando el atributo action de la etiqueta <form>. Con JSF, puede
utilizar el atributo action de commandButton. Por otra parte, debido a la
característica de navegación implícita de JSF 2.0, sólo se tiene que especificar
el nombre del archivo de destino, sin la extensión de archivo.
<h:form>
<h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
<h:commandButton id="submit" value="submit />
</ H: form>
Las búsquedas en tiempo de ejecución para JSF un archivo con el nombre
response . Se supone que la extensión de archivo es el mismo que el utilizado
por la extensión del archivo desde el que se originó la solicitud ( index .xhtml ) y
busca la response.xhtml archivo en el mismo directorio que el archivo de origen
(es decir, el webroot).
Nota: JSF 2.0 tiene como objetivo facilitar las tareas de los desarrolladores
mucho más fácil. Si se utiliza JSF 1.2 para este proyecto, que tendría que
declarar una regla de navegación en un archivo de configuración de Rostros
que tendría un aspecto similar al siguiente:
<navigation-rule>
<from-view-id>/index.xhtml</from-view-id>
<navigation-case>
<from-outcome>response</from-outcome>
<to-view-id>/response.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
7. Prueba si la expresión anterior EL de hecho llame a la setUserNumber() método
cuando se procesa la solicitud. Para ello, el uso de Java depurador del IDE.
Cambie a la UserNumberBean clase (Presione Ctrl-Tab y seleccione el archivo
de la lista.) Establecer un punto de interrupción en el setUserNumber() firma del
método. Usted puede hacer esto haciendo clic en el margen izquierdo. A
exhibidores de tarjetas rojas, lo que indica un punto de interrupción método se
ha establecido.
8. Haga clic en el proyecto de depuración (
), Situado en la barra de
herramientas principal del IDE. Una sesión de depuración se inicia, y la página
de bienvenida del proyecto se abre en el navegador.
Nota: Si aparece un proyecto de diálogo de depuración, seleccione la opción
por defecto "del lado del servidor Java" y haga clic en Depurar.
Response.xhtml
1. Abra el response.xhtml página en el editor. Haga doble clic en el
response.xhtml nodo desde la ventana de proyectos, o pulse las teclas Alt-ShiftO para usar la función Ir a Archivo de diálogo.
2. Comente el elemento de formulario HTML.
Nota: Para poner de relieve, o bien haga clic y arrastre en el editor con el
ratón, o bien, utilizando el teclado, mantenga pulsada la tecla Mayús y pulse
las teclas de flecha.
3. Elimine el cometario componente formulario JSF HTML. Resalte la apertura y
cierre <h:form> etiquetas y el código entre ellos.
En esta etapa, el código entre las <body> etiquetas es el siguiente:
<body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<h4> [respuesta aquí] </ h4>
<-! <form Action="index.xhtml">
<input type="submit" id="backButton" value="Back"/>
</ Form> ->
<h:form>
<h:commandButton id="backButton" value="Back" />
</ H: form>
</ Div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />
<-! <h:graphicImage Url="/duke.png" alt="Duke waving" /> ->
</ Div>
</ Div>
</ Body>
Tras descomentar el componente JSF formulario HTML, el editor indica que los
<h:form> y <h:commandButton> etiquetas no han sido declaradas.
4. Para declarar estos componentes, utilice la finalización de la IDE de código
para agregar el espacio de nombres de biblioteca de etiquetas a la página de
<html> etiqueta.
Utilizar el apoyo del editor de código para agregar la terminación necesarios
espacios de nombres JSF para el archivo. Al seleccionar una etiqueta JSF o
Facelets a través de finalización de código, el espacio requerido se añade
automáticamente al elemento raíz del documento.
<Xmlns html = "http://www.w3.org/1999/xhtml"
xmlns: h = ""> http://java.sun.com/jsf/html~~HEAD=NNS
5. Especifique el destino de la petición de que se invoca cuando el usuario hace
clic en el botón del formulario. Quiere configurar el botón de modo que
cuando un usuario hace clic en él, él o ella se devuelve a la página de índice.
Para lograr esto, utilice el commandButton 's action atributo. Escriba el código
que aparece en negrita.
<h:form>
<h:commandButton id="backButton" value="Back" action="index" />
</ H: form>
6. Vuelva a colocar la estática "[respuesta aquí]" texto con el valor de la
propiedad response de UserNumberBean. Para ello, utilice el lenguaje de
expresión JSF. Escriba el siguiente (en negrita).
<div id="left" class="subContainer greyBox">
<h4> <h:outputText value="#{UserNumberBean.response}"/> </ h4>
7. Ejecute el proyecto (haga clic en el proyecto de ejecución ( ), O pulse F6.
Cuando aparezca la página de bienvenida en el navegador, escriba un
número y haga clic en submit . Puede ver la página de respuesta muestra
similar a la siguiente (siempre y cuando no adivinar el número correcto).
Dos cosas están mal con el estado actual de la respuesta de la página:
I.
II.
Los html <p> etiquetas se muestra en el mensaje de respuesta.
El botón Atrás no se muestra en la ubicación correcta.
Los siguientes dos pasos corregir estos puntos, respectivamente.
8. Ajuste el <h:outputText> tag escape atributo a false . Coloque el cursor entre
outputText y value , insertar un espacio, a continuación, pulse Ctrl-Espacio para
invocar código de terminación. Desplácese hacia abajo para elegir el escape
atributo y examinar la documentación.
Como se indica en la documentación, el escape valor se establece en true de
forma predeterminada. Esto significa que los caracteres que normalmente se
analiza como html están incluidos en la cadena, como se muestra arriba. Al
establecer el valor false permite a los caracteres que se pueden analizar como
HTML que se representa como tal.
Haga clic en Enter, a continuación, escriba false como el valor.
<h4> <h:outputText escape="false" value="#{UserNumberBean.response}"/> </
h4>
1. Ajuste la etiqueta <h:form> con el atributo prependId a false . Desplácese
hacia abajo para elegir el prependId atributo y examinar la documentación. A
continuación, haga clic en Enter, y escribe false como el valor.
<h:form prependId="false">
JSF se aplica Identificación interna para realizar un seguimiento de los
componentes de interfaz de usuario. En el presente ejemplo, si usted
inspeccionar el código fuente de la página representada, verás algo como lo
siguiente:
<form id="j_idt5" name="j_idt5" method="post" action="/jsfDemo/faces/response.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
<input type="submit" id="j_idt5:backButton" name="j_idt5:backButton" value="Back"
/>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState"
value="7464469350430442643:-8628336969383888926" autocomplete="off" />
</ Form>
El id para el elemento del formulario es j_idt5 , y este id se antepone al de
Identificación en el botón Atrás incluida en el formulario (que se muestra en
negrita). Debido a que el botón Atrás se basa en el #backButton regla de estilo
(definido en stylesheet.css ), esta regla se obstruye cuando la Identificación del
JSF se antepone. Esto puede evitarse mediante el establecimiento de
prependId a false .
2. Ejecute el proyecto nuevo (haga clic en el proyecto de ejecución ( ), O pulse
F6; Fn-F6 en Mac). Introduzca un número en la página de bienvenida, a
continuación, haga clic en Enviar. La respuesta de la página ahora muestra el
mensaje de respuesta sin las <p> etiquetas, y el botón Atrás está colocado
correctamente.
3. Haga clic en el botón Atrás. Debido a que el valor actual de la propiedad
userNumber de UserNumberBean está ligada al componente JSF inputText , el
número que ya ha entrado ahora se muestra en el campo de texto.
4. Revise el registro del servidor en la ventana de salida del IDE para determinar
cuál es el número correcto es conjetura.
Si usted no puede ver el registro del servidor por cualquier motivo, se puede
abrir por el cambio a la ventana de Servicios (Ctrl-5; ⌘ -5 en Mac) y la
ampliación del nodo Servidores. A continuación, haga clic en el servidor
GlassFish en el que se implementa el proyecto y seleccione Ver registro del
servidor. Si usted no puede ver el número en el registro del servidor, intente
reconstruir la aplicación haciendo clic derecho en el nodo del proyecto y la
elección de limpiar y construir.
5. Escriba el número correcto y haga clic en Enviar. La aplicación compara la
entrada con el número que se guarda y muestra el mensaje correspondiente.
6. Haga clic en el botón Atrás de nuevo. Tenga en cuenta que el número
introducido anteriormente ya no se muestra en el campo de texto. Recordemos
que el método getResponse() de UserNumberBean invalida la sesión del usuario
actual al adivinar el número correcto.
Aplicación de una plantilla Facelets
Facelets se ha convertido en la tecnología de pantalla estándar de JSF 2.0. Facelets
es un marco de peso ligero de plantillas que es compatible con todos los
componentes JSF interfaz de usuario y se utiliza para construir y hacer el árbol de
componentes JSF de puntos de vista de la aplicación. También proporciona apoyo
para el desarrollo cuando los errores se producen por EL que le permite inspeccionar
el seguimiento de la pila, árbol de componentes, y las variables con ámbito.
Para los proyectos que contienen muchos puntos de vista, a menudo es conveniente
aplicar un archivo de plantilla que define la estructura y la apariencia de múltiples
puntos de vista. Cuando las solicitudes de servicio, la aplicación inserta prepararse de
forma dinámica el contenido en el archivo de plantilla y envía el resultado al cliente.
Aunque este proyecto sólo contiene dos puntos de vista (la página de bienvenida y
la respuesta de la página), es fácil darse cuenta de que contienen una gran
cantidad de contenido duplicado. Se puede factorizar el contenido duplicado en
una plantilla de Facelets, y crear archivos de plantilla de cliente para controlar el
contenido que es específica para las páginas de bienvenida y la respuesta.
El IDE proporciona un asistente de plantilla de Facelets para la creación de plantillas
de Facelets, y una plantilla de Facelets asistente para crear archivos de cliente que se
basan en una plantilla. En esta sección se hace uso de estos asistentes.
Creación del archivo de plantilla de Facelets
1. Crear un archivo de plantilla Facelets. Presione Ctrl-N para abrir el asistente de
archivos. Seleccione la categoría de JavaServer Faces, Facelets Template.
Haga clic en Siguiente.
2. Escriba en la template para el nombre del archivo.
3. Elija entre cualquiera de los ocho estilos de diseño y haga clic en Finalizar.
(Usted va a utilizar la hoja de estilos existente, por lo que no importa qué estilo
de diseño que usted elija.)
El asistente genera el archivo template.xhtml y hoja de estilo de
acompañamiento sobre la base de su selección, y lo deposita en resources >
css carpeta dentro de webroot del proyecto.
Después de completar el asistente, el archivo de plantilla se abre en el editor.
Para ver la plantilla en un navegador, haga clic derecho en el editor y
seleccione Ver.
4. Examine el archivo de plantilla de marcado. Tenga en cuenta los siguientes
puntos:

El facelets biblioteca de etiquetas se declara en la página <html>
etiqueta. La biblioteca de etiquetas tiene la ui prefijo.
<Xmlns html = "http://www.w3.org/1999/xhtml"
xmlns: Ui = "http://java.sun.com/jsf/facelets"
xmlns: h = ""> http://java.sun.com/jsf/html~~HEAD=NNS

La página utiliza el Facelets <h:head> y <h:body> etiquetas html en lugar
de la <head> y <body> etiquetas. Mediante el uso de estas etiquetas,
Facelets es capaz de construir un árbol de componentes que abarca
toda la página.

La página hace referencia a las hojas de estilo que se han creado
también cuando se ha completado el asistente.
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./resources/css/default.css" />
<link rel="stylesheet" type="text/css" href="./resources/css/cssLayout.css" />
<title> plantilla Facelets </ title>
</ H: head>

<ui:insert> etiquetas se utilizan en el cuerpo de la página para cada
compartimento asociado con el estilo de diseño que ha elegido. Cada
<ui:insert> etiqueta tiene un name atributo que identifica el
compartimiento. Por ejemplo:
<div id="top">
<ui:insert Top name="top"> </ ui: insert>
</ div>
5. Reexaminar las páginas index y el response. El contenido único que cambia
entre las dos páginas es el título y el texto contenido en el cuadrado gris. La
plantilla, por lo tanto, puede proporcionar todo el contenido restante.
6. Reemplace todo el contenido de su archivo de template con el contenido a
continuación.
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">Facelets Template</ui:insert></title>
</h:head>
<h:body>
<div id="left">
<ui:insert name="box">Box Content Here</ui:insert>
</div>
</h:body>
</html>
El código anterior implementa los siguientes cambios:

El proyecto de stylesheet.css archivo sustituye las referencias de hojas de
estilo de plantillas creadas por el asistente.

Todos los <ui:insert> etiquetas (y sus contienen <div> de búsqueda) se han
eliminado, a excepción de uno llamado box .

Un <ui:insert> par de etiquetas ha sido colocado alrededor del título de la
página, y el nombre title .
7. Copie el código correspondiente, ya sea del index.xhtml o response.xhtml en el
archivo en la tamplate. Agregue el contenido que aparece en negrita de
abajo para el archivo de plantilla <h:body> etiquetas.
<h:body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<ui:insert name="box"> Contenido de la caja Aquí </ ui: insert>
</ Div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />
</ Div>
</ Div>
</ H: body>
8. Ejecute el proyecto. Cuando la página de bienvenida se abre en el
navegador, modificar la dirección URL a la siguiente:
http://localhost:8080/jsfDemo/faces/template.xhtml
El archivo de plantilla se muestra como sigue:
El proyecto contiene un archivo de plantilla que proporciona el aspecto y la
estructura de todos los puntos de vista. Ahora puede crear archivos de clientes
que llaman a la plantilla.
Creación de archivos de plantilla de cliente
Crear archivos de plantilla de cliente para las páginas de bienvenida y la respuesta.
Nombre del archivo del cliente plantilla para la página de bienvenida greeting.xhtml .
Para la página de respuesta, el archivo será response.xhtml .
greeting.xhtml
1. Presione Ctrl-N para abrir el asistente de New File. Seleccione la categoría
JavaServer Faces, a continuación, seleccione Facelets Template Client. Haga
clic en Siguiente.
2. Escriba greeting para el nombre del archivo.
3. Haga clic en el botón Examinar situado junto al campo de Template, a
continuación, utilice el cuadro de diálogo que muestra para ir a la
template.xhtml archivo que creó en la sección anterior.
4. Haga clic en Finalizar. El nuevo greeting.xhtml plantilla de ficha de cliente se
genera y se muestra en el editor.
5. Examine el marcado. Tenga en cuenta el contenido de texto correspondiente
en negrita.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="title">
title
</ui:define>
<ui:define name="box">
box
</ui:define>
</ui:composition>
</body>
</html>
Las referencias de clientes de la plantilla de archivo de una plantilla con el
<ui:composition> etiqueta de template atributo. Debido a que la plantilla
contiene <ui:insert> etiquetas para title y el box , este cliente plantilla contiene
<ui:define> etiquetas para estos dos nombres. El contenido que se especifique
entre los <ui:define> etiquetas es lo que se insertará en la plantilla entre los
<ui:insert> etiquetas del nombre correspondiente.
6. Especifique greeting como el título para el archivo. Haga el siguiente cambio
en negrita.
<ui:define name="title">
Greeting
</ui:define>
7. Cambie al archivo index.xhtml y copiar el contenido de lo que normalmente
aparecería en el cuadrado gris que aparece en la página representada. A
continuación, volver a greeting.xhtml y pegarlo en el archivo del cliente de la
plantilla. (Los cambios en negrita.)
<ui:define name="box">
<h4>Hi, my name is Duke!</h4>
<h5>I'm thinking of a number
<br/>
between
<span class="highlight">0</span> and
<span class="highlight">10</span>.</h5>
<h5>Can you guess it?</h5>
<h:form>
<h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
<h:commandButton id="submit" value="submit" action="response" />
</h:form>
</ui:define>
8. Declarar la biblioteca de las etiquetas JSF HTML para el archivo. Coloque el
cursor sobre cualquiera de las etiquetas que se marcan con un error (de
cualquier marca a través del " h prefijo '), y pulse Ctrl-Espacio. A continuación,
seleccione la etiqueta de la lista de sugerencias de finalización de código. El
espacio de nombres de biblioteca de etiquetas se agregan al archivo de
<html> etiqueta (se muestra a continuación en negrita), y desaparecen los
indicadores de error.
<Xmlns html = "http://www.w3.org/1999/xhtml"
xmlns: Ui = "http://java.sun.com/jsf/facelets"
xmlns: h = ""> http://java.sun.com/jsf/html~~HEAD=NNS
response.xhtml
Debido a que el proyecto ya contiene un archivo denominado response.xhtml , y ya
que usted sabe lo que la plantilla de archivo del cliente debe ser similar ahora,
modificar el existente response.xhtml para convertirse en el archivo del cliente de la
plantilla.
1. Abra response.xhtml en el editor. (Si ya está abierto, pulse Ctrl-Tab y elegirlo.)
Reemplace el contenido de todo el archivo con el código de abajo.
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="title">
Response
</ui:define>
<ui:define name="box">
<h4>
<h:outputText escape="false" value="#{UserNumberBean.response}"/>
</h4>
<h:form prependId="false">
<h:commandButton id="backButton" value="Back" action="greeting" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Tenga en cuenta que el archivo es idéntico al greeting.xhtml , excepto por el
contenido especificado entre los <ui:define> etiquetas para title y el box .
2. En el proyecto web.xml descriptor de despliegue, modificar la entrada del
archivo de bienvenida, para que greeting.xhtml es la página que se abre
cuando se ejecuta la aplicación.
En la ventana de proyectos, haga doble clic en los archivos de configuración>
web.xml para abrirlo en el editor. En la ficha Páginas, cambie el campo
Archivos Bienvenido a faces/greeting.xhtml .
3. Ejecutar el proyecto para ver cómo se ve en un navegador. Pulse F6 (Fn-F6 en
Mac), o haga clic en el proyecto de ejecución ( ), Situado en la barra de
herramientas principal. El proyecto se implementa en el servidor GlassFish, y se
abre en un navegador.
Con la plantilla de Facelets y los archivos de plantilla de cliente, la aplicación se
comporta exactamente de la misma manera como lo hizo anteriormente. Al
factorizar código duplicado en las páginas de bienvenida y la respuesta de la
aplicación, se logró reducir el tamaño de la aplicación y se elimina la
posibilidad de escribir más código duplicado, debe ser añadido más páginas
en un momento posterior. Esto puede hacer que el desarrollo sea más eficiente
y más fácil de mantener cuando se trabaja en grandes proyectos.