INTRODUCCION AL ESTANDAR JSF

CURSO

Objetivos
Adquirir

un conocimiento bsico del estndar Java Server Faces (JSF).

Conocer el diseo de interfaz de usuario utilizando las libreras de etiquetas de JSF. Realizar talleres prcticos para poner en funcionamiento el conocimiento adquirido.

Conocer la implementacin de JSF Richfaces.

Objetivos

Agenda
Introduccin Arquitectura Configuracin Backing Bean Expression Language Componentes en JSF (UICommand, UIInput y UIForm) Navegacin entre Pginas Componentes en JSF (Caractersticas Generales) Faces Context Ciclo de Vida Componentes en JSF (Select) Resource Bundles y Mensajes Converter Componentes en JSF (Message) Validator Gestin de Eventos XHTML Facelets Richfaces
Introduccin

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

INTRODUCCION 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. Es un estndar claro y potente para poder hacer aplicaciones visuales mas potentes.

ARQUITECTURA Nos da renderizacin, rbol de componentes visuales, validadores, conversores, eventos y javabeans. Nos aporta un ciclo de vida 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

Aporta tags para funcionar sobre jsps. Se podra usar JSF en otros entornos diferentes a jsp.

ARQUITECTURA Tenemos una librera estndar de JSF-Html para crear aplicaciones web. Retrasa la renderizacin hasta el ltimo momento para poder renderizar con toda la informacin bien preparada. Nos permite crear componentes propios para reutilizar.

CONFIGURACIN web.xml Se necesita configurar un servlet de JSF para enlazar con el contenedor Web. 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

CONFIGURACIN faces-config.xml La etiqueta principal es <faces-config>.

Podemos tener mas de un archivo de configuracin.

Podemos configurar:
Java beans (managed-bean); Navegacin (navigation-rule); Validadores personalizados (validator); Conversores personalizados (converter); Aspectos avanzados (renders, componentes propios, etc).

BACKING BEAN Son beans que no responden a entidades, sino a agrupaciones de datos que por motivos prcticos, nos puede interesar procesar juntos, a nivel de componentes y no de valores. Es imprescindible para validaciones en las que se han de comprobar relaciones entre componentes.

BACKING BEAN El backing bean define las propiedades de los componentes de la pgina y los mtodos que realizan el procesamiento del componente. Este procesamiento incluye la manipulacin de eventos, validacin, conversiones y el procesamiento asociado a la navegacin Scopes:
Request; Session; Application; None, el bean es inicializado cada vez que es referenciado y no se guarda en ningn scope.

EL (Expression Language) EL es un lenguaje de scripting que hace parte de la especificacin de JSF con el objetivo de facilitar y simplificar el acceso a los componentes de una pgina sin necesidad de utilizar cdigo Java. Al ser EL un lenguaje tipo script, no requiere de compilacin por lo que toda expresin es evaluada en tiempo de ejecucin (runtime). El desarrollador puede interactuar con los atributos, mtodos y propiedades de los componentes a travs de expresiones. As mismo los mapeos (bindigs) que se hacen con los componentes son implementados con EL.

EL (Expression Language) EJEMPLOS:

Tenemos una clase PersonaBean.java, con un atributo llamado nombre:
public class PersonaBean {

private String nombre; public String getNombre() { return nombre; } public void setNombre(String nombre) { this.nombre = nombre; }
}

Ahora, si necesitamos que el atributo nombre almacene la informacin que se ingresa a travs de un campo de ingreso (UIInput) que se encuentra en una pgina, se debe realizar la siguiente declaracin:
<h:inputText value="#{personaBean.nombre}"/> <h:selectOneMenu value="#{personaBean.nombre} />

EL (Expression Language) EJEMPLOS:

Necesitamos desplegar BTN_NUEVO:
public class PersonaBean { private Botones btns; public String getBtns() { return btns; } } public class Botones { private final String BTN_NUEVO = Nuevo; public String getBtnNuevo() { return BTN_NUEVO; }

el

valor

de

la

constante

llamada

Ahora, si necesitamos que el valor de la constante BTN_NUEVO se despliegue como la etiqueta de un botn en una pgina, se debe realizar la siguiente declaracin:
<h:commandButton value="#{personaBean.btns.btnNuevo}" />

COMPONENTES EN JSF UICommand Realizan una accin al ser activados;

Principales propiedades:
Action, action-string o method-binding al mtodo que devuelve el action-string. El action-string es usado por el NavigationHandier para determinar la pagina siguiente de acceso; ActionListener, mtodo para escuchar los eventos de accin.

Dos tipos de etiquetas bsicas:

<h:commandButton ../> , representa un botn; <h:commandLink ../>, representa un elemento de accin en formato link (con <a></a>) .

COMPONENTES EN JSF UIInput Representan los campos de entrada de informacin;

Principales propiedades:
Converter, identifica el conversor de datos a utilizar; Validators, method-binding para ejecutar validaciones;

ValueChangeListener, method-binding para escuchar los cambios de valor.

Etiquetas bsicas:
<h:inputHidden />, representa un campo hidden; <h:inputSecret />, representa a un campo password; <h:inputText />, representa un campo de ingreso de texto; <h:inputTextArea />, representa un campo de ingreso multi-linea;

COMPONENTES EN JSF UIForm Representa un form de entrada.

Engloba a todos los componentes que muestran o recogen informacin.

<h:form>. ..</h:form>

Cuando apliquemos JSF, tenemos que ceirnos a sus reglas y utilizar sus etiquetas en lugar de las etiquetas estndar HTML, estas implementan ms lgica por detrs que nosotros no vemos pero que nos ahorra trabajo; Ejemplo de formulario en JSF:
<h:form> <h:inputText value="#{usuario.login}"/> <h:commandButton value="Login" action=?"/> </h:form>

NAVEGACION En JSF, TODAS las peticiones van a la propia pgina. Entonces, Dnde est el truco?; El servlet mapping hace que el controlador capture todas las peticiones que concuerden con la extensin *.jsp; Lo que debemos poner en la propiedad action de un componente de tipo comando (ntese que no es a nivel de formulario) es la accin que se desea disparar; Cmo se navega entonces?. Estableciendo el mapa de navegacin en el controlador.

NAVEGACION JSF permite configurar cual ser la siguiente pagina despus de pulsar un botn o link; Cada regla define como navegar desde una vista hacia otro conjunto de vistas; La siguiente vista depende del mtodo action sobre el que se haya pinchado (clic sobre el componente) y la salida lgica que de la etiqueta referenciada (action-string). Salidas tpicas:
continuar, todo ocurri correctamente; error, hubo algo mal, ir a una pgina de error; login, el usuario necesita primero autentificarse, ir a pagina de login. null, no se realiza redireccin de vista

NAVEGACION Elementos de la regla de navegacin:

From-view-id, indica la pgina origen de la peticin (request); From-action, indica el action del que procede y que da su valor; From-outcome, representa el evento que dispara la transicin; To-view-id, indica el id de la vista a la que pasamos.

Ejemplo:
<navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-action>#{LoginBean.autentificar}</from-action> <from-outcome>continuar</from-outcome> <to-view-id>/siguiente.jsp</to-view-id> </navigation-case> <navigation-case> <from-action>#{LoginBean.autentificar}</from-action> <from-outcome>error</from-outcome> <to-view-id>/login.jsp</to-view-id> </navigation-case> </navigation-rue>

COMPONENTES EN JSF JSF basa sus vistas en un rbol de nodos visuales;

Los nodos tienen asociados un renderizador que crea su visualizacin;

Todo componente visual tiene una representacin como objeto en el servidor en una jerarqua nodal. 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;

COMPONENTES EN JSF Propiedades usuales:

Id, identificador del componente, si no se lo ponemos es generado automticamente. Debe ser nico; immediate, si esta a true indica que los eventos, validaciones y conversiones se realizan en la fase de apply request en lugar de una fase posterior. rendered, indica si el componente ha de ser renderizado; style, especifica el cascading style sheet para la etiqueta; styleClass, especifica el class del CSS (cascading style sheet); value, indica el valor del componente, como literal o enlazado con una propiedad del modelo de informacin; binding, identifica una propiedad de un bean y asocia la instancia UI del componente a esa propiedad (set.. .(UI.. A));

Todos los atributos excepto id y var permiten la asociacin de value-binding con el Expresion Lenguaje de Java Server Faces. #{objeto.propiedad}

FACES CONTEXT Todo request (peticin) tiene asociado un FacesContext al hilo de llamada; El FacesContext solo debe existir durante la request hasta que se llame a su mtodo release; No se le debe referenciar por un objeto que tenga una vida mas larga que la request; Contiene toda la informacin relativa al estado en la request y la renderizacin de la respuesta;

Encapsula el elemento raz visual ViewRoot;

Encapsula los posibles mensajes;

CICLO DE VIDA DE JSF Cada llamada que lleva a crear una vista en JSF, pasa por una serie de fases determinadas que crean su ciclo de vida. Existen tres tipos de escenarios posibles:
Una peticin sin JSF genera una respuesta con JSF. Una peticin con JSF genera un respuesta con JSF. Una peticin con JSF genera una respuesta sin JSF.

CICLO DE VIDA DE JSF

COMPONENTES EN JSF Select Los elementos de formulario que muestran elementos entre los que se puede seleccionar (combo, radio, listas, etc.) comparten modo de funcionamiento. La entrada de datos debe ser una coleccin de elementos SelectItem. Ejemplo: new SelectItem(01,Espaol).

Todo Item tiene un label y un value.

UISelectItems y UISelectItem, nos permiten anidar opciones en los select.

SelectItems permite tomar los datos de Arrays, Map y Collection de elementos tipo SelectItem o SelectItemGroup.

COMPONENTES EN JSF Select Para refernciar las opciones de un componente select, se debe hacer los siguiente: En el backing bean ejemplo:
Private UIInput propiedadDestino; public List getOpciones() { List opciones = new ArrayList(); opciones SelectItem(01,Opcin 1")); opciones SelectItem(02",Opcin 2")); return opciones; }

En la jsp:
<h:selectOneMenu binding="#{ejemplo.propiedadDestino}"> <f:selectItems value="#{ejemplo.opciones}"/> </h:selectOneMenu>

CONVERTER JSF aporta una coleccin de clases conversores (converter) predefinidos para tipos de datos estndar. Converter es la interfaz capaz de hacer transformaciones string-objeto y objeto-string. Podemos asociar un conversor a un lnput/Output. El atributo converter indica la clase java que implementa ese interface. Tambin se puede anidar dentro de una etiqueta con f:converter. Requiere el atributo converterId, el cual indica el id del conversor a utilizar.

CONVERTER El funcionamiento cuando hay un conversor es el siguiente:

El usuario enva los datos (request); Se genera el rbol de componentes; Se invocan los conversores para asignar los valores del request a los componentes generados en el rbol; En caso de error,
o Se aaden los mensajes de error a la lista global de mensajes o Se vuelve a mostrar la pgina original y, en caso de que exista una etiqueta h:messages, se muestran los errores.

CONVERTER Tenemos conversores automticos para los tipos bsicos:

BigDecimalConverter BigIntegerConverter ByteConverter CharacterConverter DateTimeConverter DoubleConverter FloatConverter IntegerConverter LongConverter NumberConverter ShortConverter

CONVERTER Existe un conversor f:dateTimeConverter que permite hacer conversiones de fecha:

datestyle, indica el formato: default, short, medium, long y full. locale, indica el Locale, por defecto FacesContext.getLocale; pattern, indica el patrn de fecha (dd/MM/yy por ejemplo); timeStyle, define el formato de hora; type, indica si la fecha va a contener una fecha, hora o ambos.

CONVERTER Existe un conversor f:numberConverter controlar conversiones de nmero: que permite

Algunas propiedades son: currencyCode, currencySymbol, pattern, locale, minIntegerDigits, maxIntegerDigits, minFractionDigits, maxFractionDigits, integerOnly; groupingUsed, boolean que indica si la cadena de salida tiene separadores de agrupamiento; type, indica si el valor a convertir y formatear es nmero, moneda o porcentaje

CONVERTER Ejemplos:
<h:outputText value="#{factura.fecha}"> <f:convertDateTime/> </h:outputText> <h:outputText value="#{factura.unidades}"> <f:convertNumber integerOnly =true/> </h:outputText> <h:inputText value="#{factura.valorTotal}"> <f:convertNumber minFractionDigits="2"/> </h:inputText>

COMPONENTES EN JSF - Message Cmo muestro los errores de conversin/validacin?

Si quiero mostrarlos todos juntos:

<h:messages/>

Si quiero mostrar los especficos de un campo:

<h:inputText id=unidades" label=Unidades" binding="#{bean.unidades}"> <f:convertNumber integerOnly="true"/> </h:inputText> <h:message for=unidades"/>

VALIDATOR JSF permite validar el contenido de diferentes datos.

Podemos usar el atributo validator para apuntar al mtodo de un bean para que realice la validacin.
Los validadores se pueden registrar en las componentes que implementan EditableValueHolder. Si no se cumple la validacin, se debe generarun ValidatorException conteniendo un FacesMassage del error. Para obligar el ingreso de datos, no hace falta ningn validador anidado, basta con establecer el atributo required a true.
<h:inputText id=tarjeta" value="#{usuario.tarjeta}" required="true requiredMessage="#{msgs.campoRequerido} />

VALIDATOR JSF aporta una coleccin validaciones estndar. de clases

con

que
la

realizan
etiqueta

La clase DoubleRangeValidator f:validateDoubleRange valida que el valor:

o Pueda ser convertido a punto flotante.

o Opcionalmente rango de valores (mnimo y/o mximo).

La clase LengthValidator con la etiqueta f:validateLength valida que el valor :

o La longitud de la cadena este entre un mnimo y/o un mximo.

La clase LongRangeValidator con la etiqueta f:validateLongRange valida que el valor :

o Pueda ser convertido a punto long. o Opcionalmente rango de valores (mnimo y/o mximo).

VALIDATOR Para obligar el ingreso de datos, no hace falta ningn validador anidado, basta con establecer el atributo required a true.
<h:inputText id=tarjeta" value="#{usuario.tarjeta}" required="true requiredMessage="#{msgs.campoRequerido}"> <f:validateLength minimum="13"/> </h:inputText>

GESTION DE EVENTOS 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 trabajamos sobre Http Se puede hacer esto? JSF, al igual que otras plataformas como .NET simula esto encapsulando el evento en una request que es enviada al servidor sin llegar a disparar la accin del formulario. JSF soporta tres tipos de eventos:
Value change events, disparados por elementos UIInput cuando el valor que contienen cambia. Action events, los disparan los elementos UICommand cuando el botn o enlace asociado es activado. Phase Events, disparados rutinariamente por el ciclo de vida JSF.

GESTION DE EVENTOS - Action Events Son disparados por los objetos UICommand cuando se activa el componente. Se invocan durante la fase Invoke Application
<h:commandLink actionListener="#{bean.linkActivado}"> ... </h:commandLink>

Cuando se activa el componente, el formulario se enva y el controlador dispara los eventos.

Entonces... En qu se diferencian de los actions?

GESTION DE EVENTOS - Action Events Actions:

Diseados para la lgica de negocio. Deciden sobre la navegabilidad del sistema Orientados a ejecutar lgica de presentacin. No pueden decidir qu mensaje se enva al controlador.

ActionListeners:

Los dos tipos de elementos trabajan coordinadamente cuando el Action requiere informacin de la interfaz de usuario.
Ejemplo: Una imagen enlazada que dependiendo de la zona pulsada, generar una redireccin u otra.

XHTML XHTML (Lenguaje de Marcado de Hipertexto Extensible) es una versin ms estricta y limpia de HTML, que nace precisamente con el objetivo de remplazar a HTML ante su limitacin de uso con las cada vez ms abundantes herramientas basadas en XML. Extiende HTML 4.0 combinando la sintaxis de HTML, diseado para mostrar datos, con la de XML, diseado para describir los datos. Surge como el lenguaje cuyo etiquetado, ms estricto que HTML, va a permitir una correcta interpretacin de la informacin independientemente del dispositivo desde el que se accede a ella.

XHTML Al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos bsicos a cumplir en lo que a cdigo se refiere:

Los documentos deben estar bien formados: esto quiere decir que todos los elementos deben tener etiquetas de cierre, deben estar escritos de una forma determinada y adems todos los elementos deben estar anidados correctamente.

Cdigo de elementos anidados:

<p>Ejemplo de elementos bien<em>anidados</em>.</p> <p>Ejemplo de elementos mal<em>anidados</p>.</em>

Los nombres de atributos y elementos deben ir en minsculas: Tanto los elementos como los atributos deben ir en minsculas para todos los elementos HTML y los nombres de atributos. Esto es importante ya que XML interpreta las maysculas y las minsculas de forma diferente
<body>Ejemplo correcto</body> <BODY>Ejemplo incorrecto</BODY>

XHTML
Los elementos que no estn vacios necesitan etiquetas de cierre:
<p>Ejemplo correcto.</p><p>Ejemplo correcto.</p> <p>Ejemplo incorrecto.<p>Ejemplo incorrecto.</p>

Los valores de las etiquetas deben ir siempre entre comillas: todos los valores de los atributos deben ir entre comillas, incluso aquellos que sean numricos.
<table rows="3"> ejemplo correcto <table rows=3> ejemplo incorrecto

XHTML
Existen varias versiones de XHTML: para utilizar una versin concreta (1.0, 1.1, Bsico, etc.), se debe incluir antes del elemento html del cdigo de la pgina Web, la Definicin del Tipo de Documento (DTD) que se pretende utilizar. Por ejemplo, un documento en XHTML 1.1 podra especificarse de la siguiente forma:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo</title> </head> <body> . . . </body> </html>