实例讲解Silverlight与AJAX的融合

定位背景

创建完Xaml层后，是时候使用一些CSS式样将背景放在现有的TextBox上了。通过把TextBox和Xaml控件放在一个相对位置容器中，你可以像例子3那样，将一个层叠在另一个上。一旦把背景层叠在TextBox上时，调整背景颜色增加透明度就很重要了。WebControls具有传统的CssClass属性 ，Xaml 同样有一个SilverlightBackColor属性。这个属性必须设置成透明，以揭示它下方的层。

动态插入

如果你想避免修改您现有的ASPX/HTML页面，你可以动态地向你的网页添加Xaml控制。这可以通过扩展TextBox控制，并在控制集合中添加Xaml控制来实现。因为一个TextBox一般没有子类，你还需要重载Render方法，并Xaml控制中显式调用RenderControl。你也可以在Render方法里添加DIV元素，这将会封装TextBox 和 Xaml元素。

你可以让ASP.NET自动将framework的TextBox控件替换成你自己编写的新派生的类，而不需要手工替换。通过使用web.config文件的TagMappings部分，可以实现上述功能。按照这一办法，你可以将你的所有Silverlight代码与项目现有的其它代码完全分开。这不仅使得维护方便，它还可以使您在网页中添加智能开关逻辑，如果某些条件得到满足，将只加载特定的SilverLight层。

例子3

＜div style="width:120px;height:20px;position:relative;"＞ 
＜asp:TextBox ID="TextBox1" runat="server" CssClass="txtBox"＞ 
＜/asp:TextBox＞ 
＜asp:Xaml XamlUrl="default.xaml" runat="server" 
CssClass="txtBoxWrapper" Width="120px" Height="20px" 
BackColor="transparent" SilverlightBackColor="transparent" 
Windowless="true" ClientType="Wrappers.TextBox"＞ 
＜Scripts＞ 
＜asp:ScriptReference Path="default.xaml.js" /＞ 
＜/Scripts＞ 
＜/asp:Xaml＞ 
＜/div＞

赋予背景以新的生命

当完成HTML/ASPX 和XAML全部完成后，JavaScript就是唯一剩下的一部分了。如果你看回过头来看看例子2，你将通会发现添加了一个Storyboard对象，到目前为止它还没有被激活。你可以通过使用JavaScript 添加mouseEnter事件对它进行激活，这是通过JavaScript addEventListener函数实现的。你可以像例子4中那样，使用findName函数得到Storyboard对象的指针。一旦你获得了Storyboard对象的指针 ，通过调用开始方法你就可以绘制动画。JavaScript文件会由Silverlight Host对象自动加载，只要你在Xaml控件的Scripts集合中指明脚本指针就行了（见例子3 ）。在JavaScript文件文件里定义表示客户端的对象，Xaml控件中的 ClientType属性必须被设定为对JavaScript 文件 的registerClass调用中制定的类型，具体使用参见例子4的最后一行。

例子4

Type.registerNamespace("Wrappers"); 
Wrappers.TextBox = function(element) { 
Wrappers.TextBox.initializeBase(this, [element]); 
}  
Wrappers.TextBox.prototype = { 
_events: null, 
xamlInitialize : function() { 
Wrappers.TextBox.callBaseMethod(this, "xamlInitialize"); 
// Hookup mouseEnter and mouseLeftButtonUp events 
var func = Function.createDelegate(this, this._animate); 
var rectangle=this.get_element().content.findName("rectangle"); 
// Use mouseEnter to begin our Storyboard animation 
this.addEventListener(rectangle,"mouseEnter", func);  
// Use mouseLeftButtonUp to transfer focus to our TextBox 
func=Function.createDelegate(this,this._transferFocus); 
this.addEventListener(rectangle,"mouseLeftButtonUp",func); 
}, 
_animate : function(sender, e) { 
sender.findName("animation").begin(); 
}, 
_transferFocus : function(sender, e){ 
$get("TextBox1").focus(); 
} 
} 
Wrappers.TextBox.registerClass("Wrappers.TextBox", Sys.Preview.UI.Xaml.Control);

在准备好JavaScript文件以及动画被激活之后，还有一项事情要做。因为背景是层叠在TextBox上面的，点击该TextBox 不会传递焦点。你需要给手工给TextBox添加一个mouseLeftButtonUp事件处理，从而当鼠标点击时，焦点可以传递给该TextBox。在例子4中，_transferFocus函数展示了该功能。

AJAX和Silverlight

用户体验是应用程序一个重要环节，这种观念最近迅速得到大家的认可。AJAX是一个有效的方法，它有助于打破网络应用程序性能和可用性方面的障碍。不过，虽然CSS 和JavaScrip给我们提供了式样和整体视觉吸引力，但是我们还是局限于使用浏览器得以核心要素。JavaScript的动画效果非常有限，并且随着它们变得越来越复杂，有时候它们会很不连贯，而且在许多情况下它们给浏览器代来的负担过重使得不能相应客户端浏览器。一个反应迟钝的浏览器是用户体验的最可怕的杀手。而要突破视觉障碍，就需要Silverlight这样的技术。虽然完全使用Silverlight创建一个项目是可能的，然而在很多的情况下，这是不是没有必要的，甚至是不可行的。相反，将Silverlight层叠再你现有的应用上，你可以将用户体验提高一个层次，并且不用花费宝贵的时间和金钱去重写代码。

查看本文来源