Window

The Window control represents a window with title and contents. Windows can be moved, resized and arranged interactively.

A window is used to render a temperature gauge.

1. Creating and manipulating a window

Commonly a Window control will be placed inside a WindowHost parent control (check the WindowHost topic here).

JavaScript

// create the input window 
var window1 = new ui.Window();
window1.theme = "earth";
window1.title = "Enter average daily temperature";
window1.allowResize = window1.allowMaximize = window1.allowMinimize = window1.allowPin = window1.allowClose = false;
window1.templateUrl = "Thermometer.html";
window1.contentLoad.addEventListener(loadThermometer);
document.getElementById("content").appendChild(window1.draw());
window1.element.style.zIndex = 5;
window1.attach();
window1.close();

Stand-alone instances can also be created, in which case the role of the host container will be served by its immediate parent in the DOM hierarchy.

There are three different ways to specify the contents of the Window:

• by setting an HTML string as the contents template via the template property. The provided HTML string will be set as the innerHtml of a scrollable div inside the Window's content element.
• by specifying an URL of a local page via the templateUrl property. The HTML of the specified page will be treated as is the HTML string from the above case.
  
  

  JavaScript

  var window = new ui.Window();
  window.top = ui.Unit.percentage(25);
  window.left = ui.Unit.percentage(25);
  window.width = ui.Unit.pixel(400);
  window.height = new ui.Unit.pixel(300);
  window.title = clickedItem.title;
  window.data = clickedItem.item;
  window.templateUrl = "ChatWindow.html";

  
  
• by specifying an URL of an external page via the navigateUrl property. In this case the external page will be displayed in an internally created IFrame inside the Window's content element.

The title of the Window can display a title text, an icon and and a set of command buttons, namely pin, refresh, minimize, maximize and close, which will call the corresponding method when clicked.

To programmatically control the visibility of the window use the open and close methods and for changing its state use the minimize, maximize and restore methods. Windows with navigateUrl property set can be refreshed with the refresh method.

JavaScript

if (!window.visible) 
   window.open();
if (window.windowState != ui.WindowState.Normal)
   window.restore();

The pin and unpin methods temporarily enable/disable drag and resize interactions.

JavaScript

if(window.pinned)   
   window.unpin();

The autoSize method resizes a window to fit its contents and the center method positions the window in the center of its host element or a specified rectangle area.

2. Customization

Interactions allowed for a Window control are specified via the allowClose, allowDrag, allowMaximize, allowMinimize, allowPin, allowRefresh, allowResize properties.
The state of the window - normal, minimized or maximized - is available through the windowState property.
Windows can be made modal by setting the modal property to true.

JavaScript

var window = new ui.Window();
window.top = ui.Unit.percentage(25);
window.left = ui.Unit.percentage(25);
window.width = ui.Unit.pixel(400);
window.height = new ui.Unit.pixel(300);
window.title = clickedItem.title;
window.data = clickedItem.item;
window.modal = true;
window.templateUrl = "MainWindow.html";

The appearance of the control can be modified by setting its theme and cssClass properties.

3. Events

Important events for the Window control include:

• contentLoad - a notification event, raised the windows's contents are loaded.
• windowOpening - a validation event, raised when the window is being opened.
• windowOpen - a notification event, raised when the window is opened.
• windowClosing - a validation event, raised when the window is being closed.
• windowClose - a notification event, raised when the window is closed.
• stateChanging - a validation event, raised when the state of the window is being modified.
• stateChanged - a notification event, raised when the state of the window is modified.

That's how you attach and handle an event:

JavaScript

window.resizeEnd.addEventListener(windowEventHandler);

function windowEventHandler(sender, args)
{
 if(args.action == ui.InteractionType.Drag)
          {
                 sender.allowPin = false;
          }  
}