DR.

GABRIEL LEON PAREDES

[email protected]
www.linkedin.com/in/gabrielleonp

Cloud Computing, Smart Cities & High-Performance

Computing
Cuenca, Ecuador

APLICACIONES
DISTRIBUIDAS
Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
INTRODUCCION
Java Server Faces (JSF)

• JSF, es un nuevo nivel de desarrollo. Existen varias implementaciones. Cada

implementación aporta un valor añadido en funcionalidad y oferta de componentes
• Mojarra (Oracle): https://javaserverfaces.github.io/
• Myfaces (Apache): http://myfaces.apache.org/docindex.html
• RichFaces (Jboss, Red Hat): https://richfaces.jboss.org/
• ICEfaces: http://www.icesoft.org/java/projects/ICEfaces/overview.jsf
• Primefaces: https://www.primefaces.org/gettingstarted/
• A Partir de la versión 2.0, JSF es una especificación abierta, dentro de las especificaciones
de Java EE, para ayudar en la capa Web mediante la arquitectura MVC
• https://javaee.github.io/javaserverfaces-spec/
• Existen alternativas a JSF
• Struts2 (Apache): https://struts.apache.org/
• Spring: https://spring.io/

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Arquitectura

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Proceso de peticiones

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

INSTALACION Y
CONFIGURACION DE
HERRAMIENTAS
Instalación. Glassfish

h"ps://javaee.github.io/glassfish/

Servidor Glassfish Versión: GlassFish 5.0.1 - Full Pla@orm

Instalación local (localhost) y puerto: 8080. (Descomprimir)

Ir a Help > Install New Software

Agregar la URL: http://download.eclipse.org/glassfish-
Eclipse + Glassfish tools/1.0.0/repository
Instalar GlassFish Tools
Reiniciar Eclipse

Add New Sever

Seleccionar Glassfish > localhost
Agregar nuevo server a Eclipse Seleccionar la carpeta raiz de instalación de glassfish
Seleccionar parámetros por defecto

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

 • Se u%lizará la implementación JSF 2.3 realizada por
GlassFish:
• h=ps://javaserverfaces.github.io/download.html (no
es necesario descargar)
• Configuración usando el wizard de Eclipse:
• Creamos un proyecto nuevo: “Dynamic Web Project”.

Instalación. JSF • Seleccionamos la configuración “java Server Faces v2.3

Project”
• Generamos el descriptor web.xml
• Seleccionar la implementación de JSF de glassfish
(Mojarra JSF Implementa%on 2.3.2 )
• Agregar las rutas *.jsf y *.xhtml
• Eliminar glassfish-web.xml (si causa conflictos – bug de
Eclipse)

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Configuración de un proyecto Dynamic Web + JSF
Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
 • Configuración manual en eclipse:
• Ir a propiedades del Dynamic Web Project, en
la opción Project Faces, seleccionar la opción
Instalación “JavaServer Faces 2.3”
• En la Carpeta “/WEB-INF/lib” copiar los jars
Alternativa. JSF (JSTL y JSF). En un servidor certificado con JEE,
no sería necesario
• Modificar el fichero: “web.xml”
• Modificar el fichero: “faces-config.xml”

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Configuración alternativa de un proyecto
Dynamic Web + JSF

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Estructura de un proyecto Dynamic Web + JSF

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

web.xml

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

faces-config.xml

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

HOLA MUNDO
DESDE JSF
index.html- holaJSF.xhtml- HolaJSF.java

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

FACELETS
BEANS
XHTML
Facelets

• Facelets, es un lenguaje de declaración de páginas, usado para construir vistas de Java Server Faces. U:liza plan:llas de es:lo de HTML y
construye árboles de componentes
• Caracterís:cas
• Uso de XHTML para crear páginas web (hIps://www.tutorialspoint.com/es/xhtml/xhtml_doctypes.htm)
• Soporte para librerías de e:quetas Facelets que se suman a las librerías de JavaServer Faces y JSTL
• Soporte para el Lenguaje de Expresiones (EL por su siglas en ingles)
• Plan:llas para componentes y páginas
• Se apoya principalmente en tres librerías
• JSF Core Tags: xmlns:f="hIp://xmlns.jcp.org/jsf/core"
• JSF HTML Tags: xmlns:h="hIp://xmlns.jcp.org/jsf/html"
• Facelets Tags: xmlns:ui="hIp://xmlns.jcp.org/jsf/facelets"
• HTML tags
• <h:outputStylesheet library="css" name="my.css" />
• <h:outputScript library="javascript" name="my.js" />
• <h:graphicImage library="images" name="my.png" />
• Más información, hIps://myfaces.apache.org/core11/myfaces-impl/tlddoc/h/tld-summary.html
Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
Contextos y la inyección de dependencias (CDI)

• La inyección de contextos y dependencias (CDI) permite que sus objetos reciban sus dependencias automá<camente, en lugar de crearlos o recibirlos
como parámetros. CDI también ges<ona el ciclo de vida de esas dependencias por usted.
• CDI es un conjunto de servicios que, usados en conjunto, facilitan a los desarrolladores el uso de beans empresariales (EJB) junto con la tecnología
JavaServer Faces (JSF) en aplicaciones web. Diseñado para su uso con objetos stateful, CDI también <ene muchos usos más amplios, lo que permite a
los desarrolladores una gran flexibilidad para integrar varios <pos de componentes de una manera débilmente acoplado pero segura.
• Los servicios más fundamentales proporcionados por CDI son los siguientes.
• Contextos: este servicio le permite vincular el ciclo de vida y las interacciones de componentes con estado a contextos de ciclo de vida bien
definidos pero extensibles.
• Inyección de dependencia: este servicio le permite inyectar componentes en una aplicación de forma segura y elegir en el momento del
despliegue qué implementación de una interfaz par<cular inyectar.
• Además, CDI brinda los siguientes servicios:
• Integración con el Expression Language (EL), que permite que cualquier componente se use directamente dentro de una página JavaServer
Faces o una página JavaServer Pages
• La capacidad de decorar componentes inyectados
• Un alcance de conversación web además de los tres ámbitos estándar (solicitud, sesión y aplicación) definidos por la especificación de Java
Servlet

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Beans Gestionados (CDI)

• CDI redefine el concepto de un bean más allá de su uso en otras tecnologías Java, como las tecnologías JavaBeans y Enterprise JavaBeans (EJB). En CDI,
un bean es una fuente de objetos contextuales que definen el estado o la lógica de la aplicación. Un componente Java EE es un bean si el contenedor
puede ges<onar el ciclo de vida de sus instancias de acuerdo con el modelo de contexto del ciclo de vida definido en la especificación CDI.
• Un bean ges<onado es implementado por una clase Java, denominado como clase bean. Una clase de Java es considerada como un bean ges<onado
si está definida para ser administrada por cualquier otra especificación de tecnología Java EE, como por ejemplo: la especificación de tecnología
JavaServer Faces. También, se considera un bean ges<onado si cumple con las siguientes condiciones.
• No es una clase interna o está<ca.
• Es una clase concreta o anotada @Decorator.
• No usa anotaciones que define el componente EJB ni se declara como una clase bean de EJB en ejb-jar.xml.
• Tiene un constructor apropiado. Es decir, uno de los siguientes:
• La clase <ene un constructor sin parámetros.
• La clase declara un constructor anotado @Inject.
• Puede tener otros constructores
• No se requiere una declaración especial, como una anotación, para definir un bean ges<onado.
• Atributos privados con geXers & seXters asociados al formulario
• Métodos para las acciones del controlador, puede tener varios métodos.

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Beans como Objetos Inyectables (CDI)

• El concepto de inyección ha sido parte de la tecnología Java durante algún :empo. Desde que se introdujo la plataforma Java EE 5, las
anotaciones han permi:do inyectar recursos y algunos otros :pos de objetos en objetos ges:onados por contenedores. CDI hace posible
inyectar más :pos de objetos e inyectarlos en objetos que no están ges:onado por contenedor.
• Se pueden inyectar los siguientes :pos de objetos:
• Casi cualquier clase de Java
• Session beans
• Recursos de Java EE: fuentes de datos, tópicos de Java Message Service, colas, fábricas de conexiones y similares
• Contextos de persistencia (objetos En#tyManager de la API de persistencia JPA)
• Campos productores
• Objetos devueltos por métodos de productor
• Referencias de servicios web
• Referencias de beans remotos empresariales

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Alcance de los beans (CDI)

• Para que una aplicación web use un bean que inyecta otra clase de bean, el bean debe ser capaz de mantener el estado durante la interacción del
usuario con la aplicación. La forma de definir este estado es darle un alcance al bean. Puede asignar a un objeto cualquiera de los ámbitos más
utilizados descritos en la la siguiente tabla:

Alcance Anotación Duración

La interacción de un usuario con una
Request @RequestScoped
aplicación web en una sola solicitud HTTP.
La interacción de un usuario con una
Session @SessionScoped aplicación web a través de múltiples
solicitudes HTTP.
Estado compartido en todas las interacciones
Application @ApplicationScoped
de los usuarios con una aplicación web.

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Anotación Named (CDI)

• Para hacer que un bean sea accesible a través del EL (Lenguaje de expresión), use la anotación @Named
• El calificador @Named le permite acceder al bean utilizando el nombre del bean, con la primera letra en minúscula.
• Puede especificar un argumento para el calificador @Named para usar un nombre no predeterminado:
• @Named (”HolaDesdeJSF")
• Con esta anotación, la página Facelets se referiría al bean como HolaDesdeJSF.

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Inyectando Beans (1/2)

• Por ejemplo, suponga que crea una

clase Java simple con un método que
devuelve una cadena. Esta clase se
convierte en un bean que puede ser
inyectado en otra clase. Este bean no
esta expuesto al lenguaje de expresión
(EL).
• Para usar el bean MiSaludo, se lo debe
inyectar en otro bean que luego
puede usar una aplicación como
JavaServer Faces. Por ejemplo, puede
crear un bean llamado Impresora en el
que inyectaría el bean de MiSaludo y
sería visualizado en JSF.

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Inyectando Beans (2/2)
Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
XHTML: Lenguaje de Expresión (EL)
1/2
• Las expresiones JSF EL son muy similares a las vistas en JSP. Son expresiones evaluables utilizadas en los atributos de las etiquetas JSF, normalmente
en el atributo value. Su sintaxis es #{...}. Por ejemplo, la siguiente expresión se utiliza en el atributo value de un <h:outputText> para definir un valor
que se mostrará en la página HTML:
• <h:outputText value="El resultado de 1+2+3 es #{1+2+3}”>
• La diferencia fundamental con JSP es que las expresiones JSF se incluyen tal cual en los componentes JSF. Cuando JSF obtiene el árbol de
componentes asociado a la petición, las expresiones EL no se evalúan, sino que se incluyen en los componentes. De hecho, JSF convierte el texto de la
expresión EL en un objeto de tipo javax.el.ValueExpression que se asocia a la propiedad correspondiente del componente. En el caso anterior, la
expresión #{1+2+3} se convertiría en un objeto de tipo ValueExpression y se asociaría al atributo value del outputText.
• En las expresiones EL es posible utilizar un conjunto de identificadores que denotan ciertos objetos implícitos que podemos utilizar:
• requestScope, sessionScope, applicationScope: permite acceder a las variables definidas en el ámbito de la petición, de la sesión y de la
aplicación Estas variables se pueden actualizar desde código en los beans utilizando la clase FacesContext.
• param: para acceder a los valores de los parámetros de la petición.
• paramValues: para acceder a los arrays de valores de los parámetros de la petición.
• header: para acceder a los valores de las cabeceras de la petición.
• headerValues:para acceder a los arrays de valores de los parámetros de la petición.
• cookie: para acceder a los valores almacenados en las cookies en forma de objetos javax.servlet.http.Cookie
• initParam: para acceder a los valores de inicialización de la aplicación.
• facesContext: para acceder al objeto javax.faces.context.FacesContext asociado a la aplicación actual.
• view: para acceder al objeto javax.faces.component.UIViewRoot asociado a la vista actual.

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

XHTML: Lenguaje de Expresión (EL)
2/2
• Cuando ligamos una propiedad de un bean a un componente, la expresión EL puede u<lizarse para obtener el valor del bean y asignarlo al
componente o, al revés, para obtener el valor del componente y asignarlo al bean. En el primer caso se dice que la expresión <ene una
semán<ca getValue y en el segundo caso una semán<ca setValue.
• Acceso a las propiedades del bean
• #{bean.property}. Se llama al método “getProperty()” del objeto cuya clave es “bean”
• #{bean.array[3]}. El método getArray devuelve una array o List, se accede con el índice 3
• #{bean.map[key]}. Key es una variable que con<ene la clave
• #{bean.map[“key”]} o #{bean.map.key} . El método getMap devuelve un Map, y se accede al elemento de clave “key”
• #{bean.object.property}. Se accede al elemento bean.getObject().getProperty()
• Invocar métodos del bean
• #{bean.method()}. Se llama al método “bean.method()” del objeto bean
• #{bean.method(3)}. Se llama al método “bean.method(3)”, pasándole el parámetro
• Ejemplo para acceder desde java al contexto actual
• FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("variable Name", value);
• ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
• HXpServletRequest request = (HXpServletRequest)context.getRequest();
• HXpServletResponse response = (HXpServletResponse)context.getResponse();
• HXpSession session = (HXpSession)context.getSession(true);

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

XHTML: Lenguaje de Expresión (EL)
Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
XHTML: Lenguaje de Expresión (EL)

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

XHTML: Lenguaje de Expresión (EL)
Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
Navegación entre páginas (1/2)
• EstáKca
• No se necesita un Bean para procesar, y la página de
desKno siempre es la misma (la extensión .xhtml es
opcional)
• <h:link value="Ir Página A" acKon="pageA"/>
• Configuración directa
• El valor devuelto por el bean corresponde con el
nombre de la página. Más sencillo, pero no se Kene
visión global
• Reglas de navegación: faces-config.xml
• El valor devuelto por el bean se interpreta como una
clave o referencia, y se configura una regla a parKr de
la referencia. Más flexible, se Kene visión global,
existen herramientas de administración, mejor para
grandes proyectos.

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Navegación entre páginas (2/2)

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Conversiones de datos de entrada

• Lo mejor: u:lizar listas desplegables (h:selectOneMenu)

1. Conversión implícita automá:ca

— Conversión de :pos. Se convierte el :po String de entrada al :po esperado en el método set* correspondiente. Existe conver:dores
para los Wrappers, BigDecimal, BigInteger y Date.
— Atributo: converterMessage="Debe ser un número entero". Si se establece, sobrescribe el mensaje devuelto por el conver:dor
— Atributo: required="true"
— Atributo: requiredMessage="Campo Obligatorio“ (opcional)
— E:queta h:message, es donde se sitúa el mensaje de respuesta.
2. Conversión mediante e:quetas de JSF
• <f:convertNumber.../>
• minFrac:onDigits, maxFrac:onDigits...
• <f:convertDateTime.../>
• paIern...
3. Se pueden realizar conver:dores propios

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Validación de datos de entrada

1. Validación mediante e<quetas de JSF

• Atributo: validatorMessage="Mensaje asociado“ (opcional, si aparece anula el mensaje original)
• <f:validateLength.../>
• <f:validateLongRange...>
• <f:validateDoubleRange .../>
• <f:validateRegex .../>
2. Validación propia, mediante un método
• Atributo: validator="#{bean.validatorId}
3. Validación mediante los métodos set*
• Se pueden añadir errores. Si se añade un error se aborta el progreso:
• FacesContext context = FacesContext.getCurrentInstance(); context.addMessage("formId:Id", new FacesMessage("..."));
4. Acción del controlador
• Se pueden validar entradas relacionadas
• Se validan accediendo a la capa de negocio
• También podrá añadir errores
• Si devuelve null, se vuelve al formulario

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Conversión/Validación de datos de entrada

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Ajax

• Aplicaciones con Ajax

• Actualizaciones de grano fino, sólo se cambia parte de la página
• Se reduce :empo de proceso en el servidor
• Se reduce consumo de ancho de banda
• Implementado por todos los navegadores
• Alterna:vas a Ajax
• Applets de Java. Se debe instalar en el cliente
• Flash/Flex. No disponible en alguno sistemas móviles
• Microsoi Silverlight, JavaFX...
• Librerías de Ajax
• jQuery, DWR (Direct web remo:ng)...
• JSF
• Simplifica la u:lización

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

EVqueta j:ajax

• Atributo render
• Se indica al servidor los elementos que se deben actualizar dentro de la página
• Ej. <j:ajax render=“id1 id2”/>. Se deben definir el atributo “id” de los elemento afectados
• Atributo execute
• Se indica que elemento se deben enviar al servidor para actualizar
• @this. Sólo el actual, por defecto
• “id1 id2”. Los mencionados explícitamente
• @form. Todos los incluidos en el formulario
• @none. Nada
• @all. Todos los de la página
• Atributo event
• Se indica los eventos afectados para la pe:ción al servidor: Eventos DOM ,
• valueChange de JSF
• Por defecto, el evento del componente
• Atributo onevent
• Se llama a una función javascript en las diferentes fases de la pe:ción
• "begin", "complete" y "success“, en este orden
Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
 Ajax

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Creación de vistas

• U<lización del bean para la creación de la vista

• Sólo texto simple, no una colección. Ej. a par<r de un nombre y apellido devolver el nombre compuesto
• Se puede incorporar HTML muy básico:
• <span class=“class1">P. Punto</span>
• En XHTML:
• #{bean.salida}, sin no con<ene HTML
• <h:outputText value="#{bean.salida}“ escape="false"/>. Para que no afecten los caracteres “<“ y “>”
• Salidas condicionales
• #{condicion?valor1 : valor2}
• Atributo rendered. rendered=“#{condicion}”

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Creación de vistas. EVqueta: h:dataTable

<h:dataTable
value="Colección"
var=“item”. Varible u:lizada en cada fila
border="1"
styleClass="es:lo-tabla"
headerClass="es:lo-cabecera"
rowClasses="filaPar,filaImpar">
footerClass, cap:onClass, columnClasses
<h:column>
<f:facet name=“header”>Título col. 1</f:face>
header, footer, cap:on
#{item.propiedad}
<h:outputText value="#{item.propiedad}" rendered="#{not item.editable}" />
</h:column>
<h:column>...</h:column>
</h:dataTable>

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Etiqueta dataTable (1/2)

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

EHqueta dataTable (2/2)

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Creación de vistas. Colecciones: ui:repeat

• <html ... xmlns:ui="hXp://java.sun.com/jsf/facelets">

• Es similar a un for each. Se apoya en JSTL 1.2
<ul>
<ui:repeat
- value="#{bean.coleccion}“
- var="item“
- varStatus=“s“
- boolean:s.even,s.odd,s.first,s.last
- Numérico:s.begin,s.end,s.stepys.index
- offset="...“, valor del primer elemento, por defecto, s.begin
- size="...", ́ u
́ l<moelementos,pordefecto,s.end
- step="...", valor del salto
<ui:fragment rendered="#{status.even}">
- <li class=“par">#{item}</li>
</ui:fragment>
<li>#{item}</li>
</ui:repeat>
</ul> Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes
Colecciones: ui:repeat

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

 EjemploJSF
h"ps://github.com/gabusleon/EjemploJSF

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

Lecturas recomendada
• h"ps://www.arquitecturajava.com/java-y-cdi/
• h"p://www.jtech.ua.es/j2ee/publico/jsf-2012-13/sesion01-
apuntes.html#Clase+Java+con+el+bean+gesEonado
• h"ps://athemes.com/collecEons/free-bootstrap-admin-templates/

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes

 “Desarrollo de aplicaciones web distribuidas de
código abierto (Java EE): Principios tecnológicos”,
Referencias Bernal, J., UPM, 2012.
“Java EE 8 Developmnet with Eclipse”, Kulkarni,
R.., Packt, 3th Edition, 2018.

Aplicaciones Distribuidas - Dr. Gabriel A. León Paredes