====== Novedades de la versión 0.0.7 ======
Las novedades del arquetipo en su versión 0.0.7 se enumeran en los siguientes apartados.
===== Plantilla de Diseño basada en Bootstrap 3.3 =====
La plantilla de diseño esta basada en [[http://getbootstrap.com/docs/3.3/|Bootstrap 3.3]]. Los ficheros están en la ruta **//src/main/web_resources/resources//** del módulo Web. Donde están los ficheros de fuentes, JS, CSS, etc. que utiliza bootstrap.
Recordaros que en la carpeta **//src/main/web_resources//** es donde se ponen los ficheros JS, CSS, etc. que ya están minimizados y no queremos que pasen por el plugin [[http://alchim.sourceforge.net/yuicompressor-maven-plugin/|Yui Compressor Maven Plugin]], que tenemos configurado para el módulo Web. Que minimiza los ficheros JS y CSS para los entornos de **pre-producción** y **producción**.
==== Ordenación en la Carga de ficheros JS y CSS ====
En la nueva plantilla de la páginas (///layout/template.xhtml//) se ha añadido un sistema de ordenación en la carga de recursos JS y CSS en la cabecera (////).
<h:outputText value="#{messages['application.title']}" />
Como podemos ver, tenemos dividida la cabecera en tres secciones definidas mediante ////: //first//, //middle// y //last//. Como su nombre indica, representan la posición donde se cargan los elementos definidos en ella.
A su vez, al final de cada una de estas tres secciones, tenemos un elemento ////, que es el que nos permite en nuestra página añadir elementos a las secciones de la cabecera. Si por ejemplo, quiero añadir un fichero JS o CSS en la sección //last//, tendré que añadir en mi página lo siguiente:
...
Como se puede observar, para cargar ficheros CSS mediante JSF utilizamos el componente //// en lugar de ////. Este cambio es importante, porque sino, la ordenación de los CSS no funcionara correctamente.
Antes de cerrar la cabecera (////), también disponemos de un lugar donde añadir ficheros de recursos identificado con //head//. Es por retro-compatibilidad con las anteriores plantillas, pero que sería igual que utilizar la sección //head-last//.
==== Nuevos Plantillas para Decoradores ====
Dentro de la carpeta //layout// se han añadido nuevas plantillas para poder utilizar facilmente bootstrap y el //grid responsive//.
* //editLineBs.xhtml//: permite definir como anteriormente una línea, que corresponde con un //form-group// o //row// de bootstrap.
* //editCellBs.xhtml//: permite definir los componentes que van a aparecer en la línea: //etiqueta - input - mensaje// como tres columnas de bootstrap. Se han añadido las variables //labelStyleClas//, //valueStyleClass// y //messageStyleClass// para poder definir los //col-xx-yy// de bootstrap. La etiqueta tiene implícita la clase CSS //control-label//, y el mensaje la clase //has-error//.
*
Veamos un ejemplo:
Para tener un //grid responsive// necesitamos:
* Un elemento HTML con clase CSS //container-fluid//, en este caso utilizamos un //
//.
* Que el //// tenga las clases //form-horizontal// y //editFundeweb// (para que salga en dialogo por si hay cambio de página con modificaciones a medio).
* Utilizamos el decorador (////) para //editLineBs.xhtml// con la propiedad //enclose// con valor //false//.
* Utilizamos el decorador (////) para //editCellBs.xhtml.xhtml// con la propiedad //enclose// con valor //false//.
* Definimos con //// los valores de las propiedades //labelStyleClass//, //valueStyleClass// y //messageStyleClass//.
Veamos como queda el ejemplo:
----
--- //[[juanmiguel.bernal@ticarum.es|JUAN MIGUEL BERNAL GONZALEZ]] 19/12/2017 09:44//