PrimeFaces, CDI, JPA

Formularios Ajax con PrimeFaces

Ingeniero: Israel Rosas Soria

Twitter: @ssnova24
Correo: israel.rosas@joedayz.pe
PanelGrid, InputText, OutputLabel y
CommandButton
 PanelGrid, InputText, OutputLabel y
CommandButton
Comenzaremos creando un xhtml llamado
registroAlumno.xhtml y dentro del mismo instanciaremos los
namespace para, jsf/html, primefaces y posteriormente jsf/core.

Creamos lo siguiente:
1. Un panelGrid con 2 columnas de PrimeFaces.
2. Inicialmente un outputLabel de jsf, con un inputText de PrimeFaces;
aplicaremos el atributo for al outputLabel.
3. Ahora trabajaremos con el componente facet del JSF para poner
manejar una cabecera y un footer, para esto instanciaremos un
namespace para jsf/core. <f:facet>
4. En el footer colocaremos un commandButton y le daremos un icono y
una posicin para dicho icono.
5. Ahora procederemos a dale el atributo required al inputText del
primefaces y pulsamos el botn registrar.
6. Para mostrar el mensaje de error colocaremos fuera del panelGrid, el
componente para mensajes.
 PanelGrid, InputText, OutputLabel y
CommandButton
7. Ahora solucionamos el problema del mensaje de error con el atributo
label en el inpuText del componente primefaces.
8. Para poder comparar con el componente output del primefaces,
crearemos uno para email asi como un inputText.
9. Ahora colocaremos 2 grupo para una fecha inicio y fecha fin.
10. Una vez terminada las pruebas, procederemos a crear nuestro
Bean llamado AlumnoBean.java que implemente de
Serializable.
11. Dentro del bean declararemos el nombre y el email,
respectivamente y generaremos sus mtodos gets and sets.
12. Una vez terminado colocaremos las anotaciones:
@ManagedBean y @ViewScoped.
13. Finalmente crearemos un mtodo publico llamado
Registrar, en este mismo crearemos 2 system.out.print para
las variables a enviar.
 PanelGrid, InputText, OutputLabel y
CommandButton
14. Para vincular nuestro bean con los atributos del formulario,
colocaremos en la propiedad value=#{ejemploBean.atributo} y al
botn en su propiedad action=#{ejemploBean.metodo}
15. Finalmente desplegamos el ejemplo y nos debe de mostrar las
respectivas impresiones.
Ajax y Renderizacin Parcial
 Renderizacin Parcial
Es aquella en la cual ciertos fragmentos de la pgina se rendizar.

Para entender ms a detalle este tipo de renderizacin,

procederemos a crear nuestro bean llamado InversionBean con
los atributos nombre, nombreInvertido y cantidadPalabras, y con
un mtodo llamado InvertirPalabra.

En el mtodo invertirPalabra, comenzaremos inicializando los

atributos, luego si el nombre es diferente de nulo inicializamos
cantidadPalabras a 1.

Ahora pasaremos a recorrer el nombre de atrs hacia adelante y lo

concatenaremos a nombreInvertido, si en el camino nos
encontramos con un sumaremos a cantidadPalabras 1 (++).

Para ver que nuestra lgica este correcta procederemos a realizar

un system.out.print de nombreInvertido.
 Renderizacin Parcial
Una vez terminado nuestro InversionBean, procederemos a
realizar nuestro xhtml inversin.xhtml (ejemplo 1).

Dentro de inversin, generaremos un ouputLabel y un inputText

el cual le daremos la propiedad value vinculado con el atributo del
bean, #{inversionBean.nombre}, fuera del panelGrid, haremos
un ouputText de JSF, el cual se vinculara con el atributo
#{inversionBean.nombreInvertido} y agregaremos la propiedad
id.

Para terminar realizaremos un commandButton, el cual llamara a

travs del action al mtodo invertirPalabra, para que actualice
con Ajax se requerir de la propiedad update y llamaremos al id
del componente a renderizar (id del outputText).

(*) podemos colocar en la propiedad update palabras claves como @form indicando que
renderizar todo el formulario o simplemente colocaremos un id al formulario y llamaremos
con idForm:idComponente
 Renderizacin Parcial
Ejemplo 2: Manejo de Eventos

Crearemos una copia del xhtml llamada

inversionEventos.xhtml, el cambio es que eliminaremos el botn
ya que se realizar a travs de un listener que se ejecutar con la
tecla enter.

<p:ajax listener="#{inversionBean.invertirPalabra}" update="nombreInvertido"/>

Para realizar el mismo evento pero con el nico cambio de que

llame al mtodo por cada letra ingresada, se utilizara la propiedad
event=keyup.
 Renderizacin Parcial
Ejemplo 3: Renderizacin en 2 formularios.

Crearemos una copia del xhtml llamada

inversionFormularios.xhtml, ahora crearemos un formulario
nuevo y colocaremos el outputText en dicho formulario nuevo.

Cuando probemos este cambio, nos indicar que no encuentra el

atributo nombreInvertido, para solucionar esto realizaremos
cambios en la propiedad update, indicando el idForm destino
con un pequeo cambio agregaremos : delante del mismo, ahora
si probamos si funciona.
 Renderizacin Parcial
Ejemplo 4: Actualizar 2 outputText

Crearemos una copia del xhtml llamada

inversionActualizar.xhtml, para este ejemplo crearemos otro
outputText y vincularemos con el atributo cantidadPalabras.

Para actualizar uno o mas outputText, hay distintas formas de

poder hacerlo, en la propiedad update colocaremos los ids de
los componentes ya sea separado por (espacios), otra manera
separado por comas y la ultima forma es actualizando todo el
formulario con @form.
Procesamiento y Envio Parcial
 Procesamiento Parcial
Peticin

Enviar a vista

Obtener valores

Procesar Valores de la peticin

Actualizamos modelo (bean)

Invocamos Aplicacin

Renderizar Respuesta

Respuesta
 Procesamiento Parcial vs.
Renderizacin Parcial

A primera vista podemos decir que ambos casos son el mismo

escenario, pero si vamos mas all la renderizacin parcial va
componentes viendo un mbito general y enviados a travs de un
evento, por otro lado el procesamiento Parcial es aquel que
solamente podemos centrarnos exclusivamente en un componente
del mbito total (formulario), sin la necesidad de procesar todos
los componentes del formulario.

En otras palabras el procesamiento enva a procesar parte del

formulario, mientras que la renderizacin parcial enva a procesar
todos los componentes del formulario.
 Procesamiento Parcial

Ejercicio para entender procesamiento parcial:

Disponibilidad de Usuario, este ejercicio se centrar en procesar

solamente la peticin de ver la disponibilidad del usuario y no
enviar todo los componentes del formulario.

Para comenzar crearemos un disponibilidad.xhtml, en dicho

xhtml, crearemos un panelGrid y dentro del mismo colocaremos,
un ouputLabel con su inputText para el username, y otro
outputLabel con su inputText para el nombre, adicionalmente al
costado del inputText del username colocaremos un
commandButton para ver la disponibilidad, para agrupar el
inputText y el commandButton de verificacin lo realizaremos con
<h:panelGroup>.
 Procesamiento Parcial

Ahora nos centraremos en el UsuarioBean, declararemos 2

atributos username, nombre, adicional 2 mtodos:
verDisponibilidad y registrarUsuario.

En registrarUsuario dentro del mtodo realizaremos los

system.out.print para cada atributo, y simplemente mostraremos
un mensaje indicando que se realiz el registro.

FacesContext.getCurrentInstance().addMessage(null, new
FacesMessage("Registro enviado"));

No hay que olvidarnos que para mostrar los mensajes en la pgina

es necesario colocar el componente <p:messages /> y su
propiedad autoUpdate=true.
 Procesamiento Parcial

En verDisponibilidad colocaremos un if en el cual validaremos

si el username es igual a un username colocado de prueba.
Para ello mostraremos un FacesMessage para cada caso del if, para
el caso positivo que el usuario ya esta en uso se colocar un nivel
de color especifico al mensaje de acuerdo a escalas, por ejemplo:
msg.setSeverity(FacesMessage.SEVERITY_WARN).

Cuando probemos el funcionamiento veremos que aun se enva

todo el formulario, es aqu donde ingresa el procesamiento parcial,
para solucionar este inconveniente se usar la propiedad
process, este ir en el commandButton y dentro del process
colocaremos los componentes involucrados para el proceso, en
este caso (process=login @this).

Cuando probemos, nos daremos cuenta de que efectivamente solo

procesa la parte de verificacin del username y no todo el
formulario.
 Procesamiento Parcial

Variacin del ejercicio anterior: Validar sin la necesidad de dar

click en un commandButton, sino al momento de saltar a otro
inputText.

Para ello haremos una copia de nuestro xhtml y crearemos

disponibilidad2.xhtml, en este xhtml copiaremos el action del
botn y en el inputText colocaremos el componente <p:Ajax
listeners/> y ah colocaremos el action del botn, para terminar
agregaremos el evento change (event=change y
process=@this).

Finalmente procedemos a probar el ltimo cambio.

 Envio Parcial

Envio parcial va de la mano con el procesamiento parcial, ya que

solo se enviar ciertos campos a ser procesados y no todos los
campos presentes en el formulario, esto se realiza para un optimo
uso de recursos y menor tiempo de respuesta.

Para el desarrollo del ejercicio, se proceder a utilizar el ejercicio

de procesamiento parcial, el cambio seria en el componente
p:Ajax, hay una propiedad llamanda partialSubmit=true.

Ahora cuando probemos observaremos en la seccin de Network o

Red del navegador, ya no enva nos 2 parmetros sino solamente
el de username.
 Envio Parcial

Hay una manera de configuracin para enviar de manera parcial

todo aquel componente que tiene un procesamiento parcial es
decir que tiene presente la propiedad process.

Este se realiza con un cambio en el web.xml:

<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
Notificaciones con AjaxStatus
 Notificaciones con AjaxStatus

Este tipo de notificaciones se utiliza desde el envio de la peticin al

servidor hasta el momento en que se nos brinda una respuesta.

Peticin Procesamiento Respuesta

Notificacin Notificacin Notificacin

Ejemplo: Gif Animado, Cargadores.

 Notificaciones con AjaxStatus

Utilizaremos el ejercicio de disponibilidad.xhtml.

En UsuarioBean, nos posicionaremos en el mtodo

verDisponibilidad, antes de comenzar su respectiva lgica
simularemos un tiempo de demora en el procesamiento, esto se
realizar para poder usar las notificaciones de AjaxStatus.

Colocaremos Thread.sleep(2000), dentro de un try catch, es para

que el hilo de procesamiento duerma 2 segundos antes de
empezar a procesar.

Ahora en webapp, crearemos un paquete llamado

resource.images, y colocaremos un gif animado.
 Notificaciones con AjaxStatus

Una vez que tenemos el gif animado, procedemos a declarar el

componente p:ajaxStatus dentro del formulario, dentro del mismo
vamos a colocar 2 componentes facet del jsf/core, uno para <f:facet
name=start> y el otro para <f:facet name=complete>.

Dentro del facet start, colocaremos un h:graphicImage, el cual

tendr una propiedad library el cual automticamente reconoce
la ruta webapp/resources, simplemente colocamos
library=images y el nombre del archivo en la propiedad
name=nombre.gif; finalmente en el facet complete,
colocaremos un h:outputText value en vacio para que no
muestre el gif una vez completado el proceso.
 Notificaciones con AjaxStatus

Si deseamos podemos darle un estilo al componente ajaxStatus,

para esto colocaremos una propiedad llamada styleClass,
declaramos un <style> y dentro le daremos unos estilos para
cambiar la posicin del gif, por ejemplo position:fixed, top:30px.

Finalmente probamos el cambio.

Ejemplo 2: Modificando el ajaxStatus con javascript.

Primero realizaremos una copia de disponibilidad2.xhtml, una

vez quitaremos los facet y nos centraremos en las propiedades
onstart y oncomplete del mismo componente ajaxStatus.
Para hacer el ejemplo, realizaremos que al momento de procesar
ponga en disable las cajas de texto y al completar las regrese a su
estado original.
Entrada de contrasea con componente
password
 Entrada de contrasea con
componente password
Lo primero que vamos hacer es un xhtml llamado
verificar.xhtml, dentro de este mismo, colocaremos un
panelGrid de 2 columnas, y dentro 2 output y 2 input para
username y password respectivamente, no hay que olvidar el
commandButton, apuntando a un mtodo registrar, y con la
propiedad update a todo el formulario (@form).

Paralelamente realizaremos un Bean llamado VerificarBean, el

cual tendr como atributos el username y el pwd,
adicionalmente realizaremos un mtodo llamado registrar, el
cual mostrara en consola el pwd y mostrar un mensaje de
registro.
 Entrada de contrasea con
componente password
La diferencia de este componente de PrimeFaces es que nos brinda
una propiedad llamada feedback, el cual colocndolo en true,
nos permite ver cuan segura puede ser nuestra contrasea.

Para poder personalizar los mensajes que aparecen por la

propiedad feedback, colocaremos las siguientes propiedades:

weakLabel="" ; Para contrasea debil

goodLabel="" ; para contrasea media
strongLabel="" ; para contrasea fuerte
promptLabel="; para el mensaje de inicio

Adicionalmente podemos colocar una propiedad llamada inline, la cual

es true, nos ayuda a colocar el mensaje del feedback no como un popup
en float.
 Entrada de contrasea con
componente password
Ahora para ver mas alla la funcionalidad del componente
password, realizaremos 2 componentes mas para la confirmacin
de la contrasea (un output y un password).

Primero probamos cual es el cambio.

Antes se tenia que realizar la comparacin de la contrasea en

cdigo java, ahora primefaces facilita esta implementacin de
cdigo y se hace tan simple con la propiedad match, la cual va
en el primer componente password, el cual har referencia al 2do
componente password a travs de su id.

Finalmente probamos el resultado.

Entrada de texto con componente
InputTextArea
 Entrada de texto con
componente inputTextArea
Lo primero que vamos hacer es un xhtml llamado detalle.xhtml,
ahora colocaremos 2 conjunto de elementos, un outputLabel con
un inputText y un outputLabel con su inputTextArea, utilizaremos
el mismo Bean VerificarBean, al cual adicionaremos los atributos
nombre y detalle, finalmente vinculamos el bean con el
xhtml.

Una vez agregados los atributos, regresamos al xhtml, y en el

inputTextArea, colocaremos la propiedad cols= y rows=. Hay
que recordar que el commandButton apuntar a un mtodo
llamado registrarDetalle.

Cuando probemos el inputTextArea, nos daremos cuenta que se

autoredimensiona con el contenido que ingresemos, para esto si no
deseamos ese comportamiento colocaremos la propiedad
autoResize="false, y si deseamos podemos manejar un
maxLenght=140.
 Entrada de texto con
componente inputTextArea
Si deseamos mostrar un contador de letras ingresas en el
inputTextArea, colocaremos una propiedad en el mismo llamado
counter=idOutputText, adicionalmente crearemos un outputText
con id=contador.

Para poder llevar una contabilidad adicional y mostrarla como en

twitter, utilizaremos la propiedad counterTemplate=Resta {0}
caracteres. Para ordernar un poco el espacio agruparemos con
panelGroup la seccin del inpuTextArea.

Ahora Probemos el cambio.

 Entrada de texto con
componente inputTextArea
Utilizando como autocompletar:

Para poder utilizar esta propiedad, lo primero que realizaremos es

crear un mtodo llamado buscarTexto, el cual recibir como
parmetro un String y devolver un listado de String, dentro del
mtodo se realizar un List<String>, el cual se llenar cuando un
texto de ejemplo comience con el texto enviado.

Para terminar nos posicionamos en el inputTextArea y

colocaremos la propiedad llamada completeMethod y
llamaremos al mtodo buscarTexto, finalmente probamos el
cambio.
Entrada por componente Calendar
 Entrada por componente Calendar

Para poder obtener la fecha y la hora en el ingreso PrimeFaces

brinda su componente calendar, el cual ya viene incrustado del
componente del mismo jQuery.

Para el ejemplo agregaremos un atributo Date a VerificarBean, y

crearemos un xhtml llamado obtenerfecha.xhtml y crearemos un
componente calendar a este componente indicaremos que sea
requerido y vincularemos con nuestro VerificarBean.

Puede darse el caso de que el navegador obligue inicialmente al

calendar a un formato de fecha distinto al de dia/mes/ao, para
ello en el componente colocaremos la propiedad
pattern=dd/MM/yyyy, si deseamos agregarle el detalle de la
hora simplemente agregamos al pattern: dd/MM/yyyy HH:mm:ss.
 Entrada por componente Calendar

Como pudimos ver, podemos escoger la fecha y hora desde el

calendar y adicionalmente podemos manipular la fecha tambin
desde el teclado, para evitar ingresos errneos por el teclado, el
componente calendar tiene una propiedad llamada
readonlyinput=true, el cual permite nicamente el ingreso
desde el calendar exclusivamente, para facilitar la navegacin
utilizaremos la propiedad navigator=true, para ayuda al
usuario a buscar una fecha especifica.

Hay una propiedad del componente que permite que el calendar

aparezca como parte de la pgina y no como popup que es el valor
por defecto esta propiedad es mode=inline.

Otras 2 propiedades interesantes son mindate y maxdate, estas

propiedades permiten tener un rango especifico de fechas, por
ejemplo crearemos un mtodo que devuelva un new Date() y lo
llamaremos en una de las propiedades mencionadas.
 Entrada por componente Calendar

Como pudimos ver, podemos escoger la fecha y hora desde el

calendar y adicionalmente podemos manipular la fecha tambin
desde el teclado, para evitar ingresos errneos, el componente
calendar tiene una propiedad llamada readonlyinput=true, el
cual permite nicamente el ingreso desde el calendar, para facilitar
la navegacin utilizaremos la propiedad navigator=true.

Hay una propiedad del componente que permite que el calendar

aparezca como parte de la pgina y no como popup que es el valor
por defecto esta propiedad es mode=inline.

Otras 2 propiedades interesantes son mindate y maxdate, estas

propiedades permiten tener un rango especifico, por ejemplo
crearemos un mtodo que devuelva un new Date(). Cabe
mencionar que este mtodo tiene que comenzar con get y al
llamarlo se quita este prefijo.
 Entrada por componente Calendar

Para terminar, podemos cambiar el idioma del calendar, esto se

realizara con la propiedad locale=es (es para espaol). Pero
nos damos la sorpresa que al actualizar no cambio nada, para ello
ingresamos a la siguiente ruta:

code.google.com/p/primefaces/wiki/

Y buscamos el lenguaje es que esta en las actualizaciones,

simplemente copiamos y pegamos ese cdigo en el head de la
pgina y probamos.
Carga de listado con selectOneListBox
 Carga de Listado con selectOneListBox

Como sabemos el selectOneListBox es comboBox donde solo

vamos a escoger un elemento del mismo. Para ello vamos a
generar un xhtml llamado preferencia.xhtml, adicionalmente
crearemos un Bean llamado Preferencia, el cual contar con 3
atributos: idPreferencia, preferencia, imgPreferencia,
adicionalmente tendr 2 contructores uno sin argumentos y el otro
con todos los argumentos y declararemos como atributo a
Preferencia y generando sus getters y setters VerificarBean.

Para nuestro primer ejemplo en VerificarBean , declararemos un

atributo profesion y en preferencia.xhtml, crearemos el
selectOneListBox que sea requerido y lo vincularemos a
profesion y dentro del mismo crearemos 4 selectItems

<f:selectItem itemLabel="Estudiante" itemValue="1" />

 Carga de Listado con selectOneListBox

Regresando a preferencia.xhtml, crearemos un outputLabel

llamado preferencias y un selectOneListBox requerido, este mismo
estar vinculado al atributo preferencia del VerificarBean, y
ahora en vez de definir <f:selectItem> utilizaremos <f:selectItems>
porque este va a llamar a un listado de preferencias, este deber
estar declarado en VerificarBean (public List<Preferencia>
getListPreferencias()), no hay que olvidar como es un get, al
vincularlo con el selectItems solo colocaremos listPreferencias.

Para el mtodo getListPreferencias(), crearemos al inicio una

constante que es un atributo estatico final de tipo List<Preferencia>
llamado PREFERENCIAS.

private static final List<Preferencia> PREFERENCIAS = new ArrayList<>();

 Carga de Listado con selectOneListBox

Para proceder a llenar el array, crearemos un bloque static{}, y

dentro del mismo colocaremos nuevas instancias de Preferencia a
travs de su constructor con argumentos.

Static{
PREFERENCIAS.add(new Preferencia(1, Deporte, deporte));
}

De esta manera crearemos 3 preferencias mas, ahora si en el return del

getListPreferencias retornaremos la constante PREFERENCIAS.

Hay que recordar que debemos ir colocando las imgenes en la carpeta de

imgenes del webapp.

Ahora procederemos a declarar una propiedad var=preferencia en el

selectitems, esto va a servir como un for que se le aplicar al listado
PREFERENCIAS.
 Carga de Listado con selectOneListBox

Antes de finalizar esta parte colocaremos las 2 ultimas

propiedades: itemLabel=#{preferencia.desPreferencia} y
itemValue=#{preferencia.idPreferencia}.

Una vez que probemos el cambio, y pulsemos el commandButton,

nos percataremos que nos sale un error relacionado a un
convert, esto se debe a que en realidad lo que se esta pintando
en el itemValue es un objeto y no un string ni un int; para subsanar
este detalle es realizar una clase que ayude a convertir de un
Object a un String y de un String a un Object.

Ahora crearemos una clase llamada PreferenciaConverter, a esta

clase le daremos la anotacin @FacesConverter(prefConverter)
y que implemente de la clase Converter.
 Carga de Listado con selectOneListBox

Como vemos la clase implementada de Converter, nos pide

implementar 2 mtodos: getAsObject y getAsString.

En el mtodo getAsString:
If(value!=null && !value.equals()){
Preferencia pref = (Preferencia)value;
Return pref.getIdPreferencia+;
}

En el mtodo getAsObject:
for(Preferencia pref : VerificarBean.PREFERENCIAS){
if(value.equals(pref.getIdPreferencia()+"")){
return value;
}
}
 Carga de Listado con selectOneListBox

Para probar en el itemValue del selectItems, solo colocamos el

valor del var itemValue=prefer y en el selectOneListBox
colocamos la propiedad converter=iddelconverter.

Ahora colocaremos la imagen al selectOneListBox. Lo primero que

haremos es colocar dentro del selectOneListBox dos componentes
<p:column> y dentro un <h:graphicImage> y un <h:outputText>
respectivamente.

Una vez creados, procederemos a llenarlos respectivamente

ayudndonos de var=i el cual colocaremos como propiedad del
selectOneListbox, entonces:

<h:graphicImage library=images name=#{i.imgPreferencia}.jpg>

<h:outputText value=#{i.desPreferencia}>
Men de seleccin con selectOneMenu,
con contenido customizado y filtros,
select dependientes.
 Men de seleccin con
selectOneMenu
SelectOneMenu, es mucho mas sencillo que el componente que
vimos en el apartado anterior.

Lo primero que haremos ser utilizar el mismo VerificarBean, lo

que si crearemos ser selectprofesion.xhtml, en este xhtml
crearemos un componente selectOneMenu, y dentro tendremos 4
<f:selectItem itemLabel= itemValue=>.

Lo vincularemos al mtodo registrarProfesion y probamos.

 Contenido customizado y filtros

Para poder realizar un selectOneMenu customizable como en el

caso de el selectOneListBox que se realizo con una imagen para
mostrarlo mas amigable.

Lo primero es basarnos en el ejemplo de preferencias y crearemos

un archivo llamado selectprofesion2.xhtml, una vez
acondicionado para el selectOneMenu, realizaremos la parte de
filtros, simplemente nos centraremos en colocar 2 propiedades:
Filter=true y filterMatchMode=startsWith.

Finalmente probamos los cambios.

 SelectOneMenu dependientes

Lo normalmente es que en aplicaciones web el uso de combos

dependientes se realice mas a menudo, el ejemplo clsico es
pases/ciudades.

Para comenzar con este apartado, primero crearemos GeoBean

en el cual definiremos 3 atributos bsicos: nombre, ciudad,
pais, adicionalmente 2 listados (List<String> pases y ciudades)
para poder llenar los datos para estos ltimos solo generaremos
sus mtodos get.

Generaremos nuestro mtodo public llamado registrarGeo en el

cual haremos system.out.print de los 3 atributos iniciales y un
mensaje de registro satisfactorio.
 SelectOneMenu dependientes

Como aun no trabajaremos con BD, crearemos un constructor para

inicializar el listado de pases:
public GeoBean(){
paises.add(Peru);
paises.add(Brasil);
}
Mientras tanto crearemos selectpaises.xhtml, en este
vincularemos las listas inicialmente. En el selectOneMenu para
paises, crearemos primero un <f:selectitem itemLabel=seleccione
itemValue=> y luego crearemos un
<f:selectItems value=#{geoBean.paises} var=pais itemLabel=#{pais}
itemValue=#{pais}>

Luego crearemos un selectOneMenu para ciudades, con un

<f:selectItem itemLabel=Seleccione itemValue=> y un
selectItems igual al de paises.
 SelectOneMenu dependientes

Ahora el siguiente paso es vincular los combo para que uno carge
al otro, lo primero a realizar es dentro del selectOneMenu declarar
un componente <p:Ajax event=change process=@this
update=idcomboacargar listener=#{metodocargar}>, ahora
procederemos a crear un mtodo llamado cargarCiudades().

Dentro de cargarCiudades():
Primero realizaremos un clear al listado ciudades.
Luego colocaremos un if(Peru.equals(pais)){aadimos al listado
de ciudades algunas ciudades.}
Luego se realizara para la parte del else.

Finalmente probamos los cambios.

Componente selectOneRadio
 SelectOneRadio

Ahora veremos el componente de seleccin de radioButton. Lo

primero que haremos ser utilizar UsuarioBean, en el cual
crearemos 2 atributos adicionales llamados sexo y estadoCivil,
adicional crearemos un mtodo llamado registrarEstado().

Ahora pasaremos al selectestado.xhtml, en este crearemos un

<p:selectOneRadio> y dentro de este declaramos el componente
<f:selectItem itemLabel=Masculino itemValue=M>
<f:selectItem itemLabel=Femenino itemValue=F>

Si deseamos mostrar el resultado de forma vertical, utilizaremos la

propiedad layout=pageDirection/lineDirection.

Probamos el ejercicio hasta el momento.

 SelectOneRadio Customizado

Customizar el selectOneRadio es posible con layout=custom.

Ahora crearemos un <p:outputLabel> para Estado civil; y crearemos

un <p:selectOneRadio layout=custom value=apuntar a estadocivil
del bean> y dentro de este crearemos 3 <f:selectItem
itemValue=soltero,casado,divorciado>, solamente crearemos con
itemValue.

Debajo del selectOneRadio crearemos un <h:panelGrid column=3>,

dentro de este mismo definiremos 3 <p:radioButton id=opt1
for=estadoCivil(id del selectOneRadio) itemIndex=0 (posicin)/>,
y debajo de los 3 radioButton crearemos 3 <p:outputLabel
value=Soltero for=opt1>, para ordenarnos colocaremos desde el
selectOneRadio hasta los outputLabel dentro de un <h:panelGroup>.

Para alinear podemos crear una clase .centrar td y llamarla desde el

panelGrid con la propiedad rowClasses=centrar.
Componente selectManyCheckBox
 SelectManyCheckBox

Primero crearemos en UsuarioBean un atributo List<String>

intereses. Luego generamos sus mtodos getters y setters, para
terminar con esta parte crearemos el mtodo registrarIntereses().

Para registrarIntereses(), realizaremos:

For(String interes:intereses){
system.out.print(inters seleccionado: +interes);
}

Ahora creamores escogerinteres.xhtml, en este simplemente

creamos un <p:selectManyCheckBox
value=#{usuarioBean.intereses}> y dentro generamos un par de
<f:selectItem itemLabel=Programar itemValue=1>

Podemos asignarle el layout=pageDirection/lineDirection

Campo de sugerencia con componente
Autocomplete
 Campo de sugerencia con Autocomplete

Hemos visto el autocompletar de google, ahora trataremos de

simular una funcionalidad parecida con el componente
autocompletar.

Primero crearemos un componente <p:autocomplete> y que sea

requerido, adicionalmente le daremos la propiedad
completeMethod=#{geoBean.sugerirPaises}.
Utilizaremos los atributos nombre y pais de GeoBean.
Adicionalmente crearemos el mtodo mencionado anteriormente
llamado sugerirPaises() que retornara un listado de String
(nombres de paises), hay que recordar que este mtodo va a recibir
un String textoBuscar.

Ahora crearemos el atributo List<String> paises y lo

inicializaremos, posteriormente crearemos un constructor y
llenaremos el listado de paises.add(Peru).
 Campo de sugerencia con Autocomplete

Ahora regresamos a sugerirPaises() y lo primero que vamos

hacer crear un List<String> paisesSugeridos y luego procedemos a
recorrer el listado de paises.
for(String pais:paises){
if(pais.toLowerCase().startsWith(textBuscar.toLowerCase())){
paisesSugeridos.add(pais);
}
}

Finalmente retornamos paisesSugeridos.

 Campo de sugerencia con Autocomplete

Cuando probemos el autocomplete, veremos que al escribir busca,

pero si colocamos una letra y luego regresamos al inpuText
anterior se queda la letra ingresada en el autocomplete, para evitar
ello el autocomplete cuenta con una propiedad llamada
forceSelection=true, el cual obliga a seleccionar la opcin del
men caso contrario limpia el autocomplete.

Ahora si deseamos buscar el pas con un numero mnimo de

caracteres utilizamos la propiedad minQueryLength=2.

Finalmente si deseamos que aparezca un trigger para desplegar las

opciones generales, colocaremos dropdown="true. Ahora
probemos los cambios.
Manejo de POJO con Autocomplete
 Soporte POJO con autocomplete

POJO (Plain Old Java Object), como sabemos es una clase simple
que no esta sujeta a ningn framework.

Primero crearemos una clase Pais, cuyos atributos bsicos sern

cdigo y nombre, adicional crearemos 2 constructores uno sin
recibir parmetros y el otro recibiendo dichos atributos.

Luego crearemos un Bean llamado UbicacionBean, en el cual

crearemos primero una constante que como ya sabemos es un
atributo public static final List<Pais> PAISES, luego hay que
colocar un bloque static{ y dentro ir llenado el listado PAISES}
Luego crearemos un atributo llamado Pais (haciendo referencia a
la clase Pais), uno para el nombre y generar sus getters y setters.
 Soporte POJO con autocomplete

Ahora como sabemos cada vez que trabajamos con objetos

usaremos conversores, para ellos, generaremos la clase llamada
PaisConverter, el cual como sabemos tendr la anotacin
@FacesConverter(idConvertidor) y que implemente de
Converter.

Dentro de esta clase convertidora:

En getAsObject:
Declaramos un Integer cdigo = null;
Luego generaremos una sentencia
try{
cdigo = Integer.parseInt(value);
}catch(NumberFormatException e){}
 Soporte POJO con autocomplete

Despus del bloque try, colocaremos la lgica de la validacin del

value!=null, si es que es diferente de nulo procedemos a recorrer el
listado de PAISES de UbicacionBean.

If(value!=null){
for(Pais pais:PAISES){
if(cdigo.equals(pais.getCodigo())){
return pais;
}
}
}

En getAsString
Validaremos si el value es diferente de nulo y .
Luego castearemos
Pais pais = (Pais)value;
Return pais.getCodigo+;
 Soporte POJO con autocomplete

Para terminar la seccin de java, hay que realizar el mtodo de

sugerirPaises() que devolver un List<Pais> y recibir como
parmetro un atributo.

Entonces para sugerirPaises():

Lo primero es declarar un ArrayList llamado paisesSugeridos,
luego recorremos la constante PAISES, y dentro del for
comparamos:
Pais.getNombre.toLowerCase().startsWith(parmetro.toLowerCase())

Si es asi agregamos pais a paisesSugeridos.

 Soporte POJO con autocomplete

Ahora toca crear un xhtml, lo llamaremos autopais.xhtml,

dentro colocaremos un <p:autocomplete>, con los siguientes
atributos:
Id, value=vincular con pais, completeMethod=apuntar al
mtodo sugerir paises, var=colocar una variable. Ej:i,
forceSelection=true, itemLabel=#{i.nombre}, itemValue=i,
converter=idconvertidor.

Finalmente probamos la implementacin.

Mscara de entrada con inputMask
 Mscara de entrada con inputMask

inputMask, tiene un plugin de jquery que sirve como una gua al

usuario, a simple vista parece un placeholder pero cuando ingresa
es literalmente una gua para ingresar informacin, en un orden y
disposicin especifica.

Para comenzar creamos en UsuarioBean, los siguientes

atributos, telfono, celular, telefonoAnexo, de los mismos
generaremos sus getters and setters, adicional crearemos un
mtodo llamado registrarDatos() dentro del mismo solo
haremos unos system.out.print y un mensaje indicando que se
registro.

Ahora crearemos un xhtml llamado infousuario.xhtml, el

crearemos 3 <p:maskInput>, en todos los casos los vincularemos
con el bean y al final utilizaremos la propiedad mask en todos los
casos.
 Mscara de entrada con inputMask

La propiedad mask, ser de la siguiente manera:

Mask=(99) 999-9999
Mask=(99) 999-999-999
Mask=(99) 999 9999 - 9999

Una vez terminado probamos los cambios.

Entrada boolean a travs de
selectBooleanCheckBox
 Boolean con selectBooleanCheckbox

Componente selectBooleanCheckBox extiende del CheckBox de

JSF.

En UsuarioBean, se proceder a crear un atributo Boolean

llamado aceptar.

Creamos un terminos.xhtml, en este xhtml crearemos primero 2

<h:panelGroup>, uno sin contenido y en el otro creamos un
outputLabel cuyo value ser el titulo del checkbox y el
selectBoolenCheckbox lo vinculamos al atributo del bean.

Finalmente probamos.
EJERCICIO FINAL TEMA 2
 Boolean con selectBooleanCheckbox
Ahora que conocemos los componentes mas resaltantes, se dejar
un ejercicio para resolverlo la entregarlo la otra semana, de paso
que lo revisamos todos.
Registro de Contrato Curso de Actualizacin
Razn Social:

RUC

Ciudad AUTOCOMPLETE

Modalidad Online Presencial

Fecha del Contrato

Mtodo de Pago
COMBOS DEPENDIENTES

Forma de Pago

Cursos a contratar

ExtJS 4.1.3 MVC

PrimeFaces, CDI y JPA SELECCIONAR VARIOS
Spring Core 3.2
jQuery UI
 Ingeniero: Israel Rosas Soria
Twitter: @ssnova24
Correo: israel.rosas@joedayz.pe