How to Create A JavaScript Windows Interface

In this article I present a JavaScript based framework that can be used to organize a web application in a windows-like fashion (see Fig. 1).

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)
{

// save arguments
this.title = title;
this.oContent = oContent;

// initialization
this.mx = 0;
this.my = 0;

// create table for window with title-bar and content
this.oTable = document.createElement("table");
this.oTable.border = 1;

// set the position of the window
this.oTable.style.position = "absolute";
this.oTable.style.left = x + "px";
this.oTable.style.top = y + "px";

// set background to white (default is transparent)
this.oTable.style.backgroundColor = "white";

// link from the table to the JSWindow object
this.oTable.jsWindow = this;

// if anywhere in the table are is clicked, bring the window to front.
this.oTable.onmousedown = JSWindow.prototype.onBringToFront;

// append to document body
document.body.appendChild(this.oTable);

// add row for title bar
var oTR = this.oTable.insertRow(0);
oTR.className = "JSWindowTitleStyle";

// title
var oTD = oTR.insertCell(0);
oTD.innerHTML = title;
oTD.jsWindow = this;
oTD.onmousedown = JSWindow.prototype.tdOnMouseDown;

// minimize
this.oMinTD = oTR.insertCell(1);
this.oMinTD.innerHTML = "_";
this.oMinTD.onclick = JSWindow.prototype.onMinimize;
this.oMinTD.jsWindow = this;

// close
oTD = oTR.insertCell(2);
oTD.innerHTML = "X";
oTD.jsWindow = this;
oTD.onmousedown = JSWindow.prototype.onBringToFront;
oTD.onclick = JSWindow.prototype.onClose;

// add row for window content
// a single cell the same width as the title bar row
oTR = this.oTable.insertRow(1);
oTD = oTR.insertCell(0);
oTD.colSpan = 3;
oTD.appendChild(oContent);

}

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() {
		this.jsWindow.bringToFront();
	} JSWindow.prototype.bringToFront = function() {
		// move table to bottom of document body document.body.appendChild(this.oTable);
	}