Adding Animations to Your ASP.Net AJAX Extenders

5/23/2008

If you're like me, you've probably had to go about creating your own AJAX extenders. I mean the AJAX Toolkit is good, but it lacks certain items that I'd like to be able to just drop into a project without worrying about it that much. So I've had to create a few items myself and most likely you have as well. However, how do you go about adding animations to your own creations? The Toolkit has a rather nice animation setup that we'd like to take advantage of. Can it be done? Is it easy? Both questions can be answered with a yes. There's really only a couple of changes that need to be made to take advantage of the animations. First, let's look at the declaration:

   1: public class MyExtender : ExtenderControlBase

is the normal class declaration. However we need to change it to look like this:

   1: public class MyExtender : AnimationExtenderControlBase

We also need to go and add this attribute to the class:

   1: [RequiredScript(typeof(AnimationExtender))] 

And now we're ready to use some animations... Well I guess we still need to load them... In order to create our animations, we have to define a property for them so that we can easily load them. For instance:

   1: private Animation _OnMouseOut; 
   2:  
   3: [ExtenderControlProperty]
   4: [ClientPropertyName("OnMouseOutJson")]
   5: [Browsable(false)]
   6: public Animation OnMouseOut
   7: {
   8:     get
   9:     {
  10:         return GetAnimation(ref _OnMouseOut, "OnMouseOut");
  11:     }
  12:     set
  13:     {
  14:         SetAnimation(ref _OnMouseOut, "OnMouseOut", value);
  15:     }
  16: }

Note that we're calling GetAnimation and SetAnimation and that the Animation itself needs to be passed by reference. Other than that, it's not that different from any other property. We also need to setup the animation within our JavaScript file, however that's done like any other property. In the example above, we'd just set up a get_OnMouseOutJson and set_OnMouseOutJson function to save and get the animation.

We still need to do two more things

  1. Build the animation
  2. Play the animation (and potentially stop the animation)

Building the animation is actually rather simple. Using the example animation above:

   1: this._OnMouseOutAnimationHolder=$AA.buildAnimation(this._OnMouseOutJson, ElementToAssociateThisWith);

Thankfully all we need to do is call that one line. It builds the animation, associates it with whatever element we enter as the second option, and stores it in our holder variable. That way later on, all we need to do is call:

   1: this._OnMouseOverAnimationHolder.play();

To start the animation. Also, if you want to stop the animation, simply call .stop(). Now when actually using the object, all we need to do is add something like this:

   1: <Animations>
   2:     <OnMouseOut>
   3:         <Resize height="100" width="100" duration=".5"></Resize>
   4:     </OnMouseOut>
   5: </Animations>

And we have an item that resizes to 100x100 in .5 seconds. Not that bad, huh? Anyway, definitely check out the animation reference when building up your animations. Other than that, look at the code, leave feedback, and happy coding.



Comments