jsf
TRANSCRIPT
Introducción JSF(Java Server Faces)
Temario
• Que es JSF• MVC en JSF• Ciclo de vida JSF• FacesContext• Lo nuevo de JSF 2• Implementación JSF
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
MVC en JSF (simple)
Faces-config.xml
Managed Bean
XHTML
1
23
4
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
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
Tags
• Librerias de Tag predifinidos JSF– <%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %>
• <h:outputText value="#{bean.propiedad}">• <h:outputLink value=“http://www.google.cl">• <h:inputText value="#{bean.email}" id="email"/>• <h:commandButton action="#{bean.metodo}" value=“Enviar" />
– <%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %>• <f:view>• <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"></f:convertDateTime>• <f:ajax render=“div_repintar" onevent=“jsBeginSuccessComplete"
execute=“idElemento" event="click“ listener="#{bean.metodoAjax}"/> (Desde JSF2)
• Tag Personalizados– Ejemplo:
https://repo.imit.cl/svn/Desarrollo/BancoChile/src/BCHComponentesComunesInternet/trunk/ComponenteCajaDesafio/CajaDesafio
Expresiones EL
• Lenguaje de expresiones sencillas para acceder a los JavaBeans
• Es utilizado para– Evaluación de expresiones
• <h:outputText value="#{bean.propiedad}“ rendered=“#{bean.propiedad != null and bean.propiedad != ‘’}”>
– La capacidad de establecer, así como obtener datos• <h:outputText value="#{bean.propiedad}">
– La capacidad de invocar los métodos• <h:commandButton action="#{bean.metodo}" value=“Enviar" />
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.
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="textoFin" value="#{charlaBean.textoFin}"> <f:validateLength minimum="1" maximum="10"></f:validateLength> </h:inputText><h:message for="textoFin"></h:message>
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="#{charlaBean.fecha}"> <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="Chile/Continental"></f:convertDateTime></h:outputText>
BEANpublic class CharlaBean {private Date fecha;……
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)
Faces-config.xml (Controlador)<?xml version="1.0" encoding="ISO-8859-1"?><faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
http://www.w3.org/2001/XMLSchema-instance xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0"><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>
Ciclo de vida JSF
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();
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.
Implementación JSF (Crear aplicación Web)
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
Implementación JSF (agregar librerías comunes, Java Build Path)
https://repo.imit.cl/svn/Desarrollo/BancoChile/src/BCHComponentesComunesInternet/trunk/BCHCommonsLibraries
Implementación JSF (agregar librerías comunes, weblogic.xml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Charla JSF</title> </h:head><body> <h:form id="myformTalonario" name="myformTalonario"> <h:commandButton action="#{charlaBean.terminarCharla}" value="Fin de Charla" /> </h:form></body></html>
Implementación JSF (creación charla.xhtml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Charla JSF</title> </h:head><body><table width="100%" ><tr ><td align="center" valign="middle"> <table><tr><td>Curso: </td><td><h:outputText value="#{charlaBean.charla}"></h:outputText>: </td></tr><tr><td>Expositor: </td><td><h:outputText value="#{charlaBean.expositor}"></h:outputText>: </td></tr><tr><td>Asistentes: </td><td><h:outputText value="#{charlaBean.asistentes}"></h:outputText>: </td></tr><tr><td colspan="2"><h:outputText value="#{charlaBean.gracias}"></h:outputText>: </td></tr> </table></td></tr></table></body></html>
Implementación JSF (creación fin_charla.xhtml)
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("Charla introductoria JSF");this.setExpositor("Pablo Munoz");this.setAsistentes("Imagemaker");this.setGracias("Muchas gracias, por asistir");return "ok";}
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)
Implementación JSF (faces-config.xml)
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" version="2.0">
<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>
Introducción JSF
FIN