Arquitectura de Software

DEPARTAMENTO DE SISTEMAS
Arquitectura de Software
Java Server Faces
ISIS3702
Agenda
DEPARTAMENTO DE SISTEMAS
•
•
•
•
•
•
Introducción
Managed Beans
Navegación
JSF Tags
Conversión y Validación
Manejo de Eventos
Introducción
DEPARTAMENTO DE SISTEMAS
• 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
Introducción
DEPARTAMENTO DE SISTEMAS
‰
‰
‰
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 trabajo
‰ Facilita 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 componentes
‰ Manejo de elementos UI como objetos con estado en
el servidor
Independencia frente al lenguaje markup y de script
‰ Desarrollo de aplicaciones con JSP
‰ Desarrollo con otras tecnologías utilizando el API de
4
servlets
Introducción
DEPARTAMENTO DE SISTEMAS
z
z
z
z
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.
5
Introducción
DEPARTAMENTO DE SISTEMAS
• Qué ofrece el framework JSF
o
o
o
Un conjunto de componentes web prefabricados
Un modelo de programación orientado a
eventos
Un modelo de componentes que permiten a
terceros y desarrolladores crear nuevos
componentes
Introducción
DEPARTAMENTO DE SISTEMAS
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áficos
‰ Listener de eventos
Clases utilitarias (helper) del lado del servidor. Objetos
configurables creados por el desarrollador (validadores,
conversores) (opcional)
Archivo de configuración de recursos
Reglas de navegación
Configuración de los WebBeans y en general de objetos
configurables
Descriptor de deployment (web.xml)
7
z
z
z
z
z
z
z
Introducción
DEPARTAMENTO DE SISTEMAS
En la JSP
1.
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
DEPARTAMENTO DE SISTEMAS
Es posible usar también la librería de Apache:
<%@ taglib uri= “http://myfaces.apache.org/tomahawk”
9
prefix=“t" %>
Introducción
DEPARTAMENTO DE SISTEMAS
En la JSP
3.
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érminos10
de sus componentes.
Ejemplo
DEPARTAMENTO DE SISTEMAS
listBooks.jsp
Ejemplo
DEPARTAMENTO DE SISTEMAS
Adicionar un libro
Volver
editBook.jsp
Ejemplo
DEPARTAMENTO DE SISTEMAS
Editar un libro
editBook.jsp
Volver
Código del Ejemplo
Eliminar
DEPARTAMENTO DE SISTEMAS
Volver
listBooks.jsp
Introducción
DEPARTAMENTO DE SISTEMAS
15
Estructura común JSP
DEPARTAMENTO DE SISTEMAS
Elemento raíz de la vista
Menú de la página
Panel para ver los errores
16
Forma para crear un elemento o tabla para presentar un listado
Introducción
DEPARTAMENTO DE SISTEMAS
Ciclo de vida de una página JSF (l)
17
Agenda
DEPARTAMENTO DE SISTEMAS
•
•
•
•
•
•
Introducción
Backing Beans
Navegación
JSF Tags
Conversión y Validación
Manejo de Eventos
Backing Beans
DEPARTAMENTO DE SISTEMAS
•
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 beans
reales de la aplicación y la UI.
• Responsabilidades
o
Interactúan con el modelo
o
Escuchan eventos de la vista
o
Dan respuesta a las solicitudes
19
Backing Beans
DEPARTAMENTO DE SISTEMAS
‰
Getters y setters para sus atributos
‰
Métodos de acción
‰
eventos 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)
20
< ……… value =“#{bookListBean.books}”/>
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
Implementar los WebBeans
DEPARTAMENTO DE SISTEMAS
Registrar en el archivo de configuración
DEPARTAMENTO DE SISTEMAS
Backing Beans (archivo: facesfaces-config.xml)
config.xml)
Implementar en la página JSP
DEPARTAMENTO DE SISTEMAS
25
Backing Beans
DEPARTAMENTO DE SISTEMAS
• Anotaciones en los Backing Beans
o
o
@PostConstruct
@PreDestroy
• Configuración de los Backing Beans
o
Localización usual
‰
o
Otras opciones
‰
o
WEB-INF/faces-config.xml
META-INF/faces-config.xml (dentro de archivos jar)
Se utiliza el tag <managed-bean>
Backing Beans
DEPARTAMENTO DE SISTEMAS
• Propiedades
o
o
o
managed-bean-name
Managed-bean-class
Managed-bean-scope (request, session,
application, none)
Agenda
DEPARTAMENTO DE SISTEMAS
•
•
•
•
•
•
Introducción
Backing Beans
Navegación
JSF Tags
Conversión y Validación
Manejo de Eventos
Navegación
DEPARTAMENTO DE SISTEMAS
• Navegación Estática
• Navegación Dinámica
Navegación
DEPARTAMENTO DE SISTEMAS
• 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
DEPARTAMENTO DE SISTEMAS
• Navegación Dinámica
o
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"
}
Navegación
DEPARTAMENTO DE SISTEMAS
* 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
DEPARTAMENTO DE SISTEMAS
‰
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
33
Navegación
DEPARTAMENTO DE SISTEMAS
‰
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.
34
Navegación
DEPARTAMENTO DE SISTEMAS
‰
Menú de navegación
‰
incluir dentro del archivo
common/jsp/menu.jsp el nuevo elemento
35
Navegación
DEPARTAMENTO DE SISTEMAS
‰
El faces-config.xml debe incluir las
reglas de transición de los estados del
menú
36
DEPARTAMENTO DE SISTEMAS
37
Volver
Agenda
DEPARTAMENTO DE SISTEMAS
•
•
•
•
•
•
Introducción
Backing Beans
Navegación
JSF Tags
Conversión y Validación
Manejo de Eventos
JSF Tags
DEPARTAMENTO DE SISTEMAS
• Dos librerias principales
o
o
Core
HTML
• Requieren importación
<%@ tagliburi="http://java.sun.com/jsf/core" prefix="f" %>
<%@ tagliburi="http://java.sun.com/jsf/html" prefix="h" %>
JSF Tags
DEPARTAMENTO DE SISTEMAS
•
Algunos JSF Core Tags
o
o
o
o
o
o
o
o
o
o
o
view
subview
Attribute
param
facet
actionListener
valueChangeListener
converter
validator
validateLength
selectitem
JSF Tags
DEPARTAMENTO DE SISTEMAS
<h:selectOneMenu>
<h:selectOneListbox>
<h:selectOneRadio>
<h:selectManyListbox>
Volver
<h:selectManyMenu>
<h:selectManyCheckboxlist>
41
Agenda
DEPARTAMENTO DE SISTEMAS
•
•
•
•
•
•
Introducción
Backing Beans
Navegación
JSF Tags
Conversión y Validación
Manejo de Eventos
Conversión y Validación
DEPARTAMENTO DE SISTEMAS
• JSF ofrece soporte para conversión y
validación de datos
o
Conversión de números y fechas
‰
‰
o
ConvertNumber
convertDateTime
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>
Ejemplos de conversores
DEPARTAMENTO DE SISTEMAS
<h:outputText value="#{user.dateOfBirth}">
<f:convertDateTime type="date" dateStyle="short"/>
</h:outputText>
03/18/06
18/03/06
*** Los conversores tienen encuenta los conceptos de
internacionalización y localización.
44
Conversión y Validación
DEPARTAMENTO DE SISTEMAS
• Validaciones
o
o
o
Longitud de cadenas
Rangos de números
Valores requeridos
<h:inputText id="card" value="#{payment.card}">
<f:validateLength minimum="13"
</h:inputText>
Agenda
DEPARTAMENTO DE SISTEMAS
•
•
•
•
•
•
Introducción
Backing Beans
Navegación
JSF Tags
Conversión y Validación
Manejo de Eventos
Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
• Aplicaciones Web
o
Deben reaccionar a eventos de usuario
‰
‰
o
Seleccionar elementos de un menú
Click en un botón
JSF Soporte tres tipos de eventos
‰
Cambio de valores
‰
Acciones
‰
‰
‰
Disparados por componentes input (h:inputText)
Disparados por componentes command
(h:commandButton)
Fases (Phase)
‰
Disparados dentro del ciclo de vida de la JSF
Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
• 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
DEPARTAMENTO DE SISTEMAS
• 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;
}
}
Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
50
Ejemplo:
DEPARTAMENTO DE SISTEMAS
51
Agenda
DEPARTAMENTO DE SISTEMAS
Conceptos JSP
‰ Desarrollo aplicaciones Web
‰
52
Proceso de Desarrollo
DEPARTAMENTO DE SISTEMAS
‰
Creación del prototipo en html
‰ Definició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 web
beans
53
Creación del prototipo en html
DEPARTAMENTO DE SISTEMAS
‰
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
54
Diseño
DEPARTAMENTO DE SISTEMAS
‰
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.
‰
55
Diseño: Diagrama de Estados
DEPARTAMENTO DE SISTEMAS
‰
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 jsp
se 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.
56
Diagrama de Estados: Ejemplos
DEPARTAMENTO DE SISTEMAS
‰
Requerimientos de Listar
57
Diagrama de Estados: Ejemplos
DEPARTAMENTO DE SISTEMAS
‰
Requerimientos de creación
58
Diagrama de Estados
DEPARTAMENTO DE SISTEMAS
‰
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.
59
Guía de Implementación
DEPARTAMENTO DE SISTEMAS
‰
Implementar WEB Delegates
‰
‰
Implementar Web Beans
‰
‰
Intermedian relación entre Web Beans y Beans de Sesión
Implementar getters y setters de sus atributos (incluyendo los del
BO ), los action y action listeners
Ajustar Archivo de configuración
‰
Declarar la nueva navegación y los web beans
‰
Adicionar el nuevo requerimiento al menú
‰
Implementar JSPs
‰
‰
A partir del prototipo adicionar los tags de JSF y los componentes
adicionales
Ajustes al packaging
‰60
Los nuevos archivos y módulos deben quedar incluidos dentro del
war que se construye
Ciclo de vida de una página JSF
DEPARTAMENTO DE SISTEMAS
1. Funcionamiento
El cliente hace una petición HTTP de la página y el servidor responde con
la página traducida a HTML
61
Ciclo de vida de una página JSF
DEPARTAMENTO DE SISTEMAS
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
62
Ejercicio
DEPARTAMENTO DE SISTEMAS
‰
Construya el Diagrama de estado para el
proyecto
63
DEPARTAMENTO DE SISTEMAS
‰
Este material fue preparado por
‰
‰
‰
Nicolás López
Pilar Villamil
Este material fue revisado y actualizado
por
‰
64
Darío Correal
Referencias
DEPARTAMENTO DE SISTEMAS
‰
‰
‰
‰
‰
‰
‰
‰
Presentación JavaServer Faces. Betsy Lanchero, 2006-2
The Java EE 5 Tutorial . Sun. Junio 16, 2006
Bergsten, Hans. JavaServer Faces. O’Reilly. 2004
Horstmann, Cay. Core JavaServer Faces. Prentice Hall. 2004.
http://www.coreservlets.com
http://java.sun.com/j2ee/javaserverfaces
JSF Web Steps – QualDev Group
http://chie.uniandes.edu.co/~changeset/wiki/doku.php?id=dev
elopment:resources:tutorials:development:jsfwebsteps
65