Taller de Sistemas de
Información 2
Java Server Faces 2.0
INCO - Facultad de Ingeniería – Montevideo, Uruguay 2
Contenido
¿Qué es JSF?
¿En qué tecnologías se basa?
Los conceptos clave de la tecnología
INCO - Facultad de Ingeniería – Montevideo, Uruguay 3
¿Qué es JSF?
La tecnología Java Server Faces (JSF) es
un framework para el desarrollo de
interfaces de usuario del lado de servidor
para aplicaciones Web basadas en
tecnología Java, hoy ya estamos en la
versión 2.0
INCO - Facultad de Ingeniería – Montevideo, Uruguay 4
¿Qué es JSF?
Los dos componentes principales son
Una librería de tags para JSP (versión 1.x)
Una API para manejo de eventos,
validadores, etc.
Version 1.x
<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
Version 2.0
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
INCO - Facultad de Ingeniería – Montevideo, Uruguay 5
¿Qué es JSF?
Permite a los desarrolladores pensar en
términos de componentes, eventos,
backing beans y otras interacciones, en
vez de hablar de peticiones, respuestas y
marcas
INCO - Facultad de Ingeniería – Montevideo, Uruguay 6
¿Qué es JSF?
JSF promete reutilización, separación de
roles, facilidad de uso de las herramientas
JSF tiene una meta específica: hacer el
desarrollo web más rápido y fácil
INCO - Facultad de Ingeniería – Montevideo, Uruguay 7
¿Qué es JSF?
JSF es similar a ASP.NET
Interfaz de usuario dirigida por eventos
Abstracción del protocolo HTTP
Controles en ASP .NET
De servidor
HTML
De validación
Tienen
correspondencia
en JSF
INCO - Facultad de Ingeniería – Montevideo, Uruguay 8
¿En qué tecnologías se basa?
HTTP
Servlets
JavaBeans
JSP (versión 1.x)
Xhtml (versión 2.0)
Anotations (versión 2.0)
JSF 1.x JSF 2.0
JEE 5 o superior JEE 6 o superior
O 5 pero debe incluir libs.
INCO - Facultad de Ingeniería – Montevideo, Uruguay 9
¿En qué tecnologías se basa?
Servlets
Amplía la funcionalidad del servidor
Acceso completo al API de Java
Se ejecuta en un contenedor de aplicaciones
Hasta la aparición de JSP, único modo de
generar páginas web dinámicas nativo de
java
INCO - Facultad de Ingeniería – Montevideo, Uruguay 10
¿En qué tecnologías se basa?
Ejemplo código servlets.
MyTableData tableData = MyDAO.queryData();
PrintWriter writer = response.getWriter(); writer.println("<table border=\"1\">");
for (int i=0; i<tableData.getData().length; i++){
writer.println("<tr>");
writer.println("<td>"); writer.println(tableData.getData()[i]); writer.println("</td>");
writer.println("</tr>");
}
writer.println("</table>");
INCO - Facultad de Ingeniería – Montevideo, Uruguay 11
¿En qué tecnologías se basa?
Servlets
Inconvenientes Poco legible
Mantenimiento costoso
El diseñador gráfico debe saber Java
A cada cambio: recompilar, empaquetar, desplegar
Uso actual de servlets Controlador en la arquitectura MVC
Pre procesamiento de peticiones
INCO - Facultad de Ingeniería – Montevideo, Uruguay 12
¿En qué tecnologías se basa?
Java Server Pages (JSP)
Páginas HTML con scripting Java
Se traduce a un servlet en la primera petición
Semánticamente equivalente a los servlets
Facilitan el desarrollo y mantenimiento
Orientado al documento
INCO - Facultad de Ingeniería – Montevideo, Uruguay 13
¿En qué tecnologías se basa?
<%
MyTableData tableData = MyDAO.queryData();
%>
<table border="1">
<%
for (int i = 0; i < tableData.getData().length;
i++) {
%>
<tr> <td>
<%= tableData.getData()[i] %>
</td> </tr>
<% }%>
</table>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 14
¿En qué tecnologías se basa?
JSP 1.x
Facilidad para manejo de JavaBeans
<jsp:useBean id=“user” class=“Cliente” scope=“session”>
<form method=“POST” action=“actualiza.ctrl”>
<input type=“text” name=“nombre” value=“
<jsp:getProperty name=“user” property=“name”/>
“/>
</form>
</jsp:useBean>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 15
¿En qué tecnologías se basa?
JSP 1.x
Otras etiquetas estándar de JSP
<jsp:forward page=“registro.jsp”>
<jsp:include page=“/servlet/ServletCookie”
flush=“true” />
<jsp:setProperty name=“cliente” property=“nif”
value=“53146712F” />
INCO - Facultad de Ingeniería – Montevideo, Uruguay 16
¿En qué tecnologías se basa?
JSP 1.x
Etiquetas de extensión
Alternativa a los JavaBeans para encapsular la
lógica de negocio
“Componentes” para la edición web
Para usar declarativamente la lógica de negocio
Ejemplo:
<ssdd:enlace URL=“index.jsp” texto”inicio”/>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 17
¿En qué tecnologías se basa?
JSP Standard Tag Library (JSTL)
Librería de etiquetas para JSP.
No es parte de JSP ni JSF, los complementa
Precursor: librerías de etiquetas de Struts
INCO - Facultad de Ingeniería – Montevideo, Uruguay 18
¿En qué tecnologías se basa?
JSP 2.0
Evolución de JSP 1.2
Separación completa de roles
Todavía se habla de headers,
request, sesión, application…
INCO - Facultad de Ingeniería – Montevideo, Uruguay 19
¿En qué tecnologías se basa?
JSP 2.0
Elementos principales:
Lenguaje de expresiones (EL)
Archivos de etiquetas
SimpleTag vs Tag
Mejorada la sintaxis XML
INCO - Facultad de Ingeniería – Montevideo, Uruguay 20
¿En qué tecnologías se basa?
JSP 2.0
Lenguaje de expresiones (EL)
Mismo EL que JSTL, soportado nativamente
Que lo use gente que no sabe programar
Inspirado en JavaScript y XPath
Se pueden desactivar los scriptlets y
habilitar EL
${ <expresión> }
INCO - Facultad de Ingeniería – Montevideo, Uruguay 21
¿En qué tecnologías se basa?
JSP 2.0
• Ejemplos de EL
((Duck) pageContext.getAttribute(”duck”)).getBeakColor()
${duck.beakColor}
<jsp:useBean id="foo" class="FooBean" />
<%= foo.getBar() %>
${foo.bar}
Con ELSin EL
INCO - Facultad de Ingeniería – Montevideo, Uruguay 22
¿En qué tecnologías se basa?
JSP 2.0
Archivos de etiquetas
Escribir etiquetas sólo con código JSP
Mecanismo de reutilización para autores
de páginas
Empaquetado de la aplicación más
flexible
INCO - Facultad de Ingeniería – Montevideo, Uruguay 23
¿En qué tecnologías se basa?
JSP 2.0• Ejemplo de uso de archivos de etiqueta.
<%@ tag name=”tableTag” %>
<%@ attribute name=”items” %>
<table width=”…” bgcolor=”…”>
<th>
<td>Name</td> <td>IQ</td>
</th>
<c:forEach var=”i” items=”${items}”>
<tr>
<td>${i.fullName}</td>
<td>${i.IQ}</td>
</tr>
</c:forEach>
</table>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 24
¿En qué tecnologías se basa?
INCO - Facultad de Ingeniería – Montevideo, Uruguay 25
Los conceptos clave de la
tecnología JSF
Componentes de interfaz de usuario
Eventos
Managed beans
Validadores
Internacionalización y localización
Conversores
Navegación
INCO - Facultad de Ingeniería – Montevideo, Uruguay 26
Los conceptos clave de la
tecnología JSF
Los componentes de la interfaz de usuario
• Son JavaBeans
• Se ejecutan en el lado del servidor
• Tienen estado
• Se organizan en árboles de vistas
• Representación específica: renderer
• Familia de representaciones: kits de renderer
• <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 27
Los conceptos clave de la
tecnología JSF
Los componentes de la interfaz de usuario
<h:commandButton id=“siguiente”
value=“#{msg.buttonHeader}” action=“sigPagina”/>
action=“mybean.sigPagina” (En JSF 2.0)
<h:inputTextarea id=“textArea” rows=“4” cols=“7”
value=“Text goes here…”/>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 28
Los conceptos clave de la
tecnología JSF
Los componentes de la interfaz de usuario
• Ejemplo (traducción de JSF a HTML) (1 de 2)
Enter address: <h:message style="color: red" for="useraddress" />
<h:inputText id="useraddress" value="#{jsfexample.address}"
required="true"/>
<h:commandButton action="save" value="Save"/>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 29
Los conceptos clave de la
tecnología JSF
Los componentes de la interfaz de usuario
• Ejemplo (traducción de JSF a HTML) (2 de 2)
Enter address: <span style="color: red">
Validation Error: Value is required. </span>
<input id="jsftags:useraddress" type="text"
name="jsftags:useraddress" value="" />
<input type="submit" name="jsftags:_id1" value="Save" />
(Esto es en JSF 1.x)
INCO - Facultad de Ingeniería – Montevideo, Uruguay 30
Los conceptos clave de la
tecnología JSF
Eventos
• Los componentes UI generan eventos
• Los listeners se implementan en backing beans o
clases aparte
• 4 tipos:
Value-change events
Action events
Data model events
Phase events
INCO - Facultad de Ingeniería – Montevideo, Uruguay 31
Los conceptos clave de la
tecnología JSF
Eventos
• Ejemplo: value-change event
<h:inputText
valueChangeListener=“#{myForm.processValueChanged}“
/>
public void processValueChanged(ValueChangeEvent event){
HtmlInputText sender = (HtmlInputText)event.getComponent();
sender.setReadonly(true);
changePanel.setRendered(true);
}
INCO - Facultad de Ingeniería – Montevideo, Uruguay 32
Los conceptos clave de la
tecnología JSF
Eventos
• Ejemplo: action event
<h:commandButton id="redisplayCommand" type="submit"
value="Redisplay"
actionListener="#{myForm.doIt}“
/>
public void doIt(ActionEvent event){
HtmlCommandButton button =
(HtmlCommandButton)event.getComponent();
button.setValue("It's done!");
}
INCO - Facultad de Ingeniería – Montevideo, Uruguay 33
Los conceptos clave de la
tecnología JSF
Managed beans
• Backing beans
JavaBeans especializados
Contienen datos de componentes UI, implementan métodos listener de eventos
Model View Controller (es la parte controller)
Backing bean por página, formulario, …
Componente UI y backing bean están sincronizados
INCO - Facultad de Ingeniería – Montevideo, Uruguay 34
Los conceptos clave de la
tecnología JSF
Beans Manejados (Managed Beans)
• Ejemplo de declaración (faces-config.xml):
<managed-bean>
<managed-bean-name>helloBean</managed-bean-name>
<managed-bean-class>
com.virtua.jsf.sample.hello.HelloBean
</managed-bean-class>
<managed-bean-scope>
session
</managed-bean-scope>
</managed-bean>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 35
Los conceptos clave de la
tecnología JSF
Beans Manejados (Managed Beans)
• Ejemplo de uso:
<h:outputText id="helloBeanOutput"
value=“#{helloBean.numControls}“
/>
Utiliza EL parecido
al de JSP 2.0
INCO - Facultad de Ingeniería – Montevideo, Uruguay 36
Los conceptos clave de la
tecnología JSF
Validadores
• Aseguran la correcta introducción de valores
• Evitan escribir código Java y/o Javascript
• JSF provee de validadores estándar
• Podemos crear validadores propios
• Generan mensajes de error
• 3 tipos:
A nivel de componente UI
Métodos validadores en los backing beans (validator)
Clases validadoras (etiqueta propia anidada)
INCO - Facultad de Ingeniería – Montevideo, Uruguay 37
Los conceptos clave de la
tecnología JSF
Validadores:• Estándar de JSF: campo con valor requerido,
validadores de la longitud de una cadena, y validadores de rango para enteros y decimales
• Ejemplos:
<h:inputText id="userNumber“
valuevalue="#{NumberBean.userNumber}”
required=“true”
/>
<h:inputText>
<f:validateLength minimum="2" maximum="10"/>
</h:inputText>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 38
Los conceptos clave de la
tecnología JSF
Internacionalización y localización
• Internacionalización: habilidad de una aplicación de
soportar diferentes lenguajes dependiendo de la región
del planeta en que nos encontremos.
• Localización: El proceso de modificar una aplicación
para que soporte la lengua de una región.
• JSF ofrece el soporte, no las traducciones
• El usuario indica su lengua mediante el navegador
INCO - Facultad de Ingeniería – Montevideo, Uruguay 39
Los conceptos clave de la
tecnología JSF
Internacionalización y localización
• Ejemplo (declaración en faces-config.xml):
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>en</supported-locale>
<supported-locale>en_US</supported-locale>
<supported-locale>es_ES</supported-locale>
</locale-config>
<message-bundle>CustomMessages</message-bundle>
</application>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 40
Los conceptos clave de la
tecnología JSF
Internacionalización y localización
• Ejemplo (resource bundles y uso):
<f:loadBundle basename="LocalizationResources" var="bundle"/>
LocalizationResources_en.properties
halloween=Every day is like Halloween.
numberOfVisits=You have visited us {0} time(s), {1}. Rock on!
toggleLocale=Translate to Spanish
helloImage=../images/hello.gif
<h:outputText value="#{bundle.halloween}"/>
INCO - Facultad de Ingeniería – Montevideo, Uruguay 41
Los conceptos clave de la
tecnología JSF
Conversores
• Convierten el valor de un componente desde y a una
cadena
• Cada componente se asocia a un sólo conversor
• El renderer lo usa para saber mostrar los datos
• JSF tiene definidos para fechas, números, etc.
• Podemos crear los nuestros propios
• Tienen en cuenta la localización y formato
INCO - Facultad de Ingeniería – Montevideo, Uruguay 42
Los conceptos clave de la
tecnología JSF
Conversores
• Muestran un error si la entrada no es correcta
• Por defecto JSF asigna uno adecuado
• Se pueden definir de 4 formas:
Etiqueta propia anidada en la del componente
En la etiqueta del componente con converter
Etiqueta <f:converter> anidada
Etiquetas predefinidas (otras) anidadas
Co
nve
rso
res n
o p
red
efin
ido
s
INCO - Facultad de Ingeniería – Montevideo, Uruguay 43
Los conceptos clave de la
tecnología JSF
Conversores
• Ejemplo (conversor predefinido):
<h:outputText value="#{user.dateOfBirth}">
<f:convertDateTime type="date" dateStyle="short"/>
</h:outputText>
18/03/0603/18/06
INCO - Facultad de Ingeniería – Montevideo, Uruguay 44
Los conceptos clave de la
tecnología JSF
Navegación en JSF v1.x
• Habilidad de pasar de una página a la otra
• Lo controla el manejador de navegación
• Correspondencia salida/página: caso de navegación
• Hay que definir las reglas de navegación
INCO - Facultad de Ingeniería – Montevideo, Uruguay 45
Los conceptos clave de la
tecnología
Navegacióno Ejemplo de declaración (faces-config.xml):
<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/mainmenu.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/login.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Página
origen
Página
destino
acción
INCO - Facultad de Ingeniería – Montevideo, Uruguay 46
Incorporaciones de JSF 2.0
Resumen de Conceptos
o Se escriben archivos .xhtml cuando eran .jsp
o Se usan anotaciones en lugar de escribir todas
las navegaciones, definiciones de beans, etc.
o Requiere Servlets 2.5, que antes no!
o No se usan las taglib.
o Los eventos retornan uri de paginas, no nombres
definidos.
o estas son algunas entre otras mejoras.