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 steve marx 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 woodingo 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.