Interfaces y plantillas

Estructura de archivos

La estructura de la sede electrónica se sustenta en un modelo de plantillas que aprovecha la versatilidad del motor de plantillas Thymeleaf .

En este contexto, las plantillas pueden entenderse como archivos o estructuras predefinidas que actúan como moldes para la presentación de información en un sitio web. Estas plantillas proporcionan un marco organizativo y visual coherente, permitiendo una presentación uniforme de contenidos en todas las páginas del sitio.

Gracias al uso de Thymeleaf, las plantillas pueden incluir elementos dinámicos que se adaptan según el contexto de la aplicación web, lo que facilita la personalización y la generación dinámica de contenido

Organización

La estructura basica de un portal o servicio consiste únicamente en 2 archivos.

index.xml: Página indice del portal donde se colocará la propia información del portal / servicio
_template.xml: plantilla que se comparte entre todas las páginas que están ubicadas en la misma carpeta

	
Nombre portal/servicio
|-- index.xml
`-- _template.xml

Estructura base

Por norma general, se buscará crecer los portales horizontalmente, toda la información se basará en páginas al mismo nivel de la página índice

Según la naturaleza del tipo de contenido que generemos, la estructura básica puede variar. Para un portal, en general, la estructura base es suficiente. Para un servicio, dependerá lo que el servicio ofrezca.

Un servicio puede contar vista de listado, vista de detalle, formulario, administrador, etc...

    
/servicio/arte-publico
|-- index.xml
|-- detalle.xml
|-- formulario.xml
`-- _template.xml

Ejemplo servicio arte público

Inclusión y herencia

Thymeleaf nos da la posibilidad de incluir fragmentos y plantillas dentro de otras, lo que nos permite evitar la duplicidad de contenidos y fomentar la reutilización de código.

A su vez, nos permite aprovechar la herencia de propiedades definidas en las directivas th:with

Este concepto tomará mucho peso sobre la estructura actual de la sede electrónica. Los componentes hacen bastante uso del mismo y la configuración de templates se aprovechan de esto para evitar redundancia.

Se explicará más en sus respectivas secciones

Ejemplo inclusión y herencia

Ejemplo de Inclusión

Tenemos 3 opciones:

Incluir en el template el contenido y que este salga entre en las secciones definidas (Ya veremos esto mas a detalle en la seccion de templates). Esta es la elección predilecta para menús, cabeceras y secciones al pie de página.
Crear un archivo que contenga unicamente el contenido a compartir: por criterio es la mas recomendada ya que nos permite segmentar al detalle al contenido aumentando su capacidad de reutilización.
Crear un fragmento en el archivo original e incluirlo en los archivos compartidos. Util para secciones propias de un portal con fines organizativos o para el uso de componentes.

Alerta

Debido a su naturaleza, esta es la opción menos recomendada.

El archivo contenedor podría moverse o eliminarse sin darnos cuenta y eso produciría un error en las inclusiones en otros archivos

Supongamos un portal como el siguiente:


/portal-de-ejemplo
|-- pagina-1.xml
|-- pagina-2.xml
|-- fragmento-comun.xml
|-- index.xml
`-- _template.xml

Estructura

Digamos que queremos definir una alerta entre páginas.


<sede:component fragment="/fragmentos/componentes/v2/alert">
	Alerta común entre páginas
</sede:component>

/portal-de-ejemplo/fragmento-comun.xml


<h1>Página 1</h1>
<th:block th:include="/portal/portal-de-ejemplo/fragmento-comun"></th:block>

/portal-de-ejemplo/pagina-1.xml


<h1>Página 2</h1>
<th:block th:include="/portal/portal-de-ejemplo/fragmento-comun"></th:block>

/portal-de-ejemplo/pagina-2.xml

En componentes podemos utilizar esta técnica para armar estructuras mas complejas


<sede:component fragment="/fragmentos/componentes/v2/tabs-pills" json="{'data' : 
	[
   	{
   		title: 'Tab 1',
   		include: ':: tab-1',
   	},
   	{
   		title: 'Tab 2',
   		include: ':: tab-2',
   	},
	]
 }">
</sede:component>
<th:block th:if="false">
	<th:block th:fragment="tab-1">
		...
	</th:block>
	<th:block th:fragment="tab-2">
		...
	</th:block>
</th:block>

Ejemplo de Herencia

Thymeleaf nos permite definir variables y parametros haciendo uso de la directiva th:with


<th:block th:with="_var='valor'">
	<p th:text="${_var}"></p>
</th:block>

Aquí estamos definiendo la variable _var un valor arbitrario y lo estamos insertando en una etiqueta p

.tabs-pills.nav li { margin-bottom: unset; } .tabs-pills.nav li a { border: unset; } .int_nav_title { position: static !important; font-weight: bold !important; width: auto !important; height: auto !important; margin: 1em 0 !important; border-bottom: 1px solid #ddd !important; padding-bottom: .5em !important; }

Templates

La plantilla "_template.xml" es fundamental como la estructura base para la presentación visual en cualquier portal o servicio. Esta plantilla se comparte entre todas las páginas que están ubicadas en la misma carpeta. En resumen, establece el diseño y la estructura básica que se aplicará de manera coherente en todo el sitio web. Aquí es donde se definen elementos clave como estilos, cabecera, menús y pie de página, proporcionando una apariencia uniforme y una navegación consistente en todas las páginas del sitio.

Esqueleto de un _template.xml

    
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="cssjs">
    <!-- CSS -->
</th:block>

<body>
    <th:block th:fragment="header">
        <!-- Cabecera -->
    </th:block>
    <th:block th:fragment="menu">
        <!-- Menús-->
    </th:block>
    <!--/* Aquí se incluirán los contenidos de las páginas */-->
    <th:block th:fragment="footer">
       <!-- Footer, scripts, noscript-->
    </th:block>
</body>

</html>

Arquetipo

Esta es la estructura principal de los portales y servicios. Esta contiene los elementos comúnes que se compartirán entre todas las plantillas

    
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="cssjs">
    <th:block th:include="fragmentos/cssjs4" />
</th:block>

<body>
    <th:block th:fragment="header">
        <sede:component fragment="/fragmentos/componentes/v2/cabecera" login="true"></sede:component>
    </th:block>
    <th:block th:fragment="menu">
        <sede:component fragment="/fragmentos/componentes/v2/to-top-btn"></sede:component>
    </th:block>
    <th:block th:fragment="footer">
       <sede:component fragment="/fragmentos/componentes/v2/footer" json="/cont/vistas/fragmentos/redes-sociales.json"></sede:component>
       <th:block th:include="fragmentos/js_new" />
    </th:block>
</body>

</html>

/cont/vistas/portal/_template.xml

Herencia

Para evitar la reduncia, fomentar la reutilización de fragmentos y facilitar futuras modificaciones en la estructura general de la sede electrónica utilizaremos la inclusión de fragmentos . De esta forma todos los componentes base de un portal serán compartidos en lo largo del árbol de carpetas y un cambio modificará todos los elementos hijo de la estructura.

    
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org" estilo="ayto">
<th:block th:fragment="cssjs">
    <th:block th:include="/portal/_template :: cssjs" />
</th:block>

<body>
    <th:block th:fragment="header">
        <th:block th:include="/portal/_template :: header" />
    </th:block>
    <th:block th:fragment="menu">
        <th:block th:include="/portal/_template :: menu" />
    </th:block>
    <th:block th:fragment="footer">
        <th:block th:include="/portal/_template :: footer" />
    </th:block>
</body>

</html>

_template.xml de un portal

Secciones

Base

Cabecera

Mapa web

Miga de pan

Descripción

Atributo	Descripción
`json`	Reemplaza el contenido de la miga de pan

Estas se generarán automáticamente dependiendo de "donde estemos" en la sede electrónica

Por defecto es un reflejo de la url actual. La sede electrónica utiliza una estructura de carpetas para definir la jerarquía de las páginas. Lo que se conoce como file-based routing

Ejemplo

/sede/portal/zero-emisiones/ se renderizará en el patrón zero-emisiones.

El formato en el que se haya definido el nombre del archivo se verá reflejada en los términos de la miga de pan

Para cambiar los términos definidos debemos usar el archivo /cont/vistas/i18n/messages_es.properties y definir una propiedad migapan.label

Ejemplo

migapan.label.Cartel-fiestas-pilar = Carteles Fiestas del Pilar

Resultado:

Antes:

Cultura Cartel-fiestas-pilar.

Después:

Cultura Carteles Fiestas del Pilar

Implementación


<sede:miga-pan></sede:miga-pan>

Podemos definir una estructura a medida que no respete la estructura de archivos de dos maneras:

Indicandole las rutas de las que depende:
```
<th:block th:with="parentroutes=${ {
  {
    'label':'Cementerios',
    'url':'/sede/portal/cementerios/'
  }
} }">
  <sede:miga-pan></sede:miga-pan>
</th:block>
```
/sede/portal/todos-santos/_template.xml
Modificando su estructura por completo

Alerta

La siguiente funcionalidad debería usarse en casos muy concretos y siempre bajo condicionales que no limiten el funcionamiento del componente original
```
<sede:miga-pan json="[
     {
      'label':'Infraestructuras',
      'url':'/sede/portal/infraestructuras/'
    },{
      'label':'Agua',
      'url':'/sede/portal/infraestructuras/agua/'
    },{
      'label':'${#tituloDePagina#}',
      'last':'true'
    }
]"></sede:miga-pan>
```
No utilizar de forma independiente
```
<th:block 
th:with="isSerivicioPotabilizadora=${#strings.contains(#httpServletRequest.requestURI, '/servicio/potabilizadora/')}">
    <th:block th:if="${isSerivicioPotabilizadora}">
      <sede:miga-pan json="[
            {
                'label':'Infraestructuras',
                'url':'/sede/portal/infraestructuras/'
            },{
                'label':'Agua',
                'url':'/sede/portal/infraestructuras/agua/'
            },{
                'label':'${#tituloDePagina#}',
                'last':'true'
            }
        ]"></sede:miga-pan>
    </th:block>
    <th:block th:unless="${isSerivicioPotabilizadora}">
      <sede:miga-pan></sede:miga-pan>
    </th:block>
  </th:block>
```
/sede/portal/infraestructuras/_template.xml

Pie de página

Cabecera contextual

Menú de portales

Cabecera de servicios

Estandarizadas

Se han desarrollado una serie de "secciones" estandarizadas para lograr una homogenización en los diseños de los diferentes portales y servicios.

Páginas índice

Con el rediseño de la sede electrónica se busca que todas las páginas indice de cada portal sean homogéneas tanto en estilo como en funcionalidad.

Esto quiere decir que, además de mantener una estética similar, cumplirán con el mismo propósito en todos los casos. Permitir a la ciudadanía entender de que trata el portal y cuales son los servicios asociados de un solo vistazo.

Se buscará exponer de forma clara los servicios disponibles para ese portal ofreciendo un acceso a los servicios asociados y sus respectivos buscadores, preferentemente utilizando alguna de las secciones estandarizadas

Para facilitar la exposición de servicios de un portal se desarrolló el componente portal/index el cual brinda a partir de una configuración basada en el standard JSON, la posibildiad de exponer los servicios utilizando las secciones estandarizadas y configurar su orden dentro del portal.

Ejemplos:

Servicios

En su forma mas básica, el servicio deberá ofrecer una vista de listado y una vista de detalle. A partir de esa instancia, la complejidad del servicio la brindará la naturaleza del mismo

Ejemplos: