Java Server Faces

El siguiente paso en el desarrollo web

scar Snchez Ramn. SSDD. Curso 05/06

Contenidos
1. Qu es JSF? 2. En qu tecnologas se basa? 3. Los conceptos clave de la tecnologa 4. Integracin con otros frameworks 5. Resumen 6. Referencias.

1. Qu es JSF?
La tecnologa Java Server Faces (JSF) es un marco
de trabajo de interfaces de usuario del lado de servidor para aplicaciones Web basadas en tecnologa Java.

Los dos componentes principales son:

Una librera 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 trminos
de componentes, eventos, backing beans y otras interacciones, en vez de hablar de peticiones, respuestas y marcas. facilidad de uso de las herramientas.

JSF promete reutilizacin, separacin de roles, JSF tiene una meta especfica: hacer el
desarrollo web ms rpido y fcil.

1. Qu es JSF?
JSF (en J2EE) es similar a ASP .NET:
Interfaz de usuario dirigida por eventos, Abstraccin del protocolo HTTP
Tienen correspondencia en JSF

HTML Controles en ASP .NET De validacin De servidor

2. En qu tecnologas se basa?
HTTP Servlets JavaBeans JSP

2. En qu tecnologas se basa?
Servlets
Ampla la funcionalidad del servidor Posterior al CGI API Java Se ejecuta en un contenedor de aplicaciones Hasta JSP, nico modo de generar pginas web dinmicas

2. En qu tecnologas 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 tecnologas se basa?
Servlets
Inconvenientes: Poco legible Mantenimiento costoso El diseador grfico 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 tecnologas se basa?
Java Server Pages (JSP)
Pginas HTML con scripts (por defecto Java) Se traduce a un servlet en la primera peticin Semnticamente equivalente a los servlets Facilitan el desarrollo y mantenimiento

2. En qu tecnologas se basa?
JSP 1.x (Ejemplo de programacin 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 tecnologas 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 tecnologas se basa?
JSP 1.x
Otras etiquetas estndar 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 tecnologas se basa?
JSP 1.x
Etiquetas de extensin Alternativa a los JavaBeans para encapsular la
lgica de negocio Componentes para la edicin web Para usar declarativamente la lgica de negocio Ejemplo:
<ssdd:enlace URL=index.jsp textoinicio/>

2. En qu tecnologas 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 tecnologas se basa?
JSP (Cdigo 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 tecnologas se basa?
JSP (Cdigo 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 tecnologas se basa?
JSP Standard Tag Library (JSTL)
Librera de etiquetas para JSP. No es parte de JSP ni JSF, los complementa Precursor: libreras de etiquetas de Struts Formado por 4 libreras: core: funciones script bsicas xml: procesamiento de xml fmt: internacionalizacin y formato sql: acceso a base de datos

2. En qu tecnologas 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 tecnologas se basa?
JSTL (Ejemplo sin scriptlets, con JSTL)
Librera bsica <%@ 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 tecnologas se basa?
JSP 2.0
Evolucin de JSP 1.2 Separacin completa de roles Todava se habla de cabeceras, sesin, Elementos principales: Lenguaje de expresiones (EL) Ficheros de etiquetas SimpleTag vs Tag Mejorada la sintaxis XML

2. En qu tecnologas 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 ${ <expresin> }

2. En qu tecnologas 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 tecnologas se basa?
JSP 2.0
Ficheros de etiquetas Escribir etiquetas slo con cdigo JSP Mecanismo de reutilizacin para autores de pginas Empaquetado de la aplicacin ms flexible
Etiquetas en /WEB-INF/tags TLD implcito
<%@ taglib prefix="..." tagdir="/WEB-INF/tags" %>

2. En qu tecnologas 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 tecnologas se basa?
JSP 2.0
La anterior API para definir nuevas etiquetas (Tag)
Tag attributes doStartTag() doEndTag() Tag body

doCatch()

release()

Tag handler

doInitBody()

Antes

doAfterBody()

doFinally()

2. En qu tecnologas se basa?
JSP 2.0
Nueva API para definir etiquetas (SimpleTag)
Tag attributes doTag() Tag body

Tag handler

(no scriptlets)

Ahora

2. En qu tecnologas 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 tecnologas se basa?

3. Los conceptos clave de la tecnologa

Componentes de interfaz de usuario Eventos Beans manejados Validadores Internacionalizacin y localizacin Conversores Navegacin

3. Los conceptos clave de la tecnologa

Los componentes de la interfaz de usuario

Son JavaBeans Se ejecutan en el lado del servidor Tienen estado Se organizan en rboles de vistas Representacin especfica: renderer Familia de representaciones: kits de renderer
taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@

3. Los conceptos clave de la tecnologa

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 tecnologa

Los componentes de la interfaz de usuario

Ejemplo (traduccin 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 tecnologa

Los componentes de la interfaz de usuario

Ejemplo (traduccin 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 tecnologa

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 tecnologa

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 tecnologa

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 tecnologa

Beans manejados (Managed beans)
Beans de respaldo (Backing beans) JavaBeans especializados Contienen datos de componentes UI, implementan

mtodos de oyentes de eventos Controlador en el Modelo Vista Controlador(MVC) Backing bean por pgina, formulario, Componente UI y backing bean estn sincronizados

Son backing beans que usan la facilidad Manager Bean Creation Facility

3. Los conceptos clave de la tecnologa

Beans Manejados (Managed Beans)

Ejemplo de declaracin (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 tecnologa

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 tecnologa

Validadores
Aseguran la correcta introduccin de valores Evitan escribir cdigo Java y/o Javascript JSF provee de validadores estndar Podemos crear validadores propios Generan mensajes de error 3 tipos: A nivel de componente UI Mtodos validadores en los backing beans (validator) Clases validadoras (etiqueta propia anidada)

3. Los conceptos clave de la tecnologa

Validadores:
Estndar 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 tecnologa

Internacionalizacin y localizacin
Internacionalizacin: habilidad de una aplicacin de soportar diferentes lenguajes dependiendo de la regin del planeta en que nos encontremos. Localizacin: El proceso de modificar una aplicacin para que soporte la lengua de una regin. JSF ofrece el soporte, no las traducciones El usuario indica su lengua mediante el navegador

3. Los conceptos clave de la tecnologa

Internacionalizacin y localizacin
Ejemplo (declaracin 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 tecnologa

Internacionalizacin y localizacin
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 tecnologa

Conversores
Convierten el valor de un componente desde y a una cadena Cada componente se asocia a un slo conversor El renderer lo usa para saber mostrar los datos JSF tiene definidos para fechas, nmeros, etc. Podemos crear los nuestros propios Tienen en cuenta la localizacin y formato

3. Los conceptos clave de la tecnologa

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 tecnologa

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 tecnologa

Navegacin
Habilidad de pasar de una pgina a la otra Lo controla el manejador de navegacin Correspondencia salida/pgina: caso de navegacin Hay que definir las reglas de navegacin

3. Los conceptos clave de la tecnologa

Navegacin
Ejemplo de declaracin (faces-config.xml):
Pgina 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> accin <navigation-case> <from-outcome>failure</from-outcome> <to-view-id>/login.jsp</to-view-id> </navigation-case> Pgina </navigation-rule>

destino

4. Integracin con otros frameworks

JSF con Struts

4. Integracin con otros frameworks

JSF con Spring e Hibernate

5. Resumen
JSF es una tecnologa 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 reutilizacin, separacin de roles, facilidad de uso y reducir el time-to-market Se puede combinar con otros frameworks para obtener un soporte ms 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/

Integracin de JSF, Spring e Hibernate para crear una Aplicacin

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/presentations /jsp20-jasig-2002.ppt