anchor.diff:  <h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
   ----
   
  -Con nuestra página de consulta ya maquetada lo siguiente es añadir un menú de opciones. Optaremos por la clásica barra de menú de las aplicaciones de Escritorio. Como suele ocurrir cuando necesitamos algún elemento para la capa de presentación Primefaces nos da, también en esta ocasión, la solución con el componente `<p:MenuBar...>`. Tened en cuenta que la versión 5.2, abierta a la comunidad y usada en nuestro programa, tiene casi 150 componentes. Usando este componente en un par de minutos dibujamos las opciones y submenús que tengamos previstos para la aplicación. Finalmente, para situar el menú en la página, lo metemos, al igual que el logo, en un panel, y lo situamos en la plantilla añadiendo a la misma un elemento `<ui:insert...>`.
  +Con nuestra página de consulta ya maquetada lo siguiente es añadir el menú de opciones de la aplicación a la página. Optaremos por la clásica barra de menú de las aplicaciones de Escritorio. Como suele ocurrir cuando necesitamos algún elemento para la capa de presentación Primefaces nos da la solución, en este caso con el componente _<p:MenuBar...>_. Tened en cuenta que la versión 5.2, abierta a la comunidad y usada en nuestro programa, tiene casi 150 componentes. Usando este componente en un par de minutos dibujamos las opciones y submenús que tengamos previstos para la aplicación. Finalmente, para situar el menú en la página, lo metemos, al igual que el logo, en un panel, y lo situamos en la plantilla añadiendo a la misma un elemento _<ui:insert...>_.
   
   Arrancamos el servidor y ejecutamos nuestro ciclo de construcción para ver el aspecto en pantalla. Personalmente no me convence el aspecto por defecto del menú por lo que acudimos de nuevo a Primefaces y vemos que es muy sencillo dar un aspecto distinto a los componentes simplemente eligiendo otro _Theme_. Además de paso activamos los iconos de FontAwesome añadiendo el correspondiente parámetro en el fichero _web.xml_ y así disponer de una mayor variedad de iconos.
   
  
positive.code: 
  Antes de empezar a implementar lo mejor es tomar lápiz y papel o una herramienta como Inkscape y dibujar un boceto del layout de la página completa que queremos y así tener claro los _divs_ que voy a necesitar para crear las áreas de la pantalla.
  
  Una plantilla no es más que otra página JSF que define la estructura y el contenido común de todas las páginas de la aplicación que la usan. El contenido variable se inyectará mediante etiquetas _<ui:insert...>_. Una vez que tenemos lista nuestra plantilla en la carpeta _/jdrone/src/main/webapp/WEB-INF/plantillas/plantilla.xhtml_ y su hoja de estilos correspondiente podremos crear cada página de la aplicación en base a la plantilla responsive:
  
  [source,xhtml,indent=0]
  ----
  
negative.code:     </ui:composition>
  ----
  
  El contenido de la zona de contenido variable, _central_, se define en cada página en general al principio para mayor claridad dado que aquí el orden no afecta. La zona del logo la hacemos también insertable aunque en todas las páginas aparecerá como un include, esto nos da la posibilidad de tener páginas especiales que prescindan del logo si por ejemplo necesitamos espacio extra.
  
  La página de consulta de drones disponibles en una fecha del Post anterior se ha movido desde _index.xhtml_ a _consulta-inicial.xhtml_ y tras adaptarla al uso de la plantilla queda así:
  
  [source,xhtml,indent=0]
  ----
  <ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                  xmlns:h="http://xmlns.jcp.org/jsf/html"                
                  template="/WEB-INF/plantillas/plantilla.xhtml"
                  xmlns:p="http://primefaces.org/ui"
                  xmlns="http://www.w3.org/1999/xhtml"
                  xmlns:f="http://xmlns.jcp.org/jsf/core">
  
      <ui:define name="central">
      	<!-- estilo aplicable a la página -->
          <f:facet name="last">
              <h:outputStylesheet library="css" name="estilo.css"/>
          </f:facet>
          <!-- acción asociada a la pantalla -->
          <f:metadata>
  			<f:viewAction action="#{disponibilidadBean.listaEstadoDronesPorFecha()}" onPostback="true"></f:viewAction>
          </f:metadata> 
  
  		<!-- contenido de zona central -->
  	¡Hola mundo!
  	<br />
  
  	<h:form>
  		<h:outputText
  			value="Consulta de drones realizando trabajos en una fecha" />
  		<br />
  		<br />
  		<h:messages />
  		<br />
  		<h:outputText
  			value="Introduce la fecha y la hora en el formato indicado:" />
  		<br />
  		<h:outputLabel value="Fecha (dd-mm-aaaa)" for="fecha" />&#160;
  		<h:inputText id="fecha" value="#{disponibilidadBean.fecha}"
  			required="true">
  			<f:convertDateTime pattern="dd-MM-yyyy" />
  		</h:inputText>
  		<br />
  		<h:outputLabel value="Hora (0-23:0-59)" for="hora" />&#160;
  		<h:inputText id="hora" value="#{disponibilidadBean.hora}"
  			required="true">
  			<f:convertDateTime pattern="HH:mm" />
  		</h:inputText>
  		<br />
  		<br />
  		<h:commandButton value="Consultar" />
  	</h:form>
  	<br />
  	<h:dataTable value="#{disponibilidadBean.drones}" var="drone" style="width:100%;"
  		styleClass="tabla-general" headerClass="tabla-general-cabecera" 
  		rowClasses="tabla-general-impar,tabla-general-par">
  
  		<h:column>
  			<!-- column header -->
  			<f:facet name="header">Número de Serie</f:facet>
  			<!-- row record -->
      				#{drone.numeroDeSerie}
      			</h:column>
  		<h:column>
  			<f:facet name="header">Modelo</f:facet>
      				#{drone.modelo}
      			</h:column>
  		<h:column>
  			<f:facet name="header">Autonomía</f:facet>
      				#{drone.autonomia}
      			</h:column>
  		<h:column>
  			<f:facet name="header">Número de Motores</f:facet>
      				#{drone.numMotores}
      			</h:column>
  		<h:column>
  			<f:facet name="header">Peso Máximo Despegue</f:facet>
      				#{drone.pesoMaximoDespegue}
      			</h:column>
  
  	</h:dataTable>
  			
  	</ui:define>
  	
  	<!-- contenido de zona logo -->
      <ui:define name="logo">
          <ui:include src="/WEB-INF/paneles/panelLogo.xhtml" />
      </ui:define>
  
  	<!-- contenido de zona barra menu -->
      <ui:define name="menu">
          <ui:include src="/WEB-INF/paneles/panelMenu.xhtml" />
      </ui:define>
      
  	<!-- TODO: contenido de otras zonas... -->
  
  </ui:composition>
  ----
  
  Se tienen tres puntos de definición de contenido, el punto _central_, donde se ha añadido el contenido de la página antigua, en el punto _menu_, donde incluiremos un menú como veremos a continuación, y en el punto _logo_ para el logo de la aplicación y de la empresa. 
  
  El logo se implementa con un elemento _<ui:composition... >_ sin elementos `<ui:define...>` al contrario que el resto de páginas cliente de la plantilla. Se ha incluido aquí una sencilla animación realizada con la librería Javascript jQuery para que, si aún no la conocéis, tengáis una primera toma de contacto. Es muy importante conocerla bien porque acelera el desarrollo de la parte de cliente y permite llegar más lejos con Primefaces, que está basado en jQuery. Para ver la animación sólo tenéis que pasar el puntero del ratón por encima del logo jDrone. 
  
  NOTE: No debemos añadir jQuery a un proyecto que use Primefaces. No es habitual, pero si una página de nuestro proyecto no usa ninguna estiqueta de Primefaces entonces incliremos de manera explícita en la página la librería jQuery embebida en Primefaces añadiendo el código:
  
  [source,xhtml,indent=0]
  ----
  