WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / programming / javascript / gr / column6 / 1

[next]

UNIX System Administrator - SUN Solaris, Veritas, EMC, Shell Scripting, SAN (NYC) Next Step Systems US-NY-New York Post A Job | Post A Resume

Developer News ActiveState Debuts Open Source Business Suite Salesforce Offers Visual App Builder Codesion Steps Out From CVS's Shadow

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

home / programming / javascript / gr / column6 / 1

[next]

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark

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

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