Contenido

Introducción – JavaServer Faces................................................................................2

1. Hola Mundo con JSF............................................................................................4

2. Managed Beans................................................................................................... 6

2.1 Ejercicio de Managed Beans.............................................................................8

2.2 Reglas de Navegación....................................................................................10

2.3 Ejercicio Backing Bean....................................................................................12

3. Ciclo de vida de JSF...........................................................................................17

3.1 Ejercicio ciclo de vida de JSF..........................................................................17

4. Validadores.........................................................................................................21

4.1 Ejercicio de validadores.................................................................................. 23

5. Convertidores..................................................................................................... 27

5.1 Ejercicio de convertidores............................................................................28

6. Mensajes e Internacionalización.........................................................................30

6.1 Ejercicio de manejo de mensajes................................................................32

6.2 Ejercicio de internacionalización..................................................................34

7. Manejo de eventos.............................................................................................36

7.1 Ejercicio de ValueChangeListener...............................................................37

8. ActionListener.....................................................................................................40

8.1 Ejercicio de ActionListener...........................................................................40

9. Manejo de componentes....................................................................................42

9.1 Ejercicio de manejo de componentes..........................................................45

9.2 Ejercicio de componente SelectItems..........................................................49

10. Facelets y Templates......................................................................................54

10.1 Ejercicio de Facelets y Templates.................................................................56

11. Rol de JSF en Java EE y Ajax en JSF............................................................59

1
Introducción – JavaServer Faces
JavaServer Faces (JSF) es una tecnología y framework para aplicaciones Java
basadas en web que simplifica el desarrollo de interfaces de usuario en aplicaciones
Java EE.

El funcionamiento de JavaServer Faces es el siguiente:

JavaServer Faces es un framework de desarrollo web para Java que se utiliza para
construir aplicaciones web basadas en componentes. JSF simplifica la creación de
interfaces de usuario web al proporcionar una capa de abstracción sobre las
tecnologías web subyacentes, como HTML, CSS y JavaScript.

Un proyecto JSF se compone de varios elementos clave:

1. Componentes JSF: Los componentes JSF son elementos de interfaz de

usuario que se utilizan para construir la interfaz web. Estos componentes son
similares a los elementos HTML, pero JSF proporciona componentes más
ricos y de mayor nivel de abstracción, como botones, cuadros de texto, tablas
y paneles. Estos componentes se definen en archivos de vista con una
extensión ".xhtml".

2. Managed Beans: Los managed beans son clases de Java que actúan como
controladores o manejadores en un proyecto JSF. Estas clases encapsulan la
lógica de negocio y la interacción con los componentes JSF. Los managed
beans se anotan con anotaciones especiales de JSF, como @ManagedBean,
para indicar que son administrados por el framework.

3. Configuración: Un proyecto JSF también requiere un archivo de configuración

llamado "faces-config.xml". Este archivo contiene información sobre las rutas
de navegación, la configuración de los componentes, los controladores y
otras configuraciones específicas del proyecto.

2
 4. Expresiones de JSF: JSF utiliza un lenguaje de expresión para vincular los
componentes de la interfaz de usuario con los datos y la lógica del backend.
Estas expresiones se utilizan para establecer y obtener valores de los
componentes, y permiten la comunicación bidireccional entre la interfaz de
usuario y el backend.

El flujo de trabajo típico de un proyecto JSF es el siguiente:

1. Un cliente realiza una solicitud a través de un navegador web para acceder a

una página JSF.
2. El contenedor web (como Apache Tomcat) intercepta la solicitud y la envía al
servlet de JSF (Faces Servlet).
3. El servlet Faces procesa la solicitud y busca la vista (archivo .xhtml)
correspondiente según la URL solicitada.
4. El servlet Faces lee el archivo de configuración "faces-config.xml" para
obtener información sobre cómo procesar la solicitud y cómo interactuar con
los componentes y los managed beans.
5. El servlet Faces crea una instancia de la vista y procesa los componentes
JSF en ella. Esto implica la ejecución de eventos y acciones asociadas a los
componentes y la actualización de los valores de los componentes en el
backend.
6. Los valores actualizados se pueden almacenar en los managed beans, donde
se puede realizar la lógica de negocio adicional y la interacción con otros
sistemas o servicios.
7. Finalmente, la vista generada se envía al cliente como una respuesta HTML
que se muestra en el navegador web.

Java Server Faces:

 Es el marco de aplicaciones web estándar para Java Enterprise Edition (Java

EE).
 Implementa el patrón de diseño MVC.

3
  Tiene desarrollado componentes reutilizables listos para utilizarse.
 Render-Kits: Los componentes pueden desplegarse no solamente en
navegador Web, sino en dispositivos móviles u otros tipos de clientes.
 Manejo de anotaciones para varias configuraciones.
 Soporte nativo para AJAX.

En el MVC las responsabilidades están de la siguiente manera:

1. Modelo: ManagedBean de Modelo

2. Vista: Facelets o JSPs
3. Controlador: ManagedBean Controlador

Los Facelets tienen las siguientes características:

 Los Facelets son la tecnología estándar de despliegue en JSF.

 Al ejecutar un Facelet, todos los componentes se convierten a instancias
Java y son administrados por un Component Tree.
 Todos los componentes JSF se derivan de la clase abstracta
javax.faces.component.UIComponent.
 El estado de los componentes (Component Tree) puede almacenarse del
lado del cliente o del lado del servidor.

1. Hola Mundo con JSF

Para crear un proyecto con el framework de JavaServer Faces es necesario realizar
una configuración al proyecto (consultar el curso para realizar esa configuración o
consultarlo por otro medio):

Estructura del proyecto:

4
ConfigurationJSF.java:

5
Index.html

OutPut:

2. Managed Beans
 Un Managed Bean es una clase Java que sigue la nomenclatura de los
JavaBeans
o Los Managed Beans no están obligados a extender de ninguna otra
clase.
 Aunque JSF no define una clasificación para los Backing Beans, podemos
definir las siguientes (Baking Bean es lo mismo que Managed Bean):
o Beans de Modelo: Representan el Modelo en el patrón MVC.
o Beans de Control: Representan el controlador en el patrón MVC.
o Beans de Soporte o Helpers: Contienen código por ejemplo de
convertidores.
o Beans de Utilerías: Tareas genéricas, como obtener el objeto request.

Un Managed Bean se puede declarar de distintas maneras:

 Con anotaciones, antes del nombre de la clase:

6
 o @ManagedBean
 Como bean CDI (Context and Dependency Inyection), antes del nombre de la
clase:
o @Named
o Agregar un archivo llamado beans.xml en la carpeta: web/WEB-INF
(Esto es opcional en la versión 8 de Java EE).
 En el archivo faces-config.xml:
o <managed-bean> … </managed-bean>

Alcance de los Managed Beans:

Hay un alcance llamado custom, es una estructura de datos Map que enlaza objetos
(Valores) con llaves (Keys). El tiempo de vida del Map es administrado por el
implementador, por eso es de tipo Custom, o personalizado.

7
Nota: Para algunos Alcances es obligatorio que el vean implemente la interfaz
“Serializable”.

2.1 Ejercicio de Managed Beans

Estructura:

8
Candidato.java

Index.xhtml

9
OutPut:

2.2 Reglas de Navegación

Explicación de teoría: Universidad Java - De Cero a Experto - Más Completo +106
hrs | Udemy

 La navegación en JSF permite movernos entre páginas de la misma

tecnología.
 Existen varios tipos de navegación:
o Navegación Estática
o Navegación Dinámica
 Existen varias formas de configurar la navegación
o Navegación Implícita (JSF)
o Navegación explicita (en el archivo faces-config.xml)

Navegación Estática

 La navegación estática aplica en los siguientes casos:

o No se requiere ejecutar código Java del lado del servidor, sino
únicamente dirigirse a otra página.
o No hay lógica para determinar la página siguiente.

Ejemplo de navegación estática:

 Página JSF que inicia la petición:

<h:comandButton label=”Entrar” action=”login”/>

 La página siguiente se puede determinar de 2 formas:

o Outcome por default, buscar directamente la página login.xml
o Buscar el outcome en faces-config.xml, encontrando el caso que
determina la siguiente página a mostrar.

Navegación Dinámica

10
La navegación dinámica utiliza un método action, el cual tiene la lógica para
determinar el outcome:

 Código página JSF (Vista):

<h:commandButton label=”Aceptar” action=”#{loginBean.verificarUsuario}”/>

 Código LoginBean (Controlador)

Public String verificarUsuario () {

If (…) {

return “exito”;

} else {

return “fallo”;

Creación de reglas de navegación

<faces-config …>

<navigation-rule>

<from-view-id>/inicio.xhtml</from-view-id>

<navigation-case>

<from-outcome>entrar</from-outcome>

<to-view-id>/login.xhtml</to-view-id>

</navigation-case>

</navigation-rule>

</faces-config>

11
 2.3 Ejercicio Backing Bean
El concepto de Backing Bean es más que todo una clasificación de los Managed
Beans en JSF:

En este ejercicio se verá en acción el concepto de inyección de dependencias:

La inyección de dependencias es un concepto que nos permite gestionar las

relaciones entre diferentes objetos en una aplicación de manera más flexible y
desacoplada. En lugar de que un objeto cree o busque directamente las
dependencias que necesita para funcionar, estas se le proporcionan desde el
exterior.

Imaginemos que tienes dos clases: ClaseA y ClaseB. Normalmente, si ClaseA

necesita utilizar ClaseB, la instancia de ClaseB se crearía dentro de ClaseA
utilizando la palabra clave "new". Sin embargo, con la inyección de dependencias,
en lugar de crear la instancia de ClaseB dentro de ClaseA, se la pasamos desde el
exterior.

La inyección de dependencias tiene varios beneficios. En primer lugar, ayuda a

desacoplar los objetos y a reducir su dependencia directa entre sí. Esto facilita la
reutilización y la modificación de los objetos, ya que pueden ser fácilmente
sustituidos por otras implementaciones o mocks para pruebas unitarias.

Estructura:

12
index.xhtml

exito.xhtml

13
fallo.xhtml

Candidato.java

14
VacanteForm.java

Prueba:

Prueba 1:

Input:

15
Output:

Prueba 2:

InPut:

OutPut:

16
 3. Ciclo de vida de JSF

3.1 Ejercicio ciclo de vida de JSF

Se va a utilizar el API de log4j para mostrar en la consola el resultado del ciclo de
vida, y cada una de las etapas del Framework de JSF.

Librerias:

17
Estructura:

log4j2.xml

faces-config.xml

18
DebuggerListener.java

VacanteForm.java

19
Candidato.java

Prueba:

Al ejecutar el flujo donde el servidor responde con la página “exito.xhtml”, en la

consola del servidor se visualiza el log de las 6 fases de JSF:

20
 4. Validadores
Los validadores se encuentran en la fase 3 del ciclo de vida de JSF, también los
convertidores se encuentran dentro de esta fase.

Las validaciones aseguran que los datos de nuestra aplicación sean consistentes,
según sean introducidos por el usuario. Algunas cuestiones que podemos validar
son:

 Rangos de números o límites

 Largo de cadenas
 Formatos de fechas
 Entre otras

JavaServer Faces provee varios tipos de validaciones:

 Validaciones estándar
 Validaciones en los métodos de los Managed Beans
 Validaciones personalizadas o customizadas

21
Gracias a que este proceso se ubica en la fase 3, nos aseguramos de que antes de
actualizar la información del modelo, tengamos la certeza de que la información se
encuentra con el formato y el tipo de dato deseado.

Hay dos maneras para ejecutar la validación en los componentes:

 Validación individual por campo

 Validación por campo interdependientes

La validación individual se puede lograr de varias maneras:

 Agregar un atributo required al tag JSF

 Agregar un atributo validator al tag JSF
 Agregar un validador como un tag interno
 El tag h:message se utiliza para mostrar errores de un componente.

La validación Interdependiente se ejecuta dentro de los métodos actions:

 El tag h:messages se utiliza para mostrar varios errores a la vez

Ejemplo de uso de Validadores

 Ejemplo de validador estándar:

<h:inputText id=”edadId” required=”true” value=”#{empleadoBean.edad}”>

<f:validateLongRange minimun=”18” maximun=”50” />

</h:inputText>

El ejemplo anterior nos muestra un inputText con una validación de rango, en donde
el rango mínimo de edad debe de estar entre 18 y 50 años.

 Ejemplo de validador personalizado:

<h:inputText id=”ipID” required=”true” value=”#{ipBean.ipValor}”>

<f:validator validatorId=”validatorIp”/>

</h:inputText>

Este nombre de validador debe estar definido en el archivo de faces-config o debe

de utilizar la anotación de facesValidator e implementar el método validate dentro de
este Bean

22
 4.1 Ejercicio de validadores
Cambios realizados en el proyecto:

Candidato.java

23
Index.xhtml

VacanteForm.java

24
Prueba:

 Prueba 1:

InPut:

OutPut:

25
Prueba 2:

InPut:

OutPut:

Prueba 3:

InPut:

OutPut:

26
 5. Convertidores
Los convertidores cubren la necesidad de asignar valores entre la vista y el modelo
de manera automática:

Tipos de conversiones:

 Conversiones implícitas:
o Son conversiones que JSF realiza de manera automática, por ejemplo,
al usar tipos primitivos, BigInteger, o String:

<h:inputText id=”edadId” value=”#{empleadoBean.edad}” />

 Conversiones explicitas:

Tenemos dos maneras de hacerlo:

o Utilizando el atributo converter, por ejemplo:

<h:inputText value=”#{empleadoBean.edad}” converter=”javax.faces.Integer” />

o Utilizando un componente de tipo converter

<h:inputText value=”#{empleadoBean.edad}”>

<f:converter converterId=”javax.faces.Integer” />

27
</h:inputText>

 Convertidores personalizados

JSF permite crear convertidores personalizados.

Los pasos para crear y utilizar una clase converter son los siguientes:

o En la página JSF:

<h:intputText id=”fechaId” value=”#{empleadoBean.fechaNacimiento}”

convert=”útil.ConvertidorFecha” />

o Definir una clase de tipo Converter que debe implementar la interfaz

javax.faces.convert.Converter
o La Clase Converter debe ser registrada en faces-config.xml o agregar
la anotación @FacesConverter a la clase de tipo Converter
o La clase Converter debe sobreescribir el método getAsObject() o
getAsString() dependiendo del tipo de conversión que se requiera.

5.1 Ejercicio de convertidores

Cambios realizados en el proyecto para implementar los convertidores:

Index.xhtml

Candidato.java

28
exito.xhtml

29
 6. Mensajes e Internacionalización
 JSF tiene soporte total para la especificación I18n de Java, para la
especificación del idioma en la aplicación.

Para definir un idioma debemos especificar un archivo de propiedades, estos

archivos nos permiten especificar nuestras etiquetas de las páginas web en varios
idiomas:

Código del Lenguaje / Subregión Descripción

es Español
es_MX Español / México
en Inglés
en_GB Inglés / británico
en_US Inglés / Estados Unidos

JSF puede cargar las etiquetas de un archivo de propiedades (Resource Bundle):

En el archivo faces-config.xml se configura el archivo a utilizar:

<application>

<resource-bundle>

<base-name>mensajes</base-name>

<var>msg</var>

</resource-bundle>

</application>

30
Podemos utilizar el archivo de propiedades en la página JSF como sigue:

<h:outputText value=”#{msg[‘form.usuario’]}” />

<h:commandButton value=”#{msg.enviar}” type=”submit” action=”login” />

De esta forma lograremos desplegar la etiqueta respectiva en el idioma que

hayamos especificado. JavaServer Faces maneja la localización de errores y la
información que ocurren en eventos como conversiones, validaciones o cualquier
otro proceso relacionado con el ciclo de vida de JSF, dentro de este mismo
concepto del manejo de mensajes.

Manejo de mensajes

JSF nos permite sobrescribir estos mensajes, sobre todo porque en ocasiones estos
mensajes se despliegan en el idioma nativo, es decir en inglés.

Para sobrescribir los mensajes internos de JavaServer Faces debemos:

 Se debe crear un archivo (no importa el nombre) de propiedades

jsf.properties

 Sobrescribimos los mensajes de del sistema de JSF que deseemos:

javax.faces.component.UIInput.REQUIRED=Valor Requerido

Finalmengte para que reconozca JSF nuestro archivo con las modificaciones
respectivas, lo que hacemos es configurar el archivo faces-config.xml:

<application>

<message-bundle>jsf</message-bundle>

</application>

Con esto, el sistema reconocerá de manera automática que se trata de un archivo

que intenta sobreescribir las propiedades directamente de JSF.

31
 6.1 Ejercicio de manejo de mensajes
Estructura de proyecto

Se crean dos nuevos archivos dentro del directorio de recursos: “jsf.properties” y

“mensajes.properties”

mensajes.properties

jsf.properties

32
faces-config.xml

index.xhtml

33
Prueba:

6.2 Ejercicio de internacionalización

Se van a realizar cambios en el proyecto para implementar el concepto de
internacionalización, y con esto agregar el idioma de inglés:

Se crean dos nuevos archivos “. properties”

mensajes_en.properties
34
jsp_en.properties

faces-config.xml

35
Prueba:

7. Manejo de eventos
Value Change Listener en JSF

JSF provee dos maneras de detectar cambios (value change) en los componentes,
ya sea agregando un atributo valueChangeListener al componente o como un
elemento interno.

Los Listener en JSF nos permiten responder a eventos que suceden en la vista,
para enlazar el evento al controlador y procesar el cambio en el componente. Estos
componentes deben implementar la interfaz EditableValueHolder.

Ejemplo del código de la vista:

<h:intputText id=”codigoPostal” onchange=”this.form.submit()”

value=”#{empleadoBean.codigoPostal}”
valueChangeListener=”#{vacanteForm.codigoPostalListener}”/>

36
Una vez definido el atributo o elemento interno, se debe agregar el método action en
el Managed Bean que escucha el cambio en la vista:

public void codigoPostalListener(ValueChangeEvent valueChangeEvent) { … }

7.1 Ejercicio de ValueChangeListener

Se realizaron las siguientes modificaciones a nuestra aplicación base:

Candidato.java

Se crearon los siguientes atributos con sus respectivos métodos getters y setterts:

VacanteForm.java

Se agrega un método de tipo ValueChaceListener para que cuando modifiquemos

en valor en el campo “código postal”, en automático llene los campos de colonia y
ciudad:

37
index.xhtml

Se agregan los campos de código postal, ciudad y colonia:

Prueba 1:

InPut:

OutPut:

38
Sa salida sin sio sin haber seleccionado el botón “Submit”

Prueba 2:

InPut:

OutPut:

Sin haber seleccionado el botón “Enviar”, el sistema relleno los siguientes campos
automáticamente:

39
 8. ActionListener
JSF provee dos maneras de configurar la detección de eventos cuando un usuario
ejecuta una acción de tipo submit, ya sea agregando el atributo actionListener al
componente JSF o como un elemento interno en el componente.

Algunos componentes de este tipo son h:commandButton y h:commandLink

<h:commandLink actionListener=”#{vacanteForm.enviar}”/>

Una vez definido el atributo o elemento interno, se debe agregar el método action en
el Managed Bean que procesa la petición de la Vista:

public void enviar(ActionEvent actionEvent) { … }

8.1 Ejercicio de ActionListener

Lo primero que vamos a hacer es agregar un campo de comentario, para que se
muestre o oculte, dependiendo de la acción que seleccionemos:

Candidato.java

Agregamos el atributo “comentario” y creamos los métodos getters y setters

respectivos:

Como siguiente paso agregamos el campo en la página de “index.xhtml”:

index.xhtml

Agregamos los componentes que se encargaran de mostrar y ocultar un área de

texto:

40
VacanteForm.java

Se agrega el atributo “comentarioEnviado” de tipo boolean junto a sus métodos

getters y setters correspondientes:

Se crear el método encargado de ocultar el comentario, y también se muestran los

métodos de acceso al atributo “comentarioEnviado”:

41
 9. Manejo de componentes
Componentes HTML:

El API de JSF provee varios componentes básicos para el despliegue de

información HTML:

Componentes Core:

El API de JSF provee varios componentes Core para el manejo de eventos,

administración de componentes, entre otros.

Arquitectura de Componentes:

Los componentes en JSF son más que simples etiquetas HTML, estos componentes
tienen mucha similitud con componentes de tipo Swing para aplicaciones de
escritorio en Java. Existen 3 partes esenciales en un componente JSF:

42
El primer componente en la etiqueta misma de JSF, este el código de nuestra
página JSF y aquí en donde podemos configurar eventos, internacionalización,
apariencia del componente, conversiones, validaciones, entre otras. Posteriormente
tenemos el despliegue del componente, este elemento representa el código que
finalmente visualiza el cliente, en caso de ser un cliente con un navegador web, lo
visualiza en HTML, el render kit por default de JSF de hecho es un código en HTML.
Finalmente tenemos como parte de la arquitectura el componente Java UI, esta es
una clase de java que representa el componente de la página JSF, pero desde el
punto de vista de código Java. En la fase 1 del ciclo de vida de JSF “Restauración
de la Vista” es donde la etiqueta JSF se mapea con un componente Java de tipo UI,
y una vez que se mapea se agrega este componente a la clase ComponentTree de
la vista.

Component Tree

En el flujo podemos observar que comienza con nuestro cliente o navegador y

únicamente recibe el código HTML generado por nuestro servidor Java. Una vez el
cliente hace una nueva petición al servidor, el Component Tree se sincroniza
nuevamente. Esto es el código de las etiquetas JSF son convertidos o actualizados
a su componente JSF de tipo UI respectivo:

43
Una vez que se han terminado con las fases del ciclo de vida de JSF, se envía
nuevamente la respuesta al cliente, generando finalmente la respuesta HTML.

El Component Tree tiene una duración de vida muy corta, normalmente durante el
envió y la respuesta de la petición, es decir un alcance de tipo “request”.

Componentes de Selección:

44
Select Items

En JSF no es posible desplegar directamente una lista de elementos como por

ejemplo un arreglo, una colección o cualquier elemento que contenga varios datos,
esto se debe a que debemos convertirlos precisamente a tipos SelectItem, ya sea
mostrándolos uno a uno, o mostrándolos como una colección de objetos Select
Item.

9.1 Ejercicio de manejo de componentes

Candidato.java

Lo primero que realizaremos es eliminar el atributo “colonia” y sus métodos get y

set, ya que este valor ya no se va a manejar como una cadena, sino que lo vamos a
modificar a un componente de tipo SelectItem:

45
Se crea el atributo “coloniaId” y sus métodos set y get:

index.xhtml

Quitamos el inputText:

46
Agregamos el nuevo componente:

VacanteForm.java

Realizamos las siguientes modificaciones:

47
Prueba:
InPut:

OutPut:

Prueba 2:

48
 9.2 Ejercicio de componente SelectItems
Colonia.java

Se crea una nueva clase Colonia para separar la información y tengamos una clase
de modelo para manejar exclusivamente los valores de las colonias:

49
ColoniaHelper.java

Se crea una clase llamada ColoniaHelper, esta clase va a ser un intermediario para
conectarse a una base de datos o alguna fuente donde venga la información de
cada una de las colonias y nuestro ManagedBean, todo esto con el objetivo de
separar la funcionalidad y no tener todo en una misma clase:

50
51
index.xhtml

VacanteForm.java

Inyectamos un objeto de tipo ColoniaHelper a nuestra clase, y creamos sus métodos

get y set:

Modificamos el método codigoPostal:

52
Prueba 1:

InPut:

OutPut:

53
Prueba 2:
InPut:

OutPut:

10. Facelets y Templates

Es un lenguaje de marcado XML similar a XHTML que se utiliza en conjunto con
JavaServer Faces (JSF). Facelets permite definir la estructura de las páginas web,
crear componentes reutilizables y establecer la interacción entre el cliente y el
servidor.

Facelets es conocido por su capacidad para generar páginas web dinámicas y su

integración con JSF permite la construcción de aplicaciones web robustas y
escalables en Java.

Características:

54
  Los Facelets es la tecnología estándar de despliegue de JSF, antes se
utilizaban los JSP’s.
 Los Facelets eliminan completamente la necesidad de los JSP’s
 Utilizan un parse XML en lugar del compilador de JSP.
 Comparado con JSP, los Facelets crean un componente tree más ligero.
 Los Facelets resultan hasta un 30% más rápidos en compilación.
 Soporte para Templates
 Creación de componentes compuestos es mucho más simple.
 Permiten en manejo dinámico del component Tree, tanto para agregar, como
para eliminar componentes.

Los Facelets no son JSPs

Dentro de una página Facelet NO es posible utilizar los siguientes taglib de JSP:

<jsp:root/>

<jsp:directive.include…/>

<jsp:output…/>

<jsp:directive.content…/>

Sin embargo, Sí es posible utilizar los tags de JSTL en los Facelets:

<c:forEach… />

<c:if… />

<c:catch… />

Plantillas con Facelets

Las platillas definen las regiones lógicas de una página JSF.

Cabecero
Menú Contenido
Pie de página

Los elementos generales son:

55
  Template (Plantilla): Página utilizada para controlar el layout (disposición de
los elementos)
 Template-cliente (Cliente de la Plantilla): Página que personaliza su propia
distribución (layout) a partir de la plantilla que implementa.

Los clientes acceden al Template-client, NUNCA directamente a la plantilla.

Componentes compuestos

 Anteriormente para la creación de nuevos componentes JSF requerían de

crear clases Java.
 Los facelets permiten crear componentes reutilizables combinando HTML y
tags de JSF:
o Permite la reutilización de otros componentes.
o Se definen en un archivo XHTML, no en clases Java.
 Los componentes compuestos son básicamente templates asociados a un
tag library personalizado.
 Para referenciar un componente compuesto basta con importar el namespace
en el XHTML.

10.1 Ejercicio de Facelets y Templates

Básicamente lo que se va a realizar es la agregación de un estilo e imágenes a el
proyecto, para que tenga un look and feel distinto (Apariencia). Por lo tanto, se
añadirán hojas de estilos (css) e imágenes de background.

Se crean los siguientes directorios y archivos (Es importante respetar los

nombres de los directorios de resources, ya que JSF los reconoce
automáticamente):

56
estilos.css

(Doble clic para descargar)

img01.jpg y img02 se encuentran en el siguiente archivo comprimido:

plantilla.xhtml

index.xhtml

57
Prueba:

OutPut:

58
11. Rol de JSF en Java EE y Ajax en JSF

59