Skip to main content
Version: 4.4.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

XML skeleton

<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

ElementUseMultiples instancesDescription
windowRequiredNoGlobal node of window. Describes the window attributes
tagOptionalYesA tag list inside the window, usually with styles like panel-body and panel-footer
gridOptionalNoA grid inside the window
chartOptionalNoA 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

AttributeUseTypeDescriptionValues
idOptionalStringWindow identifier. For reference purposes
labelOptionalStringWindow titleNote: You can use i18n files (locales)
styleOptionalStringWindow CSS classesNote: Here you can use expand class to set the window as expandible
iconOptionalStringIcon identifierNote: You can check all iconset at FontAwesome
expandibleOptionalStringHow to expand the window childrenvertical, horizontal
maximizeOptionalBooleanWhether to show the maximize icon or not

Examples

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