sanluis castillo jose david profesor

INSTITUTO POLITECNICO NACIONAL
ESCUELA SUPERIOR DE CÓMPUTO
ALUMNO:
SANLUIS CASTILLO JOSE DAVID
PROFESOR:
CIFUENTES ALVAREZ ALEJANDRO SIGFRIDO
MATERIA:
WEB APPLICATION DEVEPLOMENT
GRUPO: 3CM2
TURNO:
MATUTINO
JAVA SERVER FACES
(INTRODUCCION)
Java Server 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.
1. Haga clic en el Proyecto Open (
), situado en la barra de herramientas principal del
IDE, o presione Ctrl + Mayús + O
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 (
), situado en la barra de herramientas principal. El
proyecto se empaqueta y se implementa en el servidor TomCat, y su navegador se abre
para mostrar la página de bienvenida ( index.xhtml ).
4. Haga clic en el botón Enviar. La página de respuesta ( response.xhtml ) muestra
la siguiente manera: En la actualidad las páginas de bienvenida y la respuesta son
estáticos y, junto con el stylesheet.css archivo y duke.png imagen, son los
archivos de la aplicación sólo se puede acceder desde un navegador.
5. En la ventana de proyectos seleccione la el proyecto y digite Clic derecho, después haga
clic en propiedades, y aparecerá una nueva ventana.
6. 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 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. 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~~HEAD=NNS" 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 </ paramname>
<param-value> Desarrollo </ param-value>
</ Context-param>
<servlet>
<servlet-name> Faces Servlet </ servlet nombre->
<servlet-class> javax.faces.webapp.FacesServlet
</ servlet-class>
<load-on-startup> 1 </ load-on-startup>
</ Servlet>
<servlet-mapping>
<servlet-name> Faces Servlet </ servlet nombre->
<url-pattern> / faces / * </ url-pattern>
</ Servlet-mapping>
<session-config>
<session-timeout>
30
</ Session-timeout>
</ Session-config>
<welcome-file-list>
<welcome-file> enfrenta / index.xhtml </
welcome-file>
</ Welcome-file-list>
</ Web-app>
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 IDE
de bean gestionado asistente para crear un bean gestionado 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 de respuesta a las
propiedades del bean gestionado.

Usando el bean gestionado Asistente

Creación de un constructor

Agregar propiedades
Usando el bean gestionado Asistente
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:
o
Nombre de clase: UserNumberBean
o
Paquete: guessNumber
o
Nombre: UserNumberBean
o
Á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 (se muestra 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() {
}
}
Creación de un constructor
El UserNumberBean constructor 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
UserNumberBean clase. Escriba el siguiente código.
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);
}
}
1. 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 (
margen izquierdo del editor, a continuación, elija la opción de
importar java.util.Random en la clase.
) que aparece en el
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 " de Duke número: "aparece en la salida (como se indica
desde
el
constructor). UnUserNumberBean objeto
no
se
creó
porque
JSF
utiliza instanciación perezosa por defecto. Es decir, los frijoles en ámbitos particulares
sólo se crea y se inicializa cuando se necesita la aplicación.
El Javadoc para el @ManagedBean anotación de los estados: Si el valor de la ansiosa
() atributo es cierto , y el administrado de frijol alcance el valor es la "aplicación",
el tiempo de ejecución debe crear instancias de esta clase cuando se inicia la aplicación. Esta
creación de instancias y el almacenamiento de la instancia que debe suceder antes de que las
solicitudes son atendidas. Si ganas no se especifica o falsa , o el administrado de frijol
alcance es otra cosa que la "aplicación", el valor predeterminado de instancias de "perezoso" y
el almacenamiento ámbito de la bean gestionado sucede.
5. Debido a que UserNumberBean es de ámbito de sesión, tiene que poner en práctica
el Serializable interfaz.
@ManagedBean(name="UserNumberBean")
@SessionScoped
public class UserNumberBean implements Serializable {
Use la tarjeta de identificación indirecta (
la clase.
) para importar
java.io.Serializable en
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
añade userNumber y la respuesta de las propiedades a la clase.
1. Empieza por declarar un entero 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.
facilitar
esto,
3. Seleccione la userNumber : Integer. opción Haga clic en Generar. Tenga en
cuenta
que
el getUserNumber() y
agregan métodos en la clase.
setUserNumber(Integer
userNumber) se
4. Crear una respuesta de la propiedad. Declarar una cadena llamada de
respuesta.
@ManagedBean(name = "UserNumberBean")
@SessionScoped
public class UserNumberBean implements Serializable {
Integer randomInt;
Integer userNumber;
String respuesta;
5. Cree un método get para la respuesta . (Esta aplicación no requerirá de un
regulador.) Usted puede usar el código del IDE Generar emergente que se muestra en el
paso 2 para generar código de la plantilla. Para fines de este tutorial sin embargo, acaba
de pegar 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>";
}
}
1. El método anterior realiza dos funciones:
1. 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 cadena de respuesta en consecuencia.
2. 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.
2. Haga clic derecho en el editor y elegir las importaciones Fix. Declaraciones de
importación se crean automáticamente para:
o
javax.servlet.http.HttpSession
o
javax.faces.context.FacesContext
Cableado Gestionado Beans a las páginas
Uno de los propósitos principales de JSF es eliminar la necesidad de escribir código repetitivo
para gestionar POJO s y su interacción con los puntos de vista de la aplicación. Ya has visto un
ejemplo de esto en la sección anterior, donde una instancia JSF UserNumberBean objeto cuando
se ejecutó la aplicación. Este concepto se conoce como Inversión de Control (COI), que permite
que el recipiente para 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.
En la sección anterior se ha creado un bean gestionado al que genera un número aleatorio entre
0 y 10. También crea dos propiedades, userNumber y de respuesta , que representan la
entrada del número por el usuario, y la respuesta a una conjetura de usuario, respectivamente.
En esta sección, explorar cómo se puede utilizar el UserNumberBean y sus propiedades en las
páginas web. JSF le permite hacer esto utilizando su lenguaje de expresión (EL). Se utiliza el
lenguaje de expresión de obligar a los valores de propiedad a los componentes de interfaz de
usuario JSF que figuran en las páginas web de la aplicación. Esta sección también muestra cómo
se puede aprovechar de la función de JSF 2.0 's de navegación implícita para navegar entre el
índice y las páginas de respuesta.
El IDE proporciona soporte para este trabajo a través de su finalización de código y servicios de
documentación, que se puede invocar pulsando Ctrl-Espacio en los elementos del editor.
Comience
por
hacer
cambios
en index.xhtml,
a
continuación,
realizar
cambios
en response.xhtml. En ambas páginas, sustituir los elementos de formulario HTML con sus
homólogos de JSF, tal como se definen en la biblioteca de etiquetas HTML tag JSF . A
continuación, utilice el lenguaje de expresiones JSF para enlazar los valores de propiedad con
componentes de interfaz de usuario seleccionados.

index.xhtml

response.xhtml
index.xhtml
1. Abra el index.xhtml página en el editor. Haga doble clic en el index.xhtml nodo
desde la ventana de proyectos, o pulse las teclas Alt-Shift-O para usar la función Ir a
Archivo de diálogo. Tanto índice y las páginas de respuesta ya contienen los
componentes
JSF
ejercicio. Simplemente
interfaz
quite
de
y
usuario
comentar
los
que
usted
elementos
requiere
HTML
que
para
se
este
utilizan
actualmente.
2. Comente el elemento de formulario HTML. Para ello, seleccione el elemento de
formulario HTML como en la imagen de abajo, a continuación, pulse Ctrl-/ (⌘ - / en
Mac). Nota: Para poner de relieve, o bien haga clic y arrastre en el editor con el ratón, o
mediante el teclado, mantenga Mayús y pulse las teclas de flecha.
3. Elimine el componente JSF formulario HTML. Seleccione el componente al igual que en la
siguiente imagen, a continuación, pulse Ctrl-/. (⌘ - / en Mac) Tras descomentar el
componente
JSF
formulario
HTML,
el
editor
indica
que
la
<h:form> ,<h:inputText> ,
no han sido declaradas.
y
h < : CommandButton> etiquetas
4. Para declarar estos componentes, utilice la finalización de la IDE de código para agregar
el
de
espacio
de
nombres
de
biblioteca
de
etiquetas
a
la
página
<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. Haga clic en Enter.(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 ennegrita a continuación), y desaparecen los indicadores de error
5. Utilice el lenguaje de expresiones JSF para obligar a UserNumberBean's
userNumber propiedad a a inputText componente. El valor atributo se puede
utilizar para especificar el valor actual del componente representado. Escriba el código
que aparece en negrita a continuación.
Lenguaje de expresión JSF utiliza el
# {} sintaxis. Dentro de estos delimitadores, se especifica
el nombre del bean gestionado y la propiedad del bean que desea aplicar, separados por un
punto (
. ). Ahora,
automáticamente
cuando los datos del formulario se envía al servidor, el valor se guarda
en
(setUserNumber
la
userNumber propiedad
() ). Además, cuando se
userNumber ya ha sido
la inputText componente.
para
6.
mediante
solicita
setter
la
de
la
propiedad
página
y
un
valor
establecido, el valor se mostrará automáticamente al mostrar
Especifique el destino de la petición de que se invoca cuando se hace clic en el botón de
formulario. En la versión HTML de la forma, que fueron capaces de hacer esto utilizando
la <form> etiqueta
de la
acción atributo. Con JSF, puede utilizar
elCommandButton 's la
acción atributo. Por otra parte, debido a la
característica de JSF 2.0 's de navegación implícita, sólo tiene que especificar el nombre
del archivo de destino, sin la extensión de archivo.
Escriba el código que aparece en negrita a continuación.
Las búsquedas en tiempo de ejecución para JSF un archivo con el nombre de respuesta . 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 ( de índice . 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.) E stablecer 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.
9. En el navegador, introduzca un número en el formulario y haga clic en el botón 'Enviar'.
10. Vuelva a la IDE e inspeccionar el UserNumberBean clase. El depurador se suspende en
el setUserNumber() método.
11. Abra la ventana del depurador variables (elija Ventana> Depuración> Variables, o pulse
Ctrl-Shift-1). Usted ve los valores de las variables para el punto en el que se suspende el
depurador
En la imagen superior, un valor de ' dos' se proporciona para el userNumber variable en
el setUserNumber () de la firma. (El número 2 se ha introducido en el formulario.) ' this 'se
refiere a la UserNumberBean objeto que fue creado para la sesión del usuario. Debajo de ella,
se ve que el valor de la userNumber propiedad es actualmente null .
12. En la barra de herramientas del depurador, haga clic en el Paso a paso (
) botón. El
depurador ejecuta la línea en la que actualmente está suspendido. Se actualizará la
ventana de variables, lo que indica cambios con respecto a la ejecución.
El
userNumber la propiedad se establece ahora en el valor introducido en el formulario.
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-Shift-O
para usar la función Ir a Archivo de diálogo.
2. Comente el elemento de formulario HTML. Destacar la apertura y el cierre de
HTML <form> etiquetas y el código entre ellos, a continuación, pulse Ctrl-/ (⌘ - / en
Mac).
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 componente JSF formulario HTML. Resalte la apertura y
cierre <h:form> etiquetas y el código entre ellos, a continuación, pulse Ctrl-/ (⌘ - / en
Mac).
En esta etapa, el código entre las <body> etiquetas es el siguiente:
<body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<h4>[ response here ]</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>
4. Tras
descomentar
el
componente
JSF
formulario
HTML,
el
editor
indica
que
los <h:form> y <h:commandButton> etiquetas no han sido declaradas.
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 CtrlEspacio. Sugerencias sobre el código de terminación y muestra la documentación de apoyo.
Haga clic en Enter. (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 .
<= "Html xmlns http://www.w3.org/1999/xhtml~~HEAD=NNS"
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 control CommandButton 's la acción atributo. Escriba el código que
aparece en negrita .
Nota: Al escribir
actión = "index",
usted está confiando en función de navegación
implícita JSF. Cuando un usuario hace clic en el botón de la forma, las búsquedas en tiempo de
ejecución para JSF un archivo con el nombre index . 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 (
response.XHTML )
y busca la
index.xhtml archivo
archivo de origen (es decir, el webroot).
la
en el mismo directorio que el
6. Vuelva a colocar la estática "[respuesta aquí]" texto con el valor de
la UserNumberBean 's response de la propiedad. Para ello, utilice el lenguaje
de expresión JSF. Escriba el siguiente.
7. Ejecute el proyecto (haga clic en el proyecto de ejecución (
), o pulse F6; Fn-F6 en
Mac). Cuando aparezca la página de bienvenida en el navegador, escriba un número y
haga clic en enviar . Puede ver la página de respuesta muestra similar a la siguiente
Dos cosas están mal con el estado actual de la respuesta de la página:
1. Los html <p> etiquetas se muestra en el mensaje de respuesta.
2. 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 escapar atributo a false . Coloque el cursor
entre outputText y valor , insertar un espacio, a continuación, pulse Ctrl-Espacio
para invocar código de terminación. Desplácese hacia abajo para elegir elescape
de atributo y examinar la documentación.
Como se indica en la documentación, el escape de valor se establece en verdadero 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 falsa como el valor.
9. Ajuste el
después
<h:form> tag prependId atributo a false . Sitúe el cursor
de ' m 'en <h:form> e insertar un espacio, a continuación, pulse
justo
Ctrl-
Espacio para invocar código de terminación. Desplácese hacia abajo para elegir el
prependId atributo y examinar la documentación. A continuación, haga clic en
Enter, y escribe
falsa 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-formurlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
<input id="j_idt5:backButton" type="submit" 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 esta identificación se antepone a la
identificación para el botón Atrás incluida en el formulario (que se muestra
en negrita arriba). Debido a que el botón Atrás se basa en el # backButtonregla 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 falso .
10. 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.
11. Haga clic en el botón Atrás. Debido a que el valor actual
de UserNumberBean 's userNumber propiedad está ligada a la
JSFinputText componente, el número que ya ha entrado ahora se muestra en el
campo de texto.
12. Revise el registro del servidor en la ventana de salida del IDE (Ctrl-4; ⌘ -4 en Mac) 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.
13. 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.
14. 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
que UserNumberBean s ' getResponse
usuario actual al adivinar el número correcto.
campo
de
texto. Recordemos
la sesión del
() método invalida
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 que 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.
Aunque no se haya dado cuenta, los index.xhtml y response.xhtml archivos que han
estado trabajando hasta ahora en el tutorial son las páginas de Facelets. Páginas Facelets utilizar
el . xhtml extensión y ya se está trabajando en un proyecto JSF 2.0 (JSF 2.0 Las bibliotecas
incluyen los archivos JAR Facelets.), las vistas eran capaces de hacer correctamente el árbol de
componentes JSF.
El propósito de esta sección es para que se familiarice con Facelets de plantilla. 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.
Nota: El IDE también proporciona un asistente de páginas JSF que le permite crear páginas
Facelets individuales para su proyecto. Para obtener más información.

Creación del archivo de plantilla de Facelets

Creación de archivos de plantilla de cliente
Creación del archivo de plantilla de Facelets
1. Crear un archivo de plantilla Facelets. Presione Ctrl-N (⌘ + N en Mac) para abrir el
asistente de archivos. Seleccione la categoría de JavaServer Faces, entonces Facelets de
plantilla. Haga clic en Siguiente.
2. Escriba en la plantilla 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
acompañamiento
genera
sobre
el template.xhtml archivos
la
base
de
su
y
selección,
hojas
y
lo
de
estilo
deposita
de
en
un recursos > CSS dentro de la carpeta del proyecto Webroot.
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 lainterfaz de usuario prefijo.
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.

<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 nombre de atributo que identifica el compartimiento. Por ejemplo:
5. Reexaminar las welcome y la response de las páginas. 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 plantilla 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:
o
El proyecto de stylesheet.css archivo sustituye las referencias de hojas de estilo de
plantillas creadas por el asistente.
o
Todos los <ui:insert> etiquetas (y sus contienen clave de búsqueda) se han
eliminado, a excepción de uno llamado cuadro .
o
Un <ui:insert> par de etiquetas ha sido colocado alrededor del título de la página, y
el nombre del título .
7. Copie el código correspondiente, ya sea del index.xhtml o response.xhtml archivo
en la plantilla. Añadir el contenido se muestra en negrita de abajo para el archivo de
plantilla <h:body> etiquetas.
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
8. 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 (⌘ + N en Mac) para abrir el asistente de New File. Seleccione la
categoría JavaServer Faces, a continuación, seleccione Cliente Facelets de plantilla. Haga
clic en Siguiente.
2. Tipo de saludo para el nombre del archivo.
3. Haga clic en el botón Examinar situado junto al campo de plantilla, 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.
Las referencias de clientes de la plantilla de archivo de una plantilla con
el <ui:composition> etiqueta de plantilla deatributo. Debido a que la plantilla
contiene <ui:insert> etiquetas para el título y el cuadro de , 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 saludo como el título para el archivo
7. Cambie a la
index.xhtml archivo (presione Ctrl-Tab) 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.
8. Declarar el JSF biblioteca de etiquetas 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, y desaparecen los indicadores de error.
Si coloca el cursor después de la '
m 'en <h:form> y pulse Ctrl-Space, el espacio de nombres
se agrega automáticamente al archivo. Si sólo hay una opción lógica está disponible cuando se
pulsa Ctrl-Space, se aplica inmediatamente al archivo. JSF bibliotecas de etiquetas se declaran
automáticamente cuando se invoca la finalización de código en las etiquetas.
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.(Para fines
de este tutorial, simplemente copia y pega el código provisto.)
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.
<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 el título y el cuadro .
2. En el proyecto web.xml descriptor de despliegue, modificar la entrada del archivo de
bienvenida, para quegreeting.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 de . En la ficha Páginas, cambie el
campo Archivos Bienvenido a caras o 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.