Taller de Sistemas de
Información 2
Java Server Faces 2.0
Contenido
¿Qué es JSF?
¿En qué tecnologías se basa?
Los conceptos clave de la tecnología
INCO - Facultad de Ingeniería – Montevideo, Uruguay
2
¿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
3
¿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
4
¿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
5
¿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
6
¿Qué es JSF?
JSF es similar a ASP.NET
Interfaz de usuario dirigida por eventos
Abstracción del protocolo HTTP
HTML
Tienen
correspondencia
en JSF
Controles en ASP .NET
De validación
De servidor
INCO - Facultad de Ingeniería – Montevideo, Uruguay
7
¿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
JEE 5 o superior
JSF 2.0
JEE 6 o superior
O 5 pero debe incluir libs.
INCO - Facultad de Ingeniería – Montevideo, Uruguay
8
¿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
9
¿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
10
¿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
11
¿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
12
¿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
13
¿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
14
¿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
15
¿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
16
¿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
17
¿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
18
¿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
19
¿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
20
¿En qué tecnologías se basa?
JSP 2.0
• Ejemplos de EL
Sin EL
Con EL
((Duck) pageContext.getAttribute(”duck”)).getBeakColor()
${duck.beakColor}
<jsp:useBean id="foo" class="FooBean" />
<%= foo.getBar() %>
${foo.bar}
INCO - Facultad de Ingeniería – Montevideo, Uruguay
21
¿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
22
¿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
23
¿En qué tecnologías se basa?
INCO - Facultad de Ingeniería – Montevideo, Uruguay
24
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
25
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
26
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
27
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}"
<h:commandButton action="save" value="Save"/>
required="true"/>
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) (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
29
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
30
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
31
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
32
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 sin
Crear cuenta
Comentarios de: Java Server Faces 2.0 (0)
No hay comentarios