The Dynamic Duo - How To Extend The DynLayer



loc = "../"






document.write(toccss)
document.write(tochtml)

How To Extend The DynLayer

There are 4 different ways to extend the DynLayer

DynLayer Add-on Methods
DynLayer Add-on Objects
Objects Which Encapsulate The DynLayer
Objects Which Internally Use The DynLayer


DynLayer Add-on Methods

It is quite easy to add you own methods to the DynLayer. Just create your own function:


function DynLayerNewMethod() {
// code for this method
}


Then to incorporate this method into the DynLayer you have 2 options:

Option 1: Including it in the DynLayerAddon() Method

The DynLayerAddon() Method is specifically designed to be the part of the DynLayer that's loosely put togther and easy to add or remove methods and properties. To add your own methods, you can put your code in the addon() method:


function DynLayerAddon(id,nestref) {
this.id = id
this.nestref = nestref
this.w = (ns4)? this.css.clip.width : this.css.pixelWidth
this.h = (ns4)? this.css.clip.height : this.css.pixelHeight
this.doc = (ns4)? this.css.document : document
this.event = (ns4)? this.css : document.all[id]
if (ns4) this.event.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE)
this.obj = id + "DynLayer"
eval(this.obj + "=this")
this.slideInit = DynLayerSlideInit
this.clipInit = DynLayerClipInit
this.wipeInit = DynLayerWipeInit
this.newMethod = DynLayerNewMethod
}


Doing it this way will assign the new method to all DynLayers that you have.

This tactic is used by the slide, clip, and wipe methods.

Option 2: Assigning the Method Individually:

Instead what you can do is only assign the method to DynLayers which require them:


objectName = new DynLayer("objectNameDiv")
objectName.newMethod = DynLayerNewMethod


This tactic is used by the glide, setBGColor, write, and changeImage methods.

DynLayer Add-on Objects

If you require an addition to the DynLayer which contains it's own set of properties and several methods, you may want to make it it's own object and append it to the DynLayer. What I suggest you do is pass the new object information so that it is still able to update the DynLayer. Do do this the object will require the name of the DynLayer, as well as the name of the add-object:


objectName = new DynLayer("objectNameDiv")
objectName.myobject = new MyObject("objectName","myobject")

function MyObject(dynlayer,name) {
this.dynlayer = dynlayer
this.name = name
this.value = eval(this.dynlayer+'.x') + 100 // use eval's to capture data from the Dynlayer
this.method = MyObjectMethod
this.repeat = MyObjectRepeatMethod // repeats MyObjectMethod using setTimeout
}
function MyObjectMethod() {
eval(this.dynlayer+'.moveBy(10,10)') // use eval's to assemble the name of the DynLayer
}
function MyObjectRepeat() {
setTimeout(this.dynlayer+'.'+this.name+'.method()',50) // use eval's to assemble the name of the object's method
}


Then to use the add-on object you use this general format:


objectName.myobject.method()
or
objectName.myobject.repeat()
etc.


This tactic is used by the Geometric Objects, and the Path Object.

Objects Which Internally Use The DynLayer

If you want one object to control multiple layers, your best bet is to assign properties which are in fact DynLayers.

Option 1: Send the object the names of the layers, and let the object define the DynLayers


myobject = new MyObject('layer1Div,'layer2Div')

function MyObject(lyr1,lyr2) {
this.lyr1 = new DynLayer(lyr1)
this.lyr2 = new DynLayer(lyr2)
}


This way, the main object (MyObject) can control both those layers by using the properties and methods of those DynLayers. For example you could create a method by which it slides both layers in unison:


myobject = new MyObject('layer1Div,'layer2Div')

function MyObject(lyr1,lyr2) {
this.lyr1 = new DynLayer(lyr1)
this.lyr1.slideInit()
this.lyr2 = new DynLayer(lyr2)
this.lyr2.slideInit()
this.slideBoth = MyObjectSlideBoth
}
function MyObjectSlideBoth() {
this.lyr1.slideBy(-100,0,5,50)
this.lyr2.slideBy(100,0,5,50)
}


This tactic is used by the Scroll and Select Objects.

Option 2: Pre-define your DynLayers and send the object the names of the DynLayers


mylayer = new DynLayer("mylayerDiv")
myobject = new MyObject(mylayer)

function MyObject(dynlayer) {
this.dynlayer = dynlayer
// do something with this.dynlayer
}


This tactic is used by the Drag Object.

Objects Which Encapsulate The DynLayer

One last way to use the DynLayer, the most powerful of the 4, is to make an object encapsulate the DynLayer, in other words to import all the functionality of the DynLayer into that object.

Be aware, this is not the same thing as the above section. The above section makes the DynLayer a property of an object. Encapsulation means that this object actually becomes a DynLayer that has it's own set of properties and methods.

To encapsulate the DynLayer, you assign the DynLayer as a method of the object, and immediately call that method:


myobject = new MyObject('myObjectDiv',null)

function MyObject(id,nestref) {
this.dynlayer = DynLayer
this.dynlayer(id,nestref)
}


What this does is assigns all the properties and methods of the DynLayer to this object. It is in fact a DynLayer itself because you work with it in the same manner...


myobject.hide()
myobject.moveBy(10,10)
etc.


So what advantage does this have? Well this is the ultimate way of extending the DynLayer because you can add much more functionality to this object. This technique is the ideal way to make a back-end to a DHTML game, where you need many types of objects that do different tasks, yet they all need to control layers like the Dynlayer does.

For an example of how to use this, look at the source code of demo-smileyface.html. It is a demo which creates a Smiley face object that has it's own properties and methods that are only need when you need to make such a smiley face.

This tactic is used by the Bumble Bee Demo.

DynLayer Extensions:

How To Extend The DynLayer
load(), setbg(), img()
Wipe Methods
Glide Methods



Home
Next Lesson:
Geometric Objects


copyright 1998 Dan Steinman