Documentos de Académico
Documentos de Profesional
Documentos de Cultura
JSF (Java Server Faces)
JSF (Java Server Faces)
JSF (Java Server Faces)
Faces)
Introduccin
Actualmente la mayora de las
aplicaciones se distribuyen por Internet.
Casi todos los accesos clientes se hacen a
travs de Web.
Cada vez hay mas clientes especficos con
dispositivos y pantallas diferentes.
El modelo de programacin Web actual
est basado en documentos no basados
en pantallas de interaccin.
Aportaciones de JSF
JSF logra la unin entre los cliente Web actuales y
el modelo tradicional de componentes.
Logra separar la renderizacin del
componente.
Logra desplazar la interaccin del usuario con el
programa al modelo tradicional de eventos.
JSF es la evolucin estndar de Struts, por
los mismos que realizaron Struts.
Es un estndar claro y potente para poder hacer
aplicaciones visuales mas potentes.
Arquitectura
Nos da Renderizacin, rbol de componentes
visuales, validadores, conversores y
eventos y javabeans.
Nos aporta un ciclo de vida claro estndar.
Nos permite configurar y definir
externamente el flujo de pantallas, la
navegacin.
Nos permite modificar o incorporar componentes
bsicos propios en la arquitectura.
Por ejemplo un ciclo de vida propio
Relacin entre JSF y JSP
Aporta tags para funcionar sobre jsps.
Se podra usar JSF en otros entornos diferentes a
jsp.
Tenemos una librera estndar de JSF-Html para
crear aplicaciones web.
Nos da un nivel de informacin independiente
de estar en un contenedor web-servlets o un
contenedor basado en portlets.
Retrasa la renderizacin hasta el ltimo momento
para poder renderizar con toda la informacin
bien preparada.
Nos permite crear componentes propios para
reutilizar.
JSF tiene un Servlet como entrada de las
llamadas a su arquitectura.
Elementos
Se necesita configurar un servlet de JSF
para enlazar con el contenedor Web.
Se basa en un fichero de configuracin,
por defecto faces-config.xml
Qu gestionamos en el faces-config?
Componentes (Edit/ Label/ ComboBox).
Validadores.
Conversores.
Beans (Java Beans).
Navegacin
Aspectos avanzados...
Configurando JSF:
Descriptor web.xml
Debemos registrar el servlet.
javaxfaces.webapp.FacesServlet
Tenemos que hacer el servlet-mapping de
las uris que vamos a tratar con JSF.
Normalmente de tipo
/facesl*
*.faces
*.jsf
Parmetros de
Configuracin
Se pueden configurar los siguientes parmetros
globales (context-param):
javax.faces.CONFIG_FILES indicando una lista relativa
a nuestro contexto donde estn los archivos de
configuracin de JSF. Por defecto carga /WEB-lNF/faces-
config.xml.
javax.faces.DEFAULT_SUFFIX indica el sufijo por
defecto de recursos conteniendo componentes JSF,
por defecto . jsp.
javax.faces.LIFECYCLE_lD instancia de LifeCycle a usar
por JSF por defecto LifecycleFactory.DEFAULT_LIFECYCLE.
javax.faces.STATE_SAVING_METHOD La localizacin
donde se va a guardar la informacin de estado:
server o client.
Por defecto server en el HttpSession
El cerebro de la bestia:
Faces-config.xml
La etiqueta principal es <faces-config>.
Podemos tener mas de un archivo de
configuracin.
Podemos configurar:
Java beans.
Registrar validadores propios.
Registrar conversores propios.
Configurar reglas de navegacin.
Registrar Renders.
Registrar componentes propios.
Taller prctico Hola Mundo con
Java Server Faces
Partimos de piloto 0.0, entorno de trabajo
basado en Maven2 y generado mediante el
arquetipo para MyFaces.
Lo modificamos para que:
ahora?
Quitar ahora f:view y probar con entrada.jsf.
Funciona?
Resuelto en piloto 1.0.
Botones: UICommand
Realiza una accin al ser activado.
Propiedades bsicas:
</managed-bean>
Interactuando con el
modelo
Cmo hacemos que nuestras vistas
interacten con el modelo?
Sabemos como forzar a que JSF invoque un
inyectamos?
Visualizar el resultado del contador en la
pgina final.
Visin global: Qu nos trae
JSF?
Hasta ahora hemos visto y usado algunos
de los elementos que nos aporta JSF, como
los formularios, los comandos, etc.
Los elementos de JSF se clasifican en:
Componentes JSP
Objetos Implcitos
Componentes JSP
JSF basa sus vistas en un rbol de nodos
visuales.
Los nodos tienen asociados un renderizador que
crea su visualizacin.
Entre llamada y llamada se recrea el rbol de
objetos en el lado servidor.
Hay un conjunto estndar de componentes
base.
Tenemos una implementacin de HTML que
implementa de diversa manera estos
componentes base.
Vamos a ver los componentes base con su reflejo
sobre los componentes Html.
EL Objetos Implcitos
Podemos usar el EL para asociar mtodos y propiedades a los
elementos #{.. .}.
Con el Expresion Languaje de JSF tenemos una serie de objetos
implcitos en el contenedor web estndar:
applicationScope
cookie
facesContext
header
headerValues
initParam.
param
paramValues
requestScope
sessionScope
view
Indica el UIComponent que es raz del rbol para esta llamada
Elementos Visuales
Los componentes han de tener un
constructor vaco para poder instanciarse.
Todo componente visual tiene una
su
representacin visual segn convenga.
Elementos Visuales
El paquete visual principal es
javax.facescomponent.
Todo elemento visual forma parte de un rbol
nodal de elementos.
El elemento base de la jerarqua es UIComponent.
El elemento funcional base que hereda de
UIComponent es UIComponentBase.
El elemento raz de un rbol es UIViewRoot.
Todo componente debe especificar constantes
indicando el tipo bajo el cual el componente es
registrado y la familia para seleccionar el render
adecuado.
COMPONENT_TYPE, Component_FAMILY
Propiedades del
UIComponent
Propiedades nodales
getParent.
getChildren.
getChildrenCount.
getViewNode
Nos permite acceder al nodo principal del rbol
Buscar componentes hijo.
Cada componente tiene un Id, bien impuesto o
bien generado.
Propiedades del
UIComponent
Nos permite acceder al FacesContext al
que pertenece el componente.
Todo componente pertenece a una familia
y un renderType, la conjuncin de ambos
determina el render a utilizar.
Casi cada componente UI va a tener una
etiqueta asociada.
getAttibutes nos permite acceder a las
propiedades y atributos del componente
Codificacin de datos
Al crear componentes tenemos que implementar la
codificacin y decodificacin de la informacin.
Decode:
Leemos el dato del request y propagamos su valor.
Encode:
EncodeBegin
EncodeChildren
EncodeEnd
Durante la fase de renderizacin los datos se pasan al lenguaje
de marcado.
En caso de no necesitar tener en cuenta los componentes hijo
solo implementaremos en encodeEnd.
UIView
Es el nodo raz de un rbol de
componentes visuales.
Nos permite poner el locale del rbol.
Hereda de UIBaseComponent.
Tiene asociado un RenderKit:
Es una familia de renders.
Cada render en el RenderKit esta designado por
tipo y familia que renderiza.
Su etiqueta es f:view y su nico atributo
opcional es locale
Libreras de etiquetas
de elementos SelectItem.
Ej:
formas diferentes:
Cambio del idioma del
usuario
1. Establecindolo directamente en el faces-
config.xml, el criterio idioma del
navegador prevalece sobre sto.:
<faces-config>
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>de</supported-locale>
</locale-config>
</application>
</faces-config>
Cambio del idioma del
usuario
2. Establecerlo como parmetro de la
etiqueta f:view:
<f:view locale="de">
Ventaja, podemos establecerlo
dinmicamente
<f:view locale="#{user.locale}"/>
3. Establecerlo por programa
UIViewRoot object:
UIViewRoot viewRoot =
FacesContext.getCurrentInstance().getViewRoot();
viewRoot.setLocale(new Locale("de"));
Taller prctico
Modificar la aplicacin para que el criterio
del idioma que estamos seleccionando al
hacer login cambie el locale de la
aplicacin.
Para verlo reflejado, internacionalizar
<h:outputText value="#{payment.amount}">
<f:convertNumber type="currency"/>
</h:outputText>
<h:inputText value="#{payment.amount}">
<f:convertNumber minFractionDigits="2"/>
</h:inputText>
Renderizado de errores
Cmo muestro los errores de
conversin/validacin?
Si quiero mostrarlos todos juntos:
<h:messages/>
Taller prctico
Modificar el piloto anterior para que adems
se requiera el campo cantidad.
Taller prctico
Modificar la welcome.jsp para que:
Los campos login y password sean obligatorios.
La password tenga al menos 3 caracteres
Se visualicen mensajes personalizados e
internacionalizados.
Resuelto en piloto11.0
Taller prctico: Juntndolo
todo
A partir del piloto anterior:
Definir un bean Usuarios (y declararlo como usuario)
que contenga un ArrayList con un UsuarioBean por cada
usuario que queramos en la aplicacin.
Modificar el proceso de login para que el proceso se
realice contra los usuarios del bean Usuarios.
Crear una pgina registro.jsp y un backingbean
RegistroForm con un mtodo registro que reciba login y
password y aada el nuevo usuario al bean usuarios.
Enlazar desde welcome.jsp a registro.jsp con:
<h:outputLink value="registro.jsf">
<f:verbatim>Nuevo usuario</f:verbatim>
</h:outputLink>
Resuelto en piloto 12.0
Gestin de Eventos en JSF
En entornos de desarrollo de tipo
cliente/servidor estamos acostumbrados a
poder asociar eventos de tipo onClick o
onChange a los componentes visuales de la
pantalla.
En Web, dado que trabajamos sobre Http...
Application
<h:commandLink actionListener="#{bean.linkActivated}">
...
</h:commandLink>
actions?
Action listeners vs. Actions
Actions:
Diseados para la lgica de negocio.
Deciden sobre la navegabilidad del sistema
Action listeners:
Orientados a ejecutar lgica de presentacin.
No pueden decidir qu mensaje se enva al controlador.
Los dos tipos de elementos trabajan
coordinadamente cuando el Action requiere
informacin del interfaz de usuario.
Ejemplo: Una imagen enlazada que dependiendo
de la zona pulsada, generar una redireccin u
otra.
Ejemplo de action events
Enlace en la JSP:
<h:commandButton image="mountrushmore.jpg"
actionListener="#{rushmore.listen}"
action="#{rushmore.act}"/>
En el backing bean...
private String outcome;
private Rectangle washingtonRect = new Rectangle(70,30,40,40);
private Rectangle jeffersonRect = new Rectangle(115,45,40,40);
public void listen(ActionEvent e) {
FacesContext context = FacesContext.getCurrentInstance();
String clientId = e.getComponent().getClientId(context);
Map requestParams = context.getExternalContext().getRequestParameterMap();
int x = new Integer((String) requestParams.get(clientId + ".x")).intValue();
int y = new Integer((String) requestParams.get(clientId + ".y")).intValue();
outcome = null;
if (washingtonRect.contains(new Point(x,y)))
outcome = "washington"; public String act()
{
...
return outcome;
}
Taller prctico: Enlazando
action events
En primer lugar, creamos un nuevo mtodo
public void listen(ActionEvent e) en el
CarritoForm que muestre un mensaje por
pantalla demostrando que ha sido invocado.
Lo asociamos al botn de submit del
etiquetas:
f:actionListener
f:valueChangeListener
Ventajas sobre la alternativa anterior: Puede
asociar varios listeners diferentes al mismo
elemento.
f:actionListener &
f:valueChangeListener
Diferencias en la aplicacin:
Versin con el atributo
<h:selectOneMenu value="#{form.country}" onchange="submit()"
valueChangeListener="#{form.countryChanged}">
<f:selectItems value="#{form.countryNames}"/>
</h:selectOneMenu>
Versin con f:valueChangeListener:
<h:selectOneMenu value="#{form.country}" onchange="submit()">
<f:valueChangeListener type="com.corejsf.CountryListener"/>
<f:selectItems value="#{form.countryNames}"/>
</h:selectOneMenu>
No es una method
expression sino
una clase!
Clase ValueChangeListener
La clase listener para los eventos de cambio
de valor tiene que implementar una
determinada interfaz:
ValueChangeListener
public class CountryListener implements ValueChangeListener {
public void processValueChange(ValueChangeEvent event)
{
...
}
}
El controlador invoca el mtodo
processValueChange tras cada cambio.
Clase ActionListener
Similar a la anterior:
<f:actionListener type=" com.corejsf. RushmoreListener "/>
Taller prctico
Hacerlo sobre la versin actual del piloto para el cambio de
idioma en el login
Comandos inmediatos?
En el caso de los comandos, tambin podemos hacerlos
inmediatos, pero no hacer falta forzar el renderizado
porque al terminar van directos a dicha fase.
Envo de informacin desde la
Interfaz de Usuario al Servidor.
Supongamos que queremos hacer la
internacionalizacin con dos banderas, una por
idioma, haciendo que ambas sean
commandLinks:
<h:commandLink action="#{localeChanger.englishAction}" immediate="true">
<h:graphicImage value="/british_flag.gif"/>
</h:commandLink>
En el servidor:
public class ChangeLocaleBean {
public String germanAction() {
FacesContext context = FacesContext.getCurrentInstance();
context.getViewRoot().setLocale(Locale.GERMAN);
return null;
}
public String englishAction() {
FacesContext context = FacesContext.getCurrentInstance();
context.getViewRoot().setLocale(Locale.ENGLISH);
return null;
}
Envo de informacin desde la
Interfaz de Usuario al Servidor.
Problema:
Estamos definiendo mtodos que son
prcticamente iguales repetimos lgica- y que en
orientacin a objetos podra ser uno solo
parametrizado.
Solucin:
Envo de informacin desde la interfaz al usuario.
Mtodos:
f:param
f:setPropertyActionListener
f:attribute
<f:param.../>
Nos permite adjuntarle un parmetro a un
componente.
Se comporta diferentemente dependiendo
En el servidor:
public String changeLocale() {
FacesContext context = FacesContext.getCurrentInstance();
String languageCode = getLanguageCode(context);
context.getViewRoot().setLocale(new Locale(languageCode));
return null;
}
private String getLanguageCode(FacesContext context) {
Map<String,String> params=context.getExternalContext().getRequestParameterMap();
return params.get("languageCode");
}
Taller prctico: uso de f:param
Crear en LoginForm un nuevo mtodo
idiomaCambiado() que recupere el
parmetro nuevoIdioma de la request y
establezca el nuevo Locale
Aadir dos etiquetas de comando, una por
En el servidor
public void changeLocale(ActionEvent event) {
UIComponent component = event.getComponent();
String languageCode = getLanguageCode(component);
FacesContext.getCurrentInstance().getViewRoot().setLocale(new Locale(languageCode));
}
private String getLanguageCode(UIComponent component) {
Map<String, Object> attrs = component.getAttributes();
return (String) attrs.get("languageCode");
}
<f:setPropertyActionListener...
Desde JSF 1.2, establece una propiedad
directamente en nuestro backing bean...
<h:commandLink immediate="true action="#{localeChanger.changeLocale}">
<f:setPropertyActionListener target="#{localeChanger.languageCode} value="de"/>
<h:graphicImage value="/german_flag.gif" style="border: 0px"/>
</h:commandLink>
En el servidor...
public class ChangeLocaleBean {
private String languageCode;
public String changeLocale() {
FacesContext context = FacesContext.getCurrentInstance();
context.getViewRoot().setLocale(new Locale(languageCode));
return null;
}
public void setLanguageCode(String newValue) {
languageCode = newValue;
}
}
Otras cosillas...
Conversores Propios
<converter>
<description>Converter for credit card numbers that
normalizes the input to a standard format</description>
<converter-id>CreditCardConverter</converter-id>
<converter-class> converters Cred itCardConverter
</converter-class>
</converter>
Render Propio
<render-kit>
<renderer>
<component-family>Area</component-family>
<renderer-type>DemoArea</rendere-type>
<renderer-class>renderers.AreaRenderer</renderer-class>
<attribute>
<attribute-name>onmouseout</attribute-name>
<attribute-class>java.lang.String</attribute-class>
</attribute>
<attribute>
<attribute-name>onmouseover</attribute-name>
<attribute-class>java.lang String</attribute-class>
</attribute>
<attribute>
<attribute-name>styleClass</attribute-name>
<attribute-class>java.lang.String</attribute-class>
</attribute>
</renderer>
Componente Propio
Podemos registrar componentes visuales propios
<component>
<component-type>DemoArea</component-type>
<component-class>components.AreaComponent</component-class>
<property>
<property-name>alt</property-name>
<property-class>java.lang.String</property-class>
</property>
<property>
<property-name>coords</property-.name>
<property-class>java.lang.String</property-class>
</property>
<property>
<property-name>shape</property-name>
<property-class>java.lang.String</property-class>
</property>
<component-extension>
<component-family>Area</component-family>
<renderer-type>DemoArea</renderer-type>
</component-extension>
</component>
UIGraphic
Muestra una imagen.
Propiedades de un, alt (texto alternativo,
outputLabel
Su atributo for apunta a un id de un campo de entrada
con el que se encuentra asociada la etiqueta
outputLink
Necesita una etiqueta verbatim que muestra el texto
que el usuario clickea para lanzar el link
UIOutput
outputFormat que muestra un mensaje
Permite la utilizacin de java.text.MessageFormat.
Value indica la frase a parametrizar normalmente de un
ResourceBoundle.
Tiene etiquetas de tipo <f:param value...> para indicar
los parmetros del mensaje.
outputText que muestra un texto de una lnea