1 / 54

Java Server Faces

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

maitland
Download Presentation

Java Server Faces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Java Server Faces El siguiente paso en el desarrollo web Óscar Sánchez Ramón. SSDD. Curso 05/06

  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? Librería básica • 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 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

More Related