Arquitectura de Softwareisis3702/...DEPARTAMENTO DE SISTEMAS Introducción • La tecnología Java...

DEPARTAMENTO DE SISTEMAS

Arquitectura de Software

Java Server Faces

ISIS3702


Agenda

• Introducción• Managed Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos


Introducción

• La tecnología Java Server Faces(JSF) es un marco de trabajo de interfaces de usuario del lado de servidor para aplicaciones Web basadas en tecnología Java”. (Sun Microsystems) –Estándar de Java (JSR-127)

3


4

Introducción

Separación entre el comportamiento y la presentación de una aplicación web

Facilita el desarrollo y la delegación de responsabilidades dentro del grupo de trabajoFacilita el mantenimiento

Aumento de la separación en comparación con la tecnología JSP

Mapeo de requerimientos HTTP al manejo de eventos específico de componentesManejo de elementos UI como objetos con estado en el servidor

Independencia frente al lenguaje markup y de scriptDesarrollo de aplicaciones con JSPDesarrollo con otras tecnologías utilizando el API de servlets


Introducción

5

Separación de la presentación y el comportamiento.

Separación de roles, eliminación de la complejidad en el desarrollo de UI, división de tareas.

Estandarización: Los más grandes vendedores de herramientas de desarrollo (Sun, ORACLE, IBM, Apache) colaboran con su desarrollo y mantenimiento.

UI con componentes reutilizables y extensibles.


Introducción

• Qué ofrece el framework JSFo Un conjunto de componentes web prefabricadoso Un modelo de programación orientado a

eventoso Un modelo de componentes que permiten a

terceros y desarrolladores crear nuevos componentes


Introducción

Una aplicación JSF es un conjunto de:Páginas JSP

Tags personalizados para representar objetos configurables de la página (opcional)

WebBeans(también llamados BackingBeans) (diferentes a EJB)Responsables de mantener valores de los componentes gráficosListener de eventos

Clases utilitarias (helper) del lado del servidor. Objetos configurables creados por el desarrollador (validadores, conversores) (opcional)Archivo de configuración de recursosReglas de navegaciónConfiguración de los WebBeans y en general de objetos configurablesDescriptor de deployment (web.xml)

7


Introducción

En la JSP1. Librería de etiquetas personalizadas para “pintar”

componentes UI

<%@ tagliburi= “http://java.sun.com/jsf/html”

prefix=“h" %>

2. Librería de etiquetas personalizadas para representar manejadores de eventos, validadores, y conversores.

<%@ tagliburi= “http://java.sun.com/jsf/core”

prefix=“f" %>

8


Introducción

9

Es posible usar también la librería de Apache:<%@ taglib uri= “http://myfaces.apache.org/tomahawk”

prefix=“t" %>


Introducción

En la JSP3. Componentes UI(simples o compuestos)

*Representan las unidades básicas reutilizables en una aplicación JSF.

*Objetos que manejan la interacción con el usuario

<h:commandButtonid=“siguiente”value=“NextStep”action=“sigPagina”/>

<h:inputTextareaid=“textArea”value=“Text goes here…”/>

Surge entonces, el Árbol de Componentes, como la representación interna de una página JSF, en términos de sus componentes.

10


listBooks.jsp

Ejemplo


Adicionar un libroVolver

editBook.jsp

Ejemplo


Editar un libro

Volver

editBook.jsp

Código del Ejemplo

Ejemplo


Eliminar

Volver

listBooks.jsp


Introducción

15


16

Estructura común JSP

Elemento raíz de la vista

Panel para ver los errores

Menú de la página

Forma para crear un elemento o tabla para presentar un listado


Introducción

17

Ciclo de vida de una página JSF (l)


Agenda

• Introducción• Backing Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos


Backing Beans

• Clases JAVA (Java Beans)

• Su propósito es separar los componentes UI de los objetos que ejecutan el procesamiento y mantienen los datos

• Facilitan la comunicación entre los beansreales de la aplicación y la UI.

• Responsabilidadeso Interactúan con el modelo

o Escuchan eventos de la vista

o Dan respuesta a las solicitudes

19


20

Getters y setters para sus atributos

Métodos de accióneventos de la capa web implementados en métodos de los beans.

actions

Ejecutan acciones sobre el modelo y dejan los resultados en los atributos del bean

siempre termina con una regla de navegación (por lo que se entiende que un action tiene tipo de retorno String)

action listeners

Método para poblar información antes de cargar un jsp

recibe un evento como parámetro y no retorna nada

Uso de un Web Bean en un JSP (para visualizar un attr)< ……… value =“#{bookListBean.books}”/>

Backing Beans


Creación y configuración de WebBeans

A. Implementar los WebBeans de la Aplicación.

En el ejemplo:

B. Registrar en el archivo de configuración faces – config.xml

C. Implementar en la página JSP


Implementar los WebBeans


Implementar los WebBeans


Backing Beans (archivo: Backing Beans (archivo: facesfaces--config.xmlconfig.xml))

Registrar en el archivo de configuración


25

Implementar en la página JSP


Backing Beans

• Anotaciones en los Backing Beanso @PostConstructo @PreDestroy

• Configuración de los Backing Beanso Localización usual

WEB-INF/faces-config.xml

o Otras opcionesMETA-INF/faces-config.xml (dentro de archivos jar)

o Se utiliza el tag <managed-bean>


Backing Beans

• Propiedadeso managed-bean-nameo Managed-bean-classo Managed-bean-scope (request, session,

application, none)


Agenda



Navegación

• Navegación Estática• Navegación Dinámica


Navegación

• Navegación Estática

<h:commandButton label="Login" action="login"/>

<navigation-rule><from-view-id>/index.jsp</from-view-id><navigation-case><from-outcome>login</from-outcome><to-view-id>/welcome.jsp</to-view-id></navigation.case></navigation-rule>


Navegación

• Navegación Dinámicao La navegación depende de cada usuario y de

datos particulares

<h:commandButton label="Login" action="#{loginController.verifyUSer}"/>

String verifyUser() {if (...)

return "success"else

return "failure"}


* Definen la secuencia en que son cargadas las páginas de una aplicación.

* Se deben registrar en el archivo de configuración faces – config.xml

Navegación


33

Navegación

La navegación se define en el archivo faces-config.xml

Si va a agregar un nuevo archivo de navegación, se debe incluir en la lista de archivos del web.xml

En el faces-config.xml de cada módulo se deben especificar las clases que implementan los beans y el alcance de cada uno de estos objetos


34

Navegación

Cada vez que se define un action sobre un bean, este debe retornar un String con el que se especifica la regla de navegación a seguir.

En este ejemplo el caso “success” es resultado del llamado al método createRole del RoleBean.


35

Navegación

Menú de navegaciónincluir dentro del archivo common/jsp/menu.jsp el nuevo elemento


36

Navegación

El faces-config.xml debe incluir las reglas de transición de los estados del menú


37Volver


Agenda



JSF Tags

• Dos librerias principaleso Coreo HTML

• Requieren importación

<%@ tagliburi="http://java.sun.com/jsf/core" prefix="f" %><%@ tagliburi="http://java.sun.com/jsf/html" prefix="h" %>


JSF Tags

• Algunos JSF Core Tagso viewo subviewo Attributeo paramo faceto actionListenero valueChangeListenero convertero validatoro validateLengtho selectitem


41

JSF Tags

Volver

<h:selectManyCheckboxlist>

<h:selectOneMenu> <h:selectOneListbox>

<h:selectOneRadio><h:selectManyMenu>

<h:selectManyListbox>


Agenda



Conversión y Validación

• JSF ofrece soporte para conversión y validación de datoso Conversión de números y fechas

ConvertNumberconvertDateTime

o Manejo de errores de conversión<h:message>

<h:inputText value="#{payment.date}"><f:convertDateTime pattern="mm/yyyy"/></h:inputText>

<h:outputText value="#{payment.amount}"><f:convertNumber type="currency"</h:outputText>


44

<h:outputText value="#{user.dateOfBirth}"><f:convertDateTime type="date" dateStyle="short"/></h:outputText>

18/03/0618/03/0603/18/0603/18/06

*** Los conversores tienen encuenta los conceptos de internacionalización y localización.

Ejemplos de conversores


Conversión y Validación

• Validacioneso Longitud de cadenaso Rangos de númeroso Valores requeridos

<h:inputText id="card" value="#{payment.card}"><f:validateLength minimum="13"</h:inputText>


Agenda



Manejo de Eventos

• Aplicaciones Webo Deben reaccionar a eventos de usuario

Seleccionar elementos de un menúClick en un botón

o JSF Soporte tres tipos de eventosCambio de valores

Disparados por componentes input (h:inputText)Acciones

Disparados por componentes command(h:commandButton)

Fases (Phase)Disparados dentro del ciclo de vida de la JSF


Manejo de Eventos

• Eventos por Cambio de Valor

<h:selectOneMenu value="{form.country}" onchange="submit()">valueChangeListener="{form.countryChanged}"<f:selectItems value="{form.countryNames}"></h:selectOneMenu>


Manejo de Eventos

• Eventos de Acción

<h:commandButton image="pan.jpg">actionListener="#{tienda.listen}"

action="#{tienda.act}"</h:commandButton>-------public class Tienda {

private String outcome;....

public void listen (ActionEvente) {FacesContext context = FacesContext.getCurrentInstance();

String clienteId = e.getComponent().getClienteId(context);....

if(...) outcome = "success";

} public String act () {

return outcome;}

}


50

Manejo de Eventos


51

Ejemplo:


52

Agenda

Conceptos JSPDesarrollo aplicaciones Web


53

Proceso de Desarrollo

Creación del prototipo en htmlDefinición de la forma en que interactuarán los usuarios con el requerimiento

Diseño Identificación de los estados en los que el usuario interactúa con el sistema

Implementación Creación de las páginas JSP e implementación de los webbeans


54

Creación del prototipo en html

Crear páginas html que muestren cómo el usuario va a visualizar y a interactuar con un requerimiento

Identificar estilos, formas, imágenes, íconos y convenciones


55

Diseño

Diseñar JSPs y Web Beans que contienen la información que se va a desplegar en cada jsp.

Los Web Beans contienen los métodos con los cuales se van a hacer las acciones sobre el sistema.

Un Bean por cada página de presentación de cada componente Un Bean que contiene el listado de modelBO.


56

Diseño: Diagrama de Estados

Todos los diagramas deben empezar por lo menos con un action

Los actions pueden ser llamados desde el menú o desde un botón dentro del sistema Si hay una acción en el Bean antes de mostrar el jspse debe tener un actionListener.

Las transiciones de los estados son el resultado de pasar de una página a otra o interactuar con algún Bean.

Todos los diagramas deben finalizar en una jsp.


57

Diagrama de Estados: Ejemplos

Requerimientos de Listar


58

Diagrama de Estados: Ejemplos

Requerimientos de creación


59

Diagrama de Estados

Si se pasa a una jsp con una acción de navegación se debe usar la palabra action al final.

Si se pasa a una jsp con el resultado de una acción de un Bean se debe usar la palabra “success”.

Al pasar a un Bean se debe usar el método/atributo que se va a llamar.


60

Guía de Implementación

Implementar WEB DelegatesIntermedian relación entre Web Beans y Beans de Sesión

Implementar Web BeansImplementar getters y setters de sus atributos (incluyendo los del BO ), los action y action listeners

Ajustar Archivo de configuraciónDeclarar la nueva navegación y los web beans

Adicionar el nuevo requerimiento al menú

Implementar JSPsA partir del prototipo adicionar los tags de JSF y los componentes adicionales

Ajustes al packagingLos nuevos archivos y módulos deben quedar incluidos dentro del war que se construye


Ciclo de vida de una página JSF

61

1. Funcionamiento

El cliente hace una petición HTTP de la página y el servidor responde con la página traducida a HTML


62

Ciclo de vida de una página JSF

2. Posibles escenarios del ciclo de vida

A. Petición No-Faces genera una Respuesta Faces:

Enlace de una página HTML que abre una página que contiene componentes JSF

B. Petición Faces genera una Respuesta No-Faces

Evitar la fase de “renderizar” la Respuesta

C. Una Petición Faces genera una Respuesta Faces


63

Ejercicio

Construya el Diagrama de estado para el proyecto


64

Este material fue preparado porNicolás LópezPilar Villamil

Este material fue revisado y actualizado por

Darío Correal


65

Referencias

Presentación JavaServer Faces. Betsy Lanchero, 2006-2The Java EE 5 Tutorial . Sun. Junio 16, 2006Bergsten, Hans. JavaServer Faces. O’Reilly. 2004Horstmann, Cay. Core JavaServer Faces. Prentice Hall. 2004.http://www.coreservlets.comhttp://java.sun.com/j2ee/javaserverfacesJSF Web Steps – QualDev Grouphttp://chie.uniandes.edu.co/~changeset/wiki/doku.php?id=development:resources:tutorials:development:jsfwebsteps

Arquitectura de Softwareisis3702/...DEPARTAMENTO DE SISTEMAS Introducción • La tecnología Java...

Documents

Transcript of Arquitectura de Softwareisis3702/...DEPARTAMENTO DE SISTEMAS Introducción • La tecnología Java...