Documentos de Académico
Documentos de Profesional
Documentos de Cultura
CURSO
Objetivos
Adquirir
Conocer el diseo de interfaz de usuario utilizando las libreras de etiquetas de JSF. Realizar talleres prcticos para poner en funcionamiento el conocimiento adquirido.
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
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.
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
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}" />
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.
Principales propiedades:
Converter, identifica el conversor de datos a utilizar; Validators, method-binding para ejecutar validaciones;
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;
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
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>
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;
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.
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).
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.
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>
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} />
que
la
realizan
etiqueta
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>
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.
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>