| Comments

in my first attempt i used fake targets to create server controls to wire up the animation extender, then during execution, changed the target and executed the animation.  a little kluge i thought, but it worked -- and under the cover essentially that's what happens anyway on a server control.

well today, ajax wizard and poker maven pointed me to a post where it talked about using the client libraries directly.  basically when you add an animation extender control it tells the runtime what client-side script references it will need.  so the first step is for us to do this manually.  to do this, we can take advantage of the <Scripts> element of the ScriptManager control and enter the scripts we need for our animation:

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server">
   2:              <Scripts>
   3:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />
   4:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />
   5:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />
   6:              </Scripts>
   7:          </asp:ScriptManager>

after we have that, we can then use the client api's directly.  here's the example:

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
   2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3:  <html xmlns="http://www.w3.org/1999/xhtml">
   4:  <head runat="server">
   5:      <title>Untitled Page</title>
   6:      <script type="text/javascript">    
   7:      function fadeOut()
   8:      {
   9:          var el = $get("fadeBlock");
  10:          AjaxControlToolkit.Animation.OpacityAction.play(el, 0, 30, 0.4);
  11:      }
  12:      </script>
  13:  </head>
  14:  <body>
  15:      <form id="form1" runat="server">
  16:          <asp:ScriptManager ID="ScriptManager1" runat="server">
  17:              <Scripts>
  18:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />
  19:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />
  20:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />
  21:              </Scripts>
  22:          </asp:ScriptManager>
  23:          <div>
  24:              <div id="fadeBlock" style="width:250px; height:250px; background-color:Red">
  25:                  <input type="button" value="Fade Out" id="fadeButton" onclick="fadeOut()" />
  26:              </div>
  27:          </div>
  28:      </form>
  29:  </body>
  30:  </html>

as you can see the key elements are in the javascript function:

   1:  var el = $get("fadeBlock");
   2:  AjaxControlToolkit.Animation.OpacityAction.play(el, 0, 30, 0.4);

following the model of the client apis, we can directly call them without having a server-side wire-up of a fake control.  this will help with using microsoft ajax on non-microsoft platforms.  i do wish, however, that it could be simplified.  i suppose you could wrap the functions in a more simplified form into your own client side namespace.  let's say a company like, oh, i don't know wanted to do this, then they could essentially have the above line in something like:

Woodingo.Fade("fadeBlock", 0.4);

that would likely be much more appealing to developers.

Please enjoy some of these other recent posts...