Harnessing The Power of Standards: The DOMWindow
By Scott Andrew LePera
November 19, 2000 | Printer-friendly version
Part II: Assembling The Pieces
Each DOMWindow consists of three DIV elements: the grey base layer, a blue title bar across the top, and a main content frame:
Since we'll want to be able to make as many DOMWindows as we want, let's set up a DOMWindow constructor similar to the one we made for DOMDiv, allowing us to specify the position, width, height and the titlebar text of each DOMWindow created:
function DOMWindow(x,y,w,h,text){
var winBody = new DOMDiv(x,y,w,h,"#cccccc")
var toolBar = new DOMDiv(4,4,w-10,18,"#006699")
var contentArea = new DOMDiv(4,26,w-10,h-40,"#ffffff")
var titleText = document.createTextNode(text)
toolBar.appendChild(titleText)
winBody.appendChild(contentArea)
winBody.appendChild(toolBar)
return winBody
}
Notice how I'm just choosing a few abitrary colors here. You can easily modify this object to accept color values, but we'll keep things simple. Notice also how I'm calculating the correct size of the titlebar and content frame based on the overall window size supplied in the arguments. Again, the 18-pixel height of the titlebar and four-pixel edge gap is arbitrary. You can change those to suit your tastes, or rewrite the whole function to accept values for these properties.
To create a DOMWindow, we simply call the constructor thus:
myDomWin1 = new DOMWindow(200,100,300,200,"My First DOM Window")
document.body.appendChild(myDomWin1)
EXAMPLE: Two unstyled DOMWindows
You may wonder why I decided not to automatically append the DOMWindow to the document at the end of the constructor and save myself the extra step of doing it manually. Well, there's no reason we couldn't. But I don't want the DOMWindow constructor to make that decision for me. I might want to tweak the DOMWindow a little bit -- change a color, add a button, whatever -- before committing it to the document. Besides, what if you wanted to add the DOMWindow to a different document, such as the one in a pop-up window? Presume nothing. That's why we'll let the developer decide when it's safe to add the DOMWindow.
So far, so good, but dang, so ugly. Let's add some style to our DOMWindows.