arquitectura de softwareisis3702/...departamento de sistemas introducción • la tecnología java...
Post on 16-Mar-2020
5 Views
Preview:
TRANSCRIPT
DEPARTAMENTO DE SISTEMAS
Arquitectura de Software
Java Server Faces
ISIS3702
DEPARTAMENTO DE SISTEMAS
Agenda
• Introducción• Managed Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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.
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
Introducción
9
Es posible usar también la librería de Apache:<%@ taglib uri= “http://myfaces.apache.org/tomahawk”
prefix=“t" %>
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
listBooks.jsp
Ejemplo
DEPARTAMENTO DE SISTEMAS
Adicionar un libroVolver
editBook.jsp
Ejemplo
DEPARTAMENTO DE SISTEMAS
Editar un libro
Volver
editBook.jsp
Código del Ejemplo
Ejemplo
DEPARTAMENTO DE SISTEMAS
Eliminar
Volver
listBooks.jsp
DEPARTAMENTO DE SISTEMAS
Introducción
15
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
Introducción
17
Ciclo de vida de una página JSF (l)
DEPARTAMENTO DE SISTEMAS
Agenda
• Introducción• Backing Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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
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
DEPARTAMENTO DE SISTEMAS
Implementar los WebBeans
DEPARTAMENTO DE SISTEMAS
Implementar los WebBeans
DEPARTAMENTO DE SISTEMAS
Backing Beans (archivo: Backing Beans (archivo: facesfaces--config.xmlconfig.xml))
Registrar en el archivo de configuración
DEPARTAMENTO DE SISTEMAS
25
Implementar en la página JSP
DEPARTAMENTO DE SISTEMAS
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>
DEPARTAMENTO DE SISTEMAS
Backing Beans
• Propiedadeso managed-bean-nameo Managed-bean-classo Managed-bean-scope (request, session,
application, none)
DEPARTAMENTO DE SISTEMAS
Agenda
• Introducción• Backing Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
Navegación
• Navegación Estática• Navegación Dinámica
DEPARTAMENTO DE SISTEMAS
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>
DEPARTAMENTO DE SISTEMAS
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"}
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
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
DEPARTAMENTO DE SISTEMAS
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.
DEPARTAMENTO DE SISTEMAS
35
Navegación
Menú de navegaciónincluir dentro del archivo common/jsp/menu.jsp el nuevo elemento
DEPARTAMENTO DE SISTEMAS
36
Navegación
El faces-config.xml debe incluir las reglas de transición de los estados del menú
DEPARTAMENTO DE SISTEMAS
37Volver
DEPARTAMENTO DE SISTEMAS
Agenda
• Introducción• Backing Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
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" %>
DEPARTAMENTO DE SISTEMAS
JSF Tags
• Algunos JSF Core Tagso viewo subviewo Attributeo paramo faceto actionListenero valueChangeListenero convertero validatoro validateLengtho selectitem
DEPARTAMENTO DE SISTEMAS
41
JSF Tags
Volver
<h:selectManyCheckboxlist>
<h:selectOneMenu> <h:selectOneListbox>
<h:selectOneRadio><h:selectManyMenu>
<h:selectManyListbox>
DEPARTAMENTO DE SISTEMAS
Agenda
• Introducción• Backing Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
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>
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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>
DEPARTAMENTO DE SISTEMAS
Agenda
• Introducción• Backing Beans• Navegación• JSF Tags• Conversión y Validación• Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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>
DEPARTAMENTO DE SISTEMAS
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;}
}
DEPARTAMENTO DE SISTEMAS
50
Manejo de Eventos
DEPARTAMENTO DE SISTEMAS
51
Ejemplo:
DEPARTAMENTO DE SISTEMAS
52
Agenda
Conceptos JSPDesarrollo aplicaciones Web
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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.
DEPARTAMENTO DE SISTEMAS
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.
DEPARTAMENTO DE SISTEMAS
57
Diagrama de Estados: Ejemplos
Requerimientos de Listar
DEPARTAMENTO DE SISTEMAS
58
Diagrama de Estados: Ejemplos
Requerimientos de creación
DEPARTAMENTO DE SISTEMAS
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.
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
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
DEPARTAMENTO DE SISTEMAS
63
Ejercicio
Construya el Diagrama de estado para el proyecto
DEPARTAMENTO DE SISTEMAS
64
Este material fue preparado porNicolás LópezPilar Villamil
Este material fue revisado y actualizado por
Darío Correal
DEPARTAMENTO DE SISTEMAS
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
top related