java server faces

5/11/2018 Java Server Faces - slidepdf.com

http://slidepdf.com/reader/full/java-server-faces-55a236b25eed8 1/88

Java Server Faces



JSF

• Framework Java que permite construirpáginas como interfaces de usuario

– Distintos tipos de componentes.

– Estados y eventos/funcionalidad (JavaScript).

– Asociación entre datos de la interfaz y datosde la aplicación web (Java Beans, etc).

– Especificación de la navegación del usuario.

– Colección de etiquetas Facelets/JSPasociadas.



Facelets y JSP

• Facelets y JSP son dos tecnologíasdiferentes. JSF permite la utilización deambas, incluso conjuntamente

• Facelets es más reciente, es específicapara JSF y ofrece más posibilidades aldesarrollador

• La especificación actual de JSF, 2.0,recomienda la utilización de Facelets



Hello World (con Facelets)

• Componente de presentación: Hello.xhtml

– Atributos de la etiqueta html para la inclusiónde librerías en lugar de directivas de página

– Etiquetas especiales h:head y h:body

• Cláusulas especiales en web.xml:

– context-param (desarrollo, producción, …)

– servlet (FacesServlet, load-on-startup)

– Servlet-mapping (por defecto, /faces/*)

– welcome-file (faces/Hello.xhtml)



Ejemplo de Hello.xhtml

<?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:f=http://java.sun.com/jsf/ core

xmlns:h=http://java.sun.com/jsf/ html

xmlns:ui=http://java.sun.com/jsf/ facelets><h:head> <title>Facelet Title</title> </h:head>

<h:body>

<h1> Hello from Facelets </h1>

</h:body> </html>



Ejemplo de web.xml

<?xml version="1.0" encoding="UTF-8"?>

<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>



Ejemplo de web.xml, II

<servlet><servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</s-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>/faces/*</url-pattern></servlet-mapping>

<welcome-file-list>

<welcome-file>faces/Hello.xhtml</welcome-file>

</welcome-file-list> </web-app>



Etiquetas y componentes

• Hay tres tipos de etiquetas JSF, incluidosen tres bibliotecas: – Etiquetas de carácter transversal (biblioteca

core), comunes a JSP y Facelets. – Etiquetas de componentes gráficas (biblioteca

HTML), comunes a JSP y Facelets.

– Etiquetas específicas de Facelets (biblioteca

facelets)

• Además, las aplicaciones JSF puedenutilizar otras etiquetas de la biblioteca

estándar de JSP (c:if, c:foEach, etc.)



Facelets vs JSP

• Facelets permite definir plantillas depáginas web que contienen partespendientes de concretar

• También permite definir componentes dedocumentos, que se pueden incluir en laspartes incompletas de las plantillas

• Las componentes pueden depender deparámetros (colores, tamaño, etc.) que sedeterminan al incluirlas en plantillas



JSF: Algunas características

• Especificación en las etiquetas de caminos(paths) relativos y absolutos para el servidorde acceso a recursos (imágenes, etc).

Traducción automática al cliente.• Asociación directa en las etiquetas a datos de la

aplicación (Java Beans, etc):

– Datos necesarios para la visualización de la página.

– Datos proporcionados por el usuario (formularios).

– Otros datos que permiten parametrizar el código delservidor que genera la interfaz.



JSF: Algunas características, II

• JSF utiliza la arquitectura MVC de formasistemática

• El servlet controlador, FacesServlet, esfijo y lo proporciona JSF

• La especificación concreta de lanavegación por la aplicación en cada casose realiza mediante un fichero deconfiguración XML que da lugar a unaestructura de datos (un autómata)



JSF: Algunas características, III

• El modelo está formado por los Beans queguardan los datos generados por laaplicación.

• Cada solicitud incorpora datos nuevos, quepueden ser parámetros de control o informa-ción a incorporar al modelo del servidor

• Utiliza exclusivamente peticiones POST, quevan siempre al servlet principal. No permitenmotores de búsqueda ni guardar URLsfavoritas .



Hello dinámico

Aplicación que:

• Pide al usuario su nombre.

• Tras pulsar un botón, se saluda al usuario porsu nombre.

• Permite la vuelta a la página inicial pulsando

en otro botón.• Sin necesidad de volver a identificarse, vuelve

a la segunda página pulsando el botón y levuelve a saludar correctamente.



Hello dinámico, II

• Páginas web: Identificación y saludo

• Página de identificación:

– Etiqueta estática que pide la identificación

– Formulario con dos componentes:

Campo de texto para introducir la identificación

Botón para pasar a la segunda página

• Página de información: – Texto dinámico de saludo

– Formulario con botón para volver a la página inicial



Hello dinámico: identifica.xhtml

<h:body>

<h:form>

<h:outputLabel for=“nombre”

value="Introduzca su nombre:"/>

<h:inputText value=“#{nombre}” id=“nombre”>

<h:commandButton value=“OK” action=“hello” />

</h:form>

</h:body>



Hello dinámico: hello.xhtml

<h:body>

<h1> Hello ${nombre} </h1>

<h:commandButton value="OK"action="index"/>

</h:body>

Recomendación: Implementarlo y ver loscódigos de las páginas generadas



Ciclo de vida deaplicaciones JSF: Ejecución

• Las componentes web dan lugar a unobjeto Java que las modeliza (se puedever como una estructura análoga al DOM,

que tiene un nodo por cada etiqueta deFacelets)

• Las componentes se reutilizan total o

parcialmente de una vez para otra



Ciclo de vida deaplicaciones JSF: Ejecución, II

• Tras (re)construir la vista de la aplicación,se aplican los valores de los parámetrosde la solicitud.

• A continuación se realizan conversiones yvalidaciones de valores.

• Tras ello se actualizan los beans

asociados de acuerdo con la informacióncontenida en las componentes

• Por último se ejecutan los métodos

apropiados.



Ciclo de vida deaplicaciones JSF: Tratamiento

• Una vez ejecutada la vista, se realiza sutratamiento (render ) para generar elcódigo HTML correspondiente.

• El tratamiento lo efectúa un objeto,denominado renderer , cuya funcionalidadpuede adaptarse para distintas

aplicaciones. Java EE proporciona unrenderer por defecto que es apropiadopara la mayoría de las aplicaciones web



Ciclo de vidade aplicaciones JSF

123

6 HTML

1 (Re)construir árbol

2Pasar

parámetros

3 Validación

4

Incorporarinformación

5Eventos

Aplicación



Ciclo de vidade aplicaciones JSF, II

• Durante cada fase en el ciclo de vida seproducen eventos, ante los cuales laaplicación puede reaccionar mediante

listeners



Beans gestionados enaplicaciones JSF

• Según hemos visto en el apartado de CDI,en las aplicaciones web (por lo tanto, enparticular, en las aplicaciones JSF) se

pueden asociar beans a contextos• El contexto de los beans utilizados en JSF

se especifica mediante las anotacionesque hemos visto en el apartado de CDI.



Beans gestionados enaplicaciones JSF, II

• Para que los beans gestionados de unaaplicación JSF se adapten al ciclo de vidade la página han de tener además de las

anotaciones previstas por CDI laanotación @ManagedBean.

• La configuración de los beans gestionados

en JSF se puede hacer en el ficherodeconfiguración faces-config.xml, que esobligatorio pero puede estar vacío.



Especificación de la navegaciónentre páginas JSF

• La página de destino tras pulsar un botónen una página JSF puede no ser fija.

• Además de la posibilidad de utilizar unmétodo que la calcule, también se puedeutilizar un autómata (máquina de estados).

• El autómata se puede definir mediantereglas de navegación incluidas en elfichero de configuración faces-config.xml.



Uso de expresiones UEL

• Los atributos de las componentes y otrosobjetos generados por JFS se evalúan enel momento que les corresponde del ciclo

de vida.• Por ejemplo, los valores que se obtienen

de la aplicación, como los contenidos delas etiquetas, se evalúan en la fase deincorporación de datos de la aplicación,tras procesar los parámetros de lasolicitud.



Uso de expresiones UEL, II

• Para controlar la evaluación de los atributos, susvalores son normalmente expresiones UEL deevaluación retardada, #{…}.

• Normalmente son expresiones que correspondena l-values , es decir que su valor es una referen-cia asignable. Por ejemplo, no pueden ser elresultado de una operación o una comparación ni

números, pero pueden ser atributos de objetos.También pueden ser colecciones oenumeraciones.



Ejercicio opcional

• [JSF1] Aplicación JSF que muestra unalista de nombres de personas extraída deuna base de datos que contiene

información adicional sobre ellas y permiteseleccionar personas de la lista y, traspulsar en un botón, muestra en otra

página la información de todas laspersonas seleccionadas.



Diferencias en la ejecuciónentre SJP y Facelets

• El código JSP da lugar a un servlet que secompila la primera vez que se accede a lapágina y (re)construye la vista cada vez

• El código Facelets se compila y el servletFacesContext lo llama cuando tiene que(re)construir la página



Componentes gráficas: Texto fijo

• <h:outputText

value=“${price}”

lang=“en_US” />



Componentes gráficas:Campo de texto

• <h:inputText

required=“true”

maxLength=“30” value=#{book.price}>

</h:inputText>



Componentes gráficas: Imagen

• <h:graphicImage

height=“20”

length=“100” value=“/images/book.gif”

/>



Componentes gráficas:Menús de selección

• <h:selectOneMenu

id="selectOneCar“

value="#{carBean.currentCar}"><f:selectItems

value="#{carBean.carList}" />

</h:selectOneMenu>

(También: h:selectManyMenu)



Componentes gráficas:Recuadros de selección múltiple

• <h:selectManyCheckbox

id="cars“

value="#{carsBean.car}"><f:selectItems

value="#{carBean.carList}"/>

</h:selectManyCheckbox>



Componentes gráficas:Recuadros seleccionables

• <h:selectBooleanCheckbox

title="emailUpdates“

value="#{jsfex.wantsUpdates}" ></h:selectBooleanCheckbox><h:outputText

value="Would you like emailupdates?"/>



Otras componentes deselección

• h:selectManyListbox

• h:selectOneListbox

• h:selectOneRadio



Componentes gráficas: Paneles

Tabla con números

1 2

3

Pie de tabla



Componentes gráficas: Paneles, II

• <h:panelGrid columns=“2“

<f:facet name="header">

<h:outputText value="Tabla con números"/>

</f:facet>

<h:outputText value="1" />



<f:facet name="footer">

<h:outputText value=“Pie de tabla" />

</f:facet>

</h:panelGrid>



Componentes gráficas: Tablas

• <h:dataTable id="books“ value="#{BookStore.items}“

var=“book">

<h:column>

<f:facet name="header">

<h:outputText value="#{msg.storeNameLabel}"/>

</f:facet>

<h:outputText value="#{book.name}"/> </h:column>

<h:column> <f:facet name="header">

<h:outputText value=“#{msg.storeTypeLabel}”/>

</f:facet> <h:outputText value="#{book.subject}"/>

</h:column> </h:dataTable>

C áfi



Componentes gráficas:Botón y enlace con acción

• <h:commandButton

action=“pg2”

value=“OK”

/>

• <h:commandLink

action=“${pg2}”

value=“UAM”

/>

C áfi



Componentes gráficas:Botón y enlace con acción, II

• Se pueden utilizar varios botones yenlaces en un mismo formulario (JSFgenera el código necesario para su

funcionamiento, utilizando campos ocultosen el formulario).

• El atributo action, además de una cadena

de caracteres, puede ser un métodopúblico de cualquier objeto sinargumentos, que devuelva una cadena.

C áfi



Componentes gráficas:Mensajes de errores del usuario

• Incluye todos los mensajes de error para elusuario:

<h:messages style=“color: red” />

• Incluye mensajes de error de una componente:<h:message

style="color: red“

for="useraddress" /><h:inputText id="useraddress“

value="#{jsfexample.address}“

required="true" />



Depuración

• JSF (con facelets) no crea un servlet porcada página

• Las páginas no se pueden depurar línea alínea (cada línea de código se transformaen instrucciones distribuidas en varioslugares del código Java)

• Los errores producidos en el contenedorse pueden utilizar para depurar igual queen las demás aplicaciones web



Depuración, II

• El fichero web.xml incluye informaciónacerca de la forma de ejecución. En laforma de desarrollo la aplicación muestra

en el navegador información detalladaacerca de los errores de compilación

• Se puede obtener información acerca del

árbol de componentes web introduciendoen una componente la etiqueta ui:debug.

• La información se muestra con Ctrl-Shft-D



Depuración, III

• Hay herramientas que permiten seguir elciclo de vida de la aplicación

– jsftutorials.net/faces-config/phaseTracker.html

• Phase Tracker muestra la informacióncorrespondiente a cada cambio de fase enel ciclo de vida

• Phase Tracker utiliza un listener deeventos de la evolución del ciclo de vida

F i lid d d i



Funcionalidad de etiquetastransversales

• Acciones para la manipulación de eventos

• Conversión de datos

•Validación de datos• Internacionalización



Modelo de conversión de datos

• La estructura de datos utilizada en lapresentación no es la misma que se utilizaen la representación de datos por el

servidor. – Ejemplo: Una fecha se puede mostrar

mediante tres cadenas de caracteres.

• JSF proporciona conversores estándar.• Se pueden definir más conversores.



Ejemplos de conversores de datos

• <h:outputTextvalue=“${price}” lang=“en_US” converter=<f:convertNumber

type=“currency” maxFractionDigits=“2”

/> />

• <h:outputText value="#{article.date}"><f:convertDateTime dateStyle="full"/></h:outputText>



Modelo de validación

• JSF permite definir restricciones sobre losvalores de determinados datosintroducidos por los usuarios.

• JSF proporciona validadores estándar.

• Se pueden definir más validadores.



Ejemplos de validadores

• <h:inputText

required=“true”

maxLength=“3”

value=#{article.price}><f:validateLongRange

minimum=“#{article.minPrice}”

maximum=“#{article.maxPrice}”

/>

</h:inputText>



Modelo de eventos

• Las acciones del usuario generan eventos, queson objetos de una clase JSF.

• Los eventos de acción, como los botones y losenlaces, dan lugar a una petición al servidor ypueden activar acciones en él.

• Los eventos de cambio de valor, como laselección de items en una lista y la activación deun check box , además de poder generar laevaluación de métodos JS en el cliente, puedenactivar acciones específicas en el servidor,como el acceso a una base de datos.



Modelo de eventos: Ejemplo

• <h:commandButton

action=“#{bean.method}”

value=“OK”/>

• class Bean { …

String method() { … } }

• Los objetos registrados para recibireventos reciben el valor que devuelvemethod()



Recordatorio: Ciclo de vida

123 abc

6 HTML

1 Crear

2Pasar

3 Validar yeventos c.v.

4Incorporar

5Eventos

Aplicación



Modelo de eventos: Priorización

• Las acciones desencadenadas en elservidor por los eventos de acción seejecutan inmediatamente antes de

generar la respuesta.• Las acciones desencadenadas en el

servidor por los eventos de cambio de

valor se ejecutan en la fase de validación.



Modelo de eventos: Priorización, II

• A veces se desea que las acciones asociadas aeventos de acción modifiquen datos necesariosen fases previas, como la incorporación de

datos de la aplicación (por ejemplo, si un datogenerado por el usuario se utiliza en lapresentación inmediata).

• A veces se desea priorizar la ejecución de las

acciones asociadas a eventos de cambio devalor (por ejemplo, si modifican datosnecesarios en otra acción del mismo tipo).



Modelo de eventos: Priorización, III

• Si una componente gráfica tiene suatributo immediate con valor true , lasacciones desencadenadas en el servidor

por los eventos de acción y cambio devalor se ejecutan al final de la fase deaplicación de parámetros de la petición,

resolviendo los problemas anteriores.



Modelo de navegación

• JSF permite especificar la navegación entrepáginas mediante reglas que indican quéeventos permiten pasar de una página a otra.

• El evento null dirige de nuevo a la últimapágina.

• La especificación de la navegación enaplicaciones basadas en JSF se hace mediante

el fichero de configuración faces-config.xml enlugar de utilizar un servlet.

Modelo de navegación:



Modelo de navegación:Formato de las reglas

<navigation-rule>

<from-view-id>/init.jsp</from-view-id>

<navigation-case>

<from-outcome>event</from-outcome>

<to-view-id>/end.jsp</to-view-id>

</navigation-case></navigation-rule>

Inclusión de mensajes



Inclusión de mensajes(parte del texto de la página)

• Fichero

src/ articles/ArticleMsgs.properties:

…

ServerError=Request not completed

ClientError=Form not filled

…

Inclusión de mensajes:



Inclusión de mensajes:Carga selectiva

• Fichero Articles.jsp:

<f:loadBundle

basename=“articles .ArticleMsgs “

var=“artmsg“/>

…

<h:outputTextvalue=“#{artmsg.ServerError}”/>

Inclusión de mensajes:



Inclusión de mensajes:Carga global

• Fichero faces-config.xml:

• <resource-bundle>

<base-name>

articles .ArticleMsgs </base-name>

<var>artmsg</var>

</resource-bundle>

• Fichero Articles.jsp:

<h:outputText value=“#{artmsg.ServerError}”/>



Parametrización de mensajes

• Fichero de propiedades:… Selección=El socio {0} ha sido seleccionado…

• Fichero Socios.jsp:<f:loadBundle basename=“…“ var=“sls“/> <h:outputFormat value=“#{sls.Seleccion}”>

<f:param value=“#{socios.seleccion}”/> </h:outputFormat>• Permite cambiar el orden de las palabras en

distintos idiomas.

Componentes gráficas: Adaptación



Componentes gráficas: Adaptaciónde mensajes de errores del usuario

<h:inputText id=“cap” label=“Capitulo”

value=“#{LibroBean.capNum}”

converterMessage = “#{ErrMsg.capE}”>



Internacionalización

• Forma idiomática (locale): Especifica un idioma,país y variante del idioma

• Ejemplo: – Inglés de Estados Unidos

– Español de España, variante andaluza

– Francés

• Se especifica mediante una cadena de la formaXXX_YYY_ZZZ – Ejemplo: en_US

– Normalmente, el país se pone con mayúsculas



Internacionalización, II

• Ficheros de propiedades:ArticleMessages.properties

ArticleMessages_en_UK.properties

ArticleMessages_en_US.propertiesArticleMessages_es_ES.properties

ArticleMessages_es_MX.properties

• Alternativa:

ArticleMessages_en.properties

ArticleMessages_es.properties



Internacionalización, III

• Cada navegador en cada PC tiene unapreferencia idiomática establecida.

• Cada aplicación web puede tener una

preferencia idiomática propia.

• En general, las componentes gráficaspueden establecer un locale específico.



Internacionalización, IV

• Preferencia idiomática de una aplicación JSF:Fichero faces-config.xml

<application><locale-config>

<default-locale>es_ES</default_locale><supported-locale>es_MX

</ supported-locale>

<supported-locale>en_UK

</ supported-locale>

</locale-config></application>



Internacionalización, V

• Internacionalización de aplicaciones webgenerales:

Exige programación en Java

– Utilizar la clase PropertyResourceBundle,construyendo instancias a partir de un localey los ficheros de propiedades.

– Construir los mensajes que aparecen en laspáginas a partir de lospropertyResourceBundles consruidos.



Facelets: Plantillas

• Una plantilla es un documento de Faceletsque tiene partes pendientes de rellenar.

• Las partes pendientes de rellenar pueden

tener un contenido por defecto, que sesustituye por otro contenido cuando seinstancia la plantilla.

• Por ejemplo, la tabla de la transparenciasiguiente puede ser una plantilla.

Visualización de plantilla



Visualización de plantillasin instanciar

UAM Escuela Politécnica de Madrid

AquívasuMenú…

Aquí va su texto, que puede ser tan largo y aburrido como Vd.quiera, pero eso sí, lo tiene que escribir desde el principiohasta el final, porque si no aparecerá esto.

Codificación de la plantilla



Codificación de la plantilla(fichero plantilla.xhtml)

<h:body> <table width=“100%” border=“1”>

<tr> <td> UAM </td>

<td> Escuela Politénica Superior> </td> </tr>

<tr> <td> <ui:insert name=“21”> Aquí <br>

su <br> menú <br> … </ui:insert> </td>

<td> <ui:insert name=“22”> Aquí su texto,que puede ser tan largo y aburrido como …

</ui:insert> </td> </tr> </table> </h:body>

Instanciación de la plantilla



Instanciación de la plantilla(fichero instanciaciacion.xhtml)

<h:body>

<ui:composition template=“plantilla.xhtml”>

<ui:define name=“21”>

Servlets <br> JSP <br> JSF

</ui:define>

<ui:define name=“22”> Bienvenido a la web de CLS. Aquí …

</ui:define> </ui:composition> </h:body>

Consideraciones acerca de la



Consideraciones acerca de lainstanciación

• El contenido que se incluye en los huecosde una plantilla puede ser arbitrario. Porejemplo, se pueden incluir formularios,

tablas o elementos HTML de JSF decualquier tipo y en cantidad arbitraria.

• También se pueden incluir componentes

compuestas reutilizables, como unformulario que pide un texto al usuario y loguarda en un lugar de memoria.

Componentes compuestas:



Componentes compuestas:Ejemplo

Cantidad: Euros

• Las etiquetas “Cantidad:”, “Euros” y “OK”se pueden cambiar cada vez que se utiliza

la componente.• También se pueden cambiar el nombrede la variable donde se guarda el valorintroducido por el usuario y la URL destino.

OK

Utilización de la



Utilización de lacomponente compuesta

<rm:introtext preetiqueta=“Cantidad:”

contenido=“#{cantidadBean}”

postetiqueta=“Euros”

botonok=“OK”

action=“index”/>

Preetiqueta Postetiqueta

Cantidad: Euros OKContenido BotonOK

Definición de la



Definición de lacomponente compuesta

• Idea: Se considera a la componente comouna función de cinco argumentos: lapreetiqueta , la cantidad , la postetiqueta , el

botónOK y la action .• Según hemos visto, en la utilización de la

componente los valores de los

argumentos se especifican indicandocorrelativamente sus nombres y valores,en lugar de escribir sus valores

concatenados separados por comas.

Definición de la



Definición de lacomponente compuesta, II

• La definición de la componente es partede un fichero xhtml, que incluye unacabecera (la especificación de los

argumentos) y un cuerpo (laespecificación de la componente en sí).

• Los argumentos se especifican dentro de

una cláusula con etiquetacomposite:interface, y cada uno lleva laetiqueta composite:attribute.

Definición de la



Definición de lacomponente compuesta, III

• La componente parametrizada (cuerpo dela definición) se especifica en la forma quele corresponde mediante cláusulas de

Facelets dentro de una cláusula conetiqueta <composite:implementation>,incluyendo en los lugares donde tienen

que aparecer los argumentos la fórmulaUEL #{cc.attrs.nombreparam}, dondenombreparam es el nombre delparámetro que tiene que aparecer.

Ejemplo de definición de



Ejemplo de definición decomponente compuesta

<composite:interface>

<composite:attribute name=“preetiqueta”/>

<composite:attribute name=“contenido”/>

<composite:attribute name=“postetiqueta”/>

<composite:attribute name=“botonOK”/>

<composite:attribute name=“action”/> </composite:interface>

…




Ejemplo de definición decomponente compuesta, II

…

<composite:implementation>

<h:form>

<h:outputLabel

value=“#{cc.attrs.preetiqueta}”/>

<h:outputTextvalue=“#{cc.attrs.contenido}”/>

…




Ejemplo de definición decomponente compuesta, III

…

<h:outputLabel

value=“#{cc.attrs.postetiqueta}”/><h:commandButton

value=“#{cc.attrs. botonOK}”

action=“#{cc.attrs.action}”/>

</h:form>

Definición de la



Definición de lacomponente compuesta, IV

• El fichero xhtml con la definición de unacomponente se incluye en un directorioque corresponde a una biblioteca de

recursos.• El directorio es un subdirectorio de la

forma /resources/nombreBiblioteca.

Utilización de la



Utilización de lacomponente compuesta, II

• El fichero que utiliza la componente tiene queincluir la biblioteca igual que lo hace con lasbibliotecas estándar de Facelets:

<html xmlns=http://www.w3.org/1999/xhtml xmlns:f=“http://java.sun.com/jsf/core”

xmlns:h=“http://java.sun.com/jsf/html”

xmlns:ui=“http://java.sun.com/jsf/facelets”

xmlns:rm=“http://java.sun.com/jsf/composite/ …”>

Donde … es el nombre del subdirectorio.

Componentes compuestas y

http://www.w3.org/1999/xhtml

http://java.sun.com/jsf/composite/nombreBiblioteca

http://java.sun.com/jsf/composite/nombreBiblioteca

http://www.w3.org/1999/xhtml



Componentes compuestas ypatrones de documentos

• Los atributos de las componentescompuestas son cadenas de caracteres,al igual que los de cualquier etiqueta en

XML, y en particular los de componentesgráficas de Facelets.

• Las componentes compuestas no son

documentos completos, sino que seincluyen en huecos de plantillas.

Componentes compuestas y



Componentes compuestas ypatrones de documentos, II

• Las plantillas de documentos JSF sondocumentos que se pueden ver comofunciones de los huecos que contienen.

• Desde este punto de vista, susparámetros o argumentos soncomponentes, bien sean predefinidas en

la biblioteca HTML de Facelets o definidaspor usuarios como componentescompuestas.

Ej i i i l



Ejercicio opcional

• [JSF2] Diseñar una plantilla, unacomponente compuesta y dos páginas deFacelets que hagan lo siguiente:

– La plantilla muestra en la parte superior unformulario con un campo de texto y un botón“Show”, que hace que el texto introducido por el usuario se guarde en un atributo de sesión

fijo; la parte inferior por defecto contiene eltexto “Por determinar”.

Ej i i i l II



Ejercicio opcional, II

• [JSF2] … – La primera página utiliza la plantilla para

mostrar en la parte inferior la imagen de un

directorio que corresponde al textointroducido por el usuario en la parte superior.

– La componente compuesta muestra elcontenido de una tabla, cuyo nombre es su

único parámetro, de una base de datos fija.

Ej i i i l III



Ejercicio opcional, III

• [JSF2] … – La segunda página utiliza la plantilla y la

componente compuesta para mostrar en la

parte inferior la tabla cuyo nombre introduceel usuario en la parte superior

(En general, la plantilla se puede utilizar

para visualizar instanciaciones decomponentes compuestas arbitrarias conun solo atributo)

java server faces

Documents