JSF es un framework de componentes para construir aplicaciones web basadas en Java. Implementa el patrón MVC. La vista se define mediante JSP o XHTML y se vincula a los managed beans que representan el modelo a través de EL. JSF provee tags, validadores, conversores y otros elementos para la interacción con el usuario.

1. Introducción JSF (Java Server Faces)

2. Temario Que es JSF MVC en JSF Ciclo de vida JSF FacesContext Lo nuevo de JSF 2 Implementación JSF

3. Que es JSF Framework de componentes de usuario en el lado del servidor, para aplicaciones java basadas en entorno WEB. Permite la construcción de aplicaciones como se realiza en Java Swing o .NET. Implementa patrón MVC. Compuesto por : Api java Librerias de Tag Faces Servlet Archivo de configuración

4. MVC en JSF (simple) Faces-config.xml Managed Bean XHTML 1 2 3 4

5. MVC en JSF Vista ( V ) JSP (JSF 1.0, 1.1, 1.2) - XHTML (JSF 2.0) Tags JSF Facelets Validators Converters Controlador ( C ) faces-config.xml Modelo ( M ) Managed Bean

6. JSP Y XHTML en JSF (Vista) JSP (Java Server Pages). XHTML surge como un lenguaje cuyo etiquetado es más estricto que HTML y se basa en XML Ambas son compiladas y enviadas al browser como HTML

7. Tags Librerias de Tag predifinidos JSF <%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %> <h:outputText value= &quot;#{bean.propiedad}&quot;> <h:outputLink value= “http://www.google.cl&quot;> <h:inputText value= &quot;#{bean.email}&quot; id=&quot;email&quot;/> <h:commandButton action=&quot;#{bean.metodo}&quot; value=“Enviar&quot; /> <%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %> <f:view> <f:convertDateTime pattern= &quot;dd/MM/yyyy HH:mm:ss&quot;></f:convertDateTime> <f:ajax render= “div_repintar&quot; onevent=“jsBeginSuccessComplete&quot; execute=“idElemento&quot; event=&quot;click“ listener= &quot;#{bean.metodoAjax}&quot;/> (Desde JSF2) Tag Personalizados Ejemplo: https://repo.imit.cl/svn/Desarrollo/BancoChile/src/BCHComponentesComunesInternet/trunk/ComponenteCajaDesafio/CajaDesafio

8. Expresiones EL Lenguaje de expresiones sencillas para acceder a los JavaBeans Es utilizado para Evaluación de expresiones <h:outputText value= &quot;#{bean.propiedad}“ rendered=“#{bean.propiedad != null and bean.propiedad != ‘’}”> La capacidad de establecer, así como obtener datos <h:outputText value= &quot;#{bean.propiedad}&quot;> La capacidad de invocar los métodos <h:commandButton action=&quot;#{bean.metodo}&quot; value=“Enviar&quot; />

9. Facelets (Vista) Framework para plantillas (templates) centrado en la tecnología JSF. Desde JSF 2.0, forma parte de la especificación y es el utilizado por defecto.

10. Validators (Vista) Mecanismo que provee JSF para la validación de datos Implementan javax.faces.validator.Validator Se produce antes de que los valores se asignen al bean (actualización del modelo) y justo después realizadas las conversiones Validadores pre-definidos y personalizados. <h:inputText id= &quot;textoFin&quot; value=&quot;#{charlaBean.textoFin}&quot;> <f:validateLength minimum= &quot;1&quot; maximum=&quot;10&quot;></f:validateLength> </h:inputText> <h:message for= &quot;textoFin&quot;></h:message>

11. Converters (Vista) Mecanismo que provee JSF para la conversión de datos (String a Object o viceversa) Implementan javax.faces.convert.Converter Se ejecutan antes de la validación de los datos, (si no cumple - ConversionException) Converters pre-definidos y Personalizados XHTML <h:outputText value= &quot;#{charlaBean.fecha}&quot;> <f:convertDateTime pattern= &quot;dd/MM/yyyy HH:mm:ss&quot; timeZone=&quot;Chile/Continental&quot;></f:convertDateTime> </h:outputText> BEAN public class CharlaBean { private Date fecha; ……

12. Managed-bean (Modelo) Clases Java que se asocian con las paginas a través de sus propiedades(get y set) y métodos(action, ajax). Gestionados por el contenedor JSF. Definido en faces-config.xml(jsf 1.2 y 2). Definido en misma clase con anotaciones @ManagedBean en JSF 2 Definidos para distintos ámbitos (scope), tales como request, session o view(jsf 2)

13. Faces-config.xml (Controlador) <?xml version= &quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?> <faces-config xmlns= &quot;http://java.sun.com/xml/ns/javaee&quot; xmlns:xsi= http://www.w3.org/2001/XMLSchema-instance xsi:schemaLocation= &quot;http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd&quot; version= &quot;2.0&quot;> <managed-bean> <managed-bean-name>cartolaCtaCteBean</managed-bean-name> <managed-bean-class>cl.bch.internet.personas.ccol.beans.principal.CartolaCtaCteBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <display-name> cartolas/ctacte/liquidacionInteresescrem.xhtml</display-name> <from-view-id>/ cartolas/ctacte/liquidacionInteresescrem.xhtml</from-view-id> <navigation-case> <from-outcome>error</from-outcome> <to-view-id>/BancodeChile.htm</to-view-id> </navigation-case> </navigation-rule> </faces-config>

14. Ciclo de vida JSF

15. FacesContext Clase que sirve de puente hacia el exterior Permite acceder al contexto JSF (otros Beans) y al contexto HTTP (request que se ejecuta) FacesContext ctx=FacesContext.getCurrentInstance();

16. Lo nuevo de JSF 2 Utilización de anotaciones, (faces-config.xml prescindible) Soporte nativo para Ajax Definición de componentes utilizados por composición (Facelets). Las ultimas 2 características NO están disponibles usando JSP.

17. Implementación JSF (Crear aplicación Web)

18. Implementación JSF (faces-config.xml) WEB-INF/web.xml <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*. xhtml</url-pattern> </servlet-mapping> WEB_INF/faces-config.xml

19. Implementación JSF (agregar librerías comunes, Java Build Path) https:// repo.imit.cl/svn/Desarrollo/BancoChile/src/BCHComponentesComunesInternet/trunk/BCHCommonsLibraries

20. Implementación JSF (agregar librerías comunes, weblogic.xml)

21. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns= &quot;http://www.w3.org/1999/xhtml&quot; xmlns:ui= &quot;http://java.sun.com/jsf/facelets&quot; xmlns:h= &quot;http://java.sun.com/jsf/html&quot; xmlns:f= &quot;http://java.sun.com/jsf/core&quot;> <h:head> <title> Charla JSF</title> </h:head> <body> <h:form id= &quot;myformTalonario&quot; name=&quot;myformTalonario&quot;> <h:commandButton action= &quot;#{charlaBean.terminarCharla}&quot; value=&quot;Fin de Charla&quot; /> </h:form> </body> </html> Implementación JSF (creación charla.xhtml)

22. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns= &quot;http://www.w3.org/1999/xhtml&quot; xmlns:ui= &quot;http://java.sun.com/jsf/facelets&quot; xmlns:h= &quot;http://java.sun.com/jsf/html&quot; xmlns:f= &quot;http://java.sun.com/jsf/core&quot;> <h:head> <title> Charla JSF</title> </h:head> <body> <table width= &quot;100%&quot; > <tr ><td align= &quot;center&quot; valign=&quot;middle&quot;> <table> <tr> <td> Curso: </td> <td><h:outputText value= &quot;#{charlaBean.charla}&quot;></h:outputText>: </td> </tr> <tr> <td> Expositor: </td> <td><h:outputText value= &quot;#{charlaBean.expositor}&quot;></h:outputText>: </td> </tr> <tr> <td> Asistentes: </td> <td><h:outputText value= &quot;#{charlaBean.asistentes}&quot;></h:outputText>: </td> </tr> <tr> <td colspan= &quot;2&quot;><h:outputText value=&quot;#{charlaBean.gracias}&quot;></h:outputText>: </td> </tr> </table> </td></tr> </table> </body> </html> Implementación JSF (creación fin_charla.xhtml)

23. package cl.imagemaker.bean; public class CharlaBean { private String charla; private String expositor; private String asistentes; private String gracias; public CharlaBean() { } public String terminarCharla(){ this.setCharla(&quot;Charla introductoria JSF&quot;); this.setExpositor(&quot;Pablo Munoz&quot;); this.setAsistentes(&quot;Imagemaker&quot;); this.setGracias(&quot;Muchas gracias, por asistir&quot;); return &quot;ok&quot;; } public String getCharla() {return charla;} public void setCharla(String charla) {this.charla = charla;} public String getExpositor() {return expositor;} public void setExpositor(String expositor) {this.expositor = expositor;} public String getAsistentes() {return asistentes;} public void setAsistentes(String asistentes) {this.asistentes = asistentes;} public String getGracias() {return gracias;} public void setGracias(String gracias) {this.gracias = gracias;} } Implementación JSF ( creación CharlaBean.java )

24. <?xml version= &quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <faces-config xmlns= &quot;http://java.sun.com/xml/ns/javaee&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd&quot; version= &quot;2.0&quot;> <managed-bean> <managed-bean-name>charlaBean</managed-bean-name> <managed-bean-class>cl.imagemaker.bean.CharlaBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <display-name>charla.xhtml</display-name> <from-view-id>/charla.xhtml</from-view-id> <navigation-case> <from-outcome> ok</from-outcome> <to-view-id>/fin_charla.xhtml</to-view-id> </navigation-case> </navigation-rule> </faces-config> Implementación JSF ( faces-config.xml )

25. Introducción JSF FIN