Fig. 1: Multiple Windows on a single web application.
The framework is based around a single class called JSWindow. The constructor of this class is shown here:
|function JSWindow(title, oContent, x, y)
// set the position of the window
// set background to white (default is transparent)
// link from the table to the JSWindow object
// if anywhere in the table are is clicked, bring the window to front.
// append to document body
// add row for title bar
The constructor takes four arguments: a title string for the text to display in the title bar, the content which is a single HTML node (you can get this by calling document.getElementById() ), and the x and y coordinates within the browser to position the window. The window will size itself automatically to the contents.
The first thing the constructor does (after saving the arguments and initializing), is to create a table with two rows. The position style is set to absolute and the left and top attributes are modified to set the position of the window. To bring the window to the front when it is clicked on, the onmousedown event handler on the table element is set to a function called JSWindow.prototype.onBringToFront (more on this later). The first row of the table is a title row and it contains the window title, a minimize button and a close button. It uses a style called “JSWindowTitleStyle” to allow the page designer to define how a window title should look. The second row has a single element and is used to contain the contents. When the contents element is appended to this table cell, it will automatically be removed from its previous parent (if it had one).
JSWindow.prototype.onBringToFront = function()
JSWindow.prototype.bringToFront = function()
|// move table to bottom of document body
Created: March 27, 2003
Revised: May 13, 2004