Java Server Faces El siguiente paso en el desarrollo web
Download
Report
Transcript Java Server Faces El siguiente paso en el desarrollo web
Java Server Faces
El siguiente paso en el desarrollo web
Óscar Sánchez Ramón. SSDD. Curso 05/06
Contenidos
1. ¿Qué es JSF?
2. ¿En qué tecnologías se basa?
3. Los conceptos clave de la tecnología
4. Integración con otros frameworks
5. Resumen
6. Referencias.
1. ¿Qué es JSF?
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.
Los dos componentes principales son:
• Una librería de etiquetas para JSP
• Una API para manejo de eventos, validadores, etc.
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
1. ¿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.
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.
1. ¿Qué es JSF?
JSF (en J2EE) es similar a ASP .NET:
• Interfaz de usuario dirigida por eventos,
• Abstracción del protocolo HTTP
HTML
Controles en ASP .NET
De validación
De servidor
Tienen
correspondencia
en JSF
2. ¿En qué tecnologías se basa?
HTTP
Servlets
JavaBeans
JSP
2. ¿En qué tecnologías se basa?
Servlets
•
•
•
•
•
Amplía la funcionalidad del servidor
Posterior al CGI
API Java
Se ejecuta en un contenedor de aplicaciones
Hasta JSP, único modo de generar páginas
web dinámicas
2. ¿En qué tecnologías se basa?
Servlets (ejemplo)
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>");
2. ¿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 los servlets:
Controlador en la arquitectura MVC
Preprocesamiento de peticiones
2. ¿En qué tecnologías se basa?
Java Server Pages (JSP)
•
•
•
•
Páginas HTML con scripts (por defecto Java)
Se traduce a un servlet en la primera petición
Semánticamente equivalente a los servlets
Facilitan el desarrollo y mantenimiento
2. ¿En qué tecnologías se basa?
JSP 1.x (Ejemplo de programación en sus inicios)
<%
MyTableData tableData = MyDAO.queryData();
%>
<table border="1">
<%
for (int i = 0; i < tableData.getData().length;
i++) {
%>
<tr> <td>
<%= tableData.getData()[i] %>
</td> </tr>
<% }%>
</table>
2. ¿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>
2. ¿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” />
2. ¿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”/>
2. ¿En qué tecnologías se basa?
JSP 1.x (Ejemplo de una nueva etiqueta)
<table border="1">
<tr>
<td width="20%"><p align="center"><b>Usuario</b></td>
<td width="50%"><p align="center"><b>Nombre</b></td>
<td width="30%"><p align="center"><b>Correo</b></td>
</tr>
<ssdd:listaUsuarios usuarios="<%= usuarios%>">
<tr>
<td with="20%“ align="center"><%=identificador%></td>
<td with="50%" align="center"><%=nombre%></td>
<td with="30%" align="center"><%=correo%></td>
</tr>
</ssdd:listaUsuarios>
</table>
2. ¿En qué tecnologías se basa?
JSP (Código de la nueva etiqueta) (1 de 2)
public class UsuariosTag extends BodyTagSupport {
private Collection usuarios;
private Iterator it;
public void setUsuarios(Collection usuarios) {
this.usuarios = usuarios;
}
public void doInitBody() throws JspTagException {
it = usuarios.iterator();
Cliente c = (Cliente) it.next();
if (c == null)
return;
else {
pageContext.setAttribute("identificador", c.getUsuario());
pageContext.setAttribute("nombre", c.getNombre());
pageContext.setAttribute("correo", c.getCorreo());
return;
}
}
2. ¿En qué tecnologías se basa?
JSP (Código de la nueva etiqueta)(2 de 2)
public int doAfterBody() throws JspTagException {
BodyContent bodyContent = getBodyContent();
if (bodyContent != null) {
try {
bodyContent.getEnclosingWriter().
print(bodyContent.getString());
bodyContent.clearBody();
} catch (Exception e) { throw new
JspTagException(e.getMessage());}
}
if (it.hasNext()) {
Cliente c = (Cliente) it.next();
pageContext.setAttribute("identificador", c.getUsuario());
pageContext.setAttribute("nombre", c.getNombre());
pageContext.setAttribute("correo", c.getCorreo());
return EVAL_BODY_TAG;
} else return SKIP_BODY;
}
}
2. ¿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
Formado por 4 librerías:
core: funciones script básicas
xml: procesamiento de xml
fmt: internacionalización y formato
sql: acceso a base de datos
2. ¿En qué tecnologías se basa?
JSTL (Ejemplo con scriptlets, sin JSTL)
<%@ page import=“com.ktaylor.model.AddressVO, java.util.*” %>
<%
List addresses = (List)request.getAttribute("addresses");
Iterator addressIter = addresses.iterator();
while(addressIter.hasNext()) {
AddressVO address =(AddressVO)addressIter.next();
if((null != address) && (null != address.getLastName())
&& (address.getLastName().length() > 0)) {
%>
<%
=address.getLastName()%><br/>
<%
} else {
%>
N/A<br/>
<% } } %>
2. ¿En qué tecnologías se basa?
JSTL (Ejemplo sin scriptlets, con JSTL)
Librería básica
<%@ taglib prefix="c"uri="http://java.sun.com/jstl/core" %>
<c:forEach items="${addresses}" var="address">
<c:choose>
<c:when test="${not empty address.lastName}" >
<c:out value="${address.lastName}"/><br/>
</c:when>
Etiqueta <c:otherwise>
N/A<br/>
Lenguaje de expresiones
Iterador
</c:otherwise>
</c:choose><br/>
</c:forEach><br/>
2. ¿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 cabeceras, sesión, …
Elementos principales:
Lenguaje de expresiones (EL)
Ficheros de etiquetas
SimpleTag vs Tag
Mejorada la sintaxis XML
2. ¿En qué tecnologías se basa?
JSP 2.0
• Lenguaje de expresiones (EL)
Mismo EL que JSTL, pero soportado nativamente
Meta: que lo use gente que no sabe programar
Inspirado en JavaScript y XPath
Se puede desactivar los scriptlets y habilitar EL
${ <expresión> }
2. ¿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}
2. ¿En qué tecnologías se basa?
JSP 2.0
• Ficheros 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
Etiquetas en /WEB-INF/tags
TLD implícito
<%@ taglib prefix="..." tagdir="/WEB-INF/tags" %>
2. ¿En qué tecnologías se basa?
JSP 2.0
• Ejemplo de fichero 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>
2. ¿En qué tecnologías se basa?
JSP 2.0
• La anterior API para definir nuevas etiquetas (Tag)
Tag
attributes
doStartTag()
doEndTag()
Tag
body
doInitBody()
doAfterBody()
doCatch()
release()
Tag handler
doFinally()
Antes
2. ¿En qué tecnologías se basa?
JSP 2.0
• Nueva API para definir etiquetas (SimpleTag)
Tag
attributes
Tag
body
doTag()
Tag handler
(no
scriptlets)
Ahora
2. ¿En qué tecnologías se basa?
JSP 2.0
• Mejorada la sintaxis XML
Antes: JSP como documento <jsp: root>
Ahora: JSP como espacio de nombres
<html xmlns:util="http://mytaglib"
xmlns:c="http://java.sun.com/jsp/jstl/core">
2. ¿En qué tecnologías se basa?
3. Los conceptos clave de la tecnología
Componentes de interfaz de usuario
Eventos
Beans manejados
Validadores
Internacionalización y localización
Conversores
Navegación
3. Los conceptos clave de la tecnología
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" %>
3. Los conceptos clave de la tecnología
Los componentes de la interfaz de usuario
<h:commandButton id=“siguiente”
value=“#{msg.buttonHeader}” action=“sigPagina”/>
<h:inputTextarea id=“textArea” rows=“4” cols=“7”
value=“Text goes here…”/>
3. Los conceptos clave de la tecnología
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"/>
3. Los conceptos clave de la tecnología
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" />
3. Los conceptos clave de la tecnología
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
3. Los conceptos clave de la tecnología
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);
}
3. Los conceptos clave de la tecnología
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!");
}
3. Los conceptos clave de la tecnología
Beans manejados (Managed beans)
• Beans de respaldo (Backing beans)
JavaBeans especializados
Contienen datos de componentes UI, implementan
métodos de oyentes de eventos
Controlador en el Modelo Vista Controlador(MVC)
Backing bean por página, formulario, …
Componente UI y backing bean están sincronizados
• Son backing beans que usan la facilidad
Manager Bean Creation Facility
3. Los conceptos clave de la tecnología
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>
3. Los conceptos clave de la tecnología
Beans Manejados (Managed Beans)
• Ejemplo de uso:
<h:outputText id="helloBeanOutput"
value=“#{helloBean.numControls}“
/>
Utiliza EL parecido
al de JSP 2.0
3. Los conceptos clave de la tecnología
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)
3. Los conceptos clave de la tecnología
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>
3. Los conceptos clave de la tecnología
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
3. Los conceptos clave de la tecnología
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>
3. Los conceptos clave de la tecnología
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}"/>
3. Los conceptos clave de la tecnología
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
3. Los conceptos clave de la tecnología
Conversores
• Muestran un error si la entrada no es correcta
• Por defecto JSF asigna uno adecuado
Conversores no predefinidos
• 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
3. Los conceptos clave de la tecnología
Conversores
• Ejemplo (conversor predefinido):
<h:outputText value="#{user.dateOfBirth}">
<f:convertDateTime type="date" dateStyle="short"/>
</h:outputText>
03/18/06
18/03/06
3. Los conceptos clave de la tecnología
Navegación
•
•
•
•
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
3. Los conceptos clave de la tecnología
Navegación
Ejemplo de declaración (faces-config.xml):
Página
origen
<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>
acción
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/login.jsp</to-view-id>
</navigation-case>
Página
</navigation-rule> o
destino
4. Integración con otros frameworks
JSF con Struts
4. Integración con otros frameworks
JSF con Spring e Hibernate
5. Resumen
JSF es una tecnología de interfaces de
usuario centrada en el MVC, interesante y
en creciente auge
Pretende reducir el salto entre las
aplicaciones de escritorio y las web,
abstrayendo del protocolo HTTP
Promete reutilización, separación de roles,
facilidad de uso y reducir el time-to-market
Se puede combinar con otros frameworks
para obtener un soporte más potente
6. Referencias
“Java Server Faces In Action”, K.D. Mann Ed. Manning.
2005
Integrating JSP/JSF and XML/XSLT
http://www.theserverside.com/articles/article.tss?l=BestBothWorlds
JSF KickStart: A Simple JavaServer Faces Application
http://www.programacion.com/java/tutorial/jap_jsfwork/
Integración de JSF, Spring e Hibernate para crear una
Aplicación Web del Mundo Real
http://www.exadel.com/tutorial/jsf/jsftutorial-kickstart.html
JSP 2.0 and JSTL: Principles and Patterns
web.princeton.edu/sites/isapps/jasig/2002WinterOrlando/presentat
ions/jsp20-jasig-2002.ppt