Java Server Faces

Ejemplo JSF2
Tarea Practica
 Agenda
Ejemplo Guiado+Tarea Practica
Temas a tratar:
● Proyecto JSF2
● Creacion Proyecto Web
● Vistas+ManagedBean y su Ciclo de Vida
● Navegación entre paginas
● Pasaje de Parámetros en Peticiones

● Taller Practico
● Objetivos del Taller
● Servicios Disponibles para la tarea
● Sugerencias
 Proyecto EjemploJSF2
➢ Ejemplo JSF2. Se propone llevar a cabo la gestión de
empleados de una Empresa
➢ Persistencia:
➢ Se dispone de un Bean con operaciones de persistencia de
empleados

➢ Se pretende disponer de una ventana desde la cual poder

seleccionar empleados (criterios varios). ( Empleados.xhtml)
➢ Formulario Tenemos un formulario con los componentes del
criterio de selección con su correspondiente botón de envio
(“Buscar”)
➢ Tabla de Datos Empleados se despliegan en una tabla. Se
utiliza el componente h:dataTable

El componente h:dataTable se engancha con el conjunto de

empleados seleccionados disponibles en el Managed bean
 Empleados.xhtml
➢ Formulario de Selección de empleados
➢ Formulario con criterios de Selecció
➢ Nombre (Nombre del funcionario) h:inputText
➢ Departamento (Depto donde Trabaja) h:selectOneMenu
➢ Bean: gestionEmpleados. (Scope=sesión)
➢ Accion del formulario:
#{gestionEmpleados.seleccionarEmpleados} (Boton
Buscar)
➢ En gestionEmpleados se inyecta PersisteciaBean
@Inject
PersistenciaBean persistenciaBean;
 Empleados.xhtml
➢ gestionEmpleado tiene ademas:
➢ Criterios de Selección y conjunto de empleados
seleccionados
➢ private String criterioNombre
private String criterioDepartamento;
private Boolean criterioActivo;
private ArrayList<EmpleadoEmpresa> empleadosSeleccionados;

Se enganchan con los componentes de los criterios de selección y la tabla

para desplegar seleccionados
➢ Metodo desplegarSeleccionados
public String seleccionarEmpleados() {
empleadosSeleccionados=persistenciaBean.seleccionarEmpleados(criterioNo
mbre, criterioDepartamento, criterioActivo);
return "";
} Se llama a persistencia bean para obtener el conjunto de empleados para el
criterio de selección existente
Notar que devuelve “”. Por lo que navega a la misma pagina (se redespliega)
 Empleados.xhtml h:dataTable

➢ H:dataTable muestra los La estructura de la página se define

utilizando las etiquempleados seleccionados previamente
<h:form id="formTabla">
<h:dataTable value="#{gestionEmpleados.empleadosSeleccionados}"
var="empleado" styleClass = "employeeTable" headerClass =
"employeeTableHeader">
<h:column><f:facet name="header">Nombre</f:facet>
#{empleado.nombre}
</h:column>
…
</h:dataTable> #{empleado.departamento}
</h:column> Notar que itera para cada empleado en la variable “empleado”
 Navegacion desde tabla hacia
DatosEmpleado
➢ La ultima columna tiene un link hacia DatosEmpleado.xhtml
Notar que se pasa como parámetro el id de empleado
<h:column>
<f:facet name="header">Ver Detalle</f:facet>
<h:link value="Ver detalle" outcome="DatosEmpleado.xhtml">
<f:param name="id" value="${empleado.id}" />
</h:link>
</h:column>
 DatosEmpleado.xhtml

DatosEmpleado contiene la declaracion de parametros de entrada en

bloque metadata
<f:metadata>
<f:viewParam name="id" value="#{gestionEmpleado.id}" />
<f:event type="preRenderView"
listener="#{gestionEmpleado.preRenderViewListener}"/>
</f:metadata>
DatosEmpleado recibe en las peticiones un parámetro denominado id y cuyo valor
se alberga en gestionEmpeado.id o sea una vez que la petición es recibida, queda
disponible el id de empleado en dicha variable (de gestionEmpleado bean).
 DatosEmpleado.xhtml
• Lo otro a destacar es que se captura el evento de
preRenderView el cual ocurre antes de que se dibuje la
pantalla ejecutándose el listener denominado
preRenderViewListener. En este momento ya está disponible
el parámetro de la petición recibida por lo cual es posible
buscar la información del empleado para poder desplegarla
(como se hace en el ejemplo)
 Tarea Practica
➢ Bajar e importar proyecto EjemploJSF2Tarea
➢ Seguir las instrucciones del documento de la Tarea Practica

Se pide completar la aplicación de modo de poder disponer de los

siguientes requerimientos funcionales
• Poder mostrar el detalle completo en modo editable de todos
los campos de Empleado
• Poder editar y actualizar los datos de un empleado (todos sus
campos). Para esto hay que agregar botón “Salvar cambios”
(Se puede reciclar el botón Hacer Algo)