Window system

The map.apps window system is a very powerful tool to allow a wide variety of different window types in a map.apps based application. The following properties can be configured in four places that can be merged together, for example to override a default property for a certain app. 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 window properties

Property name Type Default value Sample configuration Property depends/relates to Description

marginBox

JSON Object

 
{
    w:250,
    h:200
}
 
{
    "w":"100%",
    "h":"350"
}

or

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

The marginBox sets the window’s size and position. If no values for "t", "l", "b" or "r" are provided, the window appears in the viewport’s center. The size can be set in pixels or in percent (size relative to the viewport’s size.

When setting the position of two opposite window edges (for example "l" and "r") it is not needed to define a width (for "t" and "b" no "h" is needed), because the width of the window is the space in-between.

resizable

Boolean

true

true

Defines whether the user can resize the window or not.

maximizable

Boolean

false

true

If set to true the user is allowed to maximize the window.

fixEdgesInViewPort

JSON Object

false

 
{
    "l":false
}

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.

minSize

JSON Object

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

If the window is resizeable, it can be resized to a size larger than defined inside the minSize.

maxSize

JSON Object

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

If the window is resizeable, it can be resized to a size smaller than defined inside the maxSize.

resizeAxis

JSON Object

true

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

Allows to restrict the resize-action to a certain window edge. The sample configuration on the left allows resizing the window on the left window edge but not on the right.

draggable

Boolean

true

false

If set to true, the user can move the window.

closable

Boolean

true

false

Whether a window is closable or not. Define a dockingTool for the window, if set to true, so that the window can be reopened after closing.

modal

Boolean

false

false

Whether to create the window as a normal window or an action blocking modal window.

collapsable

Boolean

true

true

collapseAxis

minSize

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

JSON Object

true

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

collapsable

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

collapsed

JSON Object

default

 
{
    "r":250
}

collapsable

collapseAxis

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.

tools

Array of String

{}

closable

maximizable

Defines an exclusive 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. For some tools, another window property must be set accordingly. For example, the windowClose tool is only displayed if closable is set to true.

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

Advanced window properties

Property name Type Sample configurations Description

autofocus

Boolean

false

A Toggle to modify the default focus behavior of a dialog, which is to focus on the first dialog element after opening the dialog. false disables autofocussing.

Default: true

closeOnEscape

Boolean

true

Close the window if the Esc key on keyboard is pressed

Default: false

windowClass

String

"noTitleBarAndWindowTools"

The windowClass property allows to add a custom class to the window’s main DOM node, for example to add custom styling. There are some predefined classes that can be used for example to hide the window’s title, titlebar and tools inside the titelbar.

Predefined window classes

map.apps themes come with several predefined windowClasses that can be used as described in the preceeding section.

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

 
"windowClass":"noTitleBarAndWindowTools"

clock2

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

 
"modal":true

clock3

A modal window that blocks all other interactions with the 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.

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

window collapse

A window that is initially opened and can be collapsed.