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:     </ui:composition>
  ----
  
  El contenido de la zona variable _central_ se define en la 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.
  
  Veamos ahora un ejemplo práctico de uso de plantilla, y que mejor manera que adaptando la pantalla del Post anterior, de consulta de drones disponibles en una fecha, al nuevo diseño de pantalla. Lo primero que haremos es mover el contenido desde el fichero _index.xhtml_, que ahora pasará a ser la pantalla inicial de la aplicación, al fichero _consulta-inicial.xhtml_.
  
  Luego tendremos que crear el panel para el logo, podéis ir al código de la aplicación y ver que su raíz es un elemento _<ui:composition... >_ ya que irá inyectado en la plantilla, pero sin embargo no contiene elementos `<ui:define...>` ya que no se trata de una página pública que hace uso de la plantilla. He incluido aquí una sencilla animación realizada con la librería JS jQuery para que, si aún no la conocéis, tengáis una primera toma de contacto. Es muy importante conocerla al máximo ya que ahorra mucho tiempo de desarrollo en la parte de cliente. Además que Primefaces esté basado en jQuery es otro motivo más para dedicarle tiempo. Como nuestro proyecto incluye Primemefaces y éste incluye jQuery no tenemos ni debemos de añadir la librería de manera explícita. 
  
  No es habitual, pero si una página de nuestro proyecto no usa ninguna estiqueta de Primefaces entonces tendremos que incluir de manera explícita la librería jQuery embebida en Primefaces añadiendo:
  
  [source,xhtml,indent=0]
  ----
  
negative.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 es una página XHTML privada que define la estructura y el contenido común de todas las páginas de la aplicación que la usan y una serie de elementos _<ui:insert...> para definir los puntos de inserción del contenido variable. Podéis consultar el contenido de la plantilla usada en jDrone abriendo el fichero _\jdrone\src\main\webapp\WEB-INF\plantillas\plantilla.xhtml_.
  
  Por otro lado tenemos las páginas públicas de la aplicación, que ban a usar la plantilla incluyendo el contenido variable mediante la inclusión de elementos _<ui:define...>_. Básicamente una página tendrá este aspecto:
  
  [source,xhtml,indent=0]
  ----
  