Java Server Faces

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

Controles en ASP .NET

De servidor

HTML

De validación

Tienencorrespondencia

en JSF

2. ¿En qué tecnologías se basa?

• HTTP

• Servlets

• JavaBeans

• JSP


• 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


• 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>");


• 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


• 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


• 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>


• 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>


• 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” />


• 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”/>


• 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>


• 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;

}}


• 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;

}}


• 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


• 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/><% } } %>


• JSTL (Ejemplo sin scriptlets, con JSTL)

<%@ 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><c:otherwise>

N/A<br/></c:otherwise>

</c:choose><br/></c:forEach><br/>

Etiqueta

Iterador

Librería básica

Lenguaje de expresiones


• 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


• 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> }


• 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


• 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" %>


• 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 handler

doStartTag() doEndTag()

doCatch() doFinally()

Tagattributes

Tagbody

doInitBody()

doAfterBody()

release()

Antes


• JSP 2.0• Nueva API para definir etiquetas (SimpleTag)

Tag handler

Tagattributes

Tagbody

(no scriptlets)

doTag()

Ahora


• 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">

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


• 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" %>


• 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…”/>


• 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"/>


• 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" />


• 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


• Eventos• Ejemplo: value-change event

<h:inputTextvalueChangeListener=“#{myForm.processValueChanged}“

/>

public void processValueChanged(ValueChangeEvent event){ HtmlInputText sender = (HtmlInputText)event.getComponent(); sender.setReadonly(true); changePanel.setRendered(true);}


• 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!");}


• 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


• Beans Manejados (Managed Beans)• Ejemplo de declaración (faces-config.xml):

<managed-bean><managed-bean>

<managed-bean-name>helloBean</managed-bean-name><managed-bean-name>helloBean</managed-bean-name>

<managed-bean-class><managed-bean-class>

com.virtua.jsf.sample.hello.HelloBeancom.virtua.jsf.sample.hello.HelloBean

</managed-bean-class></managed-bean-class>

<managed-bean-scope><managed-bean-scope>

sessionsession

</managed-bean-scope></managed-bean-scope>

</managed-bean></managed-bean>


• Beans Manejados (Managed Beans)• Ejemplo de uso:

<h:outputText id="helloBeanOutput"

value=“#{helloBean.numControls}“

/>

Utiliza EL parecido al de JSP 2.0


• 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)


• 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>


• 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


• 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>


• 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.halloween=Every day is like Halloween.numberOfVisits=You have visited us {0} time(s), {1}. Rock on!numberOfVisits=You have visited us {0} time(s), {1}. Rock on!toggleLocale=Translate to SpanishtoggleLocale=Translate to SpanishhelloImage=../images/hello.gifhelloImage=../images/hello.gif

<h:outputText value="#{bundle.halloween}"/><h:outputText value="#{bundle.halloween}"/>


• 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


• 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

Conversores no predefinidos


• Conversores• Ejemplo (conversor predefinido):

<h:outputText value="#{user.dateOfBirth}">

<f:convertDateTime type="date" dateStyle="short"/>

</h:outputText>

18/03/0618/03/0603/18/0603/18/06


• 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


• Navegación– 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> o

Página origen

Página destino

acción

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/XSLThttp://www.theserverside.com/articles/article.tss?l=BestBothWorlds

• JSF KickStart: A Simple JavaServer Faces Applicationhttp://www.programacion.com/java/tutorial/jap_jsfwork/

• Integración de JSF, Spring e Hibernate para crear una Aplicación Web del Mundo Realhttp://www.exadel.com/tutorial/jsf/jsftutorial-kickstart.html

• JSP 2.0 and JSTL: Principles and Patternsweb.princeton.edu/sites/isapps/jasig/2002WinterOrlando/presentations/jsp20-jasig-2002.ppt

http://www.theserverside.com/articles/article.tss?l=BestBothWorlds

http://www.programacion.com/java/tutorial/jap_jsfwork/

http://www.exadel.com/tutorial/jsf/jsftutorial-kickstart.html

http://web.princeton.edu/sites/isapps/jasig/2002WinterOrlando/presentations/jsp20-jasig-2002.ppt

http://web.princeton.edu/sites/isapps/jasig/2002WinterOrlando/presentations/jsp20-jasig-2002.ppt

Java Server Faces

Documents

Transcript of Java Server Faces