Java Server Faces.

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=" 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 Tienen correspondencia en JSF HTML Controles en ASP .NET De validación De servidor

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=“ F” />

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%>"> <td with="20%“ align="center"><%=identificador%></td> <td with="50%" align="center"><%=nombre%></td> <td with="30%" align="center"><%=correo%></td> </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());

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

Librería básica JSTL (Ejemplo sin scriptlets, con JSTL) taglib prefix="c"uri=" %> <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

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} Sin EL Con 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>

JSP 2.0 La anterior API para definir nuevas etiquetas (Tag) Tag handler  doStartTag() doEndTag() doCatch() doFinally() Tag attributes body doInitBody() doAfterBody() release() Antes

JSP 2.0 Nueva API para definir etiquetas (SimpleTag) Tag handler  Tag attributes body (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=" xmlns:c="

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=" 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:inputText valueChangeListener=“#{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-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>

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. numberOfVisits=You have visited us {0} time(s), {1}. Rock on! toggleLocale=Translate to Spanish helloImage=../images/hello.gif <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> 03/18/06 18/03/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> <from-outcome>failure</from-outcome> <to-view-id>/login.jsp</to-view-id> </navigation-rule> o Página origen acción Página 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 JSF KickStart: A Simple JavaServer Faces Application Integración de JSF, Spring e Hibernate para crear una Aplicación Web del Mundo Real JSP 2.0 and JSTL: Principles and Patterns web.princeton.edu/sites/isapps/jasig/2002WinterOrlando/presentations/jsp20-jasig-2002.ppt

Java Server Faces.

Presentaciones similares

Presentación del tema: "Java Server Faces."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Java Server Faces.

Presentaciones similares

Presentación del tema: "Java Server Faces."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback