Window system

The window system provides a wide variety of different window types. Change the properties inside a template, bundle or app depending on whether a common or an app specific behavior should be defined.

Not all properties can be combined and some properties need other properties to be defined.

Basic properties

Default sample

The following code sample shows window properties and their default values:

"window": {
    "title": "",
    "marginBox": {
        "w": 250,
        "h": 200
    },
    "fixEdgesInViewPort": false,
    "windowClass": "",

    "resizable": true,
    "resizeAxis": true,
    "minSize": {},
    "maxSize": {},

    "maximizable": false,
    "draggable": true,
    "closable": true,
    "modal": false,
    "dockable": false,

    "autofocus": true,
    "closeOnEscape": true
}

Property descriptions

Property Type Description

title

String

Title of the window that is shown in the window’s title bar.

marginBox

Object

This property sets the window’s size and position. The size can be set in pixels or in percent (relative to the viewport’s size) for width (w) and height (h). The position can also be defined absolute or relative to the top (t), right (r), bottom (b) and left (l). If no position is defined, the window appears in the center.

To define a window that uses the full available width or height of a screen, define the position of two opposite window edges and skip the size definition for that dimension (for example define l and r and skip w).

Sample configuration:

"marginBox": {
    "l": 20,
    "t": 50,
    "w": 300,
    "h": 400
}

or

"marginBox": {
    "w": "100%",
    "h": 350
}

fixEdgesInViewPort

Object

Defines a list of window edges that are fixed to the browsers viewport edges. An edge that is set to false moves on browser viewport resizing.

Sample configuration:

"fixEdgesInViewPort": {
    "l":false
}

windowClass

String

Use this property to add custom CSS classes to the window’s main DOM node, for example to add custom styling. There are some predefined classes that can be used.

resizable

Boolean

Defines whether the user can resize the window or not.

resizeAxis

Object

Use this property to restrict the resize-action to a certain window edge.

This following configuration allows resizing on the left window edge but not on the right:

"resizeAxis": {
    "l": true,
    "r": false
}

minSize

Object

If the window is resizable, it can only be resized to a size larger than defined in this property.

Sample configuration:

"minSize": {
    "w": 200,
    "h": 200
}

maxSize

Object

If the window is resizable, it can only be resized to a size smaller than defined in this property.

Sample configuration:

"maxSize": {
    "w": 500,
    "h": 500
}

maximizable

Boolean

To allow users to maximize a window, set this property to true.

draggable

Boolean

To prevent users from moving a window, set this property to false.

closable

Boolean

To prevent users from closing a window, set this property to false. If set to true, make sure that the window can be reopened after closing.

modal

Boolean

To create a window as an action blocking modal window, set this property to true.

dockable

Boolean

To make a window dockable (in combination with a docking tool), set this property to true.

autofocus

Boolean

By default, the focus is set on the first element in a window after opening it. To disable autofocussing, set this property to false.

closeOnEscape

Boolean

To prevent that a window can be closed by pressing Esc key on keyboard, set this property to false.

In addition, window events can be attached as explained inside the templates bundle documentation .

Advanced properties

Collapsable windows

The following code sample shows properties for collapsable windows and their default values:

"window": {
    "collapsable": true,
    "collapseAxis": true,
    "collapsed": {}
}
Property Type Description

collapsable

Boolean

Defines whether window collapsing is allowed or not. If set to true the user can collapse the window on each side to its defined minSize. That is often unwanted. Therefore you can restrict the collapse direction with the property collapseAxis.

collapseAxis

Object

A list of collapse directions. "l": true means that the window can be collapsed on the left-hand side.

Sample configuration:

"collapseAxis": {
    "l": true,
    "r": false,
    "t": false,
    "b": false
}

collapsed

Object

For a window that is initially shown in collapsed state, the collapsed property has to be preconfigured accordingly to collapse direction and window size. The state is an object with the collapsed direction and the collapsed size.

Do not use the collapsed property for a window that is displayed open initially.

Sample configuration:

"collapsed": {
    "r":250
}

Window tools

Most of the window tools are displayed according to other window properties. For example, the windowClose tool is only displayed if closable is set to true. To nevertheless manipulate the tool set, use the following property:

Property Type Description

tools

Array of Strings

Defines a list of window-tools that are shown inside the window’s title bar. All other available tools are not shown anymore as soon as a list is provided. Available tools are:

  • WindowOpacityTool

  • WindowCollapseTool

  • windowClose

  • windowMinimize

  • windowMaximize

  • windowRestore

If an empty object is specified, no tool is displayed.

Predefined window classes

The following predefined window classes can be used:

windowClass Description

noTitleBar

Hides the window’s title section.

noTitleBarAndWindowTools

Hides the window’s title section including its tool.

Sample configuration

The following table shows how a widget’s window configuration has to be set to achieve a window that behaves as shown in the screenshot.

Additional Configuration Result Description 
"window": {
    "tools":["windowCollapseTool"],
    "collapsable": true,
    "windowClass":"noCollapseHandles"
}

clock1

A window where the window content can be collapsed but the window’s titlebar stays as it is.

 
"window": {
    "windowClass":"noTitleBarAndWindowTools"
}

clock2

The additional CSS class noTitleBarAndWindowTools hides the window’s titlebar and its tools with CSS.

 
"window": {
    "modal":true
}

clock3

A modal window that blocks all other interactions with the window.

 
"window": {
    "marginBox": {
        "l": 0,
        "h" : 250,
        "w" : 0
    },
    "fixEdgesInViewPort":{
        "r":false
    },
    "collapsed":{
        "r":250
    },
    "draggable":false,
    "closable":false,
    "collapsable":true,
    "collapseAxis": {
        "r":true
    }
}

clock4

A window that is initially collapsed. The only visible part is a small collapse handle that can be clicked by the user to uncollapse the window.

 
"window": {
    "marginBox": {
        "l": 0,
        "h" : 250,
        "w" : 250
    },
    "fixEdgesInViewPort":{
        "r":false
    },
    "draggable":false,
    "closable":false,
    "collapsable":true,
    "collapseAxis": {
        "r":true
    },
    "collapsed": false
}

window collapse

A window that is initially opened and can be collapsed.