Ventana

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]">
  <tag type="div" style="panel-body">...</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

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

Motores AngularJS y React

Ambos motores tratan expandible 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).
• 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, y el motor React muestra el icon de la ventana a la derecha de la barra de título.