Ventana

Pruébalo en vivo

Prueba la ventana con controles en vivo en el catálogo de componentes: el componente real de AWE y el XML que lo produce.

Una ventana es un contenedor con una barra de título. También puede maximizarse o restaurarse, y es muy útil para ordenar grupos de componentes en la pantalla.

Esqueleto XML

<window id="[window-identifier]" label="[window-label]" style="[window-style]"
        icon="[window-icon]" expandible="[expand-orientation]" maximize="[maximize-window]"
        advanced-mode="[advanced-mode]" saved-searches="[saved-searches]">
  <tag type="div" style="panel-body">
    ...
    <advanced>...</advanced>
  </tag>
  <tag type="div" style="panel-footer">...</tag>
  ...
  <grid>...</grid>
  ...
  <chart>...</chart>
  ...
</window>

Estructura de la ventana

Elemento	Uso	Varias instancias	Descripción
window	Obligatorio	No	Nodo global de la ventana. Describe los atributos de la ventana
tag	Opcional	Sí	Una lista de tags dentro de la ventana, normalmente con estilos como panel-body y panel-footer
grid	Opcional	No	Un grid dentro de la ventana
chart	Opcional	No	Un gráfico dentro de la ventana
advanced	Opcional	No	El bloque avanzado de una ventana de búsqueda: sus criterios avanzados, que se muestran a demanda. Ver búsqueda avanzada

Nota Hay tres estilos especiales que puedes usar como estilos de tag en las ventanas:

• panel-body: Un estilo especial para definir el contenido de una ventana. Añade márgenes al contenido.
• panel-footer: Un estilo especial para definir la parte inferior de una ventana. Se recomienda colocar botones dentro.
• expand-maximize: Un estilo especial, normalmente combinado con panel-body, que expande el contenido de la ventana cuando esta se maximiza.

Atributos de la ventana

Atributo	Uso	Tipo	Descripción	Valores
id	Opcional	String	Identificador de la ventana. Con fines de referencia
label	Opcional	String	Título de la ventana	Nota: Puedes usar archivos i18n (locales)
style	Opcional	String	Clases CSS de la ventana	Nota: Aquí puedes usar la clase expand para hacer la ventana expandible
icon	Opcional	String	Identificador del icono	Nota: Puedes consultar todos los conjuntos de iconos en la pantalla de iconos
expandible	Opcional	String	Cómo expandir los hijos de la ventana	vertical, horizontal
maximize	Opcional	Boolean	Si se muestra o no el icono de maximizar	Nota: Solo se puede maximizar una ventana con label
advanced-mode	Opcional	String	Cómo muestra la ventana su bloque avanzado	inline (por defecto), side-panel. Nota: Solo se usa si la ventana tiene un bloque advanced
saved-searches	Opcional	Boolean	Si la ventana muestra el menú Búsquedas guardadas de su bloque avanzado	false (por defecto), true. Nota: Solo se usa si la ventana tiene un bloque advanced
help	Opcional	String	Texto de ayuda del criterio	Nota: Puedes usar archivos i18n (locales)
help-image	Opcional	String	Imagen de ayuda del criterio	Esto debe ser una ruta de imagen

Ejemplos

Ventana expandible con grid (maximizable)

<window style="expand" maximize="true" label="SCREEN_TEXT_DATA" icon="list">
  <grid ...>...</grid>
</window>

Ventana estática con contenido y zona de botones

<window label="SCREEN_TEXT_CRITERIA" icon="filter">
  <tag type="div" style="panel-body">...</tag>
  <tag type="div" style="panel-footer">
    <tag type="div" style="pull-right">...</tag>
  </tag>
</window>

Búsqueda avanzada

Una ventana de búsqueda puede mostrar solo los criterios que se usan a diario y dejar el resto a mano. Coloca primero los criterios imprescindibles y, justo después, un bloque <advanced> con los menos frecuentes (y los tags de maquetación que necesiten). Elige con advanced-mode cómo muestra la ventana el bloque:

• inline (por defecto): un botón Filtros avanzados muestra el bloque debajo de él, dentro de la ventana, y Ocultar filtros avanzados lo cierra. El botón no se mueve al abrirse el bloque. La ventana recuerda, por usuario y pantalla, si el bloque se dejó abierto, y lo muestra así la próxima vez que se abre la pantalla.

• side-panel: el mismo botón Filtros avanzados abre el bloque en un panel lateral con el título de la ventana. Restablecer valores por defecto devuelve los criterios avanzados a su valor por defecto, Cancelar (o Escape) deshace los cambios hechos en el panel y Ver resultados lo cierra y lanza la búsqueda.

El botón es el primer elemento de una fila que la ventana dibuja donde está el bloque <advanced>, así que los criterios imprescindibles quedan encima y los avanzados debajo (o en el panel). El botón indica cuántos criterios avanzados tienen un valor distinto del valor por defecto. Tras un separador, mientras haya filtros aplicados, la fila muestra como chips Filtrado por cada criterio de la ventana cuyo valor difiere del valor por defecto, también los avanzados que están ocultos (marcados con un icono). Cada chip devuelve su criterio al valor por defecto y Quitar todos, al final de la fila, los devuelve todos. Si un criterio avanzado oculto no supera una validación, la ventana lo muestra.

Ver resultados e Intro en cualquier criterio de la ventana lanzan el botón de envío de la ventana (button-type="submit"). La barra de título y el pie de la ventana quedan tal como los escribes, así que los botones de buscar y restablecer son botones normales con sus propios identificadores.

Los criterios avanzados siempre forman parte de la pantalla, así que las dependencias, la validación, los valores por defecto, las cargas iniciales, los valores de sesión y de variable, la impresión y la exportación funcionan igual cuando están ocultos. Declara como mucho un bloque <advanced> por ventana; solo tiene efecto dentro de una ventana. Una ventana sin él no cambia.

<window id="WinUsrCrt" label="SCREEN_TEXT_CRITERIA" icon="filter" advanced-mode="side-panel">
  <tag type="div" style="panel-body">
    <criteria id="CrtUsr" component="suggest" label="PARAMETER_USER" .../>
    <criteria id="CrtPro" component="suggest" label="PARAMETER_PROFILE" .../>
    <advanced>
      <criteria id="CrtThm" component="suggest" label="PARAMETER_THEME" .../>
      <criteria id="CrtBlk" component="select" label="PARAMETER_BLOCKED" .../>
    </advanced>
  </tag>
  <tag type="div" style="panel-footer">
    <tag type="div" style="pull-right">
      <button id="ButRst" button-type="reset" label="BUTTON_RESET" icon="eraser"/>
      <button id="ButSch" button-type="submit" label="BUTTON_SEARCH" icon="search">
        <button-action type="filter" target="GrdUsrLst"/>
      </button>
    </tag>
  </tag>
</window>

Búsquedas guardadas

Con saved-searches="true" una ventana con un bloque <advanced> muestra un menú Búsquedas guardadas justo después del botón Filtros avanzados, para que los usuarios conserven las búsquedas que lanzan a menudo y las reutilicen:

• Mis búsquedas: las búsquedas que el usuario guardó en esta ventana. Al aplicar una, cada criterio de la ventana vuelve a su valor por defecto, se ponen los valores guardados y se lanza la búsqueda (como Ver resultados).
• Compartidas con tu perfil: las búsquedas que un administrador publicó para el perfil del usuario. Se aplican igual, pero solo un administrador las cambia. Un usuario que puede publicar ve aquí las búsquedas publicadas para todos los perfiles, cada una con su perfil, para poder renombrarlas y borrarlas.
• Guardar la búsqueda actual…: guarda con un nombre los valores de los criterios de la ventana. Un nombre que ya existe se reemplaza. Un usuario que puede publicar elige un perfil en lugar de Solo yo.
• Gestionar búsquedas…: renombra o borra las búsquedas propias (y las publicadas, si el usuario puede publicar).

El servidor guarda de cada búsqueda solo los valores de los criterios de la ventana (los ocultos no se guardan), toma el usuario y el perfil de la sesión y comprueba que la ventana ofrece búsquedas guardadas. Un usuario puede publicar cuando su menú, con las restricciones de su perfil y de su usuario, le da acceso a la opción de la propiedad awe.saved-search.publish-option (por defecto profiles, la pantalla de perfiles del menú Herramientas): las restricciones de siempre deciden quién publica, sin tablas nuevas. Las búsquedas se guardan en la tabla AweSavSch (migración Flyway AWE_V1.5.2). Una ventana sin el atributo no cambia.

Disposición de una búsqueda. El diálogo de guardar tiene dos opciones más. Llevar a los filtros principales los criterios avanzados que estoy usando (desmarcada por defecto) guarda la disposición de la búsqueda: al aplicarla, esos criterios se muestran en la fila principal, tras los esenciales, y el resto vuelve al bloque avanzado. Solo se mueven los hijos directos de <advanced>, que siguen funcionando igual (dependencias, validación, valores guardados en la sesión); no cuentan en el contador de Filtros avanzados y sus chips no se marcan como ocultos. Guardar los valores de los criterios (marcada) se puede desmarcar para guardar solo la disposición: al aplicar esa búsqueda esos criterios aparecen vacíos. Una búsqueda guardada sin disposición muestra los criterios como los declara la pantalla.

Búsqueda predeterminada. Una búsqueda puede abrir la ventana:

• Abrir la pantalla con esta búsqueda, en el diálogo de guardar, o Usar como mi predeterminada en Gestionar búsquedas… la convierte en la búsqueda predeterminada del usuario en esa ventana. El menú la marca como Predeterminada. Puede ser una búsqueda propia o una publicada para el perfil del usuario.

  

• Un usuario que puede publicar marca una búsqueda publicada como predeterminada de su perfil con Usar como predeterminada del perfil (marcada Predeterminada del perfil). La del usuario gana a la del perfil.

• El servidor aplica la búsqueda predeterminada antes de la carga inicial, así que el grid se carga una sola vez, ya filtrado, sin pulsar el botón de buscar. Solo la aplica cuando los criterios que la sesión conserva de la pantalla no traen nada para la ventana, y una variable de contexto sigue ganando a su valor. Un chip junto a Búsquedas guardadas nombra la búsqueda predeterminada aplicada, hasta que se aplica otra búsqueda o se usa Quitar todos.

  

• Mientras hay una búsqueda predeterminada aplicada, los botones de restablecer de la ventana y Restablecer valores por defecto devuelven los criterios a los valores y la disposición de la búsqueda predeterminada; Quitar todos los devuelve a los valores del XML y deja la disposición como está.

• Una búsqueda que nombra un criterio que la ventana ya no tiene se aplica sin él, sin dar error.

Todo forma parte de saved-searches="true": no hay un atributo nuevo, y una ventana sin él no cambia. La predeterminada del usuario se guarda en AweUsrWinCnf.DefSavSch y la de un perfil en AweSavSch.Def (migración Flyway AWE_V1.6.1).

<window id="WinUsrCrt" label="SCREEN_TEXT_CRITERIA" icon="filter" saved-searches="true">
  ...
</window>

Motores AngularJS y React

Ambos motores tratan expandible, icon y maximize de la misma forma:

• expandible establece la dirección en la que la ventana reparte el espacio entre sus hijos (vertical por defecto).
• icon se dibuja en la barra de título, antes de la etiqueta de la ventana.
• maximize="true" muestra un botón en la barra de título que maximiza la ventana sobre el contenido de la pantalla y la restaura. La ventana ocupa el área de contenido, manteniendo visibles el menú y la barra superior, y las ventanas hermanas se ocultan mientras está maximizada. El botón Restaurar la devuelve a su tamaño; no hay atajo con la tecla Escape. El contenido con el estilo expand-maximize ocupa el espacio libre mientras la ventana está maximizada.

Las diferencias son solo visuales: el botón de maximizar muestra los iconos Lucide expand y shrink en el motor AngularJS y maximize y minimize en el motor React.