Escolar Documentos
Profissional Documentos
Cultura Documentos
JSF
Framework Java que permite construir
pginas como interfaces de usuario
Distintos tipos de componentes.
Estados y eventos/funcionalidad (JavaScript).
Asociacin entre datos de la interfaz y datos
de la aplicacin web (Java Beans, etc).
Especificacin de la navegacin del usuario.
Coleccin de etiquetas Facelets/JSP
asociadas.
Facelets y JSP
Facelets y JSP son dos tecnologas
diferentes. JSF permite la utilizacin de
ambas, incluso conjuntamente
Facelets es ms reciente, es especfica
para JSF y ofrece ms posibilidades al
desarrollador
La especificacin actual de JSF, 2.0,
recomienda la utilizacin de Facelets
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, incluidos en
tres bibliotecas:
Etiquetas de carcter transversal (biblioteca
core), comunes a JSP y Facelets.
Etiquetas de componentes grficas (biblioteca
HTML), comunes a JSP y Facelets.
Etiquetas especficas de Facelets (biblioteca
facelets)
Facelets vs JSP
Facelets permite definir plantillas de
pginas web que contienen partes
pendientes de concretar
Tambin permite definir componentes de
documentos, que se pueden incluir en las
partes incompletas de las plantillas
Las componentes pueden depender de
parmetros (colores, tamao, etc.) que se
determinan al incluirlas en plantillas
Hello dinmico
Aplicacin que:
Pide al usuario su nombre.
Tras pulsar un botn, se saluda al usuario por
su nombre.
Permite la vuelta a la pgina inicial pulsando
en otro botn.
Sin necesidad de volver a identificarse, vuelve
a la segunda pgina pulsando el botn y le
vuelve a saludar correctamente.
Hello dinmico, II
Pginas web: Identificacin y saludo
Pgina de identificacin:
Etiqueta esttica que pide la identificacin
Formulario con dos componentes:
Campo de texto para introducir la identificacin
Botn para pasar a la segunda pgina
Pgina de informacin:
Texto dinmico de saludo
Formulario con botn para volver a la pgina inicial
Ciclo de vida de
aplicaciones JSF: Ejecucin
Las componentes web dan lugar a un
objeto Java que las modeliza (se puede
ver como una estructura anloga al DOM,
que tiene un nodo por cada etiqueta de
Facelets)
Las componentes se reutilizan total o
parcialmente de una vez para otra
Ciclo de vida de
aplicaciones JSF: Ejecucin, II
Tras (re)construir la vista de la aplicacin, se
aplican los valores de los parmetros de la
solicitud.
A continuacin se realizan conversiones y
validaciones de valores.
Tras ello se actualizan los beans asociados de
acuerdo con la informacin contenida en las
componentes
Por ltimo se ejecutan los mtodos apropiados.
Ciclo de vida de
aplicaciones JSF: Tratamiento
Una vez ejecutada la vista, se realiza su
tratamiento (render) para generar el cdigo
HTML correspondiente.
El tratamiento lo efecta un objeto,
denominado renderer, cuya funcionalidad
puede adaptarse para distintas
aplicaciones. Java EE proporciona un
renderer por defecto que es apropiado
para la mayora de las aplicaciones web
Ciclo de vida
de aplicaciones JSF
1 (Re)construir rbol
5
Eventos
Aplicacin
123
2
Pasar
parmetros
3 Validacin
4
Incorporar
informacin
6
HTML
Ciclo de vida
de aplicaciones JSF, II
Durante cada fase en el ciclo de vida se
producen eventos, ante los cuales la
aplicacin puede reaccionar mediante
listeners
Beans gestionados en
aplicaciones JSF
Segn hemos visto en el apartado de CDI,
en las aplicaciones web (por lo tanto, en
particular, en las aplicaciones JSF) se
pueden asociar beans a contextos
El contexto de los beans utilizados en JSF
se especifica mediante las anotaciones
que hemos visto en el apartado de CDI.
Beans gestionados en
aplicaciones JSF, II
Para que los beans gestionados de una
aplicacin JSF se adapten al ciclo de vida
de la pgina han de tener adems de las
anotaciones previstas por CDI la anotacin
@ManagedBean.
La configuracin de los beans gestionados
en JSF se puede hacer en el ficherode
configuracin faces-config.xml, que es
obligatorio pero puede estar vaco.
Especificacin de la navegacin
entre pginas JSF
La pgina de destino tras pulsar un botn
en una pgina JSF puede no ser fija.
Adems de la posibilidad de utilizar un
mtodo que la calcule, tambin se puede
utilizar un autmata (mquina de estados).
El autmata se puede definir mediante
reglas de navegacin incluidas en el
fichero de configuracin faces-config.xml.
Ejercicio opcional
[JSF1] Aplicacin JSF que muestra una
lista de nombres de personas extrada de
una base de datos que contiene
informacin adicional sobre ellas y
permite seleccionar personas de la lista y,
tras pulsar en un botn, muestra en otra
pgina la informacin de todas las
personas seleccionadas.
Diferencias en la ejecucin
entre SJP y Facelets
El cdigo JSP da lugar a un servlet que se
compila la primera vez que se accede a la
pgina y (re)construye la vista cada vez
El cdigo Facelets se compila y el servlet
FacesContext lo llama cuando tiene que
(re)construir la pgina
Componentes grficas:
Campo de texto
<h:inputText
required=true
maxLength=30
value=#{book.price}>
</h:inputText>
Componentes grficas:
Mens de seleccin
<h:selectOneMenu
id="selectOneCar
value="#{carBean.currentCar}">
<f:selectItems
value="#{carBean.carList}" />
</h:selectOneMenu>
(Tambin: h:selectManyMenu)
Componentes grficas:
Recuadros de seleccin mltiple
<h:selectManyCheckbox
id="cars
value="#{carsBean.car}">
<f:selectItems
value="#{carBean.carList}"/>
</h:selectManyCheckbox>
Componentes grficas:
Recuadros seleccionables
<h:selectBooleanCheckbox
title="emailUpdates
value="#{jsfex.wantsUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText
value="Would you like email
updates?"/>
Otras componentes de
seleccin
h:selectManyListbox
h:selectOneListbox
h:selectOneRadio
Pie de tabla
Componentes grficas:
Botn y enlace con accin
<h:commandButton
action=pg2
value=OK
/>
<h:commandLink
action=${pg2}
value=UAM
/>
Componentes grficas:
Botn y enlace con accin, II
Se pueden utilizar varios botones y
enlaces en un mismo formulario (JSF
genera el cdigo necesario para su
funcionamiento, utilizando campos ocultos
en el formulario).
El atributo action, adems de una cadena
de caracteres, puede ser un mtodo
pblico de cualquier objeto sin
argumentos, que devuelva una cadena.
Componentes grficas:
Mensajes de errores del usuario
Incluye todos los mensajes de error para el
usuario:
<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"/>
Depuracin
JSF (con facelets) no crea un servlet por
cada pgina
Las pginas no se pueden depurar lnea a
lnea (cada lnea de cdigo se transforma
en instrucciones distribuidas en varios
lugares del cdigo Java)
Los errores producidos en el contenedor se
pueden utilizar para depurar igual que en
las dems aplicaciones web
Depuracin, II
El fichero web.xml incluye informacin
acerca de la forma de ejecucin. En la
forma de desarrollo la aplicacin muestra
en el navegador informacin detallada
acerca de los errores de compilacin
Se puede obtener informacin acerca del
rbol de componentes web introduciendo en
una componente la etiqueta ui:debug.
La informacin se muestra con Ctrl-Shft-D
Depuracin, III
Hay herramientas que permiten seguir el
ciclo de vida de la aplicacin
jsftutorials.net/faces-config/phaseTracker.html
Funcionalidad de etiquetas
transversales
Modelo de validacin
JSF permite definir restricciones sobre los
valores de determinados datos
introducidos por los usuarios.
JSF proporciona validadores estndar.
Se pueden definir ms 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, que
son objetos de una clase JSF.
Los eventos de accin, como los botones y los
enlaces, dan lugar a una peticin al servidor y
pueden activar acciones en l.
Los eventos de cambio de valor, como la
seleccin de items en una lista y la activacin de
un check box, adems de poder generar la
evaluacin de mtodos JS en el cliente, pueden
activar acciones especficas en el servidor, como
el acceso a una base de datos.
123
2
Pasar
3 Validar y
eventos c.v.
1 Crear
abc
4
Incorporar
6
HTML
Modelo de navegacin
JSF permite especificar la navegacin entre
pginas mediante reglas que indican qu
eventos permiten pasar de una pgina a otra.
El evento null dirige de nuevo a la ltima
pgina.
La especificacin de la navegacin en
aplicaciones basadas en JSF se hace mediante
el fichero de configuracin faces-config.xml en
lugar de utilizar un servlet.
Modelo de navegacin:
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>
Inclusin de mensajes
(parte del texto de la pgina)
Fichero
src/articles/ArticleMsgs.properties:
Inclusin de mensajes:
Carga selectiva
Fichero Articles.jsp:
<f:loadBundle
basename=articles.ArticleMsgs
var=artmsg/>
<h:outputText
value=#{artmsg.ServerError}/>
Inclusin 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}/>
Parametrizacin de mensajes
Fichero de propiedades:
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.
Internacionalizacin
Forma idiomtica (locale): Especifica un idioma,
pas y variante del idioma
Ejemplo:
Ingls de Estados Unidos
Espaol de Espaa, variante andaluza
Francs
Internacionalizacin, II
Ficheros de propiedades:
ArticleMessages.properties
ArticleMessages_en_UK.properties
ArticleMessages_en_US.properties
ArticleMessages_es_ES.properties
ArticleMessages_es_MX.properties
Alternativa:
ArticleMessages_en.properties
ArticleMessages_es.properties
Internacionalizacin, III
Cada navegador en cada PC tiene una
preferencia idiomtica establecida.
Cada aplicacin web puede tener una
preferencia idiomtica propia.
En general, las componentes grficas
pueden establecer un locale especfico.
Internacionalizacin, IV
Preferencia idiomtica de una aplicacin 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>
Internacionalizacin, V
Internacionalizacin de aplicaciones web
generales:
Exige programacin en Java
Utilizar la clase PropertyResourceBundle,
construyendo instancias a partir de un locale
y los ficheros de propiedades.
Construir los mensajes que aparecen en las
pginas a partir de los
propertyResourceBundles consruidos.
Facelets: Plantillas
Una plantilla es un documento de Facelets
que tiene partes pendientes de rellenar.
Las partes pendientes de rellenar pueden
tener un contenido por defecto, que se
sustituye por otro contenido cuando se
instancia la plantilla.
Por ejemplo, la tabla de la transparencia
siguiente puede ser una plantilla.
Visualizacin de plantilla
sin instanciar
UAM
Aqu
va
su
Men
Codificacin de la plantilla
(fichero plantilla.xhtml)
<h:body> <table width=100% border=1>
<tr> <td> UAM </td>
<td> Escuela Politnica 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>
Instanciacin 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
instanciacin
El contenido que se incluye en los huecos
de una plantilla puede ser arbitrario. Por
ejemplo, se pueden incluir formularios,
tablas o elementos HTML de JSF de
cualquier tipo y en cantidad arbitraria.
Tambin se pueden incluir componentes
compuestas reutilizables, como un
formulario que pide un texto al usuario y lo
guarda en un lugar de memoria.
Componentes compuestas:
Ejemplo
Cantidad:
Euros OK
Utilizacin de la
componente compuesta
Euros OK
Cantidad:
Preetiqueta
Contenido
Postetiqueta
<rm:introtext preetiqueta=Cantidad:
contenido=#{cantidadBean}
postetiqueta=Euros
botonok=OK
action=index/>
BotonOK
Definicin de la
componente compuesta
Idea: Se considera a la componente como una
funcin de cinco argumentos: la preetiqueta, la
cantidad, la postetiqueta, el botnOK y la
action.
Segn hemos visto, en la utilizacin de la
componente los valores de los argumentos se
especifican indicando correlativamente sus
nombres y valores, en lugar de escribir sus
valores concatenados separados por comas.
Definicin de la
componente compuesta, II
La definicin de la componente es parte de
un fichero xhtml, que incluye una cabecera
(la especificacin de los argumentos) y un
cuerpo (la especificacin de la componente
en s).
Los argumentos se especifican dentro de
una clusula con etiqueta
composite:interface, y cada uno lleva la
etiqueta composite:attribute.
Definicin de la
componente compuesta, III
La componente parametrizada (cuerpo de la
definicin) se especifica en la forma que le
corresponde mediante clusulas de Facelets
dentro de una clusula con etiqueta
<composite:implementation>, incluyendo en
los lugares donde tienen que aparecer los
argumentos la frmula UEL
#{cc.attrs.nombreparam}, donde
nombreparam es el nombre del parmetro
que tiene que aparecer.
Ejemplo de definicin de
componente 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 definicin de
componente compuesta, II
<composite:implementation>
<h:form>
<h:outputLabel
value=#{cc.attrs.preetiqueta}/>
<h:outputText
value=#{cc.attrs.contenido}/>
Ejemplo de definicin de
componente compuesta, III
<h:outputLabel
value=#{cc.attrs.postetiqueta}/>
<h:commandButton
value=#{cc.attrs. botonOK}
action=#{cc.attrs.action}/>
</h:form>
Definicin de la
componente compuesta, IV
El fichero xhtml con la definicin de una
componente se incluye en un directorio
que corresponde a una biblioteca de
recursos.
El directorio es un subdirectorio de la
forma /resources/nombreBiblioteca.
Utilizacin de la
componente compuesta, II
El fichero que utiliza la componente tiene que incluir
la biblioteca igual que lo hace con las bibliotecas
estndar 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
patrones de documentos
Los atributos de las componentes
compuestas son cadenas de caracteres,
al igual que los de cualquier etiqueta en
XML, y en particular los de componentes
grficas de Facelets.
Las componentes compuestas no son
documentos completos, sino que se
incluyen en huecos de plantillas.
Componentes compuestas y
patrones de documentos, II
Las plantillas de documentos JSF son
documentos que se pueden ver como
funciones de los huecos que contienen.
Desde este punto de vista, sus parmetros
o argumentos son componentes, bien
sean predefinidas en la biblioteca HTML
de Facelets o definidas por usuarios como
componentes compuestas.
Ejercicio opcional
[JSF2] Disear una plantilla, una
componente compuesta y dos pginas de
Facelets que hagan lo siguiente:
La plantilla muestra en la parte superior un
formulario con un campo de texto y un botn
Show, que hace que el texto introducido por
el usuario se guarde en un atributo de sesin
fijo; la parte inferior por defecto contiene el
texto Por determinar.
Ejercicio opcional, II
[JSF2]
La primera pgina utiliza la plantilla para
mostrar en la parte inferior la imagen de un
directorio que corresponde al texto
introducido por el usuario en la parte superior.
La componente compuesta muestra el
contenido de una tabla, cuyo nombre es su
nico parmetro, de una base de datos fija.