DynWindow Object

Revisions:

The DynWindow Object is a DHTML object which creates a draggable window and contains a scroll object to view external files - mimicing how a real OS-window works. Possible uses for this is for creating some very spiffy dialog windows or providing an alternative way to view html documents.

I didn't take as much time to make this object truely customizable, but the source code should be easy enough to follow along that you can extend it any way you need. This object uses each of the DynLayer, Drag, and Scroll objects, and is a perfect example of how well these objects can be made to work together.

Initialization:

First of all you must include all 4 of dynlayer.js, scroll.js, drag.js, and dynwindow.js.

<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="scroll.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="drag.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="dynwindow.js"></SCRIPT>

The DynWindow works in the exact same manner that the Select and Scroll objects works, and thus it's initialization is similar as well. Somewhere in your JavaScript before final loading of the page you call the following:

objectName = new DynWindow(x,y,width,height)
objectName.build()

Example:

mywindow = new DynWindow(50,50,300,300)
mywindow.build()

In the init() function you call the DynWindow's activate() method and initialize the code to activate the Drag Object:

function init() {
	mywindow.activate()
	
	// initialize mouse events
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp
	if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

The mouseDown, mouseMove, and mouseUp functions are from the Drag Object lesson except I have added a call to routeEvent(e) for Netscape. This is so that both the document, as well as layers can recieve mouse events.

function mouseDown(e) {
	if ((ns4 && e.which == 1) || ie4) {
		var x = (ns4)? e.pageX : event.x
		var y = (ns4)? e.pageY : event.y+document.body.scrollTop
		drag.mouseDown(x,y)
		if (drag.active) {
			// put more code here to do something else when starting a drag
			return false
		}
		else {
			if(ns4 && e.target!=document) routeEvent(e)
			return true
		}
	}
}
function mouseMove(e) {
	var x = (ns4)? e.pageX : event.x
	var y = (ns4)? e.pageY : event.y+document.body.scrollTop
	if (drag.active) {
		drag.mouseMove(x,y)
		// put more code here to do something else while dragging
		return false
	}
	else {
		if(ns4 && e.target!=document) routeEvent(e)
		return true
	}
}
function mouseUp(e) {
	var x = (ns4)? e.pageX : event.x
	var y = (ns4)? e.pageY : event.y+document.body.scrollTop
	if (drag.active) {
		drag.mouseUp()
		// put more code here to do something else when finished a drag
		return false
	}
	else {
		if(ns4 && e.target!=document) routeEvent(e)
		return true
	}
}

In the BODY of your document you must write the DynWindow's div property:

<SCRIPT LANGUAGE="JavaScript">
document.write(mywindow.div)
</SCRIPT>

Usage of the DynWindow

The DynWindow actually contains very little new code, it just packages the Drag and Scroll Objects into one new object.

There's 3 main methods:

close() - actually only hides the top-level layer, called when you click the close button on the window

minimize() - I didn't really know what to do with this method, so I just made it also hide the window when you click the minimize button. If you plan on implementing this object you'll probably want to extend the code to do something else like create an icon or something.

setTitle(title) - sets the title of the window using the style tag .windowTitleStyle (also see Scroll Attributes).

There's a few other internal methods (for doing the rollovers on the images etc). Feel free to browse the source code to see how they operate.

DynLayer Attributes

The DynWindow applies a lyr property which points to the top-level layer initialized as a DynLayer. Using this you can hide, show, or move the entire Window using the DynLayer Methods:

mywindow.hide()

Scroll Attributes

The DynWindow also contains a Scroll Object, so you can apply any of the scroll methods to the scroll object inside the DynWindow. This is done by the scroll property:

mywindow.scroll.load('file.html')

The external files must call mywindow.scroll.activate() and it's probably a good idea to set the title of the window at the same time:

<BODY onLoad="if (parent.Scroll) {parent.mywindow.scroll.activate(); parent.mywindow.setTitle('Text Page 1'); }">

Extending and Customizing

This object is experimental, and there's about a million different ways I can forsee that someone would want to customize it (eg. file menus, window borders, different colors, shadows etc.), so I just left the customizing up to you. To edit any of the images used, position of the layers etc, you will have to edit the actual code in the object. The DynWindow code is quite small, and should be easy to follow. If you have any questions about what parts to edit please post them to my DHTML Forum.

View dynwindow1.html for a DynWindow example. View Source Code

Source Code

Download: dynwindow.js
View Source: dynwindow.js

Home Next Lesson: Clock Object
copyright 1998 Dan Steinman


Casa de Bender