JSF

JavaServer Faces es una tecnología y framework

para aplicaciones Java basadas en web que
simplifica el desarrollo de interfaces de usuario
en aplicaciones Java EE. JSF usa JavaServer
Pages como la tecnología que permite hacer el
despliegue de las páginas, y como controlador
clases CDI
 Configuracion jsf

Para poder usar java server faces debemos habilitarlo en el
web.xml y en una clase que la llamaremos JSFConfig
 Lenguaje de expresiones en paginas JSF

Mayor : para usar mayor en jsf podemos usar el signo > o “gt”

Menor: para usar menor podemos usar “lt”

Menor igual: para usar esta es “le”

Mayor igual: es “ge”

Empty: se usa para evaluar si un valor es vacio o null

Ternario: lo soporta las paginas jsf

And: para usar el and podemos usar && o la palabra and

Or:para usar el or podemos usar || o la palabra or

Not:para usar el nor podemos usar ! O la palabra not
 Controladores de JSF
JSF usa controladores de tipo beans, le podemos dar un alcanze con CDI esto
lo usa como controlador y a la vez podemos tener beans de ese tipo para pasar
datos de formulario con el lenguaje de expresiones JSF usando
#{nombreDelBean.Atributo}

Los beans lo podemos clasificar como beans de modelo, beans de controlador,

o beans de helper

Tambien podemos usar un

stereotipo @model
 Recibir informacion en JSF
Para recibir informacion podemos mapear de una pagina xhtml a un bean podemos usar el
lenguaje de expresiones de que seria asi jsf #{nombreBean.atributo} , si el bean tiene otro
bean podemos accder de igualmente de la misma forma siempre y cuanto los atributos
tengan sus getter o setter o sean publicos

Si una clase que no es manejada por cdi y queremos usarla como modelo podemos
integrarla a CDI con un metodo con @Produces para inicializarlo o simplemente colocamos
el nombre del controlador.atributo.propiedad siempre y cuadno el atributo tenga getter y
setter
 Etiquetas JSF
Para jsf tiene algunas etiquetas especiales para poder manejar formilarios y mapearlos a los
beans ademas que tiene alguna de validaciones


<h:form>: se usa para formularios es igual que la etiqueta html form

<h:inputText>: esta etiqueta represeta la etiqueta input de html, con el atributo value=”” le
podemos indicar a que bean pertence con la expresion que ta indicamos

<h:outputLabel>: es similar a la etiqueta label y para indicar a aque campo pertenece
podemos indicarlo con for=”id de campo” y para indicar el texto que tendra con
value=”texto”

<h:inputHidden>: se usa para indicar un campo de tipo hidden de html

<h:commandButton>: esta etiqueta se usa para indicar botones de submit en un formulario
tiene un atributo de tipo action=”” en donde se indica el metodo del bean que procesara el
formulario, se enviaran los datos que se mapearon en el <h:inputText> y tiene otro atributo
value=”” que es donde se coloca el texto que mostrara este tambien soporta logica para
mostrar el texto con el operador ternario

<h:commandLink>: representa la etiqueta <a> de html y siver para indicar un link si se hace
dentro de un <h:form> se enviara por post y tiene un atributo action en donde se indica el
metodo del bean que procesara la peticion y otro value que es el texto que mostrara similar a
un <commanButton> solo que de tipo link
 Etiquetas JSF

<h:link>: es similar al commandLink solo que este no validara ni nada solo se usa para
navegar entre paginas y solo invoca metodo get http, tiene un atributo value=”” que es donde
colocaremos el texto a mostrar y outcome=”” y es en donde colocaremos la pagina a donde
queremos redireccionar , para pasar parametros por el get podemos usar <f:param >

<h:outputLink value=”pag?name”>texto</h:outputLink >: similar al h:link este se puede usar
para pasar parametros a otra pagina al igual que <h:link> los dos son iguales

<f:param >: se usa dentro de la etiqueta <h:link> para pasar parametros por get tiene dos
atributos el value=”” en donde se coloca la informacion del parametro a enviar y name =”” que
es en donde colocamos el nombre del parametro

<f:metada>: se usa para mapear informacion de otra pagina

<f:viewParam>: se usa para recibir parametros de otra pagina y va dentro de la etiqueta
<f:metadata>, posee dos atributos name=”” va el nombre del parametro que se recibita y
value=”” el atributo del bean que se guardara

<h:messages>: se usa para enviar mensajes globales a la pagina como por ejemplo mensajes
de validacion

<h:mesage>: se usa para enviar mensage para un input en particular com por ejemṕlo
mensajes de validacion podemos indicar con for al campo que se quiere colocar el mensaje

<h:dataTable>:representa la etiqueta tableen html y le podemos pasar un array de objetos para
imprimirlo en la tabla con el atributo value=”” y le pasamos el atributo o el metodo que devuelve
la lista a iterar
 Action vs ActionListener vs valueChangeListener

Action: se utiliza cuando el metodo del bean devuelve un Strign para
interpretarlo como regla de navegacion y por ende llevar a otra pagina web


ActionListener: Se usa para ejecutar un metodo de tipo void para ejecutar un
evento, el metodo debe tener un parametro de ActionEvent even


ValueChangeListener: Se usa para ejecutar una accion al detectar cambios
en un componente se usa mediante inmediated=”true/false” que es para si se
renderisa o no, el metodo del bean que procese este cambio debe recibir un
parametro de ValueChangeEvent event y debe ser void
 JSF Etiquetas Part3

<h:colunm>:indica una columna de la tabla html en donde andentro va el titulo de la columna y
luego va el contenido de la lista a iterar en un <h:outputText name=”listaIterar.nombreAtributo”>

<h:facet name=”header”>: se usa adentro de la etiqueta column y indica el titulo de la columna
de la tabla adentro podemos colocar un texto o un <h:outputText> para indicar el texto del titulo

<h:SelectOneItem value=”mapeo del objeto donde se guardara”>: represetan una lista
desplegable en html el cual lo podemos llenar con una lista de objetos traidas desde el
controlador o con items

<f:selectItem >: crea un item html para llenar la lista desplegable tiene unos atributos
itemLabel=”texto” que es el texto a mostrar y itemValue=”valor” es el valor que tendra el item
puede ser un objeto

<f:selectItems>:se usa para llenar la lista con una lista de java tiene un atributo value que es en
donde colocaremos la lista y var=”objeto” el objeto con el que se llena, itemLabel=”texto” el
texto a mostrar itemValue=”valor” el valor que contendra el item en caso que se implemente un
converter se debe quitar el itemValue debido a que el convertidor se encargara de proporcinar el
valor
 Ejemplo de tabla html
Ejemplo formulario

Ejemplo tabla
 Convertidores

Primero debemos crear una clase tipo CDI que implemente la interface Converter<T> y
implementar sus metodos el primero va de el string del input que entra y lo convertiremos a
objeto, y el segundo convierte el objeto a string para la campa de presentacion

Para usar convertidores es necesario usar la etiqueta <f:converter binding=”clase
convertidora”> y le indicamos la clase encargada de convertir el elemento en el binding

En la siguiente diapositiva veremos un ejemplo con una lista desplegable --»

Ejemplo de convertidores personalizados
 Convertir tipos de fecha

F:converDateTime: sirve para convertir un tipo de dato a
fecha en este caso convertimos a localDate

F:passThroughAttribute: sirve para indicar que tipo de
componente html va a ser el inpunt en este caso sera uno
de tupo Date que muestre un calendario

Los convertidores sirven tanto para input como para
output
 Validadores en jsf
JSF tiene unos validadores por defecto con los tipos primitivos y rappers si en un input
introducimos un dato que no corresponda al atributo del bean lanzara un mensaje de que el
tipo de dato introducido es incorrecto. Ademas que tiene etiquetas para poder agregar
validaciones de campos de datos numericos o de string con <f:validate> implementando una
clase y tambien podemos usar los validadores por defecto de los rappers que trae JSF

Tambien podemos validar con anotaciones usando jakarta.validate en las clases de los bean,
En la siguiente imagen veremos un ejemplo, si tenemos validaciones en el bean del mismo tipo
y tenemos la misma validacion de la plantilla la que tomara por defecto es la de la plantilla
Ejemplo de un bean con validaciones
En este caso se usa la clase de de entidad como
ejemplo, pero tambien podemos colocarlos en
clases pojos de modelo o como es este caso
clases que representen una tabla

Para los string se usa @notEmpty mientras que

para los numeros y clases usamos @NotNulll,
para el minimo de de flotantes tenemos
@DecimalMin y @DecimalMax, tambien tenemos
para validar un email con @Email

Cabe mencionar que si se usa un validador de

plantilla de jsf y validamos el beans que
representa los datos con anotaciones, por defecto
en la pagina tomara las validaciones de la plantilla
Ejemplo de validador con clase
Como vemos tambien podemos implementar una
clase que valide y implementarlo en las etiquetas
 Layouts o template
Para crear un template debemos crear una carpeta llamada como queramos en el WEB-INF
y adentro de esa carpeta colocaremos las plantillas que usaremos para las paginas, en este
ejemplo crearemos una plantilla de una pagina web, pero podemos hacer la plantilla de un
solo elemento y reutilizarla, en caso que queramos usar directivas de jsf podemos hacer los
name spaces en la etiqueta <ui:composite> que es para indicar la planta que vamos a
aplicar

Plantilla pagina html ,con <ui:inser name=””>

definimos lo lugares para editar Pagina que implementa la plantilla, podemos crear una plantilla
de un solo componente y con <ui:define name=””> usarlo en
una pagina

22
 Mensajeria Flass
Nos permite mejorar nuestra aplicación, son mensajes de alerta para algo que sucedió por
ejemplo , actualizacion de un registro o la creacion de un registro o algun cambio en nuestra
aplicación

Para esto tenemos que obtener el FacesContext para modificar los mensajes globales en
este caso creamos un productor de FaceContext , y con getFlash().setKeepMessages(true) ,
indicamos que el mensaje sera para la proxima pagina. En el controlador que necesitomos
enviar un mensaje global lo hacemos mediante
facesContext.addMessage(null, new (FacesMessage.SEVERITY_INFO,"Eliminado con exito",""));
El primer parametro es el id del </mesagges> donde se mostrara si lo colocamos en null
sera global, el segundo recibe un objeto de tipo FaceMessages que contendra el mensaje y
la severidad y el tercero es el dettale que lo podemos dejar en blanco
 Ejemplo de mensaje flash
La etiqueta messagges global que recibira el
Creamos el productor mensaje con los diferentes estilos css según
la severidad

En este caso al guardar/actualizar mandamos un mensaje global que fue exitoso

como ejemplo
 Internaciolizacion Part1
En jsf tambien podemos manejar varios idiomas accediendo al ResourcesBundle en donde le
daremos un idioma predeterminado a la pagina pero que lo podremos cambiar mas adelante de
forma programatica

Primero debemos crear unos archivos.properties en la ruta src/main/resources en donde

colocaremos el idioma de cada seccion de nuestra aplicación y atravez de una clave=valor,
debemos crear un archivo properties por cada idioma
Ejemplo del Archivo.properties
Estructura del projecto
 Internaciolizacion Part2
En jsf tambien podemos manejar varios idiomas accediendo al ResourcesBundle en donde le
daremos un idioma predeterminado a la pagina pero que lo podremos cambiar mas adelante de
forma programatica

Para accerder al ResurceBundle vamos a crear un producto y le vamos a colocar el idioma por
defecto a traves de Locale que es el objeto que maneja el idioma dentro de ResourceBundle,
La primera propiedad es en nombre del archivo de propiedades que tomara por defecto

Aquí le damos un named para poder manejarlo en las paginas JSF debido a que atravez de
ese accederemos a la propiedades del archivo de idiomas y le damos un @Dependent para
que en el lugar que se injecte tome el alcance del mismo
 Asignacion de texto a los elementos
Para asignar a cada elemento html el mensaje que mostrara lo podemos hacer con esta
sigtaxis #{msg[‘clave del la propedad’]}

Con esto ya funcionaria pero por defecto tomaria el archivo que corresponda a
nuestro idioma por defecto si lo queremos cambiar podems hacer a travez de el
archivo faces-config.xml o de forma programatica como veremos a
continuacion
Cambio de idioma de forma programatica

Primero vamos a crear una clase que controlle la selección del leguaje con
una lista que contendra los diferentes lenguajes soportados, el locale para
asignarlo al Faces y luego el string para
Cambio de idioma de forma programatica Part2

Luego vamos a crear un metodo dentro del controllador de lenguaje para manejar el
cambio de un idioma a otro, este metodo tiene que ser de tipo changeListener osea que
recive un valueChangeEvent para que actualice toda la pagina

En este metodo recibimos el evento y y buscamos por los valores del hasMap si
el lenguaje seleccionado coincide con los valores en el map asignamos , al
Locale y luego se lo pasamos al FacesContext, este es el metodo que ira en el
changeListener
Cambio de idioma de forma programatica Part3
Ahora haremos un cambion en las paginas xhtml para que detecte el el controlador de lenguaje
para este caso solo haremos el cambio en la plantilla ya que es la pagina principal.

Deberemos poner los name espace en una etiqueta <f:view> que envuelta toda la
pagina menos el html y agregar el locale de la clase que controla el legunaje con el
atributo locale de la etiqueta f:view, la etiqueta html debera tener el atributo lang
asociada al locale del controlador quien es el que tiene la info del lenguaje

Cierre de las etiquetas. El </h:body> es para que veas que todo

esta adentro de la etiqueta <f:view menos el <html>
Cambio de idioma en los los textos literales
Ya con los cambios hechos anteriormente nuestra aplicación ya funcionaria pero aun tenemos
textos en bruto o que son dados por el controlador para eso podemos hacer que los maneje la
clase ResourceBundle , primero debemos agregar los textos que queramos mostrar en los
archivos properties de idiomas y luego configuraremos la clase lenguaje controller

El $s es para string format

Luego inyectamos el ResourcesBundle en la clase que genere los titulos en este caso el titulo lo
proporcionamos desde producto controler, este ya le definimos un productor anteriormente.

En el titulo hacemos un getString y

pasamos la clave que tengamos en
el archivo, en este caso la clave es
titulo
Cambio de idioma en los los textos literales part2

Tambien lo hacemos en los mensajes de FacesMessage colocando