Java Server Face (JSF)

Contenido
JSF Introduccin ........................................................................................................................................ 3

Archivo index.xhtml .................................................................................................................................. 3
Archivo envio.xhtml .................................................................................................................................. 4
JSF Envo de Datos y Managed Bean......................................................................................................... 4
Archivo envio.xhtml .................................................................................................................................. 6
Archivo mbPersona.java ........................................................................................................................... 6
JSF DataTable ............................................................................................................................................ 8
Archivo enviado.xhtml .............................................................................................................................. 9
Archivo mbCiudades.java........................................................................................................................ 10
JSF Recorrer Array con JSTL .................................................................................................................... 11
Archivo index.xhtml ................................................................................................................................ 11
Archivo mbDatos.java ............................................................................................................................. 11
JSF Creacin de Layout............................................................................................................................ 12
Archivo layoutGeneral.xhtml .................................................................................................................. 12
Archivo confirmacion.xhtml .................................................................................................................... 14
JSF PrimeFace-Chart................................................................................................................................ 15
Archivo ChartBean.Java .......................................................................................................................... 16
JSF Alcance de los Managed Bean .......................................................................................................... 17
JSF Managed Bean RequestScoped ........................................................................................................ 20
JSF Managed Bean ViewScoped.............................................................................................................. 22
JSF Managed Bean SessionScoped.......................................................................................................... 27
JSF Managed Bean ApplicationScoped ................................................................................................... 29
JSF Login y Sesiones ................................................................................................................................ 30
JSF Carrusel con Primefaces ................................................................................................................ 39
JSF PRIME FACES Y HIBERNATE PRODUCTO, VENTA Y DETALLE ............................................................. 41
JSF APPAGENDA PARTE 1-CREACIN DE LA BASE DE DATOS Y CREACIN DEL PROYECTO EN JAVA WEB
................................................................................................................................................................ 41
JSF APPAGENDA PARTE 2-TEMPLATE Y MEGA MEN DE PRIME FACE .................................................. 42
JSF APPAGENDA PARTE 3-FORMULARIO REGISTRO DE USUARIO CON PRIME FACE ............................. 42
JSF APPAGENDA PARTE 4-CONFIGURACIN DE HIBERNATE Y CREACIN DE POJOS............................. 42
JSF APPAGENDA PARTE 5-REGISTRO DE USUARIO, INTERFACE, DAO Y MANAGED BEAN REQUEST ..... 43
JSF APPAGENDA PARTE 6-ENCRIPTACIN DE CONTRASEA CON SHA-512 .......................................... 43
JSF APPAGENDA PARTE 7-MENSAJES DE ALERTA Y ERROR .................................................................... 44
JSF APPAGENDA PARTE 8-REQUESTCONTEXT JAVASCRIPT DESDE EL BEAN .......................................... 44
JSF APPAGENDA PARTE 9-FACESVALIDATOR-VALIDACIN DE DATOS CON JSF ..................................... 45
JSF APPAGENDA PARTE 10-FACESVALIDATOR CON EXPRESIONES REGULARES..................................... 45
JSF APPAGENDA PARTE 11-MESSAGE, GROWL Y TOOLTIP DE PRIME FACE ........................................... 46
JSF APPAGENDA PARTE 12-VALIDACIN DE EXISTENCIA DE USUARIO Y REESTRUCTURACIN DEL DAO
................................................................................................................................................................ 46
JSF APPAGENDA PARTE 13-VALIDACIN POR ANOTACIONES ................................................................ 47
JSF APPAGENDA PARTE 14-MEJORANDO ESTILOS EN EL TEMPLATE ..................................................... 47
JSF APPAGENDA PARTE 15-LISTAR USUARIOS CON HIBERNATE SOBRE COMPONENTE PRIME FACE ... 48
JSF APPAGENDA PARTE 16-VER DETALLE DE USUARIO EN DILOGO DE PRIME FACE ........................... 48
JSF APPAGENDA PARTE 17-FILTRO DE DATOS EN TABLA DE PRIME FACE ............................................. 49
JSF APPAGENDA PARTE 18-INICIO Y CIERRE DE SESIN ......................................................................... 49
JSF APPAGENDA PARTE 19-EXPIRAR SESIN .......................................................................................... 50
JSF APPAGENDA PARTE 20-FILTROS PARA LOS BEAN DE SESIN ........................................................... 50
JSF APPAGENDA PARTE 21-ACCESO A URL'S SIN SESIN ....................................................................... 51
JSF APPAGENDA PARTE 22-CONSULTA DE DATOS POR SESIN INICIADA ............................................. 51
JSF APPAGENDA PARTE 23-EDITAR DATOS CON HIBERNATE ................................................................. 52
JSF APPAGENDA PARTE 24-SUBIR IMAGEN AL SERVIDOR (AVATAR DE UN USUARIO) .......................... 52
JSF APPAGENDA PARTE 25-MOSTRAR IMAGEN CON PRIME FACE ......................................................... 53
JSF APPAGENDA PARTE 26-CAMBIO DE SESIN (ACCEDER A BEAN DESDE OTRO BEAN) ...................... 53
JSF APPAGENDA PARTE 27-EDITAR DATOS EN LISTA DE USUARIOS....................................................... 53
JSF APPAGENDA PARTE 28-REGISTRO DE CONTACTOS .......................................................................... 54
JSF APPAGENDA PARTE 29-MOSTRAR AMIGOS EN NODOS RELACIONADOS......................................... 54
JSF APPAGENDAJAVA PARTE 30-EDITAR DATOS DE UN AMIGO ............................................................ 55
2
JSF Introduccin
Veamos un tema muy interesante, la parte introductoria pero con muchos temas por delante sobre JSF
(Java ServerFace). FrameWork de Java para la vista con programacin orientada a eventos y las nuevas
tecnologas de desarrollo.
Archivo index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="txtNombre" value="Nombre:"/>
<h:inputText id="txtNombre" label="Nombre" required="true"/>
<h:message for="txtNombre"/>
<br/>
<h:outputLabel for="txtPassword" value="Password:"/>
<h:inputSecret id="txtPassword" label="Password" required="true"/>
<br/>
<h:outputLabel for="cbxCiudad" value="Ciudad:"/>
<h:selectOneMenu id="cbxCiudad" label="Ciudad">
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="Andahuaylas" itemValue="Andahuaylas"/>
<f:selectItem itemLabel="Abancay" itemValue="Abancay"/>
</h:selectOneMenu>
<br/>
<h:outputLabel for="radioSexo" value="Sexo:"/>
<h:selectOneRadio id="radioSexo" label="Sexo">
<f:selectItem itemLabel="Masculino" itemValue="M"/>
<f:selectItem itemLabel="Femenino" itemValue="F"/>
</h:selectOneRadio>
<br/>
3
<h:outputLabel for="checkDato" value="Dato:"/>

<h:selectManyCheckbox id="checkDato" label="Dato">
<f:selectItem itemLabel="Dato1" itemValue="D1"/>
</h:selectManyCheckbox>
<br/>
<h:commandButton id="btnEnviar" value="Enviar Datos" action="envio"/>
</h:form>
</h:body>
</html>
Archivo envio.xhtml
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
</h:head>
<h:body>
Hola Mundo de KAAF
</h:body>
</html>
JSF Envo de Datos y Managed Bean

Aprendamos a usar el envo de datos con JSF mediante los Managed Bean, algo realmente muy fcil de
hacer mediante los nuevos paradigmas de programacin con la orientacin a eventos.
Archivo index.xhtml
4
<h:head>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="txtNombre" value="Nombre:"/>
<h:inputText id="txtNombre" label="Nombre" required="true" value="#{mbPersona.nombre}"/>
<h:message for="txtNombre"/>
<h:outputLabel for="txtApellidoPaterno" value="ApellidoPaterno:"/>
<h:inputText id="txtApellidoPaterno" label="Apellido Paterno" required="true"
value="#{mbPersona.apellidoPaterno}"/>
<h:message for="txtApellidoPaterno"/>
<h:outputLabel for="txtApellidoMaterno" value="ApellidoMaterno:"/>
<h:inputText id="txtApellidoMaterno" label="Apellido Materno" required="true"
value="#{mbPersona.apellidoMaterno}"/>
<h:message for="txtApellidoMaterno"/>
<h:outputLabel for="radioSexo" value="Sexo:"/>
<h:selectOneRadio id="radioSexo" label="Sexo" value="#{mbPersona.sexo}">
<f:selectItem itemLabel="Masculino" itemValue="M"/>
<f:selectItem itemLabel="Femenino" itemValue="F"/>
</h:selectOneRadio>
<h:message for="radioSexo"/>
<h:outputLabel for="cbxCiudad" value="Ciudad:"/>
<h:selectOneMenu id="cbxCiudad" label="Ciudad" value="#{mbPersona.ciudad}">
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="Talavera" itemValue="Talavera"/>
<f:selectItem itemLabel="Cusco" itemValue="Cusco"/>
</h:selectOneMenu>
<h:message for="cbxCiudad"/>
<h:commandButton id="btnEnviar" value="Enviar Datos" action="envio"/>
5
</h:panelGrid>
</h:form>
</h:body>
</html>
Archivo envio.xhtml
<h:head>
</h:head>
<h:body>
<h:panelGrid columns="2">
<h:outputLabel for="txtNombreCompleto" value="Nombre Completo:"/>
<h:outputText id="txtNombreCompleto" value="#{mbPersona.nombre} #{mbPersona.apellidoPaterno}
#{mbPersona.apellidoMaterno}"/>
<h:outputLabel for="txtSexo" value="Genero:"/>
<h:outputText id="txtSexo" value="#{mbPersona.sexo}"/>
<h:outputLabel for="txtCiudad" value="Ciudad:"/>
<h:outputText id="txtCiudad" value="#{mbPersona.ciudad}"/>
</h:panelGrid>
</h:body>
</html>
Archivo mbPersona.java
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package ManagedBean;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
/**
*
* @author kaaf
*/
@ManagedBean
@RequestScoped
public class mbPersona {
/**
* Creates a new instance of mbPersona
*/
private String nombre;
private String apellidoPaterno;
private String apellidoMaterno;
private String sexo;
private String ciudad;
public mbPersona() {
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getApellidoPaterno() {
return apellidoPaterno;
}
public void setApellidoPaterno(String apellidoPaterno) {

this.apellidoPaterno = apellidoPaterno;
}
public String getApellidoMaterno() {
return apellidoMaterno;
}
public void setApellidoMaterno(String apellidoMaterno) {
this.apellidoMaterno = apellidoMaterno;
}
public String getSexo() {
return sexo;
}
public void setSexo(String sexo) {
this.sexo = sexo;
}
public String getCiudad() {
return ciudad;
}
public void setCiudad(String ciudad) {
this.ciudad = ciudad;
}
}
JSF DataTable
Veamos cmo podemos usar el dataTable de JSF, el cual sirve para cargar datos en forma de tabla y
recorrerlos a partir de una coleccin de datos.
Archivo index.xhtml
8
<h:head>
</h:head>
<h:body>
<f:view>
<h:form>
<h:outputLabel for="checkCiudades" value="Seleccione las Ciudades"/>
<h:selectManyCheckbox id="checkCiudades" value="#{mbCiudades.ciudades}">
<f:selectItem itemLabel="Talavera" itemValue="Talavera"/>
<f:selectItem itemLabel="Andahuyalas" itemValue="Andahuyalas"/>
<f:selectItem itemLabel="Cusco" itemValue="Cusco"/>
<f:selectItem itemLabel="Lima" itemValue="Lima"/>
</h:selectManyCheckbox>
<h:commandButton id="btnEnviar" value="Enviar Datos" action="enviado"/>
</h:form>
</f:view>
</h:body>
</html>
Archivo enviado.xhtml
<h:head>
</h:head>
<h:body>
<f:view>
<h:dataTable value="#{mbCiudades.ciudades}" var="item">
<h:column>
9
<f:facet name="header">
<h:outputText value="Ciudades Seleccionadas"/>
</f:facet>
<h:outputText value="#{item}"/>
</h:column>
</h:dataTable>
</f:view>
</h:body>
</html>
Archivo mbCiudades.java
/*
*/
/**
*
* @author kaaf
*/
@ManagedBean
@RequestScoped
public class mbCiudades {
/**
* Creates a new instance of mbCiudades
*/
private String ciudades[];
public String[] getCiudades() {
return ciudades;
}
10
public void setCiudades(String[] ciudades) {

this.ciudades = ciudades;
}
public mbCiudades() {
}
}
JSF Recorrer Array con JSTL

En vista de que hay gente que prefiere recorrer arrays y trabajarlo limpiamente sin usar dataTable de
JSF, se publica este tema para trabajar con colecciones de datos en JSF con JSTL.
Archivo index.xhtml
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<c:forEach items="#{mbDatos.datos}" var="item">
<h:outputText value="#{item}"/><br />
</c:forEach>
</h:body>
</html>
Archivo mbDatos.java
/*
*/
11
/**
*
* @author kaaf
*/
@ManagedBean
@RequestScoped
public class mbDatos {
/**
* Creates a new instance of mbDatos
*/
private String datos[];
public String[] getDatos() {
datos=new String[]{"1","2","3","4","5","6","7"};
return datos;
}
public void setDatos(String[] datos) {
this.datos = datos;
}
public mbDatos() {
}
}
JSF Creacin de Layout

Veamos cmo crear layout mediante Java Server Face, lo cual nos facilita mucho al mantener un mismo
diseo en una aplicacin de JSF.
Archivo layoutGeneral.xhtml
12
xmlns:ui="http://java.sun.com/jsf/facelets"
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">

<h1>
Esta es mi Cabecera
</h1>
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ul>
<li><h:link outcome="index" value="Inicio"/></li>
<li><h:link outcome="confirmacion" value="Confirmacin"/></li>
</ul>
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>
13
Archivo index.xhtml
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="./layoutGeneral.xhtml">
<ui:define name="top">
</ui:define>
<ui:define name="left">
</ui:define>
<ui:define name="content">
Esta es mi pgina inicial que se est incorporando al layout
</ui:define>
</ui:composition>
</body>
</html>
Archivo confirmacion.xhtml
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="./layoutGeneral.xhtml">
<ui:define name="top">
14
</ui:define>
<ui:define name="left">
</ui:define>
<ui:define name="content">
Me encuentro en la pgina Confirmacin
</ui:define>
</ui:composition>
</body>
</html>
JSF PrimeFace-Chart
Ahora veamos cmo podemos implementar en nuestros proyectos PrimeFace la cual es un paquete jar
que nos permite agregar componentes ya preparados como los siguientes.
Componentes Ajax
Tablas Bsicas y Avanzadas con Mantenimiento
Calendarios
Acordiones
Charts
Drag and Drop en Tablas

Archivo index.xhtml
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:lineChart id="filled" value="#{chartBean.categoryModel}" legendPosition="ne" fill="true"
title="Filled" style="height:300px;margin-top:20px" xaxisLabel="Year" yaxisLabel="Births" />
</h:body>
</html>
15
Archivo ChartBean.Java
/*
*/
import java.io.Serializable;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.ChartSeries;
/**
*
* @author kaaf
*/
@ManagedBean
@RequestScoped
public class ChartBean implements Serializable {
private CartesianChartModel categoryModel;
public ChartBean() {
createCategoryModel();
}
public CartesianChartModel getCategoryModel() {
return categoryModel;
}
private void createCategoryModel() {
categoryModel = new CartesianChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("Boys");
16
boys.set("2004", 120);
boys.set("2005", 140);
boys.set("2006", 160);
boys.set("2007", 180);
boys.set("2008", 200);
ChartSeries girls = new ChartSeries();
girls.setLabel("Girls");
girls.set("2004", 100);
girls.set("2005", 100);
girls.set("2006", 100);
girls.set("2007", 100);
girls.set("2008", 100);
categoryModel.addSeries(boys);
categoryModel.addSeries(girls);
}
}
JSF Alcance de los Managed Bean

Cuando nos decidimos realizar una aplicacin sobre JSF, es necesario entender el funcionamiento de
los Managed Bean y el alcance que tienen stos. Por lo menos deberamos conocer los ms recurrentes
en una aplicacin de Java Web.
En vista de esto aqu se explica el alcance y comportamiento de los Managed Bean ms frecuentes, no
siendo estos los nicos que existen.
El primer Managed Bean que tenemos es el de alcance request. Este persiste slo a una peticin http;
por ejemplo, si tenemos un formulario de registro en el cual llenamos datos en nuestra aplicacin, el
Managed Bean persistir hasta que se enve este formulario, internamente se procesa y ah muere.
Tener en cuenta que esto pasa as se est haciendo la peticin mediante ajax ya que en una
primera instancia de ajax en una pgina, equivaldra a una peticin http y si quisiramos usar otra
peticin ajax en un componente diferente a la primera peticin, esto ya no funcionara e incluso no
mostrara ningn error, simplemente no hara nada.
El Managed Bean de alcance request sera de la siguiente forma.
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
*
* @author KevinArnold
*/
@ManagedBean
@RequestScoped
public class Request {
/**
* Creates a new instance of Request
*/
public Request() {
}
}
Ahora veamos el Managed Bean de alcance view. ste persiste mientras las peticiones se realicen en
una misma vista, es decir, podemos tener "n" peticiones ajax que al mismo tiempo seran peticiones
http y el Managed Bean viewpersistira siempre y cuando no se cambie de vista, pero una vez se pase la
peticin a otra vista pues ah muere nuestro Managed Bean. La forma de este Managed Bean vendra a
ser como se muestra a continuacin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import javax.faces.bean.ViewScoped;
/**
*
*/
@ManagedBean
@ViewScoped
public class View {
/**
* Creates a new instance of View
*/
public View() {
}
18
20
Ahora veamos el Managed Bean de sesin. Este es bastante entendible por su mismo nombre en el cual
indica quedicho Managed Bean persistir a nivel de una sesin como en el caso de un login
tradicional que dura en toda la interaccin con nuestra aplicacin hasta cerrar el navegador o cerrar la
sesin. El cdigo de este Managed Bean lo tienen a continuacin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Por
ltimo
import javax.faces.bean.SessionScoped;
/**
*
*/
@ManagedBean
@SessionScoped
public class Session {
/**
* Creates a new instance of Session
*/
public Session() {
}
}
hablemos del
Managed
Bean
de aplicacin o
el Managed
Bean
con
Scope
Application. ste persiste a nivel de toda la aplicacin, efectuando los cambios en tiempo real y
afectando a todos los usuarios que se encuentra haciendo uso de nuestro app. Podra servirnos para
aplicaciones de cambio en tiempo de ejecucin e interaccin con usuarios. El cdigo sera el siguiente.
1
2
3
4
5
6
7
8
9
10
11
12
import javax.faces.bean.ApplicationScoped;
/**
*
*/
@ManagedBean
@ApplicationScoped
public class Application {
19
13
14
15
16
17
18
19
20
/**
* Creates a new instance of Application
*/
public Application() {
}
}
Es cierto qu estos no son todos los tipos de Managed Bean que existen, pero estamos haciendo
referencia a los ms usados y a los que posiblemente recurramos ms en nuestra vida de
desarrolladores de software. Si quieren ms detalle sobre los Managed Bean, pueden ver el video de la
parte superior, donde tambin se hace mencin a los Managed Bean de Conversacin, dependencia,
etc.
JSF Managed Bean RequestScoped

Como mencionamos anteriormente, es necesario entender los Managed Bean para poder adentrarnos
al mundo de JSF por lo que aqu les traigo el primer ejemplo de un Managed Bean con alcance
Request (RequestScoped).
Lo que haremos para este ejemplo es crear un formulario con los campos nombres y apellidos los cuales
sern enlazados con nuestro Managed Bean RequestScoped para que posteriormente podamos
recuperarlo en una segunda pgina mediante el mismo Managed Bean.
Dicho lo anterior que sera el procedimiento general que tomaremos, aqu se muestra como estara
quedando nuestro Managed Bean.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
*
*/
@ManagedBean
@RequestScoped
public class MbRequest {
private String nombre;
private String apellidos;
20
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
public MbRequest()
{
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getApellidos() {
return apellidos;
}
public void setApellidos(String apellidos) {
this.apellidos = apellidos;
}
/**
* Creates a new instance of MbRequest
*/
}
Como pueden ver en el cdigo anterior el cual es nuestro Managed Bean, tenemos dos atributos el cual
es nombre y apellidos. Dichos atributos sern los que se enlacen a nuestras vistas de JSF por lo que es
necesario que estos sean privados con sus respectivos getter y setter.
Ahora tenemos que crear nuestra vista con el formulario el cual enviar los datos nombres y apellidos.
Esto se realizar mediante el Managed Bean por lo que quedar enlazado con dicho Managed Bean.
El cdigo de nuestro formulario lo podemos ver a continuacin.
1
<h:form>
2
<h:outputLabel value="Nombre" for="txtNombre"/>
3
<h:inputText id="txtNombre" value="#{mbRequest.nombre}"/>
4
5
<h:outputLabel value="Apellidos" for="txtApellidos"/>
6
<h:inputText id="txtApellidos" value="#{mbRequest.apellidos}"/>
7
8
<h:commandButton value="Enviar" action="recibir.xhtml"/>
9
</h:form>
Como pueden ver, en el formulario estamos enlazando nuestros datos con nuestro Managed Bean, para
esto se est usando #{...} lo cual nos permite acceder de forma directa a los atributos del Managed
Bean.
21
Para el primer caso pues no mostrar nada porque no existe ningn dato en dicho Managed Bean, el
nico trabajo que cumple es de enlazar con nuestros atributos y almacenarlos una vez sea enviado
el formulario.
Ahora veamos cual es el cdigo con el que se recupera nuestro Managed Bean, esto lo podemos ver
seguidamente.
1
2
3
4
5
6
Nombre:
<h:outputText value="#{mbRequest.nombre}"/>
Apellidos:
<h:outputText value="#{mbRequest.apellidos}"/>
Como se puede ver, es muy sencillo de recuperar los datos de nuestro Managed Bean. Tenemos que
hacer algo similar a cuando enlazamos nuestro primer formulario, slo basta con usar #{...} indicando
el Managed Bean y su atributo respectivo al cual queremos acceder. Por otro lado tengan en cuenta que
este tipo de Managed Bean muere en este punto ya que se dio la peticin HTTP y cumpli su ciclo de
vida correspondiente.
JSF Managed Bean ViewScoped

Entendiendo un poco ms de los Managed Bean de JSF, ahora hablaremos de los Bean de
alcance (ViewScoped). Se har comparativa con el alcance de tipo request haciendo un ejemplo de ajax
con 3 niveles para que se pueda entender la diferencia entre estos dos.
Lo primero que tenemos que hacer es tratar la parte del bean donde crearemos los atributos necesarios
con los mtodos que realizarn las peticiones ajax que posteriormente lo enlazaremos con la vista. Por
lo dicho anteriormente, tendremos que crear el bean MbView lo cual estara quedando de la siguiente
forma.
1
2
3
4
5
6
7
8
9
10
11
<span id="IL_AD12" class="IL_AD">package</span> ManagedBean;

import java.util.HashMap;
import java.util.<span id="IL_AD10" class="IL_AD">Map</span>;
import javax.faces.bean.ViewScoped;
/**
*
*/
22
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@ManagedBean
@ViewScoped
public class MbBeanView {
private String nivel1Actual;
private Map<String, String> nivel1Seleccionado;
private Map<String, Map<String, String>> nivel2_1;
private Map<String, Map<String, String>> nivel3_1;
public MbBeanView()
{
Map<String, String> mapTemp;
nivel1Seleccionado=new HashMap<String, String>();
nivel1Seleccionado.put("0", "0");
nivel1Actual="0";
nivel2_1=new HashMap<String, Map<String, String>>();
mapTemp=new HashMap<String, String>();
mapTemp.put("0", "0");
nivel2_1.put("1", mapTemp);
nivel3_1=new HashMap<String, Map<String, String>>();
23
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
}
public void onChangeSelect1()
{
nivel2Seleccionado=nivel2_1.get(nivel1Actual);
nivel2Actual="0";
nivel3Actual="";
}
public void onChangeSelect2()
{
nivel3Seleccionado=nivel3_1.get(nivel2Actual);
nivel3Actual="0";
}
public String getNivel1Actual() {
return nivel1Actual;
}
public void setNivel1Actual(String nivel1Actual) {
this.nivel1Actual = nivel1Actual;
}
public Map<String, String> getNivel1Seleccionado() {
return nivel1Seleccionado;
}
public void setNivel1Seleccionado(Map<String, String> nivel1Seleccionado) {
this.nivel1Seleccionado = nivel1Seleccionado;
}
}
24
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

}
}
}
public Map<String, Map<String, String>> getNivel2_1() {
return nivel2_1;
}
public void setNivel2_1(Map<String, Map<String, String>> nivel2_1) {
this.nivel2_1 = nivel2_1;
}
}
}
}
}
public Map<String, Map<String, String>> getNivel3_1() {
return nivel3_1;
}
public void setNivel3_1(Map<String, Map<String, String>> nivel3_1) {
25
135
136
137
this.nivel3_1 = nivel3_1;
}
}
Como pueden ver en el cdigo anterior el cual es nuestro Managed Bean, tenemos varios atributos que
se encargan de cargar los datos para cada SelectOneMenu segn la seleccin que se vaya realizando.
Tambin tengan en cuenta que es muy importante que se creen los mtodos getter y setter para cada
atributo del managed bean sean accedidos desde la vista. Otro punto importante es crear los dos
mtodos onChangeSelect1y onChangeSelect2 los cuales se encargarn de los eventos de peticin ajax
para el select1 y select2 los cuales sern nuestros componentes que tratarn todo el proceso
de peticiones http.
Como el cdigo es muy extenso y se hara un poco tedioso explicarlo de forma descriptiva, se
recomienda ver el video donde se explica cada parte de dicho cdigo de forma ms detallada.
Bueno, una vez que ya creamos nuestro Managed Bean, ahora pasamos a crear la parte de la vista
donde tendremos 3 SelectOneMenu para tratar nuestra peticin ajax de 3 niveles. El cdigo debera
quedar de la siguiente forma.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE <span id="IL_AD4" class="IL_AD">html PUBLIC</span> "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<f:view>
<h:form>
<h:selectOneMenu id="select1" <span id="IL_AD11" class="IL_AD">value
</span>="#{mbBeanView.nivel1Actual}">
<f:selectItems value="#{mbBeanView.nivel1Seleccionado}"/>
<f:ajax render="select2 select3" listener="#{mbBeanView.onChangeSelect1()}"/>
</h:selectOneMenu>
<h:selectOneMenu id="select2" value="#{mbBeanView.nivel2Actual}">
<f:ajax render="select3" listener="#{mbBeanView.onChangeSelect2()}"/>
</h:selectOneMenu>
<h:selectOneMenu id="select3" value="#{mbBeanView.nivel3Actual}">
26
23
24
25
26
</h:selectOneMenu>
</h:form>
</f:view>
</h:body>
</html>
Perctense en el cdigo anterior que se tiene 3 SelectOneMenu en el cual los dos primero tienen el
evento ajax.
En un ejemplo real, lo que realizamos se podra usar de la siguiente forma.
Selecciono un pas
De acuerdo al pas selecciono un departamento
De acuerdo al departamento selecciono una provincia
Como pueden ver, el ejemplo anterior se ajusta exactamente a lo que hicimos con datos numricos.
Ahora hablemos un poco sobre el tipo de bean que tenemos.
Si Ud. ve en el video o prueba en su propia mquina, la peticin ajax funciona con toda normalidad ya
que la persistencia del bean de alcance view se mantiene en todas las peticiones ajax del ejemplo
porque esta se mantiene en la misma vista; sin embargo, si cambiamos nuestro ViewScoped por un
RequestScoped podrn ver que la peticin ajax slo funciona hasta el segundo nivel y para el tercer
nivel no hace nada, por qu se da esto? simplemente es porque si usamos un Bean RequestScoped lo
que hace es realizar la primera peticin ajax y luego muere ya que cumple su proceso de vida que
consiste en persistir a una sola peticin http. y qu pasa con mi managed bean ViewScoped? este
funciona para los 3 niveles o incluso para "n" niveles de peticiones ajax siempre y cuando la peticin
http se encuentre en la misma vista. En este caso hacemos ms de una peticin ajax en una misma vista
por lo que nuestro managed bean sobrevive ya que no se cambia de dicha vista hacia otra. Ese sera el
funcionamiento general de nuestro managed bean ViewScoped y la diferencia con el RequestScoped.
JSF Managed Bean SessionScoped

Continuando con el tema de Managed Bean ahora veamos la forma en que trabaja los bean con alcance
de sesin o losBean SessionScoped.
Para el ejemplo primero empecemos creando nuestro Managed Bean el cual debera quedar de la
siguiente forma considerando que se encuentre dentro del paquete llamado ManagedBean.
1
2
3
4
5
6
7
8
<span id="IL_AD12" class="IL_AD">package</span> ManagedBean;

import javax.faces.bean.SessionScoped;
/**
*
27
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
*/
@ManagedBean
@SessionScoped
public class MbSession {
private String nombreCompleto;
public MbSession() {
}
public String getNombreCompleto() {
return nombreCompleto;
}
public void setNombreCompleto(String nombreCompleto) {
this.nombreCompleto = nombreCompleto;
}
}
Vease que en el cdigo anterior slo tenemos un atributo llamado nombreCompleto el cual ser
nuestro atributo que har de sesin gracias al bean de SessionScoped. Por otro lado tienen que verificar
que tambin se crearon los mtodos getter y setter respectivos para dicha variable lo cual es crucial
para su funcionamiento.
Ahora que ya creamos nuestro Managed Bean de Session tenemos que trabajar con la vista en la cual
deben poner dentro de las etiquetas body el siguiente cdigo que tiene un campo de texto y un botn
los cuales se enlazan a nuestro Bean de Sesin.
1
2
3
4
<h:form>
<h:inputText value="#{mbSession.nombreCompleto}"/>
<h:commandButton action="index.xhtml" value="Enviar datos"/>
</h:form>
Como se puede ver en el cdigo anterior, es muy simple. Slo estamos enlazando nuestro campo de
texto a nuestravariable nombreCompleto de nuestro bean con alcance de sesin y el resto funciona por
si slo.
Para ms detalle del funcionamiento de este tipo de Bean, vea el video de la parte superior en el cual
se hace comparativas con el bean de alcance request y el de alcance view.
28
JSF Managed Bean ApplicationScoped

Llegamos al ltimo ejemplo bsico de los Managed Bean en el cual hablamos sobre el Bean con alcance
de aplicacin o ApplicationScoped
Los Managed Bean con alcance de aplicacin persisten a las diferentes peticiones a nivel de toda
nuestra aplicacin, es decir, tiene un mayor alcance que el de las sesiones ya que este podr
permanecer as se cambien los navegadores web. Por ejemplo, si creo una variable con alcance
de aplicacin en mi navegador chrome nombrePersona y luego me voy a un navegador como Firefox
por ejemplo, esta variable se encontrar cargado con el dato que yo le pas en chrome; vea que esto
puede ser muy importante para hacer referencia a cambios en toda la aplicacin y muchos otros usos
que le podamos dar. Sin ms que decir los dejo con el ejemplo.
Para el ejemplo primero empecemos creando nuestro Managed Bean el cual debera quedar de la
siguiente forma considerando que se encuentre dentro del paquete llamado ManagedBean.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import javax.faces.bean.ApplicationScoped;
/**
*
*/
@ManagedBean
@ApplicationScoped
public class MbApplication {
private String nombreCompleto;
public MbApplication() {
}
public String getNombreCompleto() {
return nombreCompleto;
}
public void setNombreCompleto(String nombreCompleto) {
this.nombreCompleto = nombreCompleto;
}
}
Vase que en el cdigo anterior slo tenemos un atributo llamado nombreCompleto el cual ser
nuestro atributo que har de variable global a nivel de la aplicacin gracias al bean
29
de ApplicationScoped. Por otro lado tienen que verificar que tambin se crearon los mtodos getter y
setter respectivos
para
dicha
variable
lo
cual
es
crucial
para
su
funcionamiento.
Ahora que ya creamos nuestro Managed Bean con alcance de aplicacin tenemos que trabajar con la
vista en la cual deben poner dentro de las etiquetas body el siguiente cdigo que tiene un campo de
texto y un botn los cuales se enlazan a nuestro Bean de Sesin.
1
2
3
4
<h:form>
<h:inputText value="#{mbApplication.nombreCompleto}"/>
<h:commandButton action="index.xhtml" value="Enviar datos"/>
</h:form>
Como se puede ver en el cdigo anterior, es muy simple. Slo estamos enlazando nuestro campo de
texto a nuestra variable nombreCompleto de nuestro bean con alcance de aplicacin y el resto funciona
por s slo.
Para ms detalle del funcionamiento de este tipo de Bean, vea el video de la parte superior en el cual
se hacen comparativas con el bean de alcance de sesin.
JSF Login y Sesiones

En este post veremos la forma de realizar un login con JSF. Para no complicarlo demasiado, por el
momento lo estamos haciendo sin base de datos ya que slo nos concentramos en el funcionamiento y
el manejo de las sesiones sobre JSF mediante las propiedades de HttpServletRequest que podemos
manejar.
Es cierto que podemos realizarlo con los conocidos SessionScoped, pero se hace esto para aquellos que
recin estn haciendo un cambio de JSP puro a JSF. Lgicamente no se limita esto a JSP ya que de todas
formas tambin podemos usarlo en nuestras app JSF.
Para
empezar crearemos
nuestro formulario de
login
en
el archivo index.xhtml.
Esto se hace basndose en mi otro blog donde se explica a detalle los estilos.
El cdigo del index vendra a ser el siguiente. (Para ms detalle de las hojas de estilo puede recurrir al
siguiente enlace y reforzar con el video de la parte superior)
http://enprogramacion.com/css3-formulario-login-y-keyframes/
1
2
3
4
5
6
7

<!DOCTYPE html <span id="IL_AD12" class="IL_AD">PUBLIC</span> "-//W3C//DTD XHTML 1.0 Transitional//EN" "h
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
>
<h:head>
30
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link rel="stylesheet" href="/JSFSession/public/css/cssFormulario.css"/>
</h:head>
<h:body>
<section class="contenedorLogin">
<h:form class="formulario">
<h2>Acceso de Usuario</h2>
<p>Rellene el siguiente formulario para ingresar al sistema (Simulacin)</p>
<p><h:inputText pt:placeholder="Usuario" value="#{mbLogin.usuario}" /></p>
<p><h:inputSecret pt:placeholder="Contrasea" value="#{mbLogin.contrasenia}" /></p>
<h:messages infoStyle="color: blue;list-style:none;" errorStyle="color:red;list-style:none;"/>
<section class="seccionBotones">
<a href="#">Regstrate</a>
<h:commandButton value="Ingresar" action="#{mbLogin.login()}" />
</section>
</h:form>
</section>
</h:body>
</html>
Una vez que tenemos el formulario, tenemos que agregar la hoja de estilo el cual debe quedar de la
siguiente forma.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body
{
background-color: #8BB9C7;
font-family: sans-serif;
}
.contenedorLogin
{
margin-top: 100px;
text-align: center;
width: 100%;
}
.formulario
{
background-color: #F3F3F3;
border-radius: 7px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4), 0px 0px 4px white inset, 2px 2px 2px rgba(0, 0, 0, 0.2);
display: inline-block;
31
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
margin: 0 auto;
text-align: center;
vertical-align: middle;
width: 270px;
-webkit-animation: entrada 1s;
-moz-animation: entrada 1s;
-ms-animation: entrada 1s;
-o-animation: entrada 1s;
animation: entrada 1s;
}
.formulario a
{
color: #7C96B7;
}
.formulario h2
{
color: #414848;
}
.formulario input[type=<span id="IL_AD3" class="IL_AD">submit</span>]
{
background-color: #409FBA;
border: none;
border-radius: 2px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4), 0px 0px 2px white inset;
color: white;
font-size: 17px;
height: 35px;
margin: 4px;
min-width: 100px;
-webkit-<span id="IL_AD8" class="IL_AD">transition</span>: background-color 0.2s;
-moz-transition: background-color 0.2s;
-ms-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.formulario input[type=submit]:hover
{
32
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
background-color: #D84530;
cursor: pointer;
}
.formulario input[type=submit]:<span id="IL_AD5" class="IL_AD">focus</span>
{
outline: none;
}
.formulario input[type=text], .formulario input[type=password]
{
border: none;
border-radius: 4px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(0, 0, 0, 0.1) inset, 0px 0px 2px white;
height: 30px;
margin: 0px;
min-width: 240px;
padding: 5px;
}
.formulario input[type=text]:focus, .formulario input[type=password]:focus
{
outline: none;
}
.formulario input[type=text]:hover, .formulario input[type=password]:hover
{
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) inset, -1px -1px 1px rgba(0, 0, 0, 0.1) inset,
0px 0px 2px white, 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.formulario p
{
color: #7C96B7;
}
.seccionBotones
{
background-color: #D4DEDF;
border-radius: 0px 0px 7px 7px;
box-shadow: 0px 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 0px 2px white inset;
33
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
padding-bottom: 10px;
padding-top: 10px;
text-align: right;
}
@-webkit-keyframes entrada
{
0%
{
margin-top: -1000px;
-webkit-transform: rotate(360deg);
}
75%
{
margin: 30px auto;
}
100%
{
margin: 0px auto;
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes entrada
{
0%
{
-moz-transform: rotate(360deg);
}
75%
{
margin: 30px auto;
}
100%
{
margin: 0px auto;
-moz-transform: rotate(0deg);
}
}
34
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
@-ms-keyframes entrada
{
0%
{
-ms-transform: rotate(360deg);
}
75%
{
margin: 30px auto;
}
100%
{
margin: 0px auto;
-ms-transform: rotate(0deg);
}
}
@-o-keyframes entrada
{
0%
{
-o-transform: rotate(360deg);
}
75%
{
margin: 30px auto;
}
100%
{
margin: 0px auto;
-o-transform: rotate(0deg);
}
}
@keyframes entrada
{
0%
{
35
184
185
186
187
188
189
190
191
192
193
194
transform: rotate(360deg);
}
75%
{
margin: 30px auto;
}
100%
{
margin: 0px auto;
transform: rotate(0deg);
}
}
Luego proseguimos con la segunda vista que vendra a ser acceso.xhtml el cual mostrar el dato
capturado en sesin.
El cdigo que va dentro de la etiqueta body de acceso.xhtml vendra a ser el siguiente.
1
2
3
4
5
6
<h:messages infoStyle="color: blue;list-style:none;"/>

<h:outputLabel value="Ingreso con el usuario: "/>
<h:outputText value="#{mbSession.usuario}"/>
<h:form>
<h:commandButton value="cerrar session" action="#{mbSession.cerrarSession()}"/>
</h:form>
Una vez que ya tenemos nuestros archivos xhtml, ahora podemos empezar a realizar los Managed
Bean respectivos, pero antes de pasar a esto, vean detalladamente que cada vista se encuentra
enlazado a los datos de cada Managed Bean; esto no es necesario explicar ya que se habl de dichos
componentes en post anteriores. Dicho lo anterior, ahora pasamos a crear nuestro Managed Bean
MbLogin el cual debera contener el siguiente cdigo.
1
2
3
4
5
6
7
8
9
10
11
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpServletRequest;
/**
*
36
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*/
@ManagedBean
@RequestScoped
public class MbLogin {
private String usuario;
private String contrasenia;
private final HttpServletRequest httpServletRequest;
private final FacesContext faceContext;
private FacesMessage facesMessage;
public MbLogin()
{
faceContext=FacesContext.getCurrentInstance();
httpServletRequest=(HttpServletRequest)faceContext.getExternalContext().getRequest();
}
public String login()

{
if(usuario.equals("KAAF") && contrasenia.equals("030191"))
{
httpServletRequest.getSession().setAttribute("sessionUsuario", usuario);
facesMessage=new FacesMessage(FacesMessage.SEVERITY_INFO, "Acceso Correcto", null);
faceContext.addMessage(null, facesMessage);
return "acceso";
}
else
{
facesMessage=new FacesMessage(FacesMessage.SEVERITY_ERROR, "Usuario o contrasea incorrecto", null
return "index";
}
}
public String getUsuario() {
return usuario;
}
public void setUsuario(String usuario) {
this.usuario = usuario;
}
37
53
54
public String getContrasenia() {
55
return contrasenia;
56
}
57
58
public void setContrasenia(String contrasenia) {
59
this.contrasenia = contrasenia;
60
}
61
}
El Managed Bean anterior es el que se encarga de controlar el login y el manejo de la asignacin de
sesin inicial.
Si Ud. desea explicacin detallada del Managed Bean anterior, lo puede ver en el video que se encuentra
en la parte superior.
Ahora creamos nuestro segundo Managed Bean llamado MbSession. Esto debera quedar de la
siguiente forma.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpServletRequest;
/**
*
*/
@ManagedBean
@RequestScoped
public class MbSession {
private String usuario;
private final HttpServletRequest httpServletRequest;
private final FacesContext faceContext;
private FacesMessage facesMessage;
public MbSession()
{
faceContext=FacesContext.getCurrentInstance();
38
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
httpServletRequest=(HttpServletRequest)faceContext.getExternalContext().getRequest();
if(httpServletRequest.getSession().getAttribute("sessionUsuario")!=null)
{
usuario=httpServletRequest.getSession().getAttribute("sessionUsuario").toString();
}
}
public String cerrarSession()
{
httpServletRequest.getSession().removeAttribute("sessionUsuario");
facesMessage=new FacesMessage(FacesMessage.SEVERITY_INFO, "Session cerrada correctamente", null);
return "index";
}
public String getUsuario() {
return usuario;
}
public void setUsuario(String usuario) {
this.usuario = usuario;
}
}
En el Managed Bean anterior se est manejando la muestra de sesin en nuestra segunda vista, as
tambin se maneja el cierre de sesin el cual redirecciona posteriormente al index.xhtml.
JSF Carrusel con Primefaces
Ahora veremos como realizar un carrusel con la UI que nos ofrece primefaces. Veremos que esto es
realmente sencillo de hacerlo, muy simple y funcional.
El cdigo podrn verlo en la parte posterior as como tambin el video donde se explica el
funcionamiento y la codificacin del mismo.
Lo primero que se debe realizar es descargar el jar correspondiente a primefaces. En este momento la
ltima versin gratuita que es la 4.0. Esto se puede descargar del siguiente enlace.
http://primefaces.org/downloads.html
Una vez tengamos el jar descargado lo que haremos es agregar dicho jar a nuestro proyecto donde
queramos incorporar nuestro carrusel.
Luego de incorporar el jar, lo nico que tenemos que hacer es poner el siguiente cdigo con lo que
conseguiremos el carrusel.
39

1
2
3
4
xmlns:p="http://primefaces.org/ui">
5
<h:head>
6
7
</h:head>
8
<h:body>
9
<h1>Carrusel con Primefaces</h1>
10
<p:carousel itemStyle="width: 500px; height: 500px;
11
" itemStyleClass="carItem" pageLinks="4" autoPlayInterval="4000"
12
numVisible="1" effect="easeInStrong" circular="true">
13
<p:graphicImage value="/images/img1.jpg"/>
14
15
16
17
18
19
20
21
22
23
</p:carousel>
24
</h:body>
</html>
Vea en el cdigo anterior que las partes ms importantes son las siguientes:
xmlns:p="http://primefaces.org/ui"
Vea que esta lnea de cdigo se agrega en la etiqueta html con la cual estamos agregando el interfaz de
usuario de primefaces con lo que podremos hacer uso de las etiquetas respectivas de primefaces bajo el
prefijo p.
Luego de esto viene la parte del carrusel que sera toda la parte que se encuentra en la
etiqueta <p:carousel> donde estamos agregando algunos atributos para que funcionen correctamente
bajo los estilos y parmetros correspondientes y dentro de estas etiquetas ponemos cada imagen que
queremos que se muestre en nuestro carrusel.
40
Como se puede ver es muy sencillo hacer un carrusel con la UI de primefaces y esto nos sirve como
ejemplo bsico para posteriores componentes ms complejos.
JSF PRIME FACES Y HIBERNATE PRODUCTO, VENTA Y DETALLE
Aqu les traigo un ejemplo de cmo realizar una posible venta de productos mediante las tecnologas de
JSF, PRIME FACES y HIBERNATE en el patrn de diseo DAO.
Aqu veremos cmo podemos realizar una venta donde tenemos que considerar la bsqueda de
producto por nombre, agregar cierto producto seleccionado a una lista de venta, agregar productos a la
lista de venta mediante cdigo de barras, retirar producto de la lista de ventas y calcular los precios
segn las cantidades y sus precios unitarios de cada producto agregado a la lista para la venta.
Son temas muy usuales donde tambin se ver la manera de realizar inserciones a la base de datos de
tablas relacionadas, as que pueden ver este post para aplicarlo en diferentes circunstancias de un
sistema real.
JSF APPAGENDA PARTE 1-CREACIN DE LA BASE DE DATOS Y CREACIN DEL

PROYECTO EN JAVA WEB
41
JSF APPAGENDA PARTE 2-TEMPLATE Y MEGA MEN DE PRIME FACE
JSF APPAGENDA PARTE 3-FORMULARIO REGISTRO DE USUARIO CON PRIME FACE
Tercera parte de nuestro proyecto de agenda con JSF. Aqu estamos empezando a crear un formulario
bajo prime face, conociendo un poco de sus componentes y la forma de incorporarlo en JSF
JSF APPAGENDA PARTE 4-CONFIGURACIN DE HIBERNATE Y CREACIN DE POJOS
Aqu la cuarta parte de la aplicacin de agenda en java donde configuramos el ORM Hibernate para su
uso en nuestra aplicacin, tambin creamos el archivo HibernateUtil para manejar las sesiones de
conexin a la base de datos y por ltimo estamos creando los Pojos mediante la ingeniera inversa que
nos ofrece Hibernate con lo que conseguimos todos los archivos que llevan los getter y setter de
42
nuestras tablas en conjunto con sus mapeadores xml. Sin ms que decir, les dejo con el ejemplo y el
cdigo fuente que se encuentra a continuacin.
JSF APPAGENDA PARTE 5-REGISTRO DE USUARIO, INTERFACE, DAO Y MANAGED BEAN

REQUEST
En esta quinta parte veremos la forma de registrar un usuario mediante hibernate con el patrn de
diseo DAO. Crearemos los Interface, Dao y Managed Bean para posteriormente enlazarlo con nuestra
vista. As mismo tambin tendremos que hacer algunos cambios en el archivo de configuracin de
hibernate, ya que por el cambio de versin, el validador de esquema actual de hibernate no reconoce
los tipos de datos char de la base de datos. Sin ms que decir los dejo con el ejemplo.
JSF APPAGENDA PARTE 6-ENCRIPTACIN DE CONTRASEA CON SHA-512
Cuando realizamos una aplicacin, es necesario mantener con mucha seguridad los datos que se van
almacenando en la base de datos de sta. Por este mismo motivo; en nuestra aplicacin de agenda
vemos como realizar una encriptacin SHA-512 a la contrasea de los usuarios registrados en dicha app.
43
JSF APPAGENDA PARTE 7-MENSAJES DE ALERTA Y ERROR
Siguiendo con nuestra aplicacin de agenda, ahora veremos cmo podemos controlar los mensajes que
debamos lanzar en nuestra vista ya sean estos de errores, informacin u otros.
Trabajaremos con la etiqueta <p:messages> de Prime Face lo cual nos permite hacer este laborioso
trabajo de una manera mucho ms sencilla y rpida, trabajndolo simplemente desde nuestros
Managed Bean.
JSF APPAGENDA PARTE 8-REQUESTCONTEXT JAVASCRIPT DESDE EL BEAN
RequestContext con lo que ejecutaremos una funcin javascript desde el ManagedBean para limpiar
nuestro formulariode registro de usuario despus de haber cumplido dicho registro.
Existen otras maneras de realizar esto como hacerlo con cdigo Java, pero no es una opcin muy
considerada porque es ms tedioso de hacerlo que manejarlo con una funcin de reseteo de JS. As
mismo conoceremos de esta forma un poco del uso de nuestro RequestContext.
44
JSF APPAGENDA PARTE 9-FACESVALIDATOR-VALIDACIN DE DATOS CON JSF
Incorporando la anotacin @FacesValidator en una clase de Java y luego implementando de Validator,

podemos trabajar con las validaciones que nos ofrece JSF para posteriormente implementar en nuestras
vistas de una forma muy sencilla. En este ejemplo veremos algo muy simple de como usar esto, sin
embargo seguiremos con ms de @FacesValidator para casos ms especficos.
JSF APPAGENDA PARTE 10-FACESVALIDATOR CON EXPRESIONES REGULARES
En este post estamos viendo como usar las validaciones mediante FaceValidator pero esta vez haciendo
uso de expresiones regulares; as mismo vemos como poner directamente una expresin regular a una
etiqueta calendar de Prime Face con lo que luego definimos el tipo de mensaje que lanzar este.
45
JSF APPAGENDA PARTE 11-MESSAGE, GROWL Y TOOLTIP DE PRIME FACE
Parte 11 de nuestra APP de agenda sobre Java donde hablaremos sobre los componentes <p:message/>,
<p:growl/> y <p:tooltip/> lo cual aplicaremos a nuestro formulario de registro de usuario para que as
demos mayor funcionalidad y entendimiento a dicho registro de nuestro pequeo sistema.
JSF APPAGENDA PARTE 12-VALIDACIN DE EXISTENCIA DE USUARIO Y

REESTRUCTURACIN DEL DAO
Aqu en la parte 12 de nuestra aplicacin de agenda sobre Java hablamos sobre la validacin de
existencia de usuario de nuestro registro creado, as mismo tambin estaremos reestructurando nuestro
patrn de diseo DAO para un mejor uso y eficiencia en el comportamiento del pequeo sistema.
Esto se realiza por ciertos posibles problemas que pueden surgir al tratar de nter actuar con el modulo
por ms de una vez en un slo mtodo del Managed Bean. Sin ms que decir, les dejo con el ejemplo a
continuacin.
46
JSF APPAGENDA PARTE 13-VALIDACIN POR ANOTACIONES
En este post vemos como realizar la validacin de datos en los campos del Pojo de forma directa
mediante anotaciones.
Controlamos el ConstraintValidationException para manejar cada mensaje que pueda lanzar nuestras
anotaciones implementadas.
JSF APPAGENDA PARTE 14-MEJORANDO ESTILOS EN EL TEMPLATE
En esta parte mejoraremos el Template de nuestra aplicacin depurando cdigo CSS y agregando lo
necesario para tener una mejor presentacin del mismo.
47
JSF APPAGENDA PARTE 15-LISTAR USUARIOS CON HIBERNATE SOBRE COMPONENTE

PRIME FACE
Ahora vemos como listar usuarios haciendo uso de nuestro ORM Hibernate para posteriormente cargar
los datos en un componente de Prime Face tratando el tema de paginacin.
Esto lo vemos muy elegante y fcil de trabajar con un cdigo muy limpio ya que es lo que nos ofrece
Hibernate para la parte de los datos y JSF con Prime Face para la parte de la vista.
JSF APPAGENDA PARTE 16-VER DETALLE DE USUARIO EN DILOGO DE PRIME FACE
En esta parte veremos cmo podemos cargar un dilogo para mostrar toda la informacin de un
usuario, esto debido a que en nuestro componente dataTable de Prime Face slo estamos mostrando
unos cuantos campos del usuario para mantener un diseo ms adecuado en la parte de la vista.
48
JSF APPAGENDA PARTE 17-FILTRO DE DATOS EN TABLA DE PRIME FACE
Ahora vemos como poder filtrar datos en nuestro componente dataTable de Prime Face.
Hacemos uso de unos cuantos atributos adicionales con lo que se agregan campos de entrada en cada
columna de la tabla para posteriormente escribir datos y pasar a filtrar segn la informacin del
dataTable.
JSF APPAGENDA PARTE 18-INICIO Y CIERRE DE SESIN
En esta parte 18 que les traigo haremos el ejemplo de cmo realizar el inicio de sesin en nuestra
aplicacin haciendo uso de los bean de tipo SessionScoped y tambin veremos la forma de cerrar dichas
sesiones.
49
JSF APPAGENDA PARTE 19-EXPIRAR SESIN
En este post veremos la forma de expirar la sesin de un usuario despus de que est inactivo un
tiempo dado.
Haremos esto haciendo uso de HttpSession lo cual es muy fcil de implementar haciendo falta slo 2
lneas de cdigo en el constructor del Bean de Sesin.
JSF APPAGENDA PARTE 20-FILTROS PARA LOS BEAN DE SESIN
Continuando con nuestra aplicacin de agenda sobre Java, ahora veremos la forma de agregar filtros
con lo que restringiremos las peticiones a ciertas URL's segn se tenga iniciada o no una sesin.
Para esto tenemos que crear una clase que implementaremos de Filter donde se trabajar con los
HttpServletRequest, HttpServletResponse, HttpSession y los requestUrl. Sin ms que decir les dejo con el
ejemplo que lo pueden visualizar a continuacin.
50
JSF APPAGENDA PARTE 21-ACCESO A URL'S SIN SESIN
En este post ampliamos un poco ms el funcionamiento de los filtros sobre Java.

Veremos cmo acceder a diferentes sitios de nuestra app sin la necesidad de iniciar sesin viendo una
forma muy fcil de hacer esto, almacenando todas las url's en un simple array de tipo String para
posteriormente comprobar el acceso dependiendo de la disponibilidad de dichas direcciones.
JSF APPAGENDA PARTE 22-CONSULTA DE DATOS POR SESIN INICIADA
Aqu con la parte 22 de la aplicacin de agenda sobre Java. Veremos la forma de realizar una consulta a
partir de la sesin iniciada de cierto usuario con lo que podremos ver sus datos para posteriormente
pasar a editar su informacin.
Esto se hace con el objetivo de preparar nuestro entorno para la edicin de datos de un usuario y subir
una imagen "Avatar" como tanto lo pidieron en los diferentes medios que se trasmite los videos del
blog.
51
JSF APPAGENDA PARTE 23-EDITAR DATOS CON HIBERNATE
Continuando con nuestra aplicacin de agenda sobre Java, ahora veremos cmo realizar la actualizacin
de datos de un usuario mediante un pequeo dilogo de prime face, haciendo la llamada respectiva al
mtodo de nuestro managed bean el cual se encargar de interactuar con el Dao realizado con
Hibernate.
JSF APPAGENDA PARTE 24-SUBIR IMAGEN AL SERVIDOR (AVATAR DE UN USUARIO)
Aqu les traigo la parte 24 de la aplicacin de agenda sobre Java con JSF, Prime Face y Hibernate.
En este punto veremos cmo subir una imagen a nuestro servidor lo cual har la representacin del
avatar de cierto usuario. Esto lo haremos con componentes de Prime Face y con el uso de
ServletContext para la lectura de la ubicacin del proyecto entre otros puntos muy importantes.
52
JSF APPAGENDA PARTE 25-MOSTRAR IMAGEN CON PRIME FACE
He aqu la parte 25 de la aplicacin de agenda sobre Java donde veremos cmo cargar una imagen (El
avatar del usuario) en una vista mediante Prime Face y recorriendo los valores basados en el primary
key de cada usuario.
JSF APPAGENDA PARTE 26-CAMBIO DE SESIN (ACCEDER A BEAN DESDE OTRO BEAN)
Existen casos en que necesitamos acceder a un Bean desde otro Bean y sinceramente hay muy poca
informacin de esto, as que en este video realizando la parte final de actualizar usuario, generando el
cambio de sesin si es necesario; veremos la forma de acceder a nuestro Bean de Sesin desde nuestro
Bean Request para actualizar los valores de sus atributos.
JSF APPAGENDA PARTE 27-EDITAR DATOS EN LISTA DE USUARIOS
53
Veamos cmo podemos realizar la edicin de registros en la base de datos a partir de todo
una lista cargada en un datatable de Prime Faces.
Para dicho caso deberemos hacerlo mediante un ManagedBean con alcance de Vista ya que existir ms
de una peticin en dicha vista, por lo tanto un ManagedBean Request no sera suficiente porque se
perdera a la primera peticin ajax realizada.
JSF APPAGENDA PARTE 28-REGISTRO DE CONTACTOS
Aqu les traigo la parte 28 de la aplicacin de agenda sobre Java donde realizaremos el registro de
contactos y solventaremos la duda de muchos donde tratamos una tabla relacionada con otra, haciendo
el paso de un Pojo hacia el Pojo de la tabla que obtiene la relacin con lo que conseguimos hacer el
simple mtodo de las funciones de Hibernate para persistir la informacin.
JSF APPAGENDA PARTE 29-MOSTRAR AMIGOS EN NODOS RELACIONADOS
Aqu en la parte 29 de nuestra aplicacin de agenda sobre Java, veremos cmo listar informacin de
nuestros amigos mediante nodos enlazados lo cuales sern mucho ms agradables al ojo humano que
verlos en un simple datatable de prime face.
Lo hacemos usando el componente mindmap de prime face lo cual viene a ser muy sencillo de usar y
lgicamente haremos la interaccin con la base de datos buscando amigos con respecto al que se a
logueado en la aplicacin.
54
JSF APPAGENDAJAVA PARTE 30-EDITAR DATOS DE UN AMIGO
Continuando con los temas del desarrollo de nuestra aplicacin de agenda sobre Java, ahora veremos la
forma de editar los amigos que tenemos en el sistema, los cuales se cargan en nodos de MindMap.
Vern que es algo muy sencillo y estar al alcance del clic de cada nodo mostrado en la vista de amigos
donde se habr agregado el cdigo de cada usuario para identificarlo y cargarlo en un dilogo de edicin
de datos.
55

Java Server Face (JSF)

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Java Server Face (JSF)

Transféré par

Droits d'auteur :

Formats disponibles

Contenido

JSF Introduccin ........................................................................................................................................ 3

<h:outputLabel for="checkDato" value="Dato:"/>

JSF Envo de Datos y Managed Bean

public void setApellidoPaterno(String apellidoPaterno) {

public void setCiudades(String[] ciudades) {

JSF Recorrer Array con JSTL

JSF Creacin de Layout

<div id="top" class="top">

Tablas Bsicas y Avanzadas con Mantenimiento

Drag and Drop en Tablas

JSF Alcance de los Managed Bean

JSF Managed Bean RequestScoped

JSF Managed Bean ViewScoped

<span id="IL_AD12" class="IL_AD">package</span> ManagedBean;

public void setNivel2Actual(String nivel2Actual) {

<?xml version='1.0' encoding='UTF-8' ?>

JSF Managed Bean SessionScoped

<span id="IL_AD12" class="IL_AD">package</span> ManagedBean;

JSF Managed Bean ApplicationScoped

JSF Login y Sesiones

<?xml version='1.0' encoding='UTF-8' ?>

<h:messages infoStyle="color: blue;list-style:none;"/>

public String login()

<?xml version='1.0' encoding='UTF-8' ?>

JSF PRIME FACES Y HIBERNATE PRODUCTO, VENTA Y DETALLE

JSF APPAGENDA PARTE 1-CREACIN DE LA BASE DE DATOS Y CREACIN DEL

JSF APPAGENDA PARTE 2-TEMPLATE Y MEGA MEN DE PRIME FACE

JSF APPAGENDA PARTE 3-FORMULARIO REGISTRO DE USUARIO CON PRIME FACE

JSF APPAGENDA PARTE 4-CONFIGURACIN DE HIBERNATE Y CREACIN DE POJOS

JSF APPAGENDA PARTE 5-REGISTRO DE USUARIO, INTERFACE, DAO Y MANAGED BEAN

JSF APPAGENDA PARTE 6-ENCRIPTACIN DE CONTRASEA CON SHA-512

JSF APPAGENDA PARTE 7-MENSAJES DE ALERTA Y ERROR

JSF APPAGENDA PARTE 8-REQUESTCONTEXT JAVASCRIPT DESDE EL BEAN

JSF APPAGENDA PARTE 9-FACESVALIDATOR-VALIDACIN DE DATOS CON JSF

Incorporando la anotacin @FacesValidator en una clase de Java y luego implementando de Validator,

JSF APPAGENDA PARTE 10-FACESVALIDATOR CON EXPRESIONES REGULARES

JSF APPAGENDA PARTE 11-MESSAGE, GROWL Y TOOLTIP DE PRIME FACE

JSF APPAGENDA PARTE 12-VALIDACIN DE EXISTENCIA DE USUARIO Y

JSF APPAGENDA PARTE 13-VALIDACIN POR ANOTACIONES

JSF APPAGENDA PARTE 14-MEJORANDO ESTILOS EN EL TEMPLATE

JSF APPAGENDA PARTE 15-LISTAR USUARIOS CON HIBERNATE SOBRE COMPONENTE

JSF APPAGENDA PARTE 16-VER DETALLE DE USUARIO EN DILOGO DE PRIME FACE

JSF APPAGENDA PARTE 17-FILTRO DE DATOS EN TABLA DE PRIME FACE

JSF APPAGENDA PARTE 18-INICIO Y CIERRE DE SESIN

JSF APPAGENDA PARTE 19-EXPIRAR SESIN

JSF APPAGENDA PARTE 20-FILTROS PARA LOS BEAN DE SESIN

JSF APPAGENDA PARTE 21-ACCESO A URL'S SIN SESIN

En este post ampliamos un poco ms el funcionamiento de los filtros sobre Java.

JSF APPAGENDA PARTE 22-CONSULTA DE DATOS POR SESIN INICIADA

JSF APPAGENDA PARTE 23-EDITAR DATOS CON HIBERNATE

JSF APPAGENDA PARTE 24-SUBIR IMAGEN AL SERVIDOR (AVATAR DE UN USUARIO)

JSF APPAGENDA PARTE 25-MOSTRAR IMAGEN CON PRIME FACE

JSF APPAGENDA PARTE 27-EDITAR DATOS EN LISTA DE USUARIOS

JSF APPAGENDA PARTE 28-REGISTRO DE CONTACTOS

JSF APPAGENDA PARTE 29-MOSTRAR AMIGOS EN NODOS RELACIONADOS

JSF APPAGENDAJAVA PARTE 30-EDITAR DATOS DE UN AMIGO

Vous aimerez peut-être aussi