Hi,
In this post i will describe how to create you own control. In this post i will talk about the constructor, the prototype pattern, the initialize and dispose method. before we can use our constructor we have to define a namespace where our control resides in. We will do this with the following line:
Type.registerNamespace(”[namespace]“);
The constructor
Well the constructor should ring a bell to us developers. The constructor for an Ajax control is just the same.
It will receive an element which is the DOM element who is representing our Ajax control in the browser. Inside the constructor you should only define you variables not methods and properties (we will discuss this later).
[namespace].Control = function(element)
{
this._name = null;
this._pagesize = null;
}
the _ sign is used to make developers see that these variables are private. The only thing is you are able to use them public. This is not recommended, you should use the properties to get to your variables. But how does the Ajax framework comes to our control. Well when we create our control in the webpage we should do this with the $create method. This create method is a short notation for the Sys$Component$Create method which is defined inside the Ajax scriptlibrary. This method accepts 5 parameters:
- type (the type of Ajax control you want to create)
- properties (the properties the control has)
- events (the events the control has)
- references (the references the control has with other controls)
- element (the DOM element which is representing the Ajax control)
I am not going to specify the method totally but, there is a specific line i would like to highlight:
var component = (element? new type(element): new type());
This line of code will trigger the constructor of our control. When you hit F11 when you are debugging you will step into the code of your control. As you can see in this line of code the element variable is used as a parameter. So the $create method receives the element and passes it through to the constructor of our control.
The prototype object
Like i said before you should not define your properties or methods inside your constructor. The prototype is a template for your control. You should use the prototype object to define you properties and method. The reason why, is because this is a more efficient way when dealing with memory. When you define the properties and methods inside the constructor and you create such an object. the properties and methods will be copied to the object everytime you create a new object. When you define the properties and methods inside your prototpye the properties and methods will be shared by each object that is instantiated. So this is much more effecient when creating multiple objects.
Initialize function
When you create your own control you are able to overwrite the initialize method. You shoud do this when you want to initialize your properties, define delegates and hook up events to eventhandlers. When you overwrite this function you should always add:
YOURControl.callBaseMethod(this, ‘initialize’);
This is because you should always initialize the base class.
Dispose function
Well the dispose method should be used to dispose al the references and processes you created in the intialize function. Think about delegates and and eventhandlers. When you don’t use this method to dispose your eventhandlers and delegetas you will receive an error when leaving the page where your control resides.
At the end you need to register your control:
[namespace].[controlname].registerClass(’[namespace].[controlname]‘, Sys.UI.Control);
in the registerClass method you can see that it takes 2 parameters. One is the control that is build and the second the class where it inherits (Sys.UI.Control). There is an option to add a third parameter. In this paramtere you can define interfaces which your control implements.
The control that is build is in a separate javascript file. You need to add the following line of code to communicate with the scriptmanager that you js file is loaded when it is needed/ referenced:
if (typeof(sys) !== ‘undefined’) Sys.Application.notifyscriptLoaded();
The next post will be about Properties how these are defined and how the Ajax framework will act on it.
). I am reading a book 
