Jsf

2,478 views
2,408 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,478
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
91
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Jsf

  1. 1. Introducción JSF (Java Server Faces)
  2. 2. Temario <ul><li>Que es JSF </li></ul><ul><li>MVC en JSF </li></ul><ul><li>Ciclo de vida JSF </li></ul><ul><li>FacesContext </li></ul><ul><li>Lo nuevo de JSF 2 </li></ul><ul><li>Implementación JSF </li></ul>
  3. 3. Que es JSF <ul><li>Framework de componentes de usuario en el lado del servidor, para aplicaciones java basadas en entorno WEB. </li></ul><ul><li>Permite la construcción de aplicaciones como se realiza en Java Swing o .NET. </li></ul><ul><li>Implementa patrón MVC. </li></ul><ul><li>Compuesto por : </li></ul><ul><ul><li>Api java </li></ul></ul><ul><ul><li>Librerias de Tag </li></ul></ul><ul><ul><li>Faces Servlet </li></ul></ul><ul><ul><li>Archivo de configuración </li></ul></ul>
  4. 4. MVC en JSF (simple) Faces-config.xml Managed Bean XHTML 1 2 3 4
  5. 5. MVC en JSF <ul><li>Vista ( V ) </li></ul><ul><ul><li>JSP (JSF 1.0, 1.1, 1.2) - XHTML (JSF 2.0) </li></ul></ul><ul><ul><li>Tags JSF </li></ul></ul><ul><ul><li>Facelets </li></ul></ul><ul><ul><li>Validators </li></ul></ul><ul><ul><li>Converters </li></ul></ul><ul><li>Controlador ( C ) </li></ul><ul><ul><li>faces-config.xml </li></ul></ul><ul><li>Modelo ( M ) </li></ul><ul><ul><li>Managed Bean </li></ul></ul>
  6. 6. JSP Y XHTML en JSF (Vista) <ul><li>JSP (Java Server Pages). </li></ul><ul><li>XHTML surge como un lenguaje cuyo etiquetado es más estricto que HTML y se basa en XML </li></ul><ul><li>Ambas son compiladas y enviadas al browser como HTML </li></ul>
  7. 7. Tags <ul><li>Librerias de Tag predifinidos JSF </li></ul><ul><ul><li><%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %> </li></ul></ul><ul><ul><ul><li><h:outputText value= &quot;#{bean.propiedad}&quot;> </li></ul></ul></ul><ul><ul><ul><li><h:outputLink value= “http://www.google.cl&quot;> </li></ul></ul></ul><ul><ul><ul><li><h:inputText value= &quot;#{bean.email}&quot; id=&quot;email&quot;/> </li></ul></ul></ul><ul><ul><ul><li><h:commandButton action=&quot;#{bean.metodo}&quot; value=“Enviar&quot; /> </li></ul></ul></ul><ul><ul><li><%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %> </li></ul></ul><ul><ul><ul><li><f:view> </li></ul></ul></ul><ul><ul><ul><li><f:convertDateTime pattern= &quot;dd/MM/yyyy HH:mm:ss&quot;></f:convertDateTime> </li></ul></ul></ul><ul><ul><ul><li><f:ajax render= “div_repintar&quot; onevent=“jsBeginSuccessComplete&quot; execute=“idElemento&quot; event=&quot;click“ listener= &quot;#{bean.metodoAjax}&quot;/> (Desde JSF2) </li></ul></ul></ul><ul><li>Tag Personalizados </li></ul><ul><ul><li>Ejemplo: https://repo.imit.cl/svn/Desarrollo/BancoChile/src/BCHComponentesComunesInternet/trunk/ComponenteCajaDesafio/CajaDesafio </li></ul></ul>
  8. 8. Expresiones EL <ul><li>Lenguaje de expresiones sencillas para acceder a los JavaBeans </li></ul><ul><li>Es utilizado para </li></ul><ul><ul><li>Evaluación de expresiones </li></ul></ul><ul><ul><ul><li><h:outputText value= &quot;#{bean.propiedad}“ rendered=“#{bean.propiedad != null and bean.propiedad != ‘’}”> </li></ul></ul></ul><ul><ul><li>La capacidad de establecer, así como obtener datos </li></ul></ul><ul><ul><ul><li><h:outputText value= &quot;#{bean.propiedad}&quot;> </li></ul></ul></ul><ul><ul><li>La capacidad de invocar los métodos </li></ul></ul><ul><ul><ul><li><h:commandButton action=&quot;#{bean.metodo}&quot; value=“Enviar&quot; /> </li></ul></ul></ul>
  9. 9. Facelets (Vista) <ul><li>Framework para plantillas (templates) centrado en la tecnología JSF. </li></ul><ul><li>Desde JSF 2.0, forma parte de la especificación y es el utilizado por defecto. </li></ul>
  10. 10. Validators (Vista) <ul><li>Mecanismo que provee JSF para la validación de datos </li></ul><ul><li>Implementan javax.faces.validator.Validator </li></ul><ul><li>Se produce antes de que los valores se asignen al bean (actualización del modelo) y justo después realizadas las conversiones </li></ul><ul><li>Validadores pre-definidos y personalizados. </li></ul><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. 11. Converters (Vista) <ul><li>Mecanismo que provee JSF para la conversión de datos (String a Object o viceversa) </li></ul><ul><li>Implementan javax.faces.convert.Converter </li></ul><ul><li>Se ejecutan antes de la validación de los datos, (si no cumple - ConversionException) </li></ul><ul><li>Converters pre-definidos y Personalizados </li></ul>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. 12. Managed-bean (Modelo) <ul><li>Clases Java que se asocian con las paginas a través de sus propiedades(get y set) y métodos(action, ajax). </li></ul><ul><li>Gestionados por el contenedor JSF. </li></ul><ul><li>Definido en faces-config.xml(jsf 1.2 y 2). </li></ul><ul><li>Definido en misma clase con anotaciones @ManagedBean en JSF 2 </li></ul><ul><li>Definidos para distintos ámbitos (scope), tales como request, session o view(jsf 2) </li></ul>
  13. 13. Faces-config.xml (Controlador) <ul><li><?xml version= &quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?> </li></ul><ul><li><faces-config </li></ul><ul><li>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; </li></ul><ul><li>version= &quot;2.0&quot;> </li></ul><ul><li><managed-bean> </li></ul><ul><li><managed-bean-name>cartolaCtaCteBean</managed-bean-name> </li></ul><ul><li><managed-bean-class>cl.bch.internet.personas.ccol.beans.principal.CartolaCtaCteBean</managed-bean-class> </li></ul><ul><li><managed-bean-scope>request</managed-bean-scope> </li></ul><ul><li></managed-bean> </li></ul><ul><li><navigation-rule> </li></ul><ul><li><display-name> cartolas/ctacte/liquidacionInteresescrem.xhtml</display-name> </li></ul><ul><li><from-view-id>/ cartolas/ctacte/liquidacionInteresescrem.xhtml</from-view-id> </li></ul><ul><li><navigation-case> </li></ul><ul><li><from-outcome>error</from-outcome> </li></ul><ul><li><to-view-id>/BancodeChile.htm</to-view-id> </li></ul><ul><li></navigation-case> </li></ul><ul><li></navigation-rule> </li></ul><ul><li></faces-config> </li></ul>
  14. 14. Ciclo de vida JSF
  15. 15. FacesContext <ul><li>Clase que sirve de puente hacia el exterior </li></ul><ul><li>Permite acceder al contexto JSF (otros Beans) y al contexto HTTP (request que se ejecuta) </li></ul><ul><li>FacesContext ctx=FacesContext.getCurrentInstance(); </li></ul>
  16. 16. Lo nuevo de JSF 2 <ul><li>Utilización de anotaciones, (faces-config.xml prescindible) </li></ul><ul><li>Soporte nativo para Ajax </li></ul><ul><li>Definición de componentes utilizados por composición (Facelets). </li></ul><ul><li>Las ultimas 2 características NO están disponibles usando JSP. </li></ul>
  17. 17. Implementación JSF (Crear aplicación Web)
  18. 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. 19. Implementación JSF (agregar librerías comunes, Java Build Path) https:// repo.imit.cl/svn/Desarrollo/BancoChile/src/BCHComponentesComunesInternet/trunk/BCHCommonsLibraries
  20. 20. Implementación JSF (agregar librerías comunes, weblogic.xml)
  21. 21. <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns= &quot;http://www.w3.org/1999/xhtml&quot; </li></ul><ul><li>xmlns:ui= &quot;http://java.sun.com/jsf/facelets&quot; </li></ul><ul><li>xmlns:h= &quot;http://java.sun.com/jsf/html&quot; </li></ul><ul><li>xmlns:f= &quot;http://java.sun.com/jsf/core&quot;> </li></ul><ul><li><h:head> </li></ul><ul><li><title> Charla JSF</title> </li></ul><ul><li></h:head> </li></ul><ul><li><body> </li></ul><ul><li><h:form id= &quot;myformTalonario&quot; name=&quot;myformTalonario&quot;> </li></ul><ul><li><h:commandButton action= &quot;#{charlaBean.terminarCharla}&quot; value=&quot;Fin de Charla&quot; /> </li></ul><ul><li></h:form> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Implementación JSF (creación charla.xhtml)
  22. 22. <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns= &quot;http://www.w3.org/1999/xhtml&quot; </li></ul><ul><li>xmlns:ui= &quot;http://java.sun.com/jsf/facelets&quot; </li></ul><ul><li>xmlns:h= &quot;http://java.sun.com/jsf/html&quot; </li></ul><ul><li>xmlns:f= &quot;http://java.sun.com/jsf/core&quot;> </li></ul><ul><li><h:head> </li></ul><ul><li><title> Charla JSF</title> </li></ul><ul><li></h:head> </li></ul><ul><li><body> </li></ul><ul><li><table width= &quot;100%&quot; > </li></ul><ul><li><tr ><td align= &quot;center&quot; valign=&quot;middle&quot;> </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td> Curso: </td> </li></ul><ul><li><td><h:outputText value= &quot;#{charlaBean.charla}&quot;></h:outputText>: </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Expositor: </td> </li></ul><ul><li><td><h:outputText value= &quot;#{charlaBean.expositor}&quot;></h:outputText>: </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Asistentes: </td> </li></ul><ul><li><td><h:outputText value= &quot;#{charlaBean.asistentes}&quot;></h:outputText>: </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan= &quot;2&quot;><h:outputText value=&quot;#{charlaBean.gracias}&quot;></h:outputText>: </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></td></tr> </li></ul><ul><li></table> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Implementación JSF (creación fin_charla.xhtml)
  23. 23. <ul><li>package cl.imagemaker.bean; </li></ul><ul><li>public class CharlaBean { </li></ul><ul><li>private String charla; </li></ul><ul><li>private String expositor; </li></ul><ul><li>private String asistentes; </li></ul><ul><li>private String gracias; </li></ul><ul><li>public CharlaBean() { </li></ul><ul><li>} </li></ul><ul><li>public String terminarCharla(){ </li></ul><ul><li>this.setCharla(&quot;Charla introductoria JSF&quot;); </li></ul><ul><li>this.setExpositor(&quot;Pablo Munoz&quot;); </li></ul><ul><li>this.setAsistentes(&quot;Imagemaker&quot;); </li></ul><ul><li>this.setGracias(&quot;Muchas gracias, por asistir&quot;); </li></ul><ul><li>return &quot;ok&quot;; </li></ul><ul><li>} </li></ul><ul><li>public String getCharla() {return charla;} </li></ul><ul><li>public void setCharla(String charla) {this.charla = charla;} </li></ul><ul><li>public String getExpositor() {return expositor;} </li></ul><ul><li>public void setExpositor(String expositor) {this.expositor = expositor;} </li></ul><ul><li>public String getAsistentes() {return asistentes;} </li></ul><ul><li>public void setAsistentes(String asistentes) {this.asistentes = asistentes;} </li></ul><ul><li>public String getGracias() {return gracias;} </li></ul><ul><li>public void setGracias(String gracias) {this.gracias = gracias;} </li></ul><ul><li>} </li></ul>Implementación JSF ( creación CharlaBean.java )
  24. 24. <ul><li><?xml version= &quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><faces-config </li></ul><ul><li>xmlns= &quot;http://java.sun.com/xml/ns/javaee&quot; </li></ul><ul><li>xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; </li></ul><ul><li>xsi:schemaLocation= &quot;http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd&quot; </li></ul><ul><li>version= &quot;2.0&quot;> </li></ul><ul><li><managed-bean> </li></ul><ul><li><managed-bean-name>charlaBean</managed-bean-name> </li></ul><ul><li><managed-bean-class>cl.imagemaker.bean.CharlaBean</managed-bean-class> </li></ul><ul><li><managed-bean-scope>request</managed-bean-scope> </li></ul><ul><li></managed-bean> </li></ul><ul><li><navigation-rule> </li></ul><ul><li><display-name>charla.xhtml</display-name> </li></ul><ul><li><from-view-id>/charla.xhtml</from-view-id> </li></ul><ul><li><navigation-case> </li></ul><ul><li><from-outcome> ok</from-outcome> </li></ul><ul><li><to-view-id>/fin_charla.xhtml</to-view-id> </li></ul><ul><li></navigation-case> </li></ul><ul><li></navigation-rule> </li></ul><ul><li></faces-config> </li></ul>Implementación JSF ( faces-config.xml )
  25. 25. Introducción JSF <ul><li>FIN </li></ul>

×