Javaserver faces (jsf)

1. JAVASERVER FACES
(JSF)
NATALIA HERRERA REY
DANIEL OCHOA
WILLIAM MUNEVAR
ENRIQUE ALCOCER

2. TEMARIO
● ¿Qué es una aplicación JavaServer Faces?
● Versiones
● Características principales
● Facelets y JSP
● Estructura
● Modelo Vista Controlador en JSF
● Ciclo de vida de una página JavaServer Faces
● Managed Beans, navegación y etiquetas básicas JSF
● Etiquetas JSF estándares
● Conversión y validación
● Manejo de Eventos
● Extensiones
● Ejemplo

3. JavaServer Faces JSF
● Framework para aplicaciones
Java basadas en web
● Contiene todo lo necesario
para la gestión de eventos y la
organización de los
componentes

4. Características
Elementos principales:
● Juego de componentes UI (Interfaz de
Usuario).
● Modelo de programación a eventos.
● Modelo de componentes que permite
suministrar elementos adicionales de
terceros.

5. Características
● JSF es una especificación y no un producto,
no está sujeto a un solo proveedor.
● Posee una clara separación entre el
comportamiento y la presentación en las
aplicaciones.
● Desarrolla la vista más cercano al estilo de
Java Swing, Visual Basic ó Delphi.

6. Versiones
Versiones Descripción Fecha
Lanzamiento
JSF 1.0
Versión inicial de la especificación JSF, independiente y
no forma parte de Java EE
11/03/2004
JSF 1.1
Mantenimiento y correcciones de la versión anterior, no se
agregan nuevas características
02/05/2004
JSF 1.2 Mejoras en el sistema y API. Adopción inicial en Java EE 11/05/2006
JSF 2.0
Versión principal para facilidad de uso, funcionalidad y
rendimiento mejorados, coincide con Java EE 6
28/06/2009
JSF 2.1
Versión de mantenimiento de la 2.0, solo cambios
mínimos en las especificaciones
22/10/2010
JSF 2.2 Versión actual, Introduce soporte HTML5 16/04/2013

7. JSP y Facelets
● Base HTML
● Incrusta contenido
JAVA
● Genera contenido
de páginas web
● Mas reciente que JSP
● Incorpora modulos de código JAVA
● MVC

8. Estructura
Estructura Proyecto Web
(NetBeans)
Estructura Archivo .war

9. Modelo Vista Controlador en JSF

10. Modelo
Managed Beans
● Responsables de la lógica de la aplicación
● Eventos generados por los componentes
● Navegación entre páginas

11. Vista
Páginas
JSF
(ficheros
JSP con las
tag libraries
de JSF)
Facelets
(ficheros
xhtml)
<h:inputText value="#{usuario.nombre}"/>
Unified Expresion Language

12. Controlador
web.xml
(Faces Servlet)
<web-app>
<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>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

13. Controlador
faces-config.xml
(reglas de
navegación)
<navigation-rule>
<from-view-id>/index.jsp</from-view-
id>
<navigation-case>
<from-outcome>login</from-outcome>
<to-view-id>/hola.jsp</to-view-id>
</navigation-case>
</navigation-rule>

14. Ciclo de Vida Estándar de Procesamiento
de Peticiones

15. Escenarios de una Petición
Respuesta
Faces
Respuesta
No-Faces
Petición
Faces
Petición
No-Faces

16. Escenarios de una Petición
Escenario 1
Escenario 3
Escenario 2
Petición No-Faces
Respuesta Faces
Petición Faces
Respuesta No -Faces
Petición Faces
Respuesta No-Faces

17. Bean
Un bean es un POJO (Plain
Old Java Object), algo tan
sencillo como una clase que
tiene un constructor público
sin argumentos (constructor
por defecto) y sus
propiedades tienen asociados
sus correspondientes
métodos get/set .

18. Managed Beans
Un Managed Bean es un Java Bean que
puede ser accedido desde una página JSF,
cada Managed Bean debe tener un nombre y
un ámbito.

19. Managed Beans
Diferentes usuarios de la aplicación web
tienen diferentes instancias del Managed
Bean. En ellos se colocará la lógica de
negocio y se encargan de conectar los
campos de una página JSF con atributos del
Managed Bean.

20. ¿Cómo declaramos un bean?
Desde el fichero faces-config.xml o con
anotaciones.
En JSF 1.x era necesario declarar el managed
bean en el fichero faces-config.xml, en JSF
2.0 no es necesario, con la anotación es
suficiente.

21. Utilizando XML
<managed-bean>
<managed-bean-name>userBean</managed-bean-name>
<managed-bean-class>com.examples.UserBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
El archivo de configuración más comúnmente usado es
WEB-INF/faces-config.xml.

22. Utilizando anotaciones
package com.examples;
import javax.faces.bean.ManagedBean
import javax.faces.bean.SessionScoped@ManagedBean
@SessionScoped
public class UserBean {...}
@ManagedBean(name="user")
@SessionScoped
public class UserBean {...}

23. Ámbitos de los beans
@RequestScoped ámbito de petición, al terminar la
petición se elimina la instancia del bean.
@SessionScoped ámbito de sesión, mientras la sesión
exista existe el bean.
@ViewScoped: entre request y session, el bean existirá
mientras la petición se envíe a la misma vista.
@ApplicationScoped ámbito de la aplicación web,
mientras la aplicación se ejecute el bean existirá.

24. Navegación
Navegación estática: La navegación más sencilla en
JSF consiste en asociar un String al action de un
botón o link:

25. Navegación
Navegación dinámica: Si queremos poder elegir la
página a mostrar en tiempo de ejecución, asociamos
el action a un método que nos devuelva el String
correspondiente:

26. Reglas de navegación
¿Cómo asociamos el String del action con una
página JSF? Creando reglas de navegación en el
fichero faces-config.xml:

27. Reglas de navegación
¿Tenemos que utilizar obligatoriamente faces-
config.xml?
No. Desde JSF 2.0 podemos utilizar navegación
implícita, es decir, nos basta con poner en el action el
nombre de nuestra página JSF sin la extensión
correspondiente.
<h:commandButton action="login"/> nos

28. Etiquetas básicas
Las páginas JSF tienen una estructura similar a esto:
Etiquetas core, se usan, entre otras aplicaciones, para
manejo de eventos, atributos, conversión de datos,
validadores, recursos y definición de la página, las
cuales usan el prefijo f.
Etiquetas html_basic, su utilización es básicamente
para la construcción de formularios y demás
elementos de interfaz de usuario, que usa el prefijo h.

29. Etiquetas básicas
Componentes de interfaz de usuario
Los componentes UI JavaServer Faces son elementos
configurables y reutilizables que componen el
interface de usuario de las aplicaciones JavaServer
Faces.
Un componente puede ser simple, como un botón, o
compuesto, como una tabla, que puede estar
compuesta por varios componentes.

30. Componentes de interfaz de usuario
Todas las clases de componentes UI de JavaServer
Faces descienden de la clase UIComponentBase, que
define el estado y el comportamiento por defecto de
un UIComponent.

31. Conjunto de clases UI
● UICommand: Representa un control que dispara actions cuando se activa.
● UIForm: Encapsula un grupo de controles que envían datos de la aplicación. Este
componente es análogo a la etiqueta form de HTML.
● UIGraphic: Muestra una imagen.
● UIInput: Toma datos de entrada del usuario. Esta clase es una subclase de
UIOutput.
● UIOutput: Muestra la salida de datos en un página.
● UIPanel: Muestra una tabla.
● UISelectItem: Representa un sólo ítem de un conjunto de ítems.
● UISelectItems: Representa un conjunto completo de ítems.
● UISelectBoolean: Permite a un usuario seleccionar un valor booleano en un
control, selececcionándolo o deseleccionándolo. Esta clase es una subclase de
UIInput.
● UISelectMany: Permite al usuario seleccionar varios ítems de un grupo de ítems.
Esta clase es una subclase de UIInput.
● UISelectOne: Permite al usuario seleccionar un ítem de un grupo de ítems. Esta
clase es una subclase de UIInput.

32. Etiquetas básicas y componentes
UIForm
<h:form … </h:form>
UIGraphic
<h:graphicImage
url="/imagenes/duke.jpg"/
>
UICommand
<h:commandButton
value="Aceptar"
action="siguiente"/>
UISelectBoolean
<h:selectBooleanCheckbox
value="#{formulario.recibirIn
formacion}"/>

33. Etiquetas básicas y componentes
UIInput
<h:inputText
value="#{formulario.nombre}"/
> <h:inputTextarea rows="3"
cols="15"
value="Escribir aqui.."/>
<h:inputSecret
value="#{formulario.password}"/>

34. Etiquetas básicas y componentes
UIOutput
<h:outputText
value="Hola Mundo!"/>
<h:outputLink
value="http://www.hoylodejo.com/">
<h:outputText value="Clic aquí"/>
</h:outputLink>

35. Etiquetas básicas y componentes
UISelectMany
<h:selectManyCheckbox value="#{formulario.aficiones}">
<f:selectItem itemValue="musica" itemLabel="Música"/>
<f:selectItem itemValue="cine" itemLabel="Cine"/>
<f:selectItem itemValue="pesca" itemLabel="Pesca"/>
<f:selectItem itemValue="deporte" itemLabel="Deporte"/>
<f:selectItem itemValue="lectura" itemLabel="Lectura"/>
</h:selectManyCheckbox>

36. Etiquetas básicas y componentes
UISelectMany
<h:selectManyListbox value="#{formulario.lenguajes}">
<f:selectItem itemValue="c" itemLabel="C"/>
<f:selectItem itemValue="c++" itemLabel="C++"/>
<f:selectItem itemValue="java" itemLabel="Java"/>
<f:selectItem itemValue="Visual basic"
itemLabel="Visual
basic"/>
</h:selectManyListbox>

37. Etiquetas básicas y componentes
UISelectMany
<h:selectManyMenu value="#{cuestionario.comidas}">
<f:selectItem itemValue="carnes" itemLabel="Carnes"/>
<f:selectItem itemValue="pescados" itemLabel="Pescados"/>
<f:selectItem itemValue="legumbres"
itemLabel="Legumbres"/>
<f:selectItem itemValue="pastas" itemLabel="Pastas"/>
<f:selectItem itemValue="sopas" itemLabel="Sopas"/>
</h:selectManyMenu>

38. Etiquetas básicas y componentes
UISelectOne
<h:selectOneRadio value="#{formulario.fumador}">
<f:selectItem itemValue="si" itemLabel="Fumador"/>
<f:selectItem itemValue="no" itemLabel="No fumador"/>
</h:selectOneRadio>
<h:selectOneMenu value="#{formulario.sistema}">
<f:selectItem itemValue="linux" itemLabel="Linux"/>
<f:selectItem itemValue="windows" itemLabel="Windows"/>
</h:selectOneMenu>

39. Etiquetas básicas y componentes
UISelectOne
<h:selectOneListbox value="#{cuestionario.estado}">
<f:selectItem itemValue="soltero" itemLabel="Soltero"/>
<f:selectItem itemValue="casado" itemLabel="Casado"/>
<f:selectItem itemValue="divorciado"
itemLabel="Divorciado"/>
<f:selectItem itemValue="separado" itemLabel="Separado"/>
</h:selectOneListbox>

40. Etiquetas básicas y componentes
UIPanel
<h:panelGrid columns="3" border="1">
<h:outputText value="(1,1)"/>
<h:outputText value="(1,2)"/>
<h:outputText value="(1,3)"/>
<h:outputText value="(2,1)"/>
<h:outputText value="(2,2)"/>
<h:outputText value="(2,3)"/>
<h:panelGroup>
<h:outputText value="Columna 1"/>
<h:outputText value="Columna 2"/>
</h:panelGroup>
</h:panelGrid>

41. Conversión

42. Conversión
<h:inputText id="fecha" value="#{pago.fecha}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:inputText>
<h:outputText value="#{pago.cantidad}">
<f:convertNumber type="currency"/>
</h:outputText>
<h:inputText id="cantidad" value="#{pago.cantidad}">
<f:convertNumber minFractionDigits="2"/>
</h:inputText>

43. Conversión f:convetDateTime

44. Conversión a f:convetNumber

45. Mensajes
<h:inputText id="cantidad" value="#{pago.cantidad}">
<h:message for="cantidad"/>
<h:message for="cantidad" showSummary="true" showDetail="false"/>
<h:messages styleClass="mensajeError"/>
o
<h:message for="cantidad" style="color:red"/>
<faces-config> <application>
<message-bundle>mensajes</message-bundle>
</application>...</faces-config>

46. Validación
● <h:inputText value="#{cuestionario.nombre}">
<f:validateLength maximum="12"/> </h:inputText>
● <h:inputText value="#{regalo.cantidad}">
<f:validateLongRange minimum="10" maximum="10000"/> </h:inputText>
● <h:inputText value="#{informe.telefono}" required="true"/>
<f:validateLength minimum="9"/> </h:inputText>

47. Manejo de Eventos
JSF soportar tres clases
de eventos
● Eventos de Acción
● Eventos de Cambio de
Valor
● Eventos de Fase

48. Manejo de Eventos Eventos de Acción
public class Zodiaco {
public void oyente(ActionEvent e) {
FacesContext context =
FacesContext.getCurrentInstance();
String clientId =
e.getComponent().getClientId(context);
Map requestParams =
context.getExternalContext().getRequest
ParameterMap(); . . . .
public String accion() {
return resultado; . . . .
<f:view>
<head>
<f:loadBundle basename="mensajes"
var="msjs"/>
</head>
<body>
<h:form>
<h:commandButton image="zodiaco.jpg"
actionListener="#{zodiaco.oyente}"
action="#{zodiaco.accion}"/>
</h:form>
</f:view>

49. Manejo de Eventos Eventos de cambio de valor
<h:outputText
value="#{msjs.nacionalidad}"/>
<h:selectOneMenu
value="#{formulario.nacionalidad}"
onchange="submit()"
valueChangeListener="#{formulario.
cambioNacionalidad}">
<f:selectItems
value="#{formulario.nacionalidade
s}"/>
</h:selectOneMenu>
</h:panelGrid>
public class Formulario {
public Collection getNacionalidades() {
public void cambioNacionalidad
(ValueChangeEvent evento) {
FacesContext contexto =
FacesContext.getCurrentInstance();
if(US.equals((String) evento.getNewValue()))
contexto.getViewRoot().setLocale(Locale.US);
else
contexto.getViewRoot().setLocale(Locale.get
Default());

50. Manejo de Eventos Eventos de Fase
La implementación JSF dispara eventos conocidos como eventos de fase, antes
y después de cada fase del ciclo de vida
<faces-config> <lifecycle>
<phase-listener>eventoFase</phase-listener>
</lifecycle> </faces-config>
Los oyentes de fase por medio de la interfaz PhaseListener del paquete
javax.faces.event. Esa interfaz define tres métodos:
• PhaseId getPhaseId()
• void afterPhase(PhaseEvent)
• void beforePhase(PhaseEvent)

51. Extensiones
● RichFaces Agrega componentes visuales y soporte para AJAX.
● ICEfaces Contiene diversos componentes para interfaces de usuarios más enriquecidas,
tales como editores de texto enriquecidos, reproductores de multimedia, entre otros.
● jQuery4jsf Contiene diversos componentes sobre la base de uno de los más populares
framework javascript jQuery.
● PrimeFaces Es una librería muy liviana, todas las decisiones hechas son basadas en
mantener a PrimeFaces lo más liviano posible. PrimeFaces es una librería muy simple que
no necesita dependencias y configuraciones.
● OpenFaces Librería open source que contiene diferentes componentes JSF, un Framework
Ajax y un Framework de validación por parte del cliente.

52. Referencias
● Oracle.JavaServer Faces Technology. [Fecha de consulta: 25 de Abril de 2014]. [On line].
Disponible: http://www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.html
● Master del Web.Tutorial de JavaServer Faces. [Fecha de consulta: 20 de Abril de 2014].
[On line].
● Disponible: http://elmasterdelaweb.wikispaces.com/file/view/JSF.pdf/179740185/JSF.pdf
● Proyecto Mar. Java Server Faces. [Fecha de consulta: 20 de Abril de 2014]. [On line].
Disponible:
http://proyectoremar.tripod.com/Documentos/Herramientas/JavaServerFaces.pdf
● Wikipedia. JavaServer Faces. [Fecha de consulta: 05 de Mayol de 2014]. [On line].
Disponible: http://es.wikipedia.org/wiki/JavaServer_Faces
● Geary,David. Horstmann,Cay. (2010). Core Java Server Faces 3rd edition. Prentices Hall.
● Leonard,Anghel.(2010).JSF 2.0 Cookbook. Packt Publishing
● Lok Tong,Kent Ka .(2009). Beginning JSF™ 2 APIs and JBoss® Seam. Apress
● Burns,Ed. Schalk, Chris.(2010).JavaServer Faces 2.0: The Complete Reference. McGraw-
Hill