mxWindow

Basic window inside a document.

Examples

Creating a simple window.

var tb = document.createElement('div');
var wnd = new mxWindow('Title', tb, 100, 100, 200, 200, true, true);
wnd.setVisible(true);

Creating a window that contains an iframe.

var frame = document.createElement('iframe');
frame.setAttribute('width', '192px');
frame.setAttribute('height', '172px');
frame.setAttribute('src', 'http://www.example.com/');
frame.style.backgroundColor = 'white';

var w = document.body.clientWidth;
var h = (document.body.clientHeight || document.documentElement.clientHeight);
var wnd = new mxWindow('Title', frame, (w-200)/2, (h-200)/3, 200, 200);
wnd.setVisible(true);

To limit the movement of a window, eg. to keep it from being moved beyond the top, left corner the following method can be overridden (recommended):

wnd.setLocation = function(x, y)
{
  x = Math.max(0, x);
  y = Math.max(0, y);
  mxWindow.prototype.setLocation.apply(this, arguments);
};

Or the following event handler can be used

wnd.addListener(mxEvent.MOVE, function(e)
{
  wnd.setLocation(Math.max(0, wnd.getX()), Math.max(0, wnd.getY()));
});

Summary

mxWindow	Basic window inside a document.
Events
mxEvent.MOVE_START	Fires before the window is moved.
mxEvent.MOVE	Fires while the window is being moved.
mxEvent.MOVE_END	Fires after the window is moved.
mxEvent.RESIZE_START	Fires before the window is resized.
mxEvent.RESIZE	Fires while the window is being resized.
mxEvent.RESIZE_END	Fires after the window is resized.
mxEvent.MAXIMIZE	Fires after the window is maximized.
mxEvent.MINIMIZE	Fires after the window is minimized.
mxEvent.NORMALIZE	Fires after the window is normalized, that is, it returned from maximized or minimized state.
mxEvent.ACTIVATE	Fires after a window is activated.
mxEvent.SHOW	Fires after the window is shown.
mxEvent.HIDE	Fires after the window is hidden.
mxEvent.CLOSE	Fires before the window is closed.
mxEvent.DESTROY	Fires before the window is destroyed.
Functions
mxWindow	Constructs a new window with the given dimension and title to display the specified content.
Variables
closeImage	URL of the image to be used for the close icon in the titlebar.
minimizeImage	URL of the image to be used for the minimize icon in the titlebar.
normalizeImage	URL of the image to be used for the normalize icon in the titlebar.
maximizeImage	URL of the image to be used for the maximize icon in the titlebar.
normalizeImage	URL of the image to be used for the resize icon.
visible	Boolean flag that represents the visible state of the window.
content	Reference to the DOM node that represents the window content.
minimumSize	mxRectangle that specifies the minimum width and height of the window.
title	Reference to the DOM node (TD) that contains the title.
content	Reference to the DOM node that represents the window content.
destroyOnClose	Specifies if the window should be destroyed when it is closed.
Functions
init	Initializes the DOM tree that represents the window.
setTitle	Sets the window title to the given string.
setScrollable	Sets if the window contents should be scrollable.
activate	Puts the window on top of all other windows.
getElement	Returuns the outermost DOM node that makes up the window.
fit	Makes sure the window is inside the client area of the window.
isResizable	Returns true if the window is resizable.
setResizable	Sets if the window should be resizable.
setSize	Sets the size of the window.
setMinimizable	Sets if the window is minimizable.
getMinimumSize	Returns an mxRectangle that specifies the size for the minimized window.
installMinimizeHandler	Installs the event listeners required for minimizing the window.
setMaximizable	Sets if the window is maximizable.
installMaximizeHandler	Installs the event listeners required for maximizing the window.
installMoveHandler	Installs the event listeners required for moving the window.
setLocation	Sets the upper, left corner of the window.
getX	Returns the current position on the x-axis.
getY	Returns the current position on the y-axis.
installCloseHandler	Adds the closeImage as a new image node in <closeImg> and installs the <close> event.
setImage	Sets the image associated with the window.
setClosable	Sets the image associated with the window.
isVisible	Returns true if the window is visible.
setVisible	Shows or hides the window depending on the given flag.
show	Shows the window.
hide	Hides the window.
destroy	Destroys the window and removes all associated resources.

Events

mxEvent.MOVE_START

Fires before the window is moved. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE

Fires while the window is being moved. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE_END

Fires after the window is moved. The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_START

Fires before the window is resized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE

Fires while the window is being resized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_END

Fires after the window is resized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MAXIMIZE

Fires after the window is maximized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MINIMIZE

Fires after the window is minimized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.NORMALIZE

Fires after the window is normalized, that is, it returned from maximized or minimized state. The <code>event</code> property contains the corresponding mouse event.

mxEvent.ACTIVATE

Fires after a window is activated. The <code>previousWindow</code> property contains the previous window. The event sender is the active window.

mxEvent.SHOW

Fires after the window is shown. This event has no properties.

mxEvent.HIDE

Fires after the window is hidden. This event has no properties.

mxEvent.CLOSE

Fires before the window is closed. The <code>event</code> property contains the corresponding mouse event.

mxEvent.DESTROY

Fires before the window is destroyed. This event has no properties.

Functions

mxWindow

function mxWindow( title,
content,
x,
y,
width,
height,
minimizable,
movable,
replaceNode,
style )

Constructs a new window with the given dimension and title to display the specified content. The window elements use the given style as a prefix for the classnames of the respective window elements, namely, the window title and window pane. The respective postfixes are appended to the given stylename as follows:

style	Base style for the window.
style+Title	Style for the window title.
style+Pane	Style for the window pane.

The default value for style is mxWindow, resulting in the following classnames for the window elements: mxWindow, mxWindowTitle and mxWindowPane.

If replaceNode is given then the window replaces the given DOM node in the document.

Parameters

title	String that represents the title of the new window.
content	DOM node that is used as the window content.
x	X-coordinate of the window location.
y	Y-coordinate of the window location.
width	Width of the window.
height	Optional height of the window. Default is to match the height of the content at the specified width.
minimizable	Optional boolean indicating if the window is minimizable. Default is true.
movable	Optional boolean indicating if the window is movable. Default is true.
replaceNode	Optional DOM node that the window should replace.
style	Optional base classname for the window elements. Default is mxWindow.

Variables

closeImage

mxWindow.prototype.closeImage

URL of the image to be used for the close icon in the titlebar.

minimizeImage

mxWindow.prototype.minimizeImage

URL of the image to be used for the minimize icon in the titlebar.

normalizeImage

mxWindow.prototype.normalizeImage

URL of the image to be used for the normalize icon in the titlebar.

maximizeImage

mxWindow.prototype.maximizeImage

URL of the image to be used for the maximize icon in the titlebar.

normalizeImage

URL of the image to be used for the resize icon.

visible

mxWindow.prototype.visible

Boolean flag that represents the visible state of the window.

content

mxWindow.prototype.content

Reference to the DOM node that represents the window content.

minimumSize

mxWindow.prototype.minimumSize

mxRectangle that specifies the minimum width and height of the window. Default is (50, 40).

title

mxWindow.prototype.title

Reference to the DOM node (TD) that contains the title.

content

mxWindow.prototype.content

Reference to the DOM node that represents the window content.

destroyOnClose

mxWindow.prototype.destroyOnClose

Specifies if the window should be destroyed when it is closed. If this is false then the window is hidden using setVisible. Default is true.

Functions

init

mxWindow.prototype.init = function( x,
y,
width,
height,
style )

Initializes the DOM tree that represents the window.

setTitle

mxWindow.prototype.setTitle = function( title )

Sets the window title to the given string. HTML markup inside the title will be escaped.

setScrollable

mxWindow.prototype.setScrollable = function( scrollable )

Sets if the window contents should be scrollable.

activate

mxWindow.prototype.activate = function()

Puts the window on top of all other windows.

getElement

mxWindow.prototype.getElement = function()

Returuns the outermost DOM node that makes up the window.

fit

mxWindow.prototype.fit = function()

Makes sure the window is inside the client area of the window.

isResizable

mxWindow.prototype.isResizable = function()

Returns true if the window is resizable.

setResizable

mxWindow.prototype.setResizable = function( resizable )

Sets if the window should be resizable.

setSize

mxWindow.prototype.setSize = function( width,
height )

Sets the size of the window.

setMinimizable

mxWindow.prototype.setMinimizable = function( minimizable )

Sets if the window is minimizable.

getMinimumSize

mxWindow.prototype.getMinimumSize = function()

Returns an mxRectangle that specifies the size for the minimized window. A width or height of 0 means keep the existing width or height. This implementation returns the height of the window title and keeps the width.

installMinimizeHandler

mxWindow.prototype.installMinimizeHandler = function()

Installs the event listeners required for minimizing the window.

setMaximizable

mxWindow.prototype.setMaximizable = function( maximizable )

Sets if the window is maximizable.

installMaximizeHandler

mxWindow.prototype.installMaximizeHandler = function()

Installs the event listeners required for maximizing the window.

installMoveHandler

mxWindow.prototype.installMoveHandler = function()

Installs the event listeners required for moving the window.

setLocation

mxWindow.prototype.setLocation = function( x,
y )

Sets the upper, left corner of the window.

getX

mxWindow.prototype.getX = function()

Returns the current position on the x-axis.

getY

mxWindow.prototype.getY = function()

Returns the current position on the y-axis.

installCloseHandler

mxWindow.prototype.installCloseHandler = function()

Adds the closeImage as a new image node in <closeImg> and installs the <close> event.

setImage

mxWindow.prototype.setImage = function( image )

Sets the image associated with the window.

Parameters

image

URL of the image to be used.

setClosable

mxWindow.prototype.setClosable = function( closable )

Sets the image associated with the window.

Parameters

closable

Boolean specifying if the window should be closable.

isVisible

mxWindow.prototype.isVisible = function()

Returns true if the window is visible.

setVisible

mxWindow.prototype.setVisible = function( visible )

Shows or hides the window depending on the given flag.

Parameters

visible

Boolean indicating if the window should be made visible.

show

mxWindow.prototype.show = function()

Shows the window.

hide

mxWindow.prototype.hide = function()

Hides the window.

destroy

mxWindow.prototype.destroy = function()

Destroys the window and removes all associated resources. Fires a destroy event prior to destroying the window.