How to Create A JavaScript Windows Interface | WebReference

How to Create A JavaScript Windows Interface

How to Create A JavaScript Windows Interface

When windows first appeared on computer screens around the world it revolutionized the way programs interfaced with the user. Multiple programs could be run at the same time without much confusion. Even within a single program, multiple windows could be used to separate unrelated bits of information or data entry forms and much more.

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);
  }


Created: March 27, 2003
Revised: May 13, 2004

URL: https://webreference.com/programming/javascript/gr/column6/1