Plantilla

Una plantilla es el marco de una pantalla. Decide dónde se dibujan el título de la pantalla, las migas de pan, los botones y el contenido. Una plantilla tiene uno o más puntos de origen (source), y el XML de la pantalla rellena cada uno con un tag que lo nombra en su atributo source.

La plantilla de una pantalla se elige con el atributo obligatorio template del elemento screen, y sus puntos de origen se rellenan con elementos tag:

<screen template="window" label="SCREEN_TITLE_QUE"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://aweframework.gitlab.io/awe/docs/schemas/screen.xsd">
  <tag source="hidden"></tag>
  <tag source="buttons">
    <button label="BUTTON_SEND" icon="exchange" id="ButSndSyn">
      <button-action type="server" server-action="maintain" target-action="TstQueSndSyn" />
    </button>
  </tag>
  <tag source="center">
    <window label="SCREEN_TEXT_CRITERIA">
      ...
    </window>
  </tag>
</screen>

El ejemplo es una copia recortada de la pantalla QueTst de la aplicación de pruebas de React (awe-tests/awe-boot-react). El origen center contiene la propia pantalla y el origen buttons los botones de la esquina superior derecha de la ventana.

Nota: Las plantillas ya no son archivos JSP. Ambos clientes dibujan la pantalla a partir del XML: el cliente AngularJS usa plantillas generadas por el servidor (StringTemplate), y el cliente React usa componentes React.

Puntos de origen de las plantillas estándar

AWE tiene tres plantillas estándar. Sus puntos de origen son los mismos en ambos motores:

Plantilla	Para	center	buttons	modal	hidden	Título y migas de pan
full	Sin marco, solo los orígenes: página principal, barras de navegación, pantallas hechas para incluirse	Sí	No	Sí	Sí	No
window	Pantallas que se abren desde el menú, dentro de la aplicación	Sí	Sí	Sí	Sí	Sí
document	Pantallas que muestran un documento, como el manual de la aplicación	Sí	Sí	Sí	Sí	Solo motor AngularJS

Los puntos de origen son:

• center: el contenedor central de la plantilla. Aquí defines la estructura de la pantalla.
• buttons: los botones de la zona superior derecha de la pantalla. Solo en window y document.
• modal: el lugar para las ventanas modales. Coloca aquí los elementos dialog y los elementos include que traen diálogos de otras pantallas.
• hidden: un contenedor oculto para criterios y mensajes ocultos.

El title de la pantalla (atributo label) y las migas de pan los rellena la plantilla; no se definen con un origen.

Cada origen puede aparecer una vez por pantalla (el esquema lo comprueba), y el tag de un origen debe ser hijo directo de screen. Un tag con un origen que la plantilla no tiene (por ejemplo buttons en full) no se dibuja, y en el motor AngularJS un nombre de origen que la plantilla no declara hace fallar la pantalla. En el motor React el style de los tags center, buttons y modal se añade a la clase de su contenedor.

Nota: Las pantallas genéricas propias de AWE usan otros valores (base, home, login, message) que no están definidos por las plantillas estándar de los clientes. No los uses en pantallas de aplicación: el cliente React muestra el mensaje The template <name> has not been created yet. para una plantilla que no conoce.

Cabecera de la ventana

La plantilla window tiene dos modos de cabecera:

Modo	Qué muestra la cabecera
breadcrumb	Las migas de pan del menú, que terminan con el título de la pantalla, y el origen buttons a su derecha. Es el valor por defecto
none	Sin migas de pan ni título: solo el origen buttons, en una fila propia a la derecha. La fila se ajusta en pantallas estrechas

Elige el modo para toda la aplicación con la propiedad awe.application.window-header (consulta las propiedades) y para una pantalla con el atributo window-header de screen. El atributo prevalece sobre la propiedad en ambos sentidos: una pantalla puede ocultar las migas de pan en una aplicación que las muestra, y al revés.

<screen template="window" label="SCREEN_TITLE_USERS" window-header="none" ...>

Las plantillas full y document no se ven afectadas. En los identificadores de prueba, el identificador breadcrumb solo está presente en el modo breadcrumb.

Nota: En el motor AngularJS el servidor pasa el parámetro header solo a las plantillas que lo declaran, así que tus plantillas propias siguen funcionando sin cambios. Añádelo a una copia de window para admitir el modo.

Migas de pan navegables

En el modo breadcrumb los niveles son enlaces, en ambos motores:

• El icono de inicio abre la pantalla de inicio.
• Un nivel de opción de menú abre su pantalla, igual que el menú.
• Un nivel de grupo de menú abre el menú lateral desplegado en ese grupo (un cajón abierto en pantallas estrechas). Con el menú horizontal, o cuando el menú no conoce el grupo, el grupo es texto plano.
• El último nivel es la página actual: texto plano marcado con aria-current="page". Las migas de pan son un nav etiquetado con la clave de locale SCREEN_TEXT_BREADCRUMB.
• Con más de 4 niveles se muestran el primer nivel, un botón de puntos suspensivos y los dos últimos niveles. El botón (con el nombre de SCREEN_TEXT_BREADCRUMB_EXPAND y aria-expanded) muestra en el mismo sitio los niveles ocultos.
• Una pantalla abierta desde otra pantalla (no desde el menú) muestra el rastro de las pantallas de las que viene, y la pantalla de origen es un nivel que vuelve a ella. El rastro se reinicia al lanzar una pantalla desde el menú, el icono de inicio o un nivel de menú.

Identificadores de prueba: breadcrumb, breadcrumb-home, breadcrumb-level (un nivel de menú lleva name, una pantalla de origen path; la página actual lleva data-active="true") y breadcrumb-ellipsis. En el motor AngularJS la página actual muestra su título solo cuando el servidor lo conoce, así que el rastro puede terminar un nivel antes que en React.

Plantillas propias

Si necesitas un marco distinto (por ejemplo una pantalla con un panel lateral), puedes añadir tu propia plantilla. Cómo hacerlo depende del motor:

• Motor React. Escribe un componente React que reciba la estructura de la pantalla (elementList) y dibuje los orígenes que necesite, y regístralo por nombre con registerTemplate(name, component), exportado por el paquete awe-react-client. Después usa template="[name]" en tus pantallas. El registro falla si el nombre ya existe, por lo que no puedes reemplazar full, window ni document.
• Motor AngularJS. Añade un archivo de grupo StringTemplate en templates/[module]/templates.stg en tu aplicación, donde [module] es uno de los módulos de awe.application.module-list (consulta las propiedades). Una plantilla es una definición cuyos parámetros son los puntos de origen (breadcrumbs, title, buttons, center, modal y hidden en las estándar) y cuyo cuerpo los usa con $center$, $modal$...

Una pantalla que usa tu propia plantilla debe tener la plantilla en ambos motores si la aplicación se ejecuta en los dos.

Páginas relacionadas

• Screen: el atributo template.
• Tags: el atributo source que rellena un punto de origen.
• Include: reutiliza el contenido de un origen de otra pantalla.
• Layout: cómo se expande el contenido de un origen.
• Screens: la lista de elementos de pantalla.

Revisado para AWE 5.