anchor.diff:  
   image::https://raw.githubusercontent.com/lametaweb/lametaweb.github.io/master/images/003/post003-fig137.png[]
   	
  -NOTE: Recordad que a la hora de escribir el código de una página o de un bean es de gran ayuda usar el asistente
  -que nos proporciona Eclipse a través de la shortkey Ctrl + Espacio.
  -	
  -Con el diseño ya claro añado la página al proyecto. Pulso botón derecho sobre la carpeta _webapp_ del proyecto y selecciono
  -_New > Other..._, y en la ventana que se muestra escribo `xhtml` en el campo del filtro. Selecciono _XHTML Page_ y pulso _Next_.
  - Introduzco como nombre `index.xhtml` y pulso de nuevo _Next_. Desmarco el check _Use XHTML Template_ porque copiaremos todo el
  - contenido directamente en la página. Y pulso _Fisnish_. La página será creada y el editor de las JBoss Tools para páginas XHTML
  - se abrirá mostrando un contenido vacío. Copiamos el contenido que se muestra y pulsamos Ctrl + S para guardar:
  +NOTE: Recordad que a la hora de escribir el código de una página o de un bean es de gran ayuda usar el asistente que nos proporciona Eclipse a través de la hot key Ctrl + Espacio.
  +	
  +Con el diseño ya claro añado la página al proyecto. Pulso botón derecho sobre la carpeta _webapp_ del proyecto y selecciono _New > Other..._, y en la ventana que se muestra escribo `xhtml` en el campo del filtro. Selecciono _XHTML Page_ y pulso _Next_. Introduzco como nombre `index.xhtml` y pulso de nuevo _Next_. Desmarco el check _Use XHTML Template_ porque copiaremos todo el contenido directamente en la página. Y pulso _Fisnish_. La página será creada y el editor de las JBoss Tools para páginas XHTML se abrirá mostrando un contenido vacío. Copiamos el contenido que se muestra y pulsamos Ctrl + S para guardar:
    
    
   [source,xhtml,indent=0]
   ----
  -<?xml version='1.0' encoding='UTF-8' ?>
  -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  -<html xmlns="http://www.w3.org/1999/xhtml"
  -	xmlns:h="http://java.sun.com/jsf/html"
  -	xmlns:f="http://java.sun.com/jsf/core">
  -<f:view>
  -<h:head>
  -	<h:outputStylesheet library="css" name="estilo.css" />
  -</h:head>
  -
  -<f:metadata>
  -	<f:event
  -		listener="#{disponibilidadControlador.listaEstadoDronesPorFecha()}"
  -		type="preRenderView" />
  -</f:metadata>
  -
  -<h:body> 
  -
  -	¡Hola mundo!
  -	<br />
  -	<h:form>
  -		<h:outputText
  -			value="Consulta de drones realizando trabajos en una fecha" />
  +	<?xml version='1.0' encoding='UTF-8' ?>
  +	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  +	<html xmlns="http://www.w3.org/1999/xhtml"
  +		xmlns:h="http://java.sun.com/jsf/html"
  +		xmlns:f="http://java.sun.com/jsf/core">
  +	<f:view>
  +	<h:head>
  +		<h:outputStylesheet library="css" name="estilo.css" />
  +	</h:head>
  +
  +	<f:metadata>
  +		<f:event
  +			listener="#{disponibilidadBean.listaEstadoDronesPorFecha()}"
  +			type="preRenderView" />
  +	</f:metadata>
  +
  +	<h:body> 
  +
  +		¡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" />&nbsp;
  +			<h:inputText id="fecha" value="#{disponibilidadBean.fecha}"
  +				required="true">
  +				<f:convertDateTime pattern="dd-MM-yyyy" timeZone="GMT+02" />
  +			</h:inputText>
  +			<br />
  +			<h:outputLabel value="Hora (0-24)" for="horas" />&nbsp;
  +			<h:inputText id="horas" value="#{disponibilidadBean.horas}"
  +				required="true">
  +				<f:validateLength maximum="2" />
  +				<f:validateLongRange minimum="0" maximum="24" />
  +			</h:inputText>
  +			<br />
  +			<h:outputLabel value="Minutos (0-60)" for="minutos" />&nbsp;
  +			<h:inputText id="minutos" value="#{disponibilidadBean.minutos}"
  +				required="true">
  +				<f:validateLength maximum="2" />
  +				<f:validateLongRange minimum="0" maximum="60" />
  +			</h:inputText>
  +			<br />
  +			<br />
  +			<h:commandButton value="Consultar" />
  +		</h:form>
   		<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" />&nbsp;
  -		<h:inputText id="fecha" value="#{disponibilidadControlador.fecha}"
  -			required="true">
  -			<f:convertDateTime pattern="dd-MM-yyyy" timeZone="GMT+02" />
  -		</h:inputText>
  -		<br />
  -		<h:outputLabel value="Hora (0-24)" for="horas" />&nbsp;
  -		<h:inputText id="horas" value="#{disponibilidadControlador.horas}"
  -			required="true">
  -			<f:validateLength maximum="2" />
  -			<f:validateLongRange minimum="0" maximum="24" />
  -		</h:inputText>
  -		<br />
  -		<h:outputLabel value="Minutos (0-60)" for="minutos" />&nbsp;
  -		<h:inputText id="minutos" value="#{disponibilidadControlador.minutos}"
  -			required="true">
  -			<f:validateLength maximum="2" />
  -			<f:validateLongRange minimum="0" maximum="60" />
  -		</h:inputText>
  -		<br />
  -		<br />
  -		<h:commandButton value="Consultar" />
  -	</h:form>
  -	<br />
  -	<h:dataTable value="#{disponibilidadControlador.drones}" var="drone"
  -		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>
  -
  -</h:body>
  -</f:view>
  -</html>
  -----
  - 
  -Antes de pasar a explicar cada elemento de la página y ver como participa en el ciclo de vida de JSF añadamos una hoja
  -de estilos muy sencilla al proyecto para dar algo de estilo a la página. Creo la carpeta `resources` dentro de la carpeta
  -_webapp_, y dentro de la _resources_ creo otra con el nombre `css`. Sobre esta última pulso botón derecho y la opción
  -_New > Other... > Web > CSS File_. Le doy el nombre `estilo.css`, y pulso _Finish_. Copio y pego lo siguiente en el fichero:
  -
  -[source,xhtml,indent=0]
  +		<h:dataTable value="#{disponibilidadBean.drones}" var="drone"
  +			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>
  +
  +	</h:body>
  +	</f:view>
  +	</html>
  +----
  + 
  +Antes de pasar a explicar cada elemento de la página y ver como participa en el ciclo de vida de JSF añadamos una hoja de estilos muy sencilla al proyecto para dar algo de estilo a la página. Creo la carpeta `resources` dentro de la carpeta
  +_webapp_, y dentro de _resources_ creo otra con el nombre `css`. Sobre esta última pulso botón derecho y la opción _New > Other... > Web > CSS File_. Le doy el nombre `estilo.css`, y pulso _Finish_. Copio y pego lo siguiente en el fichero:
  +
  +[source,css,indent=0]
   ----
   .tabla-general{   
   	border-collapse:collapse;
  
positive.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.
  
  
negative.code: }
  ----
  
  Una página JSF o facelet es un documento XML y al mismo tiempo un documento HTML. Contiene etiquetas HTML para definir la maquetación de la página y la semántica de cada elemento, y etiquetas JSF para definir los componentes y los aspectos dinámicos a nivel de página y de componente. Además como en cualquier página HTML podemos tener el código javascript y las hojas de estilo que precisemos, para soportar elementos dinámicos y estilos personalizados respectivamente. Es muy común añadir por ejemplo frameworks como jQuery, para la manipulación de la interfaz, o Bootstrap, para añadir capacidades de interfaz adaptativa.
  
  Veamos cada elemento de nuestra página:
  
  * La primera línea indica que se trata de un documento XML. Las JSPs ya son historia.
  * La segunda línea indica que se trata también de un documento HTML. En este caso HTML 4. Si necesitamos usar HTML 5 escribimos solamente <!DOCTYPE html> ya que HTML 5 no se valida contra un DTD. JSF está mejorando la integración con HTML 5 en cada versión. Es otro motivo para instalar en nuestro proyecto y en nuestro servidor la última versión disponible.
  * La tercera línea es la raiz en todo documento HTML, donde se declaran los espacios de nombres de XHTML y de las librerías de etiquetas de JSF que precisemos. En esta página sólo usamos la librerías Html y Core de JSF. La primera se usa para referirnos a los componentes y la segunda a elementos no renderizables como Validators, Converters o Listners, propios o predefinidos, elementos de binding de datos, etc. En 	http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/[esta dirección] podéis ver las distintas librerías y sus componentes con sus atributos.
  * La cuarta es el nodo raiz del árbol de elementos JSF. Podemos no ponerlo si no necesitamos especificar ninguno de sus atributos. Por ejemplo en una aplicación multiidioma uso el atributo locale para fijar el idioma en que muestro la pantalla.
  * A continuación vienen los elementos hijos del elemento view. Head y body son ya conocidos, se corresponden con las etiquetas análogas en HTML. El elemento metadata contiene información sobre la propia página y su comportamiento durante el ciclo de vida JSF. Veamos el contenido dentro de cada uno de estos elementos:
  ** Dentro del elemento head hemos definido una hoja de estilos CSS para dar estilo a la tabla que muestra los datos.
  ** Dentro de metadata asociamos un evento de tipo preRenderView al componente view, es decir, a la página, y se especifica el método listener asociado, cuyo cometido es actualizar el Modelo con el resultado de la consulta JPA una vez que los atributos correspondientes del backing bean han sido validados y actualizados y antes de la renderización de la página, para que así los datos se muestren al usuario en pantalla correctamente.
  * Y llegamos al cuerpo de la página. Aquí se sitúan los elementos con los que el usuario va a interatuar. Los vemos en orden:
  ** El componente form representa un formulario HTML con method igual a POST y action igual a la URL de la misma página que contiene el form.
  ** <h:outputText...> muestra una cadena de texto. JSF lo renderiza como una elemento <span> de HTML.
  ** <h:messages...> muestra los mensajes de error que se registren en las conversiones y validaciones sobre los campos del formulario implícitas o definidas en el formulario.
  ** <h:outputLabel...> se renderiza como un elemento <label> de HTML. Representa una leyenda para un componente del formulario al que se asocia.
  ** <h:inputText...> es un componente de entrada-salida de texto. Para el campo fecha configuro un converter predefinido ya que necesito especificar el formato de entrada-salida y la localización de la hora. Para los dos campos numéricos, como no necesito ningún formato especial no uso un converter NumberConverter. En cambio sí configuramos dos validators predefinidos para limitar el número de cifras y el rango del valor introducido. En todos los casos el componente se enlaza con el backing bean a través del atributo value.
  
  	. El componente <h:commandButton...> Representa el
  		botón de submit del formulario HTML. En general va acompañado de un atributo action que indica el método del managed bean que se
  