Tecnología de Programación Sesión 11

JavaServer Faces (JSF)

Es un marco (framework) de trabajo de interfaces de usuario del lado de servidor para aplicaciones web
basadas en tecnología Java, en Java EE, tiene como misión facilitar la construcción y mantenimiento de
aplicaciones web, siguiendo una arquitectura MVC (Modelo-Vista-Controlador).

Ventajas:

• El código JSF con el que se crea las vistas (etiquetas jsp) es parecido al HTML estándar.
• JSF resuelve validaciones, conversiones, mensajes de error.
• JSF permite introducir javascript en la página, para acelerar la respuesta de la interfaz en el cliente.
• JSF es extensible, por lo que se pueden desarrollar nuevos componentes a medida.

Normalmente las aplicaciones web se construyen como un conjunto de pantallas con las que va
interactuando el usuario. Estas pantallas contienen textos, botones, imágenes, tablas y elementos de
selección que el usuario modifica, todos estos elementos estarán agrupados en formularios HTML, que es la
manera en que las páginas web envían la información introducida por el usuario al servidor.

La principal función del controlador JSF es asociar a las pantallas, clases java que recogen la información
introducida y que disponen de métodos que responden a las acciones del usuario.

JSF resuelve de manera sencilla y automática tareas como:

• Mostrar datos al usuario en cajas de texto y tablas.

• Recoger los datos introducidos por el usuario en los campos del formulario.
• Controlar el estado de los controles del formulario según el estado de la aplicación, activando,
ocultando o añadiendo y eliminando controles y demás elementos
• Realiza validaciones y conversiones de los datos introducidos por el usuario.
• Rellenando campos, listas, combos y otros elementos a medida que el usuario va interactuando con
la pantalla
• Controlando los eventos que ocurren en los controles.

Partes de una aplicación JavaServer Faces

Una aplicación típica de JavaServer Faces comprende lo siguiente:

• Un conjunto de páginas web en la que se distribuyen los componentes.

• Un conjunto de etiquetas (tags) para agregar componentes a las páginas.
• Un conjunto de beans administrados (ManagedBeans), que son administrados por el contenedor
usando objetos. Estos beans administrados son los que están detrás de una página proporcionando
propiedades y funciones a la interfaz de usuario.
• Un archivo descriptor web (web.xml)
• Archivos de configuración de recursos (faces-config.xml)
• Objetos personalizados: validadores, convertidores, oidores (listeners) para mejorar la aplicación.

Las etiquetas JSF

JSF dispone de un conjunto básico de etiquetas que permiten crear fácilmente componentes dinámicos en
las páginas web. Estas etiquetas son:

• h:commandButton. Un botón al que podemos asociar una acción.

• h:commandLink. Un enlace hipertexto al que podemos asociar una acción.
• h:dataTable. Crea una tabla de datos dinámica con los elementos de una

Mgr. Ing. Victor Hugo Tapia Jacinto Página |1

Tecnología de Programación Sesión 11

• propiedad de tipo Array o Map del bean.

• h:form. Define el formulario JSF en la página JSP-
• h:graphicImage. Muestra una imagen jpg o similar.
• h:inputHidden. Incluye un campo oculto del formulario.
• h:inputSecret . Incluye un campo editable de tipo contraseña.
• h:inputText. Incluye un campo de texto normal.
• h:inputTextarea. Incluye un campo de texto multilínea.
• h:message. Imprime un mensaje de error en la página.
• h:messages. Imprime varios mensajes de error en la página, si se han producido.
• h:outputFormat. Muestra texto parametrizado. Utiliza la clase java.text.MessageFormat de
formateo.
• h:outputLabel. Muestra un texto fijo.
• h:outputLink. Crea un enlace hipertexto.
• h:outputText
• h:panelGrid. Crea una tabla con los componentes incluidos en el panelGrid.
• h:panelGroup. Agrupa varios componentes para que cierto componente los trate como un único
componente (por ejemplo para meter varios componentes en una celda de un panelGrid.
• h:selectBooleanCheckbox. Crea una casilla con dos estados: activado y desactivado.
• h:selectManyCheckbox. Crea un conjunto de casillas activables.
• h:selectManyListbox. Crea una lista que permite seleccionar múltiples elementos.
• h:selectManyMenu. Crea una lista desplegable de selección múltiple.
• h:selectOneListbox. Crea una lista en la que se puede seleccionar un único elemento.
• h:selectOneMenu. Crea una lista desplegable de selección.
• h:selectOneRadio. Crea una lista de botones, redondos normalmente, excluyentes.

Ejemplo 1

Vamos a crear el Formulario Login para validar el acceso a nuestro proyecto.

Crear proyecto, menú Archivo(File), Nuevo Proyecto (New Project), En Categoría, seleccionar Java Web y en
Proyectos(Projects) Aplicación Web(Web Application).

Mgr. Ing. Victor Hugo Tapia Jacinto Página |2

Tecnología de Programación Sesión 11

Escribimos el nombre que se crea conveniente.

Selecciona el servidor GlassFish Server, clic en Siguiente(Next)

En Frameworks, activar la casilla: JavaServer Faces e Hibernate con los siguientes parámetros, Luego clic en
Terminar.

URL de
Conexión

Mgr. Ing. Victor Hugo Tapia Jacinto Página |3

Tecnología de Programación Sesión 11

Se puede apreciar la plantilla del index, generado en forma predeterminada.

Luego, clic derecho en nuestro proyecto y Ejecutar(Run)

Se visualiza

Configuración de PrimeFaces

Desde un navegador web ingresamos a la URL https://www.primefaces.org/

Mgr. Ing. Victor Hugo Tapia Jacinto Página |4

Tecnología de Programación Sesión 11

En el menú Development seleccionamos Donwloads y buscamos en el apartado de Community Downloads

la librería de primefaces y la versión que vamos a utilizar en nuestro caso será primefaces-6.1.jar como se
muestra a continuación para descargar el archivo.

Archivo ya
descargado

Ahora agregamos el archivo descargado a la librería de nuestro proyecto

Desde la misma página de primefaces ingresamos a la galería para descargar la plantilla que utilizaremos
para nuestro proyecto. En el menú Development ingresamos a Theme Gallery, en la página que se muestra
nos desplazamos hasta la sección de Manual Download y hacemos click en el link de PrimeFaces Repository
para abrirlo en otra ventana.

Mgr. Ing. Victor Hugo Tapia Jacinto Página |5

Tecnología de Programación Sesión 11

Descargamos la última versión de all-themes que servirá para las diferentes plantillas (themes) de nuestro
proyecto

De la misma forma agregamos a nuestro proyecto los temas descargados

Abrimos nuestro archivo web.xml y agregamos el siguiente código que podemos encontrar en la página de
primefaces en la sección de Instalación

Podemos cambiar a otro tema

en este valor en mi caso
cambiaré a start

Luego modificamos el código del archivo index.xhtml

Ejecutamos el proyecto y mostramos ahora el nuevo cambio con las configuraciones

Mgr. Ing. Victor Hugo Tapia Jacinto Página |6

Tecnología de Programación Sesión 11

Bien ahora empecemos a generar la estructura de nuestro CRUD para luego crear el formulario de Login

Seleccionamos la categoría JavaServer Faces y luego JSF Page

Colocamos el nombre al archivo login.xhtml y click en Terminar

Luego modificamos el código del archivo creado como sigue:

Mgr. Ing. Victor Hugo Tapia Jacinto Página |7

Tecnología de Programación Sesión 11

Y luego cambiamos la página de inicio para ejecutar primero login.xhtml

Visualizamos el archivo

Añadimos un archivo de estilos llamado login.css en la carpeta resources/css con el siguiente código:

Mgr. Ing. Victor Hugo Tapia Jacinto Página |8

Tecnología de Programación Sesión 11

Ahora con los cambios hechos nuestro login ejecutándose se verá de esta manera

Ahora debemos programar nuestras capas empezaremos con nuestro modelo (model), utilizando nuestra
vieja conexión de base de datos el proyecto anterior

crearemos el archivo de Ingenieria Inversa para la creación de nuestro POJO’s para el mapeo de datos (este
procedimiento ya lo vimos cuando creamos nuestro proyecto en JSP) quedando nuestro proyecto ahora de
esta manera

Luego agregamos nuestro archivo de utilidad de Hibernate (HibernateUtil.java) para nuestras sesiones.

Creación de los DAO’s

Bien continuemos ahora con la creación de nuestras clases de Interfaces y los DAO’s en la clase dao de
nuestro proyecto (la primera clase llamaremos ClientesDao)

Mgr. Ing. Victor Hugo Tapia Jacinto Página |9

Tecnología de Programación Sesión 11

Definimos los métodos que serán luego implementados para nuestro DAO´s

Ahora creamos la clase ClientesDaoImp.java para implementar nuestros métodos abstractos creados en la
interface anterior, el código es el siguiente

Modificamos el método Autenticar(String cliLogin, String cli_Pwd):

Seguidamente nuestro método getClientePorLogin(String cliLogin)

Aquí hacemos referencia

a una clase que
utilizaremos para
nuestras sentencias SQL

Mgr. Ing. Victor Hugo Tapia Jacinto P á g i n a | 10

Tecnología de Programación Sesión 11

Creamos nuestra clase SQLSentences.java en el paquete util eh ingresamos el siguiente código

Por ahora solo necesitaremos de eso para que busque por nuestro login ingresado.

Creación del Bean

En el paquete vean click derecho y selecionamos nuevo… desde la categoría JavaServer faces seleccionamos
JSF Managed Bean le damos un nombre (loginBean) y en el scope: sesión y luego Terminar

En el archivo generado programamos los siguiente

Mgr. Ing. Victor Hugo Tapia Jacinto P á g i n a | 11

Tecnología de Programación Sesión 11

Creamos el siguiente método login adicionalmente en loginBean para logearnos desde la vista

Luego nuestro evento logout para deslogearnos

Para el caso de los círculos marcados se agregará la clase MyUtil.java en el paquete útil. Este nos permitirá
gestionar las diferentes rutas que maneja nuestra aplicación. Su código es el siguiente

Mgr. Ing. Victor Hugo Tapia Jacinto P á g i n a | 12

Tecnología de Programación Sesión 11

Ahora modificamos el archivo login.xhtml en las siguientes líneas

Movemos el archivo index.xhtml a la carpeta views dentro de Web Pages y lo renombramos por inicio.xhtml,
quedando de siguiente manera

Modificamos el archivo con el siguiente código

Y luego ejecutamos… mostrando las siguientes ventanas si son erróneos se mostrará así:

Mgr. Ing. Victor Hugo Tapia Jacinto P á g i n a | 13

Tecnología de Programación Sesión 11

Y si son válidos tendrá que mostrarse como sigue:

Mgr. Ing. Victor Hugo Tapia Jacinto P á g i n a | 14