Saltar al contenido principal
Version: 4.5.0

Window

A window is a container with a title bar. It also can be maximized or restored, and it's very useful to sort groups of components in the screen.

Window

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

Window structure

ElementoUsoVarias instanciasDescripción
windowObligatorioNoGlobal node of window. Describes the window attributes
tagOpcionalSiA tag list inside the window, usually with styles like panel-body and panel-footer
gridOpcionalNoA grid inside the window
chartOpcionalNoA chart inside the window

Note There are two special styles you can use as tag styles on windows: panel-body: A special style to define the content of a window. It adds margins to the content. panel-footer: A special style to define the bottom of a window. It is recommended to put buttons inside. * expand-maximize: A special style usually combined with panel-body which expands the content of the window when it is maximized.

Window attributes

AtributoUsoTipoDescripciónValores
idOpcionalStringWindow identifier. Con fines de referencia
labelOpcionalStringWindow titleNota: Puedes usar i18n archivos (locales)
styleOpcionalStringWindow CSS classesNota: Aquí puedes usar la clase expand para permitir que la ventana se expanda
iconoOpcionalStringIdentificador de iconoNota: Puede comprobar todos los iconos en FontAwesome
expandibleOpcionalStringHow to expand the window childrenvertical, horizontal
maximizeOpcionalBooleanMostrar el icono maximizar o no

Ejemplos

Expandible window with grid (maximizable)

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

Static window with content and buttons zone

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