Building Ajax control Part II

Some time ago I decided to write some posts about what happens within the ASP.NET AJAX framework when you build your own control. There are a lot of posts how to create your own control, but i was very interested what happens inside the framework. In this part i will show you how the framework acts on the properties of your control. When you have created a new control you have to instantiate it on a webpage. In figure1 is shown how you could do that. My control will be created when the application is loaded. The first line is just to kick in the debugger so this is a line you can forget.

Creating a control

figure 1

In this post i will focus on the second parameter {name: ‘Control’}. The second parameter is used to set the properties of your control, in this cause i am only using 1 property called name. I set the name of the control to ‘Control’. In figure 2 you can see my property as a parameter.

Property parameter

figure 2

Before the property can be set on the control, the framework has to create the control first. In figure 3 you can see that once the control is created it will live in the code as the variable component.

property2.jpg

figure 3

Once the control is created I am able to set the properties of the control. In figure 4 you can see that the _setProperties function is called with 2 parameters. The control self and the properties I set when in created the control.

Set properties

figure 4

The setProperties is the function where it all happens. There are some if statements to decided how the properties should be set. In Figure 5 you can see an overview of the _setProperties function

property4.jpg

figure 5

Mainly the code block in figure 5 is divided in 2 blocks. The first is used when you have objects defined for your properties for example {style: {fontWeight: “bold”, borderWidth: “2px”}}}. In this case style will be seen as a object and fontWeight en borderWidth as properties. In this block the code will recursively call it self to finally end up in the second block where the real properties will be set. Below I will show in detail how the properties will be set for a control. In figure 6 you can see that there will be looped through the array of properties and that the variable val will be set with the value op the property name. See figure 7. 

property5.jpg

figure 6

property6.jpg 

figure 7

The variable ‘name’ will always contain the name of the property and the variable ‘val’ will always contain the value you want to set for the property. Now that the property and the value are known the framework will set the value. To do this, your control should contain a function to set (in my case name) the property of the control. the syntax for this is “set_”+ the propertyname. If your property doesn’t have a set prefix the function can’t be found. See figure 8 for the code example.

property7.jpg

figure 8

In figure 8 you can see that there will be a setter variable which will act as the property setter and it takes 2 arguments. Target which will be the control where the property is part of and the val (value) of the property. When you step into this line of code you will reach your own control as you can see in figure 9.

property8.jpg 

figure 9

I hope this makes it clear how the framework will work with your control and how it will set your property. In part III I will describe how you can hook up events to your control and how the framework will fix this for you.

Regards,

 Dennis

Advertisements

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: