Java Server Faces

1. Java Server Faces

2. 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.

3. 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" %>

4. 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.

5. 1. ¿Qué es JSF? • JSF (en J2EE) es similar a ASP .NET: • Interfaz de usuario dirigida por eventos, • Abstracción del protocolo HTTP Tienen correspondencia en JSF HTML Controles en ASP .NET De validación De servidor

6. 2. ¿En qué tecnologías se basa? • HTTP • Servlets • JavaBeans • JSP

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

8. 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>");

9. 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

10. 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

11. 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>

12. 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>

13. 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” />

14. 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”/>

15. 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>

16. 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; } }

17. 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; } }

18. 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

19. 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/> <% } } %>

20. 2. ¿En qué tecnologías se basa? • 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/> Librería básica Etiqueta Iterador Lenguaje de expresiones

21. 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

22. 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> }

23. Con EL Sin EL 2. ¿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}

24. 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" %>

25. 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>

26. Tag handler doStartTag() doEndTag() Tag body Tag attributes  doInitBody() doAfterBody() doCatch() doFinally() release() Antes 2. ¿En qué tecnologías se basa? • JSP 2.0 • La anterior API para definir nuevas etiquetas (Tag)

27. Tag handler doTag() Tag body (no scriptlets) Tag attributes  Ahora 2. ¿En qué tecnologías se basa? • JSP 2.0 • Nueva API para definir etiquetas (SimpleTag)

28. 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">

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

30. 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

31. 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" %>

32. 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…”/>

33. 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"/>

34. 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" />

35. 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

36. 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); }

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

38. 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

39. 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>

40. Utiliza EL parecido al de JSP 2.0 3. Los conceptos clave de la tecnología • Beans Manejados (Managed Beans) • Ejemplo de uso: <h:outputText id="helloBeanOutput" value=“#{helloBean.numControls}“ />

41. 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)

42. 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>

43. 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

44. 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>

45. 3. Los conceptos clave de la tecnología • Internacionalización y localización • Ejemplo (resource bundles y uso): <f:loadBundle basename="LocalizationResources" var="bundle"/> <h:outputText value="#{bundle.halloween}"/>

46. 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

47. Conversores no predefinidos 3. Los conceptos clave de la tecnología • 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

48. 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

49. 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

50. Página origen acción Página destino 3. Los conceptos clave de la tecnología • 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