anchor.diff:  [source,java,indent=0]
   ----
   	public void listaEstadoDronesPorFecha(){
  -
  -		Date fechaAjustada = this.fecha!=null?new Date(this.fecha.getTime() + 
  +		
  +		if(!FacesContext.getCurrentInstance().isPostback()) return;
  +			
  +		Date fechaAjustada = new Date(this.fecha.getTime() + 
   				this.horas * 60 * 60 * 1000 +
  -				this.minutos * 60 * 1000):null;
  -		
  -		this.drones =  droneFacade.obtenEstadoDronesPorFechaNamed(fechaAjustada);
  -	}
  -----
  -
  -En el método primero tenemos el código de adaptación de los parámetros de usuario y luego la llamada al negocio. Un poco más adelante
  -en el post veremos en detalle su implementación cuando expliquemos el ciclo de vida de JSF sobre nuestra aplicación.
  -
  -Y con esto tenemos el bean implementado. La clase completa quedaría así:
  +				this.minutos * 60 * 1000);
  +		
  +		this.drones =  droneFacade.obtenEstadoDronesPorFecha(fechaAjustada);
  +	}	
  +----
  +
  +La primera línea de código evita que cuando se entra en la página se produzca un error en la siguiente línea de código al ser nulos los valores de los valores de los parámetros. La segunda línea de código realiza la transformación de los parámetros de la Vista a los parámetros aceptados por la capa de Servicio. La tercera línea realiza la actualización del Modelo. Un poco más adelante en el post volveremos a la implementación del método cuando veamos el ciclo de vida de JSF en la aplicación.
  +
  +Y con esto tenemos el backing bean implementado. La clase completa quedaría así:
   
   [source,java,indent=0]
   ----
  
positive.code: con el botón _Clone in Desktop_ de vuestro Fork, del repositorio a vuestro disco duro (tenéis que tener Git instalado en vuestra
  máquina).
  
  image:https://raw.githubusercontent.com/lametaweb/lametaweb.github.io/master/images/003/post003-fig180.png[] 
  
  Hasta el próximo Post!
negative.code: }
  ----
  
  Vamos pues con la página facelet. A la hora de plantear una página tengo que considerar los siguientes aspectos básicos: 
  
  . Elementos que deben aparecer: 
  	. Inmutables (por ejemplos leyendas de campos)
  	. De datos: de salida, de entrada, o de entrada/salida.
  	. De acción.
  . Definición de las restricciones para los valores de los elementos de entrada.
  . Formato en que se muestran los tipos no básicos en los campos de entrada/salida o de salida.
  
  Otros aspectos no menos necesarios en una aplicación real son:
  
  . Soporte multiidioma, dependiendo del sistema o a petición del usuario.
  . Creación de plantillas para normalizar la maquetación de las páginas.
  . Implementación de un sistema de menús.
  . Disposición y orden de entrada (tab order) de los elementos.
  . Mecanismos de paginación.
  . Estudio de la usabilidad y de la UX.
  . Implementación de las normas de la W3C sobre accesibilidad.
  . Adición de características para interfaz adaptativa (responsive design).
  . Seguridad contra ataques desde la interfaz.
  . Creación de nuevos componentes JSF a medida (custom components) cuando se requiera. Para estos componente se aplican a su vez estas mismas normas.
  
  Nosotros ahora sólo consideraremos la primera lista. Antes de empezar a implementar la página lo ideal es dibujar un boceto con un editor estándar, eso sí, que sea vectorial, o con un software especializado. Hablando en términos de editores open source no uséis Gimp, usad en cambio Inkscape. Entre los editores especializados el más conocido es Balsamiq. Realmente con papel, lápiz y goma se puede hacer aquí un buen trabajo. Sin embargo si necesitamos generar documentación o buscamos disponer de una demo interactiva para el cliente tendremos que recurrir a una herramienta especializa.
  
  Aquí usaremos Inkscape. Primero diferencio las áreas de la pantalla y luego dispongo los distintos elementos. Necesitamos un área para el título de la página, otra para los campos de entrada, una adicional para los elementos de acción y finalmente el área que muestra la información solicitada. En la siguiente figura se muestran dispuestas sobre la página:
  
  image::https://raw.githubusercontent.com/lametaweb/lametaweb.github.io/master/images/003/post003-fig135.png[]
  
  En cuanto a los elementos, por áreas tengo que añadir:
  
  * Cabecera: Etiqueta para el título de la página.
  * Parámetros de entrada: El usuario debe introducir una fecha y un momento. Decido disponer tres componentes de texto. Uno para la fecha, otro para las horas y otro para los minutos. Podría igualmente haber decidido añadir un componente de terceros para fechas, como por ejemplo el componente Calendar de Primerfaces (añadir Primefaces, y al servidor, al proyecto es muy sencillo). En esta área indicamos también al usuario el formato en el que debe introducir los datos. Esto no sería necesario usando el componente de Primefaces.
  * Botonera: En nuestro caso nos basta con un botón de solicitud de listado.
  * Salida tabulada: Aquí hay que definir los campos que se muestran en la tabla. En nuestro caso la información de salida es una lista de drones y por tanto mostraremos los campos identificativos de los mismos. En este tipo de listados es interesante mostrar además campos adicionales calculados que aporten información sobre lo que se solicita. En nuestro caso consultamos los drones realizando un trabajo en una fecha y hora y al usuario le sería útil por ejemplo mostrar el número de minutos entre ese momento y el de finalización del trabajo, para pudiera ver qué drone queda antes disponible. Del mismo modo que con los parámetros de entrada aquí podemos mejorar la interfaz usando alguno de los componentes para listas de Primefaces, o Richfaces.
  
  La siguiente figura muestra el boceto o mockup final de nuestra página:
  
  image::https://raw.githubusercontent.com/lametaweb/lametaweb.github.io/master/images/003/post003-fig137.png[]
  	
  