Vistas
En src/main/webapp/WEB-INF modificamos el archivo faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
<navigation-rule>
<from-view-id>
/login.xhtml
</from-view-id>
<navigation-case>
<from-outcome>
admin
</from-outcome>
<to-view-id>
/admin.xhtml
</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
vamos con las vistas creamos en src/main/webapp el archivo plantilla.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:insert name="header">
<ui:include src="encabezado.xhtml"></ui:include>
</ui:insert>
<ui:insert name="content">
<ui:include src="contenido.xhtml"></ui:include>
</ui:insert>
</h:body>
</html>
En el mismo directorio creamos la clase encabezado.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition>
<div class="card">
<h:form>
<p:growl id="messages"/>
<p:menubar>
<p:submenu label="COAPI" icon="pi pi-fw pi-file">
<p:menuitem value="Usuarios" icon="pi pi-fw pi-pencil" outcome="usuario" />
<p:menuitem value="Pisos" icon="pi pi-fw pi-pencil" outcome="piso" />
<p:menuitem value="Empresas" icon="pi pi-fw pi-pencil" outcome="empresa" />
<p:menuitem value="Registrar Visitante" icon="pi pi-fw pi-pencil" outcome="registrarVisitante" />
<p:menuitem value="Registrar Salida" icon="pi pi-fw pi-pencil" outcome="visitante" />
<p:menuitem value="Salir" action="#{loginView.logout()}" icon="pi pi-fw pi-power-off"/>
</p:submenu>
</p:menubar>
</h:form>
</div>
</ui:composition>
</h:body>
</html>
Creamos el archivo contenido.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:form>
<p:panel header="Control de Acceso Peatonal a Inmuebles" footer="Tutosoftware">
<h:graphicImage url="/images/coapi.png" />
</p:panel>
</h:form>
</ui:composition>
</h:body>
</html>
Realizamos la vista login.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<div style="margin:0 auto;width:70%">
<ui:composition template="plantilla.xhtml" >
<ui:define name="header">
<h1>Bienvenido a COAPI</h1>
</ui:define>
<ui:define name="content" >
<h:form>
<p:growl id="messagesLogin"/>
<p:panel header="Ingresar usuario y contraseña " footer="Tutosoftware">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel value="Email:" for="email" style="color:white" />
<p:inputText id="email" value="#{loginView.email}" required="true" label="usuario">
</p:inputText>
<h:outputLabel value="Contraseña:" for="password" style="color:white" />
<p:password id="password" value="#{loginView.password}" required="true" label="password">
</p:password>
<f:facet name="footer">
<p:commandButton value="Acceder" action="#{loginView.loginAccess}" update="messagesLogin" > </p:commandButton>
</f:facet>
</h:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</div>
</h:body>
</html>
Cremos el archivo admin.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition template="plantilla.xhtml">
</ui:composition>
</h:body>
</html>
Creamos el archivo usuario.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<div style="margin:0 auto;width:70%">
<ui:composition template="plantilla.xhtml" >
<ui:define name="content" >
<h:form id="form1">
<p:growl id="messagesLogin"/>
<p:panel header="Control de Usuarios" footer="Tutosoftware">
<p:commandButton value="Agregar Usuario" styleClass="ui-button-success" rendered="#{loginView.usuario.hasRole(loginView.rolUser)}"
onclick="PF('dlg1').show()" />
<div class="card">
<p:dataTable var="usuario" value="#{usuarioView.usuarios}" id="usuarios">
<p:column headerText="Nombre">
<h:outputText value="#{usuario.nombre}" />
</p:column>
<p:column headerText="Apellido Paterno">
<h:outputText value="#{usuario.apellidoPaterno}" />
</p:column>
<p:column headerText="Apellido Materno">
<h:outputText value="#{usuario.apellidoMaterno}" />
</p:column>
<p:column headerText="Email">
<h:outputText value="#{usuario.email}" />
</p:column>
<p:column headerText="Rol">
<h:outputText value="#{usuario.rol}" />
</p:column>
<p:column headerText="Password">
<h:outputText value="#{usuario.password}" rendered="#{usuario.hasRole(loginView.rolUser)}" />
</p:column>
<p:column headerText="Actualizar">
<p:commandButton value="Actualizar" update=":dialogs:panel2" styleClass="ui-button-success" oncomplete="PF('dlg2').show()"
rendered="#{usuario.hasRole(loginView.rolUser)}" process="@this">
<f:setPropertyActionListener value="#{usuario}" target="#{usuarioView.usuario}" />
<p:resetInput target=":dialogs:panel2" />
</p:commandButton>
</p:column>
<p:column headerText="Eliminar">
<p:commandButton value="Eliminar" update=":dialogs:panel2" styleClass="ui-button-success" oncomplete="PF('deleteDialog').show()"
rendered="#{usuario.hasRole(loginView.rolUser)}" process="@this">
<f:setPropertyActionListener value="#{usuario}" target="#{usuarioView.usuario}" />
</p:commandButton>
</p:column>
</p:dataTable>
</div>
</p:panel>
<p:dialog header="Agrega tus datos" widgetVar="dlg1" minHeight="40" width="400" showEffect="fade"
closeOnEscape="true">
<h:panelGrid columns="2" cellpadding="5" id="panel">
<h:outputLabel value="Nombre:" for="nombre" style="color:white" />
<p:inputText id="nombre" value="#{usuarioView.nombre}" required="true" label="Nombre" style="color:white" >
</p:inputText>
<h:outputLabel value="Apellido Paterno:" for="apellidoPaterno" style="color:white" />
<p:inputText id="apellidoPaterno" value="#{usuarioView.apellidoPaterno}" required="true" label="Apellido Paterno" style="color:white" >
</p:inputText>
<h:outputLabel value="Apellido Materno:" for="apellidoMaterno" style="color:white" />
<p:inputText id="apellidoMaterno" value="#{usuarioView.apellidoMaterno}" label="Apellido Materno" style="color:white" >
</p:inputText>
<h:outputLabel value="Email:" for="email" style="color:white" />
<p:inputText id="email" value="#{usuarioView.email}" required="true" label="Email" style="color:white" >
</p:inputText>
<h:outputLabel value="Contraseña:" for="password" style="color:white" />
<p:password id="password" value="#{usuarioView.password}" required="true" label="password">
</p:password>
<h:outputLabel value="Rol:" for="rol" style="color:white" />
<p:selectOneMenu id="rol" required="true" value="#{usuarioView.rol}" >
<f:selectItem itemLabel="Seleccionar un rol" itemValue=""/>
<f:selectItem itemLabel="Usuario" itemValue="user"/>
<f:selectItem itemLabel="Administrador" itemValue="admin"/>
<f:facet name="footer">
<p:divider styleClass="mt-0" />
<h:outputText value="2 opciones" style="font-weight:bold;"/>
</f:facet>
</p:selectOneMenu>
<f:facet name="footer">
<p:commandButton value="Insertar usuario" actionListener="#{usuarioView.crearUsuario}" update="messagesLogin,usuarios,panel" > </p:commandButton>
</f:facet>
</h:panelGrid>
</p:dialog>
<p:confirmDialog widgetVar="deleteDialog" showEffect="fade" width="300"
message="¿Deseas elminnar el usuario?" header="Confirmación" severity="warn">
<p:commandButton value="Yes" icon="pi pi-check" actionListener="#{usuarioView.eliminarusuario}"
process="@this" update="usuarios"
oncomplete="PF('deleteDialog').hide()" />
<p:commandButton value="No" type="button" styleClass="ui-button-secondary" icon="pi pi-times"
onclick="PF('deleteDialog').hide()" />
</p:confirmDialog>
</h:form>
<h:form id="dialogs">
<p:dialog header="Actualiza tus datos" widgetVar="dlg2" minHeight="40" width="400" showEffect="fade"
closeOnEscape="true">
<h:panelGrid columns="2" cellpadding="5" id="panel2">
<h:outputLabel value="Nombre:" for="nombre" style="color:white" />
<p:inputText id="nombreActaliza" value="#{usuarioView.usuario.nombre}" required="true" label="Nombre" style="color:white" >
</p:inputText>
<h:outputLabel value="Apellido Paterno:" for="apellidoPaterno" style="color:white" />
<p:inputText id="apellidoPaternoActualiza" value="#{usuarioView.usuario.apellidoPaterno}" required="true" label="Apellido Paterno" style="color:white" >
</p:inputText>
<h:outputLabel value="Apellido Materno:" for="apellidoMaterno" style="color:white" />
<p:inputText id="apellidoMaternoActualiza" value="#{usuarioView.usuario.apellidoMaterno}" label="Apellido Materno" style="color:white" >
</p:inputText>
<h:outputLabel value="Email:" for="email" style="color:white" />
<p:inputText id="emailActualiza" value="#{usuarioView.usuario.email}" required="true" label="Email" style="color:white" disabled="true">
</p:inputText>
<h:outputLabel value="Contraseña:" for="password" style="color:white" />
<p:inputText id="passwordActualiza" value="#{usuarioView.usuario.password}" required="true" label="password">
</p:inputText>
<h:outputLabel value="Rol:" for="rol" style="color:white" />
<p:selectOneMenu id="rolActualiza" required="true" value="#{usuarioView.usuario.rol}" >
<f:selectItem itemLabel="Seleccionar un rol" itemValue=""/>
<f:selectItem itemLabel="Usuario" itemValue="user"/>
<f:selectItem itemLabel="Administrador" itemValue="admin"/>
<f:facet name="footer">
<p:divider styleClass="mt-0" />
<h:outputText value="2 opciones" style="font-weight:bold;"/>
</f:facet>
</p:selectOneMenu>
<f:facet name="footer">
<p:commandButton value="Actualizar usuario" actionListener="#{usuarioView.actualizarUsuario}" update=":form1:usuarios,:form1:messagesLogin" > </p:commandButton>
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</div>
</h:body>
</html>
Antes pasar a crear la vista de visitantes nos vamos al directorio src/main/webapp creamos un directorio llamado images y en ese directorio creamos otro directorio llamado tmp es importante crear estos directorio ya ahí es donde se almacena temporalmente la imagen capturada con la webcam.
en el directorio src/main/webapp/images agregamos la siguiente imagen:
Nos pasamos al directorio src/main/webapp creamos el xhtml registrarVisitante.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<div style="margin:0 auto;width:70%">
<ui:composition template="plantilla.xhtml" >
<ui:define name="content" >
<h:form id="form1">
<p:growl id="messagesLogin"/>
<p:panel header="Registrar Visitantes (*)Datos obligatorios" footer="Tutosoftware">
<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel value="Nombre*:" for="nombre" style="color:white" />
<p:inputText id="nombre" value="#{visitanteView.visitante.nombre}"
size="50" required="true" requiredMessage="El nombre es requerido" >
</p:inputText>
<p:message for="nombre"></p:message>
<h:outputLabel value="Apellido Paterno*:" for="apellidoPaterno" style="color:white" />
<p:inputText id="apellidoPaterno" value="#{visitanteView.visitante.apellidoPaterno}"
size="50" required="true" requiredMessage="El Apellido Paterno requerido" >
</p:inputText>
<p:message for="apellidoPaterno"></p:message>
<h:outputLabel value="Apellido Materno:" for="apellidoMaterno" style="color:white" />
<p:inputText id="apellidoMaterno" value="#{visitanteView.visitante.apellidoMaterno}"
size="50" >
</p:inputText>
<p:separator></p:separator>
<p:outputLabel for="@next" value="Tipo de identificación"/>
<p:selectOneMenu id="identificacion" value="#{visitanteView.visitante.identificacion}" required="true" requiredMessage="La identificación es obligatoria">
<f:selectItem itemLabel="Selecccionar" itemValue=""/>
<f:selectItem itemLabel="Ine" itemValue="Ine"/>
<f:selectItem itemLabel="Licencia de conducir" itemValue="Licencia"/>
<f:selectItem itemLabel="Pasaporte" itemValue="Pasaporte"/>
<f:selectItem itemLabel="Cartilla" itemValue="Cartillo"/>
<f:facet name="footer">
<p:divider styleClass="mt-0" />
<h:outputText value="4 opciones" style="font-weight:bold;"/>
</f:facet>
</p:selectOneMenu>
<p:message for="identificacion"></p:message>
<h:outputLabel value="Número de identificación*:" for="@next" style="color:white" />
<p:inputText id="numIdentificacion" value="#{visitanteView.visitante.numIdentificacion}"
size="50" required="true" requiredMessage="El número de identificación es requerido" >
</p:inputText>
<p:message for="numIdentificacion"></p:message>
<p:outputLabel for="@next" value="Piso"/>
<p:selectOneMenu id="piso" value="#{visitanteView.visitante.piso}" required="true"
requiredMessage="El piso es obligatorio">
<f:selectItem itemLabel="Seleccionar" itemValue=""/>
<f:selectItems value="#{pisoView.pisos}" var="piso"
itemLabel="#{piso.descripcion}" itemValue="#{piso.clave}"/>
</p:selectOneMenu>
<p:message for="piso"></p:message>
<p:outputLabel for="@next" value="Empresa"/>
<p:selectOneMenu id="empresa" value="#{visitanteView.visitante.empresa}" required="true"
requiredMessage="La emmpresa es requerida">
<f:selectItem itemLabel="Seleccionar" itemValue=""/>
<f:selectItems value="#{empresaView.empresas}" var="empresa"
itemLabel="#{empresa.clave}" itemValue="#{empresa.clave}"/>
</p:selectOneMenu>
<p:message for="empresa"></p:message>
<h:outputLabel value="Asunto*:" for="@next" style="color:white" />
<p:inputText id="asunto" value="#{visitanteView.visitante.asunto}"
size="50" required="true" requiredMessage="El asunto es requerido" >
</p:inputText>
<p:message for="asunto"></p:message>
<h:outputLabel value="A quien Visita*:" for="@next" style="color:white" />
<p:inputText id="aQuienVisita" value="#{visitanteView.visitante.AQuienVisita}"
size="60" required="true" requiredMessage="Poner la persona a quien vista es obligatorio" >
</p:inputText>
<p:message for="aQuienVisita"></p:message>
<h:outputLabel value="Gafete*:" for="@next" style="color:white" />
<p:inputText id="gafete" value="#{visitanteView.gafete}"
size="10" required="true" requiredMessage="El gafete es requerido" >
</p:inputText>
<p:message for="gafete"></p:message>
<p:commandLink id="fotoLink" onclick="PF('fotoDialog').show()">
<p:graphicImage value="#{pageContext.contextPath}/images/webcam.png"
rendered="#{! visitanteView.verFoto}"/>
<p:graphicImage value="#{pageContext.contextPath}/images/tmp/#{visitanteView.foto}.jpeg"
cache="false" rendered="#{visitanteView.verFoto}"/>
</p:commandLink>
<f:facet name="footer">
<p:commandButton value="Registrar Visitante" action="#{visitanteView.registrarVisitante}" update="form1" ></p:commandButton>
</f:facet>
</h:panelGrid>
</p:panel>
</h:form>
<h:form>
<p:dialog header="Haz una foto" widgetVar="fotoDialog" modal="true"
fixedCenter="true" width="400" visible="false" resizable="false">
<p:photoCam widgetVar="pc" listener="#{visitanteView.oncapture}" update="form1:fotoLink" id="pc"/>
<p:commandButton type="button" value="Capture" onclick="PF('pc').capture()"/>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</div>
</h:body>
</html>
Creamos la vista visitante.xhtml para registrar la salida de los visitantes.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<script type="text/javascript">
PrimeFaces.locales['es'] = {
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
weekHeader: 'Semana',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
timeOnlyTitle: 'Sólo hora',
timeText: 'Tiempo',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
millisecondText: 'Milisegundo',
ampm: false,
month: 'Mes',
week: 'Semana',
day: 'Día',
allDayText: 'Todo el día',
today: 'Hoy',
now: 'Ahora',
clear: 'Limpiar',
aria: {
close: 'Cerrar',
previous: 'Anterior',
next: 'Siguiente',
}
};
</script>
<div style="margin:0 auto;width:70%">
<ui:composition template="plantilla.xhtml" >
<ui:define name="content" >
<h:form id="form1">
<p:growl id="messagesLogin"/>
<p:panel header="Registrar Salida" footer="Tutosoftware">
<div class="card">
<div class="field col-12 md:col-4">
<p:outputLabel for="basic" value="Fecha de visita" />
<p:datePicker id="basic" locale="es" pattern="yyyy-MM-dd" value="#{visitanteView.fechaBusqueda}" >
<p:ajax event="dateSelect" listener="#{visitanteView.buscarVisitantesPorDia}" update="visitantes" />
</p:datePicker>
</div>
<p:dataTable var="visitante" value="#{visitanteView.visitantes}" id="visitantes">
<p:column headerText="Nombre">
<h:outputText value="#{visitante.nombre}" />
</p:column>
<p:column headerText="Descripción">
<h:outputText value="#{visitante.apellidoPaterno}" />
</p:column>
<p:column headerText="Fecha entrada">
<h:outputText value="#{visitante.fechaEntrada}" />
</p:column>
<p:column headerText="Gafete">
<h:outputText value="#{visitante.gafete}" />
</p:column>
<p:column headerText="Foto">
<h:graphicImage value="data:image/jpg;base64,#{visitante.foto}" style="max-width: 100px; max-height: 100px;" />
</p:column>
<p:column headerText="Fecha Salida" visible="#{visitante.salida}">
<h:outputText value="#{visitante.fechaSalida}" />
</p:column>
<p:column headerText="Registrar Salida" visible="#{!visitante.salida}">
<p:commandButton value="Registar salida" action="#{visitanteView.registrarSalida}"
update="visitantes" styleClass="ui-button-success" >
<f:setPropertyActionListener value="#{visitante.idVisitante}" target="#{visitanteView.idVisitante}" />
</p:commandButton>
</p:column>
</p:dataTable>
</div>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</div>
</h:body>
</html>