Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Unidad VIII: Tecnologa JSF

Tpicos Selectos de Programacin Web

Profesor: Marco Antonio Ziga Alumnos: Antonio Ruiz Duarte

Victoria de Durango, Dgo., Noviembre 2011

0

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Contenido
Introduccin a JSF .................................................................................................................. 2 Modelo de Componentes de interfaces de usuario ............................................................... 5 Modelo de navegacin ..............................................................................................................15 Usando JSF en JSP ...............................................................................................................20 Desarrollando Aplicaciones JSF..................................................................................................23 Creacin de Componentes Personales User Interface.......................................................33

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Introduccin a JSF

Qu es JSF?

JavaServer Faces (JSF) es un tecnologa y framework para aplicaciones Java basadas en web que simplifica el desarrollo de interfaces de usuario en aplicaciones Java EE. JSF usa JavaServer Pages (JSP) como la tecnologa que permite hacer el despliegue de las pginas, pero tambin se puede acomodar a otras tecnologas como XUL. JSF incluye: Un conjunto de APIs para representar componentes de una interfaz de usuario y administrar su estado, manejar eventos, validar entrada, definir un esquema de navegacin de las pginas y dar soporte para internacionalizacin y accesibilidad. Un conjunto por defecto de componentes para la interfaz de usuario. Dos bibliotecas de etiquetas personalizadas para JavaServer Pages que permiten expresar una interfaz JavaServer Faces dentro de una pgina JSP. Un modelo de eventos en el lado del servidor. Administracin de estados. Beans administrados.

La especificacin de JSF fue desarrollada por la Java Community Process Versiones de JSF: JSF 1.0 (11-03-2004) - lanzamiento inicial de las especificaciones de JSF. JSF 1.1 (27-05-2004) - lanzamiento que solucionaba errores. Sin cambios en las especificaciones ni en el renderkit de HTML. JSF 1.2 (11-05-2006) - lanzamiento con mejoras y correccin de errores. JSF 2.0 (12-08-2009) - ltimo lanzamiento.

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Las principales implementaciones de JSF son: JSF Reference Implementation de Sun Microsystems. MyFaces proyecto de Apache Software Foundation. Rich Faces, de Jboss. Trae componentes adicionales para crear aplicaciones ms ricas ICEfaces Contiene diversos componentes para interfaces de usuarios ms enriquecidas, tales como editores de texto enriquecidos, reproductores de multimedia, entre otros. jQuery4jsf Contiene diversos componentes sobre la base de uno de los ms populares framework javascript jQuery.

Servidor y herramientas utilizados

Java Server Faces 2.0 es una tecnologa nueva, y necesita las ltimas versiones de las herramientas de desarrollo y servidores web para poder usarla. A nivel de herramientas, las ms utilizadas son Eclipse y NetBeans. En el curso usaremos NetBeans versin 6.8 o arriba. A nivel de servidores web, servidores como Apache Tomcat 6+, Jboss 5+, o GlassFish 3 soportan JSF 2.0.

Qu es una aplicacin JavaServer Faces?

En su mayor parte, una aplicacin JavaServer Faces es como cualquier otra aplicacin Java Web. Una aplicacin tpica de JavaServer Faces incluye las siguientes piezas: Un conjunto de pginas web, en la que los componentes de interfaz de usuario son establecidos. Un conjunto de bibliotecas de etiquetas proporcionar etiquetas para aadir componentes de interfaz de usuario a la pgina web. Un conjunto de Backed Bean, que son JavaBeans componentes que definen las propiedades y funciones de los componentes de la interfaz de usuario en una pgina. Opcionalmente, uno o ms ficheros de configuracin de la aplicacin de recursos (como faces-config.xmlfile), que definen las normas de navegacin de la pgina y configura los beans y otros objetos personalizados, tales como componentes personalizados.
3

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Un descriptor de despliegue (un archivo web.xml). Es posible que un conjunto de objetos personalizados creados por el desarrollador de aplicaciones. Estos objetos pueden incluir componentes personalizados, validadores, convertidores, o los oyentes. Un conjunto de etiquetas personalizadas para representar los objetos personalizados en la pgina.

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Modelo de Componentes de interfaces de usuario

JavaServer Faces componentes de interfaz de usuario (UI) son los bloques de construccin de vista de JavaServer Faces. JavaServer Faces componentes de interfaz de usuario son elementos configurables, reutilizables que componen la interfaz de usuario de aplicaciones JavaServer Faces. Un componente puede ser simple, como un botn, o pueden ser compuestos, tales como una tabla, compuesta de mltiples componentes. La tecnologa JavaServer Faces proporciona componentes flexibles que incluye lo siguiente: una rica arquitectura de

Un conjunto de clases UIComponent para especificar el estado y el comportamiento de los componentes de la interfaz de usuario Un modelo de representacin que define el modo de hacer los componentes de varias maneras Un evento de escucha y el modelo que define cmo manejar los eventos de los componentes Un modelo de conversin que define cmo registrar los convertidores de datos en un componente Un modelo de validacin que define cmo registrar validadores en un componente

Las clases de componentes de interfaz de usuario

La tecnologa JavaServer Faces proporciona un conjunto de clases de componentes de interfaz de usuario y de comportamiento asociados a las interfaces que especifican todas las funcionalidad de los componentes de interfaz de usuario, como componente de participacin del estado, mantener una referencia a los objetos, y un evento de conduccin y manejo de la prestacin de un conjunto de componentes estndar. Las clases de componentes son totalmente extensible, permitiendo a los escritores de componentes para crear sus propios componentes personalizados. Creacin de componentes personalizados es un tema avanzado que veremos ms tarde. La clase base abstracta para todos los componentes de interfaz de usuario es javax.faces.component.UIComponent.

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Las clases de componentes de interfaz de usuario amplian la clase UIComponentBase, (una subclase de la clase UIComponent), que define el estado por defecto y el comportamiento de un componente de interfaz de usuario. El siguiente conjunto de clases de componentes de interfaz de usuario se incluye con la tecnologa JavaServer Faces: UIColumn: Representa una sola columna de datos en un componente UIData. UICommand: Representa un control que inicia acciones cuando se activa. UIData: Representa un enlace de datos a una coleccin de datos representados por una instancia dataModel. UIForm: Encapsula un grupo de controles que enviar datos a la aplicacin. Este componente es anlogo a la etiqueta de formulario en HTML. UIGraphic: Muestra una imagen. UIInput: Toma de entrada de datos de un usuario. Esta clase es una subclase de UIOutput. UIMessage: Muestra un mensaje de error traducidos. UIMessages: Muestra un conjunto de mensajes de error traducidos. UIOutcomeTarget: Muestra un hipervnculo en la forma de un vnculo o un botn. UIOutput: Muestra la salida de datos en una pgina. UIPanel: administra el diseo de sus componentes nio. UIParameter: Representa los parmetros de sustitucin. UISelectBoolean: Permite al usuario establecer un valor booleano en un control de seleccin y anulacin de ella. Esta clase es una subclase de la clase UIInput. UISelectItem: Representa un solo elemento en un conjunto de elementos. UISelectItems: Representa todo un conjunto de elementos. UISelectMany: Permite al usuario seleccionar varios elementos de un grupo de elementos. Esta clase es una subclase de la clase UIInput. UISelectOne: Permite al usuario seleccionar un elemento de un grupo de elementos. Esta clase es una subclase de la clase UIInput. UIViewParameter: Representa los parmetros de consulta en una solicitud. Esta clase es una subclase de la clase UIInput. UIViewRoot: Representa la raz del rbol de componentes.

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Adems de ampliar UIComponentBase, las clases de componente tambin aplicar una o ms interfaces de comportamiento, cada uno de los cuales define cierto comportamiento de un conjunto de componentes cuyas clases implementan la interfaz. Estas interfaces de comportamiento son las siguientes: ActionSource: Indica que el componente puede desencadenar un evento de accin. Esta interfaz est diseado para utilizarse con componentes basados en la tecnologa JavaServer Faces 1.1_01 y versiones anteriores. ActionSource2: Extiende ActionSource, y por lo tanto proporciona la misma funcionalidad. Sin embargo, se permite a los componentes a utilizar el EL unificado cuando se hace referencia a los mtodos para controlar los eventos de accin. EditableValueHolder: Extiende ValueHolder y especifica las caractersticas adicionales para los componentes modificable, como la validacin y emitir los eventos de cambio de valor. NamingContainer: los mandatos que cada componente de raz en este componente tiene una identificacin nica. StateHolder: Indica que un componente ha estado que deben guardar entre las solicitudes. ValueHolder: Indica que el componente mantiene un valor local, as como la posibilidad de acceder a los datos en el nivel de modelo. SystemEventListenerHolder: Mantiene una lista de casos SystemEventListener para cada tipo de SystemEvent definido por esa clase. ClientBehaviorHolder: aade la capacidad de unir los casos ClientBehavior como una secuencia de comandos reutilizables.

Cada etiqueta personalizada definida en el estndar HTML hacer kit se compone de la funcionalidad de los componentes (definidos en la clase UIComponent) y la prestacin de atributos (definidos por la clase Renderer).

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Lista de etiquetas UI Component Tag Funciones Rendered As Apariencia

column

Representa una columna de datos en un componente UIData

A column of data in an HTML table

Una columna de una tabla

commandButton

Un botn Enva un formulario An HTML <input para la solicitud type=type> element, where the type value can be submit, reset, or image Enlaces a otra pgina o ubicacin en una pgina An HTML <a href> element Un hipervnculo

commandLink

dataTable

Representa un contenedor de datos

An HTML <table> element

Una tabla que se pueden actualizar de forma dinmica No aparece

form

Representa una forma de entrada (etiquetas internas de la forma recibir los datos que se presentar con el formulario) Muestra una imagen

An HTML <form> element

graphicImage

An HTML <img> element

Una imagen

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

inputHidden

Permite a un autor de la pgina incluir una variable oculta en una pgina

An HTML <input type=hidden> element

No aparece

inputSecret

Permite al usuario An HTML <input introducir una type=password> element cadena sin la cadena aparece en claro en el campo

Un campo de texto, que muestra una fila de estrellas en lugar de la cadena real que haya entrado Un campo de texto

inputText

Permite al usuario introducir una cadena Permite a un usuario introducir una cadena de varias lneas

An HTML <input type=text> element

inputTextarea

An HTML <textarea> Un campo de element texto de varias lineas

message

Muestra un An HTML <span> Una cadena de mensaje localizado tag if styles are used texto Muestra los mensajes localizados A set of HTML Una cadena de <span> tags if styles texto are used Texto sin formato

messages

outputFormat

Plain text Muestra un mensaje localizado Muestra un componente anidado como una etiqueta para un campo de entrada especificado An HTML <label> element

outputLabel

Texto sin formato

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

outputLink

Enlaces a otra pgina o ubicacin en una pgina sin que se genere un evento de accin Muestra una lnea de texto Muestra una tabla

An HTML <a> element

Un hipervnculo

outputText

Plain text

Texto sin formato

panelGrid

An HTML <table> element with <tr> and <td> elements A HTML <div> or <span> element

Una tabla

panelGroup

Grupos de un conjunto de componentes en uno de los padres

Una fila de una tabla de

selectBooleanCheckbox Permite a un An HTML <input usuario cambiar el type=checkbox> valor de una opcin element. boleana selectItem Representa un elemento en una lista de elementos en un componente UISelectOne Representa una lista de elementos en un componente UISelectOne An HTML <option> element

Una casilla de verificacin

No aparece

selectItems

A list of HTML <option> elements

No aparece

selectManyCheckbox

Muestra un A set of HTML conjunto de casillas <input> elements of type checkbox de verificacin de que el usuario puede seleccionar

Un conjunto de casillas de verificacin

10

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

varios valores selectManyListbox Permite al usuario seleccionar varios elementos de un conjunto de elementos, todos muestran a la vez Permite al usuario seleccionar varios elementos de un conjunto de elementos Permite a un usuario para seleccionar un elemento de un conjunto de elementos, todos muestran a la vez Permite a un usuario para seleccionar un elemento de un conjunto de elementos Permite a un usuario para seleccionar un elemento de un conjunto de elementos An HTML <select> element Un cuadro de lista

selectManyMenu

An HTML <select> element

Un cuadro combinado desplazable

selectOneListbox

An HTML <select> element

Un cuadro de lista

selectOneMenu

An HTML <select> element

Un cuadro combinado desplazable

selectOneRadio

An HTML <input Un conjunto de type=radio> element botones de radio

11

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Conversin de Modelo
Una aplicacin JavaServer Faces, opcionalmente, se puede asociar con un componente de servidor de datos de objetos secundarios. Este objeto es un componente JavaBeans, llamado BackedBean. Una aplicacin obtiene y establece el objeto de datos para un componente llamando a las propiedades de objeto apropiado para ese componente. Cuando un componente est asociado a un objeto, la aplicacin tiene dos puntos de vista de los datos del componente: El punto de vista del modelo, en el que se representan los datos como tipos de datos, tales como int o long. La vista de presentacin, en el que se representan los datos de una manera que puede ser ledo o modificado por el usuario. Por ejemplo, un java.util.Date puede ser representada como una cadena de texto en el formato mm / dd / aa o como un conjunto de tres cadenas de texto.

La implementacin de JavaServer Faces convierte automticamente datos de los componentes entre estos dos puntos de vista cuando la propiedad de bean asociados con el componente de uno de los tipos soportados por los datos del componente. Por ejemplo, si un componente de UISelectBoolean se asocia con una propiedad de bean de java.lang.Boolean tipo, la implementacin JavaServer Faces se convertir automticamente los datos del componente de la cadena en Boolean. Adems, algunos datos de los componentes deben estar vinculadas a las propiedades de un tipo particular. Por ejemplo, un componente UISelectBoolean debe estar enlazado a una propiedad de tipo boolean o java.lang.Boolean. A veces puede que desee convertir los datos de un componente a un tipo distinto de un tipo estndar, o puede que desee convertir el formato de los datos. Para facilitar esto, la tecnologa JavaServer Faces le permite registrar la aplicacin Converter en componentes UIOutput y componentes cuyas clases UIOutput subclase. Si se registra la aplicacin Converter en un componente, la aplicacin Converter convierte los datos del componente entre los dos puntos de vista. Puede utilizar los convertidores estndar suministrados con la implementacin JavaServer Faces o crear su propio convertidor personalizado. La creacin de convertidor personalizado es un tema avanzado que se ver ms adelante.

12

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Evento y el oyente de modelo

JavaServer Faces 2.0 define tres tipos de eventos: los eventos de aplicacin, los eventos del sistema y los datos de eventos de modelo. Eventos de aplicacin estn vinculados a una aplicacin en particular y son generados por un UIComponent. Ellos representan el estndar de eventos disponibles en versiones anteriores de la tecnologa JavaServer Faces. Un objeto de evento identifica el componente que gener el evento y almacena informacin sobre el evento. Para ser notificado de un evento, una aplicacin debe proporcionar una implementacin de la clase de escucha y debe registrarlo en el componente que genera el evento. Cuando el usuario activa un componente, por ejemplo, hacer clic en un botn, se dispara un evento. Esto hace que la implementacin JavaServer Faces para invocar el mtodo de escucha que procesa el evento. JavaServer Faces soporta dos tipos de eventos de aplicacin: eventos de accin y eventos de cambio de valor. Un evento de accin (ActionEvent clase) se produce cuando el usuario activa un componente que implemente ActionSource. Estos componentes incluyen botones y los hipervnculos. Un evento de cambio de valor (ValueChangeEvent clase) se produce cuando el usuario cambia el valor de un componente representada por UIInput o uno de sus subclases. Un ejemplo es la seleccin de una casilla de verificacin, una accin que resulta en el valor del componente est cambiando a true. Los tipos de componentes que puede generar este tipo de eventos son los UIInput, UISelectOne, UISelectMany, y los componentes de UISelectBoolean. Valor eventos de cambio son despedidos slo si no se detectaron errores de validacin. Los sucesos del sistema son generados por un objeto en lugar de un UIComponent. Que se generan durante la ejecucin de una aplicacin en tiempos predefinidos. Son aplicables a toda la aplicacin en lugar de a un componente especfico. Un modelo de datos de eventos se produce cuando se selecciona una nueva fila de un componente de UIData. Los sucesos del sistema y los datos de eventos de modelo son temas avanzados que se mirarn ms tarde.

13

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Validacin La tecnologa JavaServer Faces soporta un mecanismo para la validacin de los datos locales de los componentes modificables (como los campos de texto). Esta validacin se produce antes de que el modelo de datos correspondiente se actualiza para que coincida con el valor local. Al igual que el modelo de conversin, el modelo de validacin define un conjunto de clases estndar para la realizacin de comprobaciones de validacin de datos comunes. La etiqueta de JavaServer Faces ncleo biblioteca tambin define un conjunto de etiquetas que corresponden a las implementaciones estndar de Validator. La mayora de las etiquetas tienen un conjunto de atributos para configurar las propiedades del validador, tales como los valores mximo y mnimo permitidos para los datos del componente. Los registros de autor es el validador en un componente por la etiqueta de anidacin del validador dentro de la etiqueta del componente.

14

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Modelo de navegacin
El modelo de navegacin JavaServer Faces hace que sea fcil de manejar cualquier procesamiento adicional que se necesita para elegir la secuencia en la que se cargan las pginas. En la tecnologa JavaServer Faces, la navegacin es un conjunto de reglas para la eleccin de la pgina siguiente o la vista que se mostrar despus de una accin de aplicacin, como cuando un botn o hipervnculo se hace clic. Estas normas se declaran en cero o ms recursos de configuracin de la aplicacin, tales como <faces-config.xml>, utilizando un conjunto de elementos XML. La estructura por defecto de una regla de navegacin es el siguiente: <navigation-rule> <description> </description> <from-view-id></from-view-id> <navigation-case> <from-action></from-action> <from-outcome></from-outcome> <if></if> <to-view-id></to-view-id> </navigation-case> </navigation-rule> En JavaServer Faces 2.0, la navegacin puede ser implcito o definidos por el usuario. Las reglas de navegacin implcitas entran en juego cuando las normas de navegacin no estn disponibles en un archivo de configuracin de la aplicacin de recursos.

15

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Configuracin de reglas de navegacin

Como se explica en el modelo de navegacin, la navegacin es un conjunto de reglas para la eleccin de la siguiente pgina que se muestra despus de un botn o un componente de hipervnculo se hace clic. Las reglas de navegacin se definen en el expediente de solicitud de recursos de configuracin. Cada regla de navegacin especifica cmo navegar de una pgina a un conjunto de otras pginas. La implementacin de JavaServer Faces elige la regla de navegacin adecuado de acuerdo a la pgina que se muestra actualmente. Despus de la regla de navegacin adecuado es seleccionado, la eleccin de que para acceder a la pgina siguiente de la pgina actual depende de dos factores: El mtodo de accin que se invoca cuando el componente se ha hecho clic El resultado lgico que se hace referencia por el componente en la etiqueta , o fue devuelto por el mtodo de accin

El resultado puede ser cualquier cosa que el desarrollador decide, pero la tabla aqu van algunos resultados de uso comn en aplicaciones web. Final Success failure logon Lo que significa comnmente Todo ha funcionado. Ir a la pgina siguiente. Algo est mal. Ir a una pgina de error. El usuario debe iniciar sesin primero. Ir a la pgina de inicio de sesin. La bsqueda no encontraron nada. Ir a la pgina de bsqueda de nuevo.

no results

Normalmente, el mtodo de accin realiza un procesamiento de los datos del formulario de la pgina actual. Por ejemplo, el mtodo podra comprobar si el nombre de usuario y la contrasea introducida en el formulario de coincidir con el nombre de usuario y contrasea en el archivo. Si coinciden, el mtodo devuelve el xito de los resultados. De lo contrario, devuelve la falta de resultados.

16

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Como demuestra este ejemplo, tanto el mtodo utilizado para procesar la accin y los resultados devueltos son necesarias para determinar la pgina propia de acceso. He aqu una regla de navegacin que podran ser utilizados con el ejemplo que acabamos de describir: <navigation-rule> <from-view-id>/logon.jsp</from-view-id> <navigation-case> <from-action>#{LogonForm.logon}</from-action> <from-outcome>success</from-outcome> <to-view-id>/storefront.jsp</to-view-id> </navigation-case> <navigation-case> <from-action>#{LogonForm.logon}</from-action> <from-outcome>failure</from-outcome> <to-view-id>/logon.jsp</to-view-id> </navigation-case> </navigation-rule> Esta regla de navegacin define las posibles maneras de navegar de logon.jsp. Cada elemento de navegacin caso, define una ruta de navegacin posible de logon.jsp. La navegacin primer caso se dice que si LogonForm.logon devuelve un resultado de xito, entonces storefront.jsp se tendr acceso. La navegacin segundo caso se dice que logon.jsp se vuelven a representar, si vuelve LogonForm.logon fracaso. La configuracin de una aplicacin, el flujo de la pgina consta de un conjunto de reglas de navegacin. Cada regla se define por el elemento de regla de navegacin en el archivo facesconfig.xml.

17

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Cada elemento de regla de navegacin corresponde a un identificador del componente arbreo definido por el facultativo de vista de elemento de identificacin. Esto significa que cada Estado define todas las posibles maneras de navegar de una pgina especial en la aplicacin. Si no hay ningn elemento de la vista-de-id, las reglas de navegacin se define en el elemento de regla de navegacin se aplican a todas las pginas de la aplicacin. La concordancia de patrones-view-ID de elemento tambin permite comodn. Por ejemplo, este de-vista-ID de elemento dice que la regla de navegacin se aplica a todas las pginas en el directorio de libros:
<from-view-id>/libros/*</ from-view-id>

Como se indica en la regla de navegacin ejemplo, un elemento de regla de navegacin puede contener cero o ms elementos de navegacin caso. El elemento de navegacin caso, define un conjunto de criterios de coincidencia. Cuando se cumplen estos criterios, la aplicacin se vaya a la pgina definida por el a-ver-ID de elemento contenido en la navegacin del mismo elemento de caso. Los criterios son definidos por la navegacin opcional de resultados-y de elementos de accin. El resultado de elemento define un resultado lgico, como el xito. El elemento de la accin mtodo utiliza una expresin para referirse a un mtodo de accin que devuelve una cadena, que es el resultado lgico. El mtodo realiza alguna lgica para determinar el resultado y devuelve el resultado. Los elementos de navegacin caso de que se cotejarn con los resultados y el mtodo de expresin en este orden: Los casos que especifica la vez un resultado de valor y de valor de la accin. Ambos elementos pueden ser utilizados si el mtodo de accin devuelve resultados diferentes dependiendo del resultado de la transformacin que realiza. Los casos que especifica slo un valor de resultado. El elemento de resultado debe coincidir con el resultado ya sea definido por el atributo de accin del componente de UICommand o el resultado devuelto por el mtodo mencionado por el componente de UICommand. Especificando los casos slo una de valor de la accin. Este valor debe coincidir con la expresin accin especificada por la etiqueta del componente.

18

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Cuando se compara cualquiera de estos casos, el rbol de componentes definidos por el a-ver-elemento de identificacin sern seleccionados para la representacin.

Reglas de navegacin implcitas

A partir de JavaServer Faces 2.0, las reglas de navegacin implcita estn disponibles para aplicaciones de Facelets. Las reglas de navegacin implcita entrar en juego si no hay reglas de navegacin se configuran en los archivos de configuracin de recursos de aplicacin. Cuando se agrega un componente de interfaz de usuario como un comando y asigna una pgina como el valor de su propiedad la accin, el controlador de navegacin por defecto tratan de combinar una pgina adecuada dentro de la aplicacin.
<h:commandButton value="Enviar" action="response">

En el ejemplo anterior, el controlador de navegacin por defecto tratar de localizar la pgina response.xhtml y navegar hacia l.

19

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Usando JSF en JSP

El modelo de control del marco de trabajo JSF se puede describir como un tipo de patrn MVC en donde existen controladores asociados a los elementos grficos y stos interactan con el modelo de datos o del mundo para actualizar la presentacin de dichos elementos. Para el diseo de la capa web de una aplicacin JSF debemos modelar los elementos que actuaran como controladores de las acciones ( clases java que representan las entidades web ), las pginas de presentacin y las reglas de navegacin del sistema ( archivos de configuracin que enlazan las capas ). Una aplicacin JSF tiene como mnimo los siguientes componentes:

Las pginas de interaccin JSPs hacen parte de la tecnologa Java Server Pages que permite utilizar HTML generado dinmicamente. Esta tecnologa extiende el modelo de tecnologa de Servlets. En el tutorial, al mostrar los resultados de las bsquedas, el tamao de la tabla vara de acuerdo con el criterio de bsqueda de bsqueda de estudiantes. Es una alternativa para crear servlets de manera ms sencilla. El lenguaje se basa en tags y existen libreras que proporcionan la implementacin de pginas JSP incluyendo las libreras JSF para poder referenciar los elementos.

20

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Las clases de Java Beans, dentro del modelo MVC, son las clases que actuarn como controladores de las acciones. Podemos hacer una analoga entre el modelo MVC de swing y de JSF pues stos controladores escuchan eventos de la vista e interactan con el modelo para dar respuesta a las solicitudes. Cada uno de estos beans debe representar una entidad del mundo que quiere ser presentada de manera que el bean (o entidad web) contienen informacin que se puede presentar en las pginas jsp. En el tutorial se disearon dos beans, uno que representa un estudiante y otro que representa una lista de estudiantes.

Todos los beans que se asocien con elementos grficos deben tener mtodos get/set de sus atributos (utilizando los prefijos en ingls) pues se enlazan directamente con el nombre dado que el framework interpretar la pgina y buscar el mtodo get/set correspondiente.

El archivo faces-config.xml define la navegacin, los beans de java que utilizarn JSF y los archivos de propiedades para internacionalizacin. La navegacin se define a partir de un punto de partida que corresponde a una accin y un punto de llegada que es una visualizacin del resultado de la accin y corresponde a una pgina jsp. La configuracin de los beans establece el nombre con el que se invocan sus acciones en las pginas jsp y la ruta completa del paquete en el que se encuentra la clase que representa el backing bean.

JSF se encuentra desarrollado por arriba de los serlvetls, de manera que toda aplicacin JSF es JSP/servlet donde cada pgina contiene componentes web JSF que encapsulan HTML. Es as como cada peticin HTTP que requiere JSF pasa por un servlet de Faces, el cual hace parte del modelo de tecnologa de este marco de trabajo.

21

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

El archivo web.xml es una modificacin del web.xml estndar para indicar el tipo de solicitudes que sern procesadas por el servlet de JSF. El servlet har la intercepcin de todas las peticiones antes de invocar la pgina respectiva a la que le prepara un contexto en el servidor de aplicaciones para la informacin asociada a este.

Los archivos de propiedades para internacionalizacin contienen la informacin de configuracin del texto y los mensajes en cada idioma. Las pginas se construyen utilizando etiquetas que hacen referencia a las llaves de estos archivos, una vez se procesan las solicitudes y se conoce el idioma en el que se quiere construir la respuesta, se reemplazan estas etiquetas por el valor obtenido del archivo correspondiente. Cambiando la configuracin de idioma del explorador de internet, se utilizar un archivo o el otro.

22

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Desarrollando Aplicaciones JSF

Java Server Faces es un Framework incluido dentro de Java EE que tiene como misin facilitar la construccin y mantenimiento de aplicaciones web den Java, siguiendo una arquitectura MVC (Modelo-Vista-Controlador) COMPONENTES DE UNA APLICACIN JSF JSF est orientado a prestar el soporte necesario para la construccin de las capas controlador y vista, dejando para las clases normales la capa del modelo. Toda aplicacin JSF tendr un archivo de configuracin Faces-config.xml, donde definiremos varios elementos claves para el funcionamiento de la aplicacin. Es aqu donde definiremos las reglas de navegacin por la web, segn el resultado que obtengamos en cada operacin. Otro de los componentes que utilizaremos en las aplicaciones sern los Beans Gestionados, que no son ms que simples JavaBeans, que adems de ser utilizados para encapsular los datos de la capa cliente, disponen de mtodos que responden a los eventos producidos en la capa cliente. Todo Beans utilizado en la aplicacin deber de ser registrado en el archivo facesconfig.xml. La apariencia que tendrs ser la siguiente:

<managed-bean> <managed-bean-name>credencialesBean</managed-bean-name> <managed-bean-class>javabeans.CredencialesBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>

23

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Expliquemos a continuacin cada campo lo que significa: managed-bean. Es el elemento principal en el que se incluyen los datos de registro del bean. Ser necesario aadir un bloque <managed-bean> por cada bean que se quiera sea gestionado por el framework. managed-bean-name. Es el nombre que permite referirse a la instancia del bean. Este nombre es utilizado mediante el lenguaje EL desde los componentes de la interfaz para acceder a las propiedades y mtodos del objeto. managed-bean-class. Nombre cualificado de la clase a la que pertenece el bean. managed-bean.scope. mbito en el que ser mantenida la instancia, siendo sus posibles valores: request, session y application. Por ltimo tendremos las vistas, que ser la parte visible a los usuarios y que podr estar creadas utilizando JSP. Si es as, deberemos de utilizar una serie de libreras de acciones que pasamos a detallar a continuacin: Librera html: proporciona los controles bsicos html y una serie de componentes grficos complejos. Todos los controles permiten integrar el modelo JavaBean, vinculando de manera automtica las propiedades de un objeto a las de un control. Para su uso hay que poner la siguiente lnea al principio del archivo JSP: <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

Librera core: Incluyen elementos bsicos para la generacin de una vista JSF. Tambin incluyen elementos especiales conocidos como validadores y conversores que permiten realizar validaciones y conversiones de datos. Para poder utilizar esta librera hay que incluir la siguiente lnea: <%@ taglib prefix="h" uri="http://java.sun.com/jsf/core" %>

Vamos a ver un ejemplo donde tendremos un formulario para registrar personas y meterlos en un array. Luego tendremos otro botn que nos permitir sacar por pantalla los datos introducidos.

24

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Lo primero que haremos ser crear la clase JavaBean referente al formulario del cliente. El cdigo es el siguiente: package javabeans; import java.util.*; import javax.faces.context.*; import javax.faces.event.*; import javax.faces.component.*; import javax.servlet.http.*;

public class PersonaBean { private String nombre; private long telefono; private int edad;

public PersonaBean() { } public String getNombre(){ return this.nombre; } public void setNombre(String nombre){ this.nombre=nombre; } public long getTelefono(){ return this.telefono; }

25

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

public void setTelefono(long telefono){ this.telefono=telefono; } public int getEdad(){ return this.edad; } public void setEdad(int edad){ this.edad=edad; } public String doGuardar(){ FacesContext context = FacesContext.getCurrentInstance(); HttpSession sesion = (HttpSession)context.getExternalContext().getSession(true); ArrayList listapersonas = (ArrayList)sesion.getAttribute("listapersonas");

//comprueba si ya existe la coleccion de personas en la sesion y si no es as la crea if(listapersonas==null){ listapersonas = new ArrayList(); sesion.setAttribute("listapersonas", listapersonas); } listapersonas.add(this); return null; }

26

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Como vemos es una clase JavaBean normal con sus mtodos SET y GET para las propiedades y un mtodo doGuardar que se ejecutar cuando se pulse el botn de Guardar del formulario. En este mtodo doGuardar, lo que hacemos es obtener del mbito sesin la lista de personas. Si esta lista es nula, entonces la creamos nueva, si no es nula, lo que hacemos es aadir a la lista el nuevo objeto persona. El archivo faces-config.xml ser el siguiente que os ponemos a continuacin:

<?xml version=\'1.0\' encoding=\'UTF-8\'?> <faces-config version="1.2" 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-facesconfig_1_2.xsd"> <managed-bean> <managed-bean-name>PersonaBean</managed-bean-name> <managed-bean-class>javabeans.PersonaBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/grabadatos.jsp</from-view-id> <navigation-case> <from-outcome>ver</from-outcome> <to-view-id>/ver.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
27

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

En este archivo, lo que hacemos es declarar el JavaBean utilizado y las reglas de navegacin. En estas reglas, hemos indicado que cuando se d de alta un usuario, la aplicacin vuelva al formulario y cuando se pulse el botn de ver, este llamar a una url ver, que nos llevar al archivo ver.jsp. Pasemos ahora a la vista del formulario de alta de personas.

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insertar personas</title> </head> <body> <center> <h1>Formulario de datos</h1> </center> <f:view> <h:form> <table width="50%" align="center" border="0"> <tr>
28

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

<td>Nombre:</td> <td> <h:inputText value="#{PersonaBean.nombre}"/> </td> </tr> <tr> <td>Telefono:</td> <td> <h:inputText value="#{PersonaBean.telefono}"/> </td> </tr> <tr> <td>Edad:</td> <td> <h:inputText value="#{PersonaBean.edad}"/> </td> </tr> <tr> <td colspan="2" align="center"> <h:commandButton value="Guardar" action="#{PersonaBean.doGuardar}"/> </td> </tr> <tr> <td colspan="2" align="center">

29

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

<h:commandButton id="vertodos" rendered="false" value="Ver Todos" action="ver"/> </td> </tr> </table> </h:form> </f:view> </body> </html>

De este cdigo debemos destacar la utilizacin de las librera core y html comentadas anteriormente, y como se le asigna una propiedad del JavaBean a los distintos campos. Por ejemplo al campo edad, el cdigo es:

<h:inputText value="#{PersonaBean.edad}"/>

InputText es el control referente al tipo text de html y le asociamos la propiedad edad del javabean. En los botones le indicamos las acciones que deben de realizar, as cuando se pulsa en guardar ejecutar el mtodo doGuardar del javabean. Mientras que cuando se pulse al botn de ver, lo que hace es mandarlo a la url ver, que corresponde a la vista ver.jsp, tal y como le hemos indicado en el archivo facesconfig.xml.

Por ltimo, la vista ver.jsp, lo que har ser recorrer la lista de clientes y mostrarla en una tabla. Para ello utilizaremos la librera core de JSTL (librera utilizada para crear pginas en JSP para no utilizar cdigo java en los archivos)

30

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ver registros</title> </head> <body> <center> <h1>Listado de personas</h1> <table border="1" align="center"> <tr> <th>Nombre</th> <th>Telfono</th> <th>Edad</th> </tr> <c:forEach var="per" items="${listapersonas}"> <tr> <td><c:out value="${per.nombre}"/></td> <td><c:out value="${per.telefono}"/></td> <td><c:out value="${per.edad}"/></td>
31

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

</tr> </c:forEach> </table> <br/><br/> <a href="grabadatos.jsp">Volver</a> </center> </body> </html>

32

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Creacin de Componentes Personales User Interface

La funcionalidad de un componente se centra en la conversin de lo sometido por un usuario (es decir, los parmetros HTTP de la peticin) a valores de los componentes (a travs del mtodo de decodificacin durante Apply Request Values) y la conversin de valores de los componentes de vuelta a HTML (a travs del mtodo de codificar durante Render Response). Cuando se disea un componente JSF, se puede optar por cambiar la codificacin y decodificacin de una clase separada de procesamiento. La ventaja de este enfoque es que se puede desarrollar ms de un procesador para el mismo componente, cada uno con una representacin diferente en HTML. Usted a continuacin, tienen el mismo comportamiento asociados con diferentes maneras de leer los datos de la solicitud de y la escritura a la respuesta. En general, teniendo en cuenta que JSF es de cdigo abierto, podra considerar la modificacin de un componente existente en lugar de desarrollar un nuevo, o quizs, gracias a la separacin de los componentes y los renderer, la modificacin de un renderer existentes. La clase raz de todos los componentes JSF es la clase abstracta javax.faces.component.UIComponent, y de la clase raz de todos los renderers es javax.faces.render.Renderer. Para desarrollar un componente, sin embargo, usted probablemente va a preferir ampliar un componente ya existente o, por lo por lo menos, la clase UIComponentBase, que proporciona implementaciones por defecto de todos los abstractos los mtodos de UIComponent. De esta forma, usted slo tiene que desarrollar cdigo para los mtodos que se necesidad de reemplazar. Lo mismo ocurre con el procesador. Para completar el panorama de lo que usted necesita hacer para tener su componente personalizado, es crear una etiqueta personalizada para usarlo con JSP. La clase raz de todas las clases de etiqueta javax.faces.webapp.UIComponentELTag.

33

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

En resumen, para desarrollar un componente personalizado, tiene que ir a travs de los pasos siguientes,aunque no necesariamente en este orden: Crear una clase de componentes que las subclases UIComponent por la ampliacin de una existente componente. Registrar el componente en faces-config.xml. Crear una clase de procesador que subclasa Renderer y reemplaza los mtodos de codificacin y descodificacin. Registrar el renderirer en faces-config.xml. Crear una etiqueta personalizada que subclasa UIComponentELTag. Crear un TLD para la etiqueta personalizada.

Una ltima palabra acerca de los componentes y los renderers: a menos que usted realmente piensa que usted va a la reutilizar el mismo componente para diferentes aplicaciones, te hars la vida mucho ms fcil si mantienes el renderer dentro del componente. En primer lugar, vamos a ver lo que se debe hacer cuando estn separados, y a continuacin veremos cmo mantenerlos juntos. Le mostraremos cmo desarrollar un componente que combina la funcionalidad de los tres componentes estndar necesarios para aceptar la entrada de un usuario: una etiqueta que explica lo que se espera, el campo de texto para aceptar la entrada, y un mensaje para informar de errores de entrada. En otras palabras, vamos a muestra cmo reemplazar el cdigo de JSF siguientes:

<h:outputText value="Nombre de Contacto"/> <h:inputText id = "nombre" required = "true" value = "# {Usuario.nombre}" requiredMessage = "El valor es necesario!"/> <h:message for="name" styleClass="error"/>

con este componente personalizado: <curso:inputEntry label="Nombre de Contacto" required = "true" value = "#{Usuario.nombre}" errorStyleClass ="error" requiredMessage = "El valor es necesario!" />

34

Instituto Tecnolgico de Durango

Unidad VIII: Tecnologa JSF

Tambin le mostraremos cmo este nuevo componente inputEntry imprime un asterisco al lado dela etiqueta si es necesario = "true".

35