Building Ajax Control Part I

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.

Advertisements

One Response to Building Ajax Control Part I

  1. Michel Berkelmans says:

    Dennis,

    Ik heb je artikel ‘ASP.NET AJAX-control bouwen’ gelezen in Microsoft.net magazine for developers #19.

    Heel interessant voor mij.

    Ik kan in het artikel en ook niet op je blog een link vinden naar de code.

    Is de code beschikbaar en zou je ‘m willen toesturen?

    Met vriendelijk groet,

    Michel Berkelmans
    Bridgis.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: