Revisions:
The DynWindow Object is a DHTML object which creates a draggable window and contains a Scroll2 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.
The required scripts are the dynlayer, dynlayer-common.js, mouseevents, drag.js, and dynwindow.js:
<script language="JavaScript" src="../dynlayer.js"></script> <script language="JavaScript" src="../dynlayer-common.js"></script> <script language="JavaScript" src="../mouseevents.js"></script> <script language="JavaScript" src="../drag.js"></script> <script language="JavaScript" src="../dynwindow.js"></script>
If you want to use the Scroll version of the DynWindow you'll also need the scroll2.js file.
Constructor for the DynWindow Object:
mywindow = new DynWindow(x,y,width,height)
To set where the images are taken from use the setImages(directory) method:
mywindow.setImages('../images/dynwindow/')
The filenames for the images must be named the same as mine, you can get all the images used by downloading the DynAPI.
Take a close look at the mouseDown, mouseMove, and mouseUp functions that I have in the demos, it must be just right in order to work properly.
Then do the standard build(), writeCSS(), write(div), activate() sequence.
Just as with the Scroll2 you can have inline content by writing mywindow.divStart and mywindow.divEnd. If you don't need it you can just use mywindow.div.
Add a Scroll2
The Scroll2 is optional, you might not want to use it if you want to do something more complex inside the window. Here's what you do:
mywindow.addScroll(16) // send width of scrollbar
mywindow.scroll.imgSet('../images/scroll2/metal/',16,16,37,-1,2,-1,2,1,1) // use an imageSet
mywindow.scroll.window.setMargins(5,5,5,5) // optional
There's only one method you'll use during the operation of the DynWindow:
setTitle(title)
This sets the title of the window. You'll usually want to do this at the same time you load a new document (see below).
Loading Files
If you don't use the Scroll2, you can still load external content by using the built in DynLayer mywindow.contentlyr
mywindow.contentlyr.load('file.html')
That file should call back to mywindow.contentlyr.loadFinish()
<body onLoad="parent.mywindow.contentlyr.loadFinish(); parent.mywindow.setTitle('My Title')">
If you use the Scroll2, you'll use the built-in scroll property:
mywindow.scroll.load('file.html')
This time call back to parent.mywindow.scroll.activate()
<body onLoad="parent.mywindow.scroll.activate(); parent.mywindow.setTitle('My Title');">
Events
There's 3 events that you'd use to operate the DynWindow,
There is currently no default action for these events. but I am working on it. I think I'll make some sort of IconBox object, not directly related to this Object. Then by assigning the onMinimize event it would use the IconBox to add an image to the screen and close the Window.
For maximizing, and restoring the DynWindow I'll have to add just a little more to the Scroll2, this will be added.
The onClose you could probably do as I've done in the examples and just hide the window:
// set events
mywindow.onMinimize = new Function("alert('minimize')")
mywindow.onRestore = new Function("alert('restore')")
mywindow.onClose = new Function("this.lyr.hide()")
Example: dynwindow1.html [source] - a DynWindow without a Scroll2.
Example: dynwindow2.html [source] - a DynWindow with a Scroll2.
| Home | Next Lesson: Clock Object |