Window
Overview
Creates a new Window for controls to be placed on. The window is a regular window (vs a panel or tool window or modal dialog).
Constructors
Description
Creates a new window that is initially hidden.
Definition
new Window()Members
Description
Gets or sets whether the Window when not focused remains on top of any other window. This overrides the window managers z-index, so that if a window looses its focus it will still be visible and on top of other windows. This is useful if you need a reference window or tool window that if not focused still stays on top of other windows. By default this is false. Note that two windows that are both set to alwaysOnTop will be swap ordering if the windows loose and gain focus.
Definition
boolean window.alwaysOnTopExample
require('Common');
var win = new Window(); // Create a new window.
win.visible = true; // make sure the window is shown.
win.alwaysOnTop = true; // the window will now remain on top of all others.Description
Gets or sets the background color of the window. Note that this only changes the background color of the content area for Windows, on OSX this changes the full window color (except when textured = false). The color can be a named, rgba hexadecimal value or a CSS color value.
Example
require('Common');
var win = new Window();
win.visible = true; // Show the window.
win.backgroundColor = 'red'; // make the background red.
Description
Gets or sets whether the window can be set to "fullscreen". The behavior of some operating systems is to default to fullscreen when maximized. This determines whether the Window will go into fullscreen on maximize or if it can when the OS requests so. The default value is false.
Definition
boolean window.canBeFullscreenExample
require('Common');
var win = new Window();
win.visible = true; // make sure the window is shown.
win.canBeFullscreen = false; // do not allow the window to go fullscreen.
// on some operating systems, this will disable or remove
// the fullscreen button.
win.state = "fullscreen"; // try and take the window fullscreen. this will not work.
win.canBeFullscreen = true; // allow the window to be fullscreen, renable any buttons.
win.state = "fullscreen"; // the window will now be fullscreen.Description
Gets or sets whether the close button is shown. If the frame is set to false on the window (e.g., do not show any window controls) then this is also false. The default value for this is true, if set to false the close button is not shown (although the window can be closed through the destroy function).
Definition
boolean window.closeButtonExample
require('Common');
var win = new Window();
win.visible = true; // Show the window.
win.closeButton = false; // The window will not have a close button, or on some OS'
// the close button is grayed out or disabled.
Description
Gets or sets whether the window has a native frame, e.g., resize handles, minimize and maximize buttons and a titlebar. If set to false, only the content area or 'client area' is rendered. This is useful for splash screens and other informative windows. By default this is true.
Definition
boolean window.frame (default true)Description
Gets or sets the height of the window. The default value is 500.
Definition
number window.height (default 500)Example
require('Common');
var win = new Window();
win.height = 900; // change the height of the window from 500 (default) to 900.
// this happens before the window is shown so there isnt a
// noticable flicker when the application loads.
win.visible = true; // Show the window.
Description
Gets or sets whether the maximize button is shown. If the frame is set to false on the window (e.g., do not show any window controls) this is also false. The default value for this is true, if set to false the maximize button is not shown (although the window can still be programmatically set to maximized through the state property).
Definition
boolean window.maximizeButtonExample
require('Common');
var win = new Window();
win.visible = true; // Show the window.
win.maximizeButton = false; // The window will not have a maximize button, or on some OS'
// the maximize button is grayed out or disabled.
Description
Gets or sets the menu associated with this Window. On OSX the same menu is used for all windows and is not rendered as part of the window. On Windows the menu is rendered at the top of the window as part of its frame.
Description
Gets or sets whether the minimize button is shown. If the frame is set to false on the window (e.g., do not show any window controls) then this is also false. The default value for this is true, if set to false the minimize button is not shown (although the window can still be programmatically set to maximized through the state property).
Definition
boolean window.minimizeButtonExample
require('Common');
var win = new Window();
win.visible = true; // Show the window.
win.minimizeButton = false; // The window will not have a minimize button, or on some OS'
// the minimize button is grayed out or disabled.
Description
Gets or sets whether the window is resizable by the user. If set to false the native UI Widget for resizing is also not shown. Note that you can still change the window size programmatically through the width and height attributes.
Definition
boolean window.resizableExample
require('Common');
var win = new Window(); // Create a new window.
win.visible = true; // make sure the window is shown.
win.resizable = false; // the window will not be able to be resized by the user,
// but can still be resized programmatically with the
// width/height properties.
Description
Gets or sets the state of the window. The options are "maximized", "minimized", "fullscreen" or "normal". Note: If the window's property 'canbeFullScreen' is not set to true setting "fullscreen" will have no effect.
Definition
string window.state (default "normal")Example
require('Common');
var win = new Window();
win.visible = true;
// maximizes the new window, previous state is "normal"
win.state = "maximized";
// minimizes the window, previous state was "maximized"
win.state = "minimized";
// brings the window back to its normal, unmaximized state on screen.
win.state = "normal"
win.canBeFullscreen = true; // allow the window to be fullscreen,
// this enables any native buttons.
win.state = "fullscreen"; // the window will now be fullscreen.Description
Gets or sets whether the window's style is textured. By default this is true on OSX and false on Microsoft Windows. Textured windows use the native OS' texture to render the background, on OSX this is the metal or brushed look, on some Windows platforms this is a glass look on the frame elements. Setting this to false disables these.
Definition
boolean window.texturedExample
require('Common');
var win = new Window();
win.visible = true; // make sure the window is shown.
win.textured = false;
win.title = "Non-textured window.";
win.x = 50;
var win2 = new Window();
win2.visible = true; // make sure the window is shown.
win2.textured = true;
win2.title = "Textured window.";
win2.x = 600;
Description
Gets or sets the title of the window. This is the text displayed in the capiton. The default of this is an empty string, if the property of the window's frame is set to false (not the default value) then the title does not render.
Definition
string window.titleExample
require('Common');
var win = new Window();
win.visible = true;
// Set the title bar caption to "hello"
win.title = "hello";
Description
Gets or sets the toolbar associated with the Window. The toolbar provides a consistant panel of controls regardless of how the content or child elements behave. Both OSX and Windows render these at the top (underneath the Menu) as part of the client area.
Example
require('Common');
var win = new Window();
win.visible = true;
var urlLocation = new TextInput();
var toolbar = new Toolbar();
var backButton = new Button();
var forwardButton = new Button();
backButton.image = 'back'; // named system icon
forwardButton.image = 'forward'; // named system icon
// Use 'space' for a OS-determined variable length space between items.
toolbar.appendChild([backButton, forwardButton, 'space', urlLocation, 'space']);
win.toolbar = toolbar;
urlLocation.alignment = 'center';
urlLocation.linewrap = false;
urlLocation.scrollable = true;
urlLocation.value = 'A text input field';
Description
Gets or sets whether the window is visible or hidden. Hidden windows are not minimized, but removed from the screen regardless if their minimized, maximized or fullscreen. By default the windows visibility is set to false so windows can have specific styling set prior to being shown.
Definition
boolean window.visibleExample
require('Common');
var win = new Window();
win.visible = true; // Show the window.
win.vsibile = false; // Hide the window.Description
Gets or sets the width of the window. The default is 500.
Definition
number window.width (default 500)Example
require('Common');
var win = new Window();
win.width = 900; // change the width of the window from 500 (default) to 900.
// this happens before the window is shown so there isnt a
// noticable flicker when the application loads.
win.visible = true; // Show the window.
Description
Gets or sets the value of the horizontal position (from the left of the screen) where the window is at.
Definition
number window.xExample
require('Common');
var win = new Window();
win.visible = true; // Show the window.
// Move the window from 0, to 400 pixels (left to right) over
// 400*16 milliseconds (or roughly 4 seconds);
var xLoc = 0; // Set initial left position to 0.
setInterval(function() { // execute this function every X milliseconds (see time below).
win.x = xLoc; // Move the window to whatever xLoc has stored.
xLoc = xLoc + 1; // The next call will move the window by one pixel to the right.
if(xLoc > 400) // If the x location is greater than 400, exit the program.
process.exit();
}, 16); // execute this every 16 milliseconds.
Description
Gets or sets the position from the top of the screen where the window is at. This does not account for the work area. Setting this to a value that impeeds on system areas (such as the menu bar on OSX or the task bar on Windows) resets the value to as close as possible coordinate value.
Definition
number window.yExample
require('Common');
var win = new Window();
win.visible = true; // show the window
win.y = 0; // move the window to the top area of the screen.
Methods
Description
Causes the window to be placed in front of other windows, even if it is not currently focused. Note that this does not pull the window above windows that are set to be always on top (see alwaysOnTop).
Definition
window.bringToFront()Example
require('Common');
var win = new Window(); // Create a new window.
win.visible = true; // make sure the window is shown.
var win2 = new Window(); // Create a second new window.
win2.visible = true; // make sure the window is shown.
win2.x = win2.x - 30; // move left thirty pixels.
win2.y = win2.y - 30; // move up thirty pixels.
win.bringToFront(); // the window is pulled in front of all others
// (with the exception if a windows that are "alwaysOnTop")
Description
Destroys the window along with its resources. This method will remove the window entirely and its memory.
Definition
window.destroy()Example
require('Common');
var win = new Window(); // Create a new window.
win.visible = true; // make sure the window is shown.
win.destroy(); // the window is no longer visible, AND the memory is released.Events
Description
Fires when the window looses focus from the mouse or keyboard.
Definition
window.addEventListener('blur', function() { ... });Description
Fires when the window is destroyed and resources are released, this is fired just before the window is closed.
Definition
window.addEventListener('close', function() { ... });Description
Fires after the window has been destroyed and all resources have been released. Do not refer to the window during this event.
Definition
window.addEventListener('closed', function() { ... });Description
Fires when the window is entering into full screen mode.
Definition
window.addEventListener('enter-fullscreen', function() { ... });Description
Fires when the window gains focus from the mouse or keyboard.
Definition
window.addEventListener('focus', function() { ... });Description
Fires when the window is exiting into full screen mode.
Definition
window.addEventListener('leave-fullscreen', function() { ... });Description
Fires when the state of the window becomes minimized.
Definition
window.addEventListener('minimize', function() { ... });Description
Fires when the window is moved by the user through the title bar.
Definition
window.addEventListener('move', function() { ... });Description
Fires when the window is resized by the user.
Definition
window.addEventListener('resize', function() { ... });Description
Fires when the state of the window goes from being minimized into a new state.
Definition
window.addEventListener('restore', function() { ... });