anchor.diff:      </ui:composition>
   ----
   
  -El contenido de la zona variable, etiquetada con el nombre _central_ en la plantilla, se define en la página en general al principio, para mayor claridad, dado que aquí el orden no afecta. Como la zona del logo será fija para todas las pantallas la implementamos en un panel (una página xhtml privada) aparte y la añadimos con un include que toma como el panel.
  -
  -En primer lugar vamos a adaptar nuestra pantalla de consulta de los posts anteriores, de drones disponibles en una fecha, al uso de la plantilla, y movemos el contenido desde el fichero index.xhtml, que ahora se convertirá en la pantalla inicial, al fichero consulta-inicial.xhtml.
  -
  -Implementamos el panel del logo e incluímos una simple animación en jQuery. Primefaces está basado en esta librería Javascript que es conveniente conocer ya que su uso está muy extendido en la capa de presentación de proyectos reales. Como nuestro proyecto incluye Primemefaces y éste incluye jQuery no tenemos que añadir la librería de manera explícita. En general, para cualquier proyecto, en páginas que no usen ninguna estiqueta de Primefaces incluiremos de manera explícita la librería jQuery embebida en Primefaces con las siguientes líneas:
  +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 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 de consulta del post anterior, de drones disponibles en una fecha, al nuevo diseño de pantalla. Lo primero que hacemos 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. 
  +
  +WARNING: 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:
  +
   
   `<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />`
   `<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />`
  
positive.code: 
  Bien, nos queda por ver los dos botones a nivel de página `Salir` y `Crear`. Como véis en la figura que muestra el diseño de la página, he colocado estos botones encima del listado de Trabajos, creo que así se mejora la experiencia de usuario ya que los botones siempre van a estar en la misma posición independientemente del número de filas del listado y además se muestran en una posición más accesible, sobre todo en pantallas de tamaño reducido.
  
  El botón Salir 
  
  
  
  
  
  
  
  Antes de empezar con la primera pantalla hay que crear una plantilla que proporcione el maquetado de las pantallas de la aplicación. Primefaces nos da la solución con Grid CSS, una librería de estilos con la que crearemos un layout responsive al estilo de Bootstrap. Antes de empezar con la implementación dibujamos un boceto del layout para tener claro los divs que tengo que considerar.
  
  La plantilla debe ser privada, por tanto va situada dentro de la carpeta _WEB-INF_. Una plantilla contendrá en la cabecera elementos comunes a todas las páginas como gestión de la caché de cliente, estilos CSS comunes, y en el cuerpo el maquetado de la página y dentro de cada elemento div (con estilos de Grid CSS) las etiquetas <ui:insert...> de Facelets para insertar el contenido.
  
  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, podemos empezar a implementar cada pantalla de la aplicación en base a la plantilla.
  
  La estructura de una página será:
  
  [source,xhtml,indent=0]
  ----
  
negative.code: 
  El ámbito para el backing bean debe extenderse hasta el ámbito de la vista, ViewScoped. Esto es necesario porque en esta página vamos a implementar acciones que llaman a métodos con parámetros y para que esta construcción en EL (Expression Language) sea posible el bean debe permanecer en memoria más allá del ámbito de la petición.
  
  NOTE: Tened cuidado en elegir la clase ViewScoped correcta tras pulsar Ctrl + O. Tenemos que elegir javax.faces.view.ViewScoped y no javax.faces.bean.ViewScoped. La segunda clase es nueva en JSF 2.2 y totalmente compatible con CDI.
  
  Lo siguiente es crear la clase de negocio. En principio creamos una para cada entidad persistente. Ya teníamos el bean de negocio de la entidad Drone, ahora creamos uno para la entidad Trabajo. Como para la entidad Trabajo necesitamos implementar las operaciones de persistencia típicas de un CRUD: Crear, Modificar, Eliminar y Consultar, vamos a refactorizar el código de los beans de negocio creando una superclase abstracta que contenga estas operaciones básicas, de manera que en la clase concreta sólo irán las operaciones de negocio particulares de cada una.
  
  