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);
(end);

Event: mxEvent.MOVE_START

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

Event: mxEvent.MOVE

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

Event: mxEvent.MOVE_END

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

Event: mxEvent.RESIZE_START

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

Event: mxEvent.RESIZE

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

Event: mxEvent.RESIZE_END

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

Event: mxEvent.MAXIMIZE

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

Event: mxEvent.MINIMIZE

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

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.

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.

Event: mxEvent.SHOW

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

Event: mxEvent.HIDE

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

Event: mxEvent.CLOSE

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

Event: mxEvent.DESTROY

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

Constructor: mxWindow

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.

Summary

mxWindow	Basic window inside a document.
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.

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.