Using the AnimationExtender Component in Ajax Control Toolkit (ACT) - Creating an animated web page step-by-step
(Page 3 of 5 )
The ASP.NET 2.0 AJAX extensions can be downloaded from the Microsoft site. If you installed ATLAS make sure you remove it before running the executable to install the ASP.NET 2.0 AJAX extensions. The message when you try to install the extensions will only say remove the earlier version; it does not say ATLAS explicitly. In VS Studio 2005, open the AjaxControlToolKit.sln file; there you can create your web page. When you add a web page make sure the page and Register Assembly declaration are as shown in the tutorial examples.
OnMouseOver and OnMouseOut events of controls
These are well known events that need no explanation. Create a web page and add ScriptManager either by double clicking it in the AJAX Extensions group in the Toolbox, or dragging and dropping it on the design pane of the web page, here called MouseInOut.aspx. When you add the ScriptManager to the design, a declarative tag, <asp:ScriptManager id="ScriptManager1"/>, will be added to the <form/>.
Next, double click an AnimationExtender under the AjaxControlToolkit Components group in the Toolbox. This adds the two controls to the design pane as shown.
At this point your Source pane should be displaying the following code.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="MouseInOut.aspx.cs"
Inherits="Animation_MouseInOut" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:AnimationExtender ID="AnimationExtender1"
runat="server">
</cc1:AnimationExtender>
</form>
</body>
</html>
For both the Register Assembly and the AnimationExtender replace "ccl" with "ajaxToolkit." This is necessary because we are referencing this assembly for this site. Once you do this, the other components you will add will have the correct reference.
Next drag and drop a Panel control from the Standard Group in the toolbox after the closing tag of the AnimationExtender as shown. At this point your source code should appear as follows:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="MouseInOut.aspx.cs"
Inherits="Animation_MouseInOut" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:AnimationExtender ID="AnimationExtender1"
runat="server">
</ajaxToolkit:AnimationExtender>
<asp:Panel ID="Panel1" runat="server"
Height="50px" Width="125px"
BackColor="AliceBlue" BorderStyle="Groove">
"My first animation with ACT"
</asp:Panel>
</form>
</body>
</html>
The design view should show the following in the design pane. Note that the Panel has an Id property set to Panel1. The target of the animation will be this control, known by its Id property.
Now inside the AnimationExtender tag, if you place your cursor and move away you see a drop-down as shown.
Here you need to pick up the TargetControlID and set its value equal to Panel1 as shown. Whatever action is related to the control whose Id is set equal to "Panel1" will be animated. All attributes and values in the declarations should be under double quotes. While the intellisense provides the item list, you need to add the quotes. This is something the developers of ACT should have taken care of in the design.
For the sake of brevity, only the tag contents inside the <form/> tags are shown as there is no change to the rest of the code. A few other properties are also added to the panel as shown.
<form id="form1" runat="server">
<!--ScriptManager must be placed before others-->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:AnimationExtender ID="AnimationExtender1"
runat="server" TargetControlID="Panel1" >
<!-- Animation related items go in here-->
</ajaxToolkit:AnimationExtender>
<!-- any of the appropriate server controls-->
<asp:Panel ID="Panel1" runat="server"
Height="50px" Width="125px"
BackColor="AliceBlue" BorderStyle="Groove">
"My first animation with ACT"
</asp:Panel>
</form>
Next: Adding the animation tags >>
More JavaScript Articles
More By Jayaram Krishnaswamy
