Las novedades del arquetipo en su versión 0.0.7 se enumeran en los siguientes apartados.
La plantilla de diseño esta basada en 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 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.
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:head>).
<h:head> <f:facet name="first"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title><h:outputText value="#{messages['application.title']}" /></title> <link rel="shortcut icon" href="#{request.contextPath}/resources/img/favicon.ico" /> <ui:insert name="head-first" /> </f:facet> <f:facet name="middle"> <ui:insert name="head-middle" /> </f:facet> <f:facet name="last"> <!--h:outputScript library="fundeweb" name="primefaces/js/primefaces_fix.js" /--> <h:outputScript library="fundeweb" name="primefaces/js/locales.js"/> <h:outputScript library="js" name="bootstrap.min.js" /> <h:outputScript library="fundeweb" name="js/fundeweb.js"/> <h:outputScript library="js" name="menu.js" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> <!-- Personalizacion de la aplicacion --> <fdw:outputStylesheet library="css" name="bootstrap.min.css" /> <fdw:outputStylesheet library="css" name="font.css" /> <fdw:outputStylesheet library="css" name="layout.css" /> <fdw:outputStylesheet library="css" name="layout_primefaces.css" /> <fdw:outputStylesheet library="css" name="less.css" /> <fdw:outputStylesheet library="css" name="custom.css" /> <ui:insert name="head-last" /> </f:facet> <ui:insert name="head" /> </h:head>
Como podemos ver, tenemos dividida la cabecera en tres secciones definidas mediante <f:facet>: 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 <ui:insert>, 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:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE composition 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:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/schema/seam/taglib" xmlns:p="http://primefaces.org/ui"> <ui:composition template="/layout/template.xhtml"> <ui:define name="head-last"> <h:outputScript library="js" name="my_custom_js.js" /> <fdw:outputStylesheet library="css" name="my_custom_css.css" /> </ui:define> <ui:define name="body"> ... </ui:define> </ui:composition> </html>
Como se puede observar, para cargar ficheros CSS mediante JSF utilizamos el componente <fdw:outputStylesheet> en lugar de <h:outputStylesheet>. Este cambio es importante, porque sino, la ordenación de los CSS no funcionara correctamente.
Antes de cerrar la cabecera (</h:head>), 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.
Dentro de la carpeta layout se han añadido nuevas plantillas para poder utilizar facilmente bootstrap y el grid responsive.
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/schema/seam/taglib"> <ui:composition> <div id="#{clientId}" class="form-group #{styleClass == null ? '' : styleClass} #{ invalid ? 'has-error' : ''}" style="#{style == null ? '' : style}"> <ui:insert/> </div> </ui:composition> </html>
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/schema/seam/taglib" xmlns:fdw="http://www.um.es/atica/fundeweb"> <ui:composition> <s:label styleClass="control-label #{labelStyleClass == null ? '' : labelStyleClass}" style="#{labelStyle == null ? '' : labelStyle}"> <ui:insert name="label"/> <s:span styleClass="required" rendered="#{required}">*</s:span> </s:label> <span class="#{valueStyleClass == null ? '' : valueStyleClass}" style="#{valueStyle == null ? '' : valueStyle}"> <s:validateAll> <ui:insert name="value"/> </s:validateAll> </span> <s:span styleClass="has-error #{messageStyleClass == null ? 'hidden-lg hidden-md hidden-sm hidden-xs' : messageStyleClass}" rendered="#{invalid}" style="#{messageStyle == null ? 'margin-top: 0.2em;' : messageStyle}"> <fdw:message /> </s:span> </ui:composition> </html>
Veamos un ejemplo:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/schema/seam/taglib" xmlns:p="http://primefaces.org/ui"> <div class="container-fluid"> <h:form id="crearObjetivosForm" styleClass="form-horizontal editFundeweb"> <p:focus context="codigoRow" for="codigoInput" /> <s:decorate id="codigoRow" template="/layout/editLineBs.xhtml" enclose="false"> <s:decorate id="codigoCell" template="/layout/editCellBs.xhtml" enclose="false"> <ui:param name="labelStyleClass" value="col-lg-1 col-md-1 col-sm-2 col-xs-2" /> <ui:param name="valueStyleClass" value="col-lg-3 col-md-3 col-sm-5 col-xs-5" /> <ui:param name="messageStyleClass" value="col-lg-8 col-md-8 col-sm-12 col-xs-12" /> <ui:define name="label">#{messages['tabla.header.codigo']}</ui:define> <ui:define name="value"> <p:inputText id="codigoInput" styleClass="form-control" value="#{manejadorAutorizacion.idObjetivo}" required="true" requiredMessage="#{messages['required.field']}" maxlength="20"/> </ui:define> </s:decorate> </s:decorate> <s:decorate id="descripcionRow" template="/layout/editLineBs.xhtml" enclose="false"> <s:decorate id="descripcionCell" template="/layout/editCellBs.xhtml" enclose="false"> <ui:param name="labelStyleClass" value="col-lg-1 col-md-1 col-sm-2 col-xs-2" /> <ui:param name="valueStyleClass" value="col-lg-5 col-md-6 col-sm-9 col-xs-10" /> <ui:param name="messageStyleClass" value="col-lg-12 col-md-8 col-sm-12 col-xs-12" /> <ui:define name="label">#{messages['tabla.header.descripcion']}</ui:define> <ui:define name="value"> <p:inputText id="descripcionInput" styleClass="form-control" value="#{manejadorAutorizacion.descripcionObjetivo}" required="true" requiredMessage="#{messages['required.field']}" maxlength="50"/> </ui:define> </s:decorate> </s:decorate> <s:decorate id="botonesRow" template="/layout/editLineBs.xhtml" enclose="false"> <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-2 col-xs-offset-2 col-lg-1 col-md-1 col-sm-1 col-xs-1"> <p:commandButton value="#{messages['value.add']}" icon="fa fa-floppy-o" global="true" action="#{manejadorAutorizacion.crearObjetivo}" update="@form, :tabPanel:gestionObjetivosForm:listaObjetivos, :messages" /> </div> </s:decorate> </h:form> <p:separator /> ... </div>
Para tener un grid responsive necesitamos:
Veamos como queda el ejemplo:
— JUAN MIGUEL BERNAL GONZALEZ 19/12/2017 09:44