Como hacer una ventana 'Cargando' con Primefaces

Como de Java no solo vive el hombre, aquí traigo esta semana algo diferente. Como realizar una ventana tipo 'En proceso' o 'Cargando' a través de las etiquetas de Primefaces.

Es muy sencillo.Vamos a hacerlo en tres sencillos pasos. El primero es añadir la etiqueta 'ajaxStatus' que nos permite un determinado control sobre las llamadas Ajax. En el indicaremos que cuando se comience una llamada Ajax, se muestre la ventana 'cargando' y cuando se complete dicha llamada, se oculta la ventana:

1	<p:ajaxStatus onstart="cargando.show();" oncomplete="cargando.hide();" />

Por otro lado colocaremos la llamada a dicho control de llamadas Ajax. La mejor forma es añadirlo al template principal de las páginas de la aplicación. Así evitamos tener que repetir la llamada en cada pantalla.

Y por último creamos la ventana 'cargando', la cual se debe de mostrar oculta por defecto y es muy básica, conteniendo unicamente un texto y/o una imagen de carga en proceso

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<p:ajaxStatus onstart="cargando.show();" oncomplete="cargando.hide();" /> <h:panelGroup id="layout" layout="block"> <h:panelGroup id="header" layout="block"> <ui:include src="cabecera.xhtml" /> </h:panelGroup> <h:panelGroup id="menuYContenido" layout="block"> <h:panelGroup id="menuSuperior" layout="block"> <ui:include src="menuSuperior.xhtml" /> </h:panelGroup> </h:panelGroup> <p:dialog showHeader="false" widgetVar="cargando" modal="true" height="50" width="200" resizable="false"> <h:panelGrid columns="1" style="width:100%"> <h:graphicImage value="/images/ajax-loader.gif" /> <h:outputText value="#{msg.cargando}"></h:outputText> </h:panelGrid> </p:dialog>