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

Contenidos 1111. ¿Qué es JSF? 2222. ¿En qué tecnologías se basa? 3333. Los conceptos clave de la tecnología 4444. Integración con otros frameworks 5555. Resumen 666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 JSPUna librería de etiquetas para JSP Una API para manejo de eventos, validadores, etc.Una API para manejo de eventos, validadores, etc.  

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,Interfaz de usuario dirigida por eventos, Abstracción del protocolo HTTPAbstracción del protocolo HTTP Controles en ASP.NET De servidor HTML De validación Tienen correspondencia en JSF

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

2. ¿En qué tecnologías se basa?  Servlets Amplía la funcionalidad del servidorAmplía la funcionalidad del servidor Posterior al CGIPosterior al CGI API JavaAPI Java Se ejecuta en un contenedor de aplicacionesSe ejecuta en un contenedor de aplicaciones Hasta JSP, único modo de generar páginas web dinámicasHasta JSP, único modo de generar páginas web dinámicas

2. ¿En qué tecnologías se basa?  Servlets (ejemplo) MyTableData tableData = MyDAO.queryData(); PrintWriter writer = response.getWriter(); writer.println(" "); for (int i=0; i<tableData.getData().length; i++){ writer.println("<tr>"); writer.println(" "); writer.println(tableData.getData()[i]); writer.println(" "); writer.println("</tr>");}writer.println("</table>");

2. ¿En qué tecnologías se basa?  Servlets Inconvenientes:Inconvenientes:  Poco legible  Mantenimiento costoso  El diseñador gráfico debe saber Java  A cada cambio: recompilar, empaquetar, desplegar. Uso actual de los servlets:Uso actual de los servlets:  Controlador en la arquitectura MVC  Preprocesamiento de peticiones

2. ¿En qué tecnologías se basa?  Java Server Pages (JSP) Páginas HTML con scripts (por defecto Java)Páginas HTML con scripts (por defecto Java) Se traduce a un servlet en la primera peticiónSe traduce a un servlet en la primera petición Semánticamente equivalente a los servletsSemánticamente equivalente a los servlets Facilitan el desarrollo y mantenimientoFacilitan el desarrollo y mantenimiento

2. ¿En qué tecnologías se basa?  JSP 1.x (Ejemplo de programación en sus inicios) <% MyTableData tableData = MyDAO.queryData(); %> <% for (int i = 0; i < tableData.getData().length; i++) { %> </table>

2. ¿En qué tecnologías se basa?  JSP 1.x Facilidad para manejo de JavaBeansFacilidad para manejo de JavaBeans <input type=“text” name=“nombre” value=“ <input type=“text” name=“nombre” value=“ “/> “/></form></jsp:useBean>

2. ¿En qué tecnologías se basa?  JSP 1.x Otras etiquetas estándar de JSPOtras etiquetas estándar de JSP <jsp:forward page=“registro.jsp” <jsp:include page=“/servlet/ServletCookie” flush=“true” /> flush=“true” /> <jsp:setProperty name=“cliente” property=“nif” <jsp:setProperty name=“cliente” property=“nif” value=“ F” /> value=“ F” />

2. ¿En qué tecnologías se basa?  JSP 1.x Etiquetas de extensiónEtiquetas 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:

2. ¿En qué tecnologías se basa?  JSP 1.x (Ejemplo de una nueva etiqueta) <tr> Usuario Usuario Nombre Nombre Correo Correo </tr> "> "><tr> </tr></ssdd:listaUsuarios></table>

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

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

2. ¿En qué tecnologías se basa?  JSP Standard Tag Library (JSTL) Librería de etiquetas para JSP.Librería de etiquetas para JSP. No es parte de JSP ni JSF, los complementaNo es parte de JSP ni JSF, los complementa Precursor: librerías de etiquetas de StrutsPrecursor: librerías de etiquetas de Struts Formado por 4 librerías: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

2. ¿En qué tecnologías se basa?  JSTL (Ejemplo con scriptlets, sin JSTL) <% 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é tecnologías se basa?  JSTL (Ejemplo sin scriptlets, con JSTL) <c:choose> </c:when><c:otherwise>N/A<br/></c:otherwise></c:choose><br/></c:forEach><br/> Etiqueta Iterador Librería básica Lenguaje de expresiones

2. ¿En qué tecnologías se basa?  JSP 2.0 Evolución de JSP 1.2Evolución de JSP 1.2 Separación completa de rolesSeparación completa de roles Todavía se habla de cabeceras, sesión, …Todavía se habla de cabeceras, sesión, … Elementos principales:Elementos principales:  Lenguaje de expresiones (EL)  Ficheros de etiquetas  SimpleTag vs Tag  Mejorada la sintaxis XML

2. ¿En qué tecnologías se basa?  JSP 2.0 Lenguaje de expresiones (EL)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  ${ }

2. ¿En qué tecnologías se basa?  JSP 2.0 Ejemplos de ELEjemplos de EL ((Duck) pageContext.getAttribute(”duck”)).getBeakColor()  ${duck.beakColor}  ${foo.bar} Con EL Sin EL

2. ¿En qué tecnologías se basa?  JSP 2.0 Ficheros de etiquetasFicheros 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  

2. ¿En qué tecnologías se basa?  JSP 2.0 Ejemplo de fichero de etiqueta.Ejemplo de fichero de etiqueta. Name IQ Name IQ ${i.fullName} ${i.fullName} ${i.IQ} ${i.IQ} </table>

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

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

2. ¿En qué tecnologías se basa?  JSP 2.0 Mejorada la sintaxis XMLMejorada la sintaxis XML Antes: JSP como documento  Antes: JSP como documento  Ahora: JSP como espacio de nombres  <html xmlns:util=" xmlns:c="

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

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

3. Los conceptos clave de la tecnología  Los componentes de la interfaz de usuario Son JavaBeansSon JavaBeans Se ejecutan en el lado del servidorSe ejecutan en el lado del servidor Tienen estadoTienen estado Se organizan en árboles de vistasSe organizan en árboles de vistas Representación específica: rendererRepresentación específica: renderer Familia de representaciones: kits de rendererFamilia de representaciones: kits de renderer

3. Los conceptos clave de la tecnología  Los componentes de la interfaz de usuario

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)Ejemplo (traducción de JSF a HTML) (1 de 2) Enter address: <h:inputText id="useraddress" value="#{jsfexample.address}" required="true"/>

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)Ejemplo (traducción de JSF a HTML) (2 de 2) Enter address: Enter address: Validation Error: Value is required. Validation Error: Value is required.

3. Los conceptos clave de la tecnología  Eventos Los componentes UI generan eventosLos componentes UI generan eventos Los listeners se implementan en backing beans o clases aparteLos listeners se implementan en backing beans o clases aparte 4 tipos:4 tipos:  Value-change events  Action events  Data model events  Phase events

3. Los conceptos clave de la tecnología  Eventos Ejemplo: value-change eventEjemplo: value-change event<h:inputTextvalueChangeListener=“#{myForm.processValueChanged}“/> public void processValueChanged(ValueChangeEvent event){ HtmlInputText sender = (HtmlInputText)event.getComponent(); HtmlInputText sender = (HtmlInputText)event.getComponent(); sender.setReadonly(true); sender.setReadonly(true); changePanel.setRendered(true); changePanel.setRendered(true);}

3. Los conceptos clave de la tecnología  Eventos Ejemplo: action eventEjemplo: action event <h:commandButton id="redisplayCommand" type="submit" value="Redisplay" actionListener="#{myForm.doIt}“/> public void doIt(ActionEvent event){ HtmlCommandButton button = HtmlCommandButton button = (HtmlCommandButton)event.getComponent(); (HtmlCommandButton)event.getComponent(); button.setValue("It's done!"); button.setValue("It's done!");}

3. Los conceptos clave de la tecnología  Beans manejados (Managed beans) Beans de respaldo (Backing 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 FacilitySon backing beans que usan la facilidad Manager Bean Creation Facility

3. Los conceptos clave de la tecnología  Beans Manejados (Managed Beans) Ejemplo de declaración (faces-config.xml):Ejemplo de declaración (faces-config.xml): <managed-bean> helloBean helloBean com.virtua.jsf.sample.hello.HelloBean com.virtua.jsf.sample.hello.HelloBean session session </managed-bean>

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

3. Los conceptos clave de la tecnología  Validadores Aseguran la correcta introducción de valoresAseguran la correcta introducción de valores Evitan escribir código Java y/o JavascriptEvitan escribir código Java y/o Javascript JSF provee de validadores estándarJSF provee de validadores estándar Podemos crear validadores propiosPodemos crear validadores propios Generan mensajes de errorGeneran mensajes de error 3 tipos:3 tipos:  A nivel de componente UI  Métodos validadores en los backing beans ( validator )  Clases validadoras (etiqueta propia anidada)

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 decimalesEstándar de JSF: campo con valor requerido, validadores de la longitud de una cadena, y validadores de rango para enteros y decimales Ejemplos:Ejemplos: <h:inputText id="userNumber“ valuevalue="#{NumberBean.userNumber}” required=“true”/><h:inputText> </h:inputText>

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.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.Localización: El proceso de modificar una aplicación para que soporte la lengua de una región. JSF ofrece el soporte, no las traduccionesJSF ofrece el soporte, no las traducciones El usuario indica su lengua mediante el navegadorEl usuario indica su lengua mediante el navegador

3. Los conceptos clave de la tecnología  Internacionalización y localización Ejemplo (declaración en faces-config.xml):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>

3. Los conceptos clave de la tecnología  Internacionalización y localización Ejemplo (resource bundles y uso):Ejemplo (resource bundles y uso): 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

3. Los conceptos clave de la tecnología  Conversores Convierten el valor de un componente desde y a una cadenaConvierten el valor de un componente desde y a una cadena Cada componente se asocia a un sólo conversorCada componente se asocia a un sólo conversor El renderer lo usa para saber mostrar los datosEl renderer lo usa para saber mostrar los datos JSF tiene definidos para fechas, números, etc.JSF tiene definidos para fechas, números, etc. Podemos crear los nuestros propiosPodemos crear los nuestros propios Tienen en cuenta la localización y formatoTienen en cuenta la localización y formato

3. Los conceptos clave de la tecnología  Conversores Muestran un error si la entrada no es correctaMuestran un error si la entrada no es correcta Por defecto JSF asigna uno adecuadoPor defecto JSF asigna uno adecuado Se pueden definir de 4 formas:Se pueden definir de 4 formas:  Etiqueta propia anidada en la del componente  En la etiqueta del componente con converter  Etiqueta anidada  Etiquetas predefinidas (otras) anidadas Conversores no predefinidos

3. Los conceptos clave de la tecnología  Conversores Ejemplo (conversor predefinido):Ejemplo (conversor predefinido): </h:outputText> 18/03/0603/18/06

3. Los conceptos clave de la tecnología  Navegación Habilidad de pasar de una página a la otraHabilidad de pasar de una página a la otra Lo controla el manejador de navegaciónLo controla el manejador de navegación Correspondencia salida/página: caso de navegaciónCorrespondencia salida/página: caso de navegación Hay que definir las reglas de navegaciónHay que definir las reglas de navegación

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> o 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  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/presentat ions/jsp20-jasig-2002.ppt web.princeton.edu/sites/isapps/jasig/2002WinterOrlando/presentat ions/jsp20-jasig-2002.ppt