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

Objects on the client with ASP.NET AJAX

In this post i would like to show you how cool it is to use the objects you defined in your Business Layer on the client. But first why do you want to use your objects on the client? Well, wouldn’t it be nice to only retrieve some objects from the server once and manipulate the objects, add new objects and when everything is good then send it back to the server to process everything.  This means less data transfers. With the ASP.NET AJAX framework this is very easy to achieve. I have a webpage which communicates with a webservice to retrieve some information from the server. My webservice only contains two webmethods. A getHouse and a saveHouse Webmethod.

[WebMethod]

public House GetHouse()

{

return new House();

}

In this case I created a Class House which will be send to the client when the webmethod GetHouse is executed. As you can see below the house object in the Business Namespace is available on the client.GetHouse

The reason this object is available on the client is because I have set a reference to the webservice in the Scriptmanager. The Scriptmanager will create a Javascript proxy to enable communication with the  webservice. Because I have defined a webmethod where I use an object House this object will be generated in the Javascript proxy as show in de second screenshot.

 RegisterHouseClass

Here you can see that first the namespace is created and later the House object will be registered in the Business namespace. Because the object is generated in the Javascript Proxy it becomes available on the client. Now we can write code like:

var house = new Business.House();

But what if I want to use an object which I don’t use in my webmethodes. For example I would like to add a Room to the House object. The webservice doesn’t have a webmethod where it uses a Room object, so the JavascriptProxy will not contain a Room object. I have to make sure that the object from my Business Layer will be available through the Javascrit proxy. This can be achieved by using the [GenerateScriptType(typeof(Room))] Attribute. With this attribute you specify that the server type must be generated into the Javascript Proxy. So let’s take a look at the proxy again now i have added this attribute to my Webservice Class.GenerateMultipleClasses

Right now I have the Room and House class available on the client. See the final screenshot

House with Room

Using objects on your client can reduce data tranfsers. You can create the objects on the client and when you are happy with it send it back to the server where it will be processed. I think this is a pretty cool and strong feature of the Javascript proxy which is mainly responsible for this feature. 

Microsoft joins steering committee OpenAjax alliance

Check it here:

http://www.openajax.org/blogs/?p=41

OpenAJAX Hub

Since Microsoft joined the openAJAX alliance i have checked the site of openAJAX alliance maybe twice.  Today i am convinced that i have to do it more often. I read a very interesting article about the “OpenAJAX hub”. I admit i am a little late. The OpenAJAX Hub in one sentence, will be used to integrate multiple Ajax frameworks into one webpage. So when you want to use AJAXIUM and the ASP.NET AJAX controls in one webpage because both frameworks contain controls that you like to use in your webpage you have to use the OpenAJAX Hub. The hearth of the OpenAjax Hub is the Publish/ subscriber manager (they call it the pub/sub manager). This manager is responsible for managing events within the webpage. I could happen that Ajax Control A (Build with AJAXIUM) triggers an event which has to update Ajax Control B (build with ASP.NET AJAX). To let these controls communicate with eachother Control B has to subscribe to the event of Control A at the pub/sub manager. The manager will fix the interoperability between the different framework. For more information check this .

Regards

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.

Improve Ajax Performance

Hi,

To improve the Ajax performance you should install windows script 5.7. This should help you fix the problem some browsers have with the Garbage Collector (GC). Check the following article for more information here. On the blog of Gurav Seth are the links to download windows script 5.7

Building Ajax Controls

In the upcoming weeks i want to describe how you can build your own Ajax Control. In these posts i will describe how a Control should look like, but also why it should be build that way. I will describe for each part of this subject how the Ajax framework will interact with our control. The subjects i want to describe are shown below:

  • Building Ajax controls part I (Control constructor + Prototype pattern + Initialize + Dispose)
  • Building Ajax controls part II (Define properties)
  • Building Ajax controls part III (Define Events)
  • Building Ajax controls part IV (Define Methods)
  • Building Ajax controls part V (Define References)
  • Building Ajax controls part VI (make control serverside available, Scriptdescriptor, Scriptreferences)