Estimad@s,
seguimos con PrimeFaces, ahora vamos a crear nuestra pantalla principal, la cual contendrá un menú al estilo Dock:
Implementaremos en esta ocasión, las tres opciones disponibles Ventas|Gauge|Logout, luego, en el futuro, tendremos que agregar alguno más.
Lo primero es eliminar código que ya no usaremos, se trata de la opción de logout de "gauge.xhtml", se deberá eliminar el código que coloco en color rojo y lo que coloco en color azul, lo que coloco en color azul, en realidad lo eliminaremos de este archivo y lo pegaremos en otro.
<html xmlns="https://www.w3c.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:p="https://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:commandLink id="logout" actionListener="#{loginBean.logout}"
style="margin-right:20px;" oncomplete="logout(xhr, status, args)">
<h:outputText value="logout" />
</p:commandLink>
<h:form id="formGauge">
<p:poll interval="2" update="gauge" />
<p:meterGaugeChart id="gauge" value="#{gaugeBean.meterGaugeModel}"
showTickLabels="false" labelHeightAdjust="110"
intervalOuterRadius="130"
seriesColors="66cc66, 93b75f, E7E658, cc6666"
style="width:400px;height:250px" title="Gauge Personalizado"
label="km/h" />
</h:form>
</h:body>
<script type="text/javascript">
//<![CDATA[
function logout(xhr, status, args) {
setTimeout(function() {
window.location = 'login.xhtml';
}, 500);
}
//]]>
</script>
</html>
Luego cambiaremos parte de una línea en LoginBean.java (lo que está en negrita es lo que debe quedar):
...
context.addCallbackParam("estaLogeado", logeado);
if (logeado)
context.addCallbackParam("view", "menu.xhtml");
}
...
Luego agregamos el archivo "menu.xhtml":
<html xmlns="https://www.w3c.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="center">
<iframe id="frame" src="ventas.xhtml"
style="width: 100%; height: 100%; text-align: center;"
seamless='seamless' />
</p:layoutUnit>
</p:layout>
<h:form id="form">
<p:dock>
<p:menuitem value="Ventas" icon="/images/ventas.png"
url="javascript:cambioPagina('ventas.xhtml')" />
<p:menuitem value="Gauge" icon="/images/gauge.jpg"
url="javascript:cambioPagina('gauge.xhtml')" />
<p:menuitem value="Logout" icon="/images/logout.png"
actionListener="#{loginBean.logout}"
oncomplete="logout(xhr, status, args)" />
</p:dock>
</h:form>
</h:body>
<script type="text/javascript">
//<![CDATA[
var actual = 'ventas.xhtml';
function cambioPagina(pagina) {
if (pagina != actual) {
$('#frame').attr('src', pagina);
actual=pagina;
}
}
function logout(xhr, status, args) {
setTimeout(function() {
window.location = 'login.xhtml';
}, 500);
}
//]]>
</script>
</html>
El código importante está en negrita y lo examinamos a continuación:
Los tags a continuación:
<p:layout fullPage="true">
<p:layoutUnit position="center">
<iframe id="frame" src="ventas.xhtml"
style="width: 100%; height: 100%; text-align: center;"
seamless='seamless' />
</p:layoutUnit>
</p:layout>
Generan un área de contenido al centro que a su vez contiene un iframe que será el contenedor que muestre la página seleccionada, por defecto es "ventas.xhtml", que más decir de este iframe, que no tiene bordes (seamless='seamless'), que ocupa el 100% de ancho y alto.
Luego tenemos:
<h:form id="form">
<p:dock>
<p:menuitem value="Ventas" icon="/images/ventas.png"
url="javascript:cambioPagina('ventas.xhtml')" />
<p:menuitem value="Gauge" icon="/images/gauge.jpg"
url="javascript:cambioPagina('gauge.xhtml')" />
<p:menuitem value="Logout" icon="/images/logout.png"
actionListener="#{loginBean.logout}"
oncomplete="logout(xhr, status, args)" />
</p:dock>
</h:form>
El tag dock permite armar un menú al estilo Dock, por defecto en la parte inferior de la pantalla, aunque esto se puede cambiar sin problemas, un menu dock está compuesto de items (menuitem) con un nombre (atributo value) y un icono, luego podemos hacer que ejecute acciones al hacerle click, en este caso hay dos tipos de acciones, en el caso de Ventas y Gauge se ejecuta una función javascript que carga una página en el iframe, en el caso del logout, solo he trasladado la lógica del comando remoto que estaba en "gauge.xhtml" a un menuitem, esto ya lo he explicado en su momento.
La función cambioPagina() es muy sencilla:
var actual = 'ventas.xhtml';
function cambioPagina(pagina) {
if (pagina != actual) {
$('#frame').attr('src', pagina);
actual=pagina;
}
}
Solo carga la página recibida como argumento en el iframe utilizando un selector de jQuery (con PrimeFaces disponemos siempre de jQuery en el lado del cliente), esto ocurre siempre y cuando la página no se encuentre carga, para eso se utiliza la variable auxiliar actual.
Eso es todo, recuerden que disponen del proyecto eclipse completo en: https://github.com/magm3333/workspace-pftuto
La imágenes de los iconos están aquí, aquí y aquí.
Saludos
