Download instituto politecnico nacional escuela superior de computó
Document related concepts
no text concepts found
Transcript
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.