How To Extend The DynLayer

There are 4 different ways to extend the DynLayer

DynLayer Add-on Methods

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

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

This method is not available to the DynLayer until you "attach" it. There are 3 ways to do this

  1. Use the prototype command (recommended)
    This way your method will be available to all DynLayers that you define 
    DynLayer.prototype.myNewMethod = DynLayerMyNewMethod

    You can either make your own .js file and include both the function and the prototype call in that function, or include these in the dynlayer.js source file itself.

  2. Include your method in the constructor (not recommended):
    This will do the same as a prototype but all methods of the DynLayer now use prototyping 
    function DynLayer(id,nestref,frame) {
	... code in constructor
	this.myNewMethod = DynLayerMyNewMethod
}
  3. Assign the method explicitly to a specific DynLayer

    This way your method will only be available to a specific DynLayer. In some instances this may be preferrable. 

    mylayer.myNewMethod = DynLayerNewMethod

    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 all of the widgets/components, however usually what I do is generate layer names automatically, but it's still the same basic idea.

    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

    Note: As of the June 23 update to the DynLayer you must also set the prototype of your object to the Dynlayer's prototype in order to attach the methods.

    Perhaps the most powerful way of extending the DynLayer is to , 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, and at the end make your object have the same prototype as the DynLayer. What that does is attach all the methods of the DynLayer to your Object. 

    myobject = new MyObject('myObjectDiv',null)

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

MyObject.prototype = DynLayer.prototype

    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.

    Example: demo-smileyface.html

    For an example of how to use this, look at the source code of . 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:

    Home Next Lesson: Common Extensions
    copyright 1998 Dan Steinman