windowmanager

The Window Manager bundle is a factory for UI windows. It provides methods to programmatically create modal and normal windows and to specify various options for customization. To create windows in a declarative fashion see the templates bundle documentation.

Usage

No configuration is needed. Default values are applied.

The Window Manager does not have a user interface itself, because it is a factory for UI components. It allows to create UI windows programmatically.

Use Cases

How to create a window with the Window Manager

To use the Window Manager inside a custom bundle, add the WindowManagerFactory component to the references section of the respective component:

{
  "name" : "windowManager",
  "providing" : "ct.framework.api.WindowManager"
}

The most important method of the injected Window Manager instance is createWindow(opts). It creates a window and returns an apprt.windowmanager.WindowReference object. The opts argument is a JavaScript object that defines the window’s appearance and behavior. The following sample shows how to use the createWindow method:

const w = windowManager.createWindow({
  title: "My Window Title",
  marginBox: {l: 30, t: 30, w: 300, h: 200},
  minimizeOnClose: true,
  content: windowContentWidget,
  closable: true,
  tools: [mySpecialTool],
  windowClass: "myWindowClass",
  showOnStartup : true
});

The preceding sample creates a window with the title “My Window Title”. It is assigned a width of 300 pixels and a height of 200 pixels and it is placed with a margin of 30 pixels to the left and to the top. The minimizeOnClose option is true, meaning that the window and its child widgets are not destroyed when the window is closed. Thus, the window can be restored by calling its show method. The window’s child widget is defined using the content attribute. Custom tools (ct.tools.Tool) can be added to the title bar of the window using the tools attribute.

As stated earlier, the createWindow method returns a WindowReference. The actual window widget can be retrieved by calling w.get("window"), where w is the WindowReference object.

A full description of the available properties can be found in the JavaScript documentation of the apprt.windowmanager.WindowManager.createWindow method.

How to enable Drag & Drop

Drag & drop functionality can be enabled for windows. That means that windows created with the Window Manager can be dragged off their current container, for example the map, and dropped on a different drag & drop container. Such containers have to be registered in the properties section of the Window Manager bundle’s WindowDndWidgetFactory component. To enable drag & drop for a window specify the following attributes in the opts argument of the Window Manager's createWindow method:

draggable: false,
dndDraggable: true

For different representations of a window on various drag & drop containers a custom WindowDndWidgetFactory component has to be implemented.

How to enable move by keyboard

Each window with the property draggable:true and/or dndDraggable:true can be moved by the user's keyboard by default. To move a window upwards, the user can utilize the UP-ARROW on his keyboard. Other directions work analogously. To avoid this behavior for a certain window, add the following to your window properties:

moveByKeyboardOffset: {
   t: 0,
   l: 0
}