หลังจากที่นั่งเล่นกับ Animation Framework ไปนิดนึงใน ASP.NET แล้วก็มารู้เอาทีหลังว่ามันก็ไม่ได้ยากเท่าไหร่
คราวที่แล้วใช้ script.aculo.us ก็ทำงานได้แล้วก็เลยลองเปลี่ยนมาใช้ ASP.NET Animation Framework ใน AJAX Control Toolkit ดู ใช้โค้ดจากหน้านี้มาดัดแปลงหน่อยโดยการเพิ่มไฮไลท์เข้าไปตอนอัพเดทข้อมูลแล้ว
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="animation_act.aspx.cs" Inherits="animation_act" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Animation ACT</title>
<style type="text/css">
#result{
width:200px;
height:200px;
background:#fefeff;
border-top: #b9b95c 3px solid;
background-color: #ffffcc;
padding: 5px;
margin-top:10px;
}
</style>
<script language="javascript" type="text/javascript">
// <!CDATA[
var img;
function btnHello_onclick() {
img = new Sys.UI.Control($get("loadingImg"));
var name = $get("txtName").value;
var wRequest = new Sys.Net.WebRequest();
wRequest.set_url("Hello.ashx?Name=" + $get("txtName").value);
wRequest.set_httpVerb("GET");
wRequest.add_completed(OnWebRequestCompleted);
wRequest.invoke();
img.set_visible(true);
}
function OnWebRequestCompleted(executor, args){
var target = $get('result');
target.innerHTML = executor.get_responseData();
var par = new AjaxControlToolkit.Animation.ParallelAnimation();
par.add(new AjaxControlToolkit.Animation.ColorAnimation(target, 0.5, 24, 'style', 'backgroundColor', '#FFFF00', '#ffffcc'));
par.play();
img.set_visible(false);
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />
<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />
<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />
</Scripts>
</asp:ScriptManager>
<div>
<input id="txtName" type="text" />
<input id="btnHello" type="button" value="Say hi" onclick="return btnHello_onclick()" /><img
src="24-1.gif" id="loadingImg" style="display: none" />
</div>
<div id="result" runat="server" style="display:block;">
</div>
</form>
</body>
</html>
ตรงส่วนที่ทำตัวหนาไว้คือส่วนที่เพิ่มมา เพื่อใช้ Animation Framework สังเกตว่าต้อง reference ไปที่ javascript ของ Ajax Control Toolkit ด้วย วิธีใช้ก็แกะๆเอาจาก Reference จริงๆตรงส่วนที่เป็น JavaScript จะใช้ ColorAnimation อย่างเดียวก็ได้ ไม่ต้องใช้ PararellAnimation
ถ้าให้เทียบกับ script.aculo.us แล้ว ก็ยังห่างชั้นอยู่มากเลยทีเดียว จำนวน effects น้อย ต้องนั่งทำ effect เอง คู่มือกับวิธีใช้ก็ไม่ค่อยมี จริงๆแล้ว Animation Framework อันนี้เหมือนจะให้เป็นพื้นสำหรับสร้าง Ajax Control ซะมากกว่าจะหยิบมาใช้แบบเป็นครั้งคราว กรณีหลังนั้นให้หันไปใช้ Declarative Animation น่าจะเหมาะกว่ามั้ง
