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 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.

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: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.

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.
<?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>
  • 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.
<?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:

  • Un elemento HTML con clase CSS container-fluid, en este caso utilizamos un <div>.
  • Que el <h:form> 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 (<d:decorate>) para editLineBs.xhtml con la propiedad enclose con valor false.
  • Utilizamos el decorador (<d:decorate>) para editCellBs.xhtml.xhtml con la propiedad enclose con valor false.
  • Definimos con <ui:param> los valores de las propiedades labelStyleClass, valueStyleClass y messageStyleClass.

Veamos como queda el ejemplo:

— JUAN MIGUEL BERNAL GONZALEZ 19/12/2017 09:44

  • fdw2.0/fundeweb2.0/gt/novedades-0_0_7.txt
  • Última modificación: 19/12/2017 13:28
  • por JUAN MIGUEL BERNAL GONZALEZ