Fork me on GitHub

使用 Asp.net Future May 2007 开发Silverlight应用

Microsoft ASP.NET Futures May 2007，这是一个Future的好东西，包括了：ASP.NET AJAX Futures，Silverlight Controls for ASP.NET，Dynamic Data Controls for ASP.NET，ASP.NET Application Services，Dynamic Languages Support in ASP.NET。今天尝试了一下Silverlight Controls for ASP.NET中的Xaml Control，Xaml Control是一个Asp.net AJAX扩展控件，使用这个控件就可以不需要引用silverlight.js文件了，也不需要调用Sys.Silverlight.createObject或者Sys.Silverlight.createObjectEx的脚本了，就像Asp.net 服务端控件那样使用，开发很简单，Js脚本可以按照ASP.NET AJAX JavaScript库进行面向对象的编程。在下面内容之前建议你先看下面两篇文章：

更新Silverlight ctp到Silverlight beta 1.0
ASP.NET AJAX 控件开发基础

下面这个例子是对Silverlight1.0SDK 时钟例子的重构:

1、首先下载安装 Microsoft ASP.NET Futures May 2007

2、创建一个ASPNETFuturesEnabledWebApplication类型项目

3、将Clock例子的js，xaml和assets文件夹拷贝到项目中，删除js目录下的silverlight.js文件

4、重构Clock.js代码如下：

designerClock = function() {
this.hourAnimation = null;
this.minuteAnimation = null;
this.secondAnimation = null;
}
designerClock.prototype = {
initializeComponent: function(slhost) {
var host = slhost.content;
this.hourAnimation = host.findName("hourAnimation");
this.minuteAnimation = host.findName("minuteAnimation");
this.secondAnimation = host.findName("secondAnimation");
}
}

Type.registerNamespace("Custom");

Custom.Clock = function(element)
{
Custom.Clock.initializeBase(this, [element]);
this._designer = new designerClock();
this.control = null;

}

Custom.Clock.prototype = {
xamlInitialize : function() {
Custom.Clock.callBaseMethod(this, 'xamlInitialize');
// We could push this into a base class for the designer file
this._designer.initializeComponent(this.get_element());

var now = new Date();

var hourAnimation = this._designer.hourAnimation;
var minuteAnimation = this._designer.minuteAnimation;
var secondAnimation = this._designer.secondAnimation;
if (hourAnimation) {
var hours = now.getHours();

// We need to include minutes as well. Because each hour consists of
// 30 degrees, each additional minute adds half a degree to the angle
// of the hour hand

var angle = (hours / 12) * 360 + now.getMinutes()/2;
angle += 180;

hourAnimation.from = angle.toString();
hourAnimation.to = (angle + 360).toString();
}

if (minuteAnimation) {
var minutes = now.getMinutes();
var angle = (minutes / 60) * 360;
angle += 180;

minuteAnimation.from = angle.toString();
minuteAnimation.to = (angle + 360).toString();
}

if (secondAnimation) {
var seconds = now.getSeconds();
var angle = (seconds / 60) * 360;
angle += 180;

secondAnimation.from = angle.toString();
secondAnimation.to = (angle + 360).toString();
}
},
dispose: function() {
if (this.control) {
this.control = null;
}
Custom.Clock.callBaseMethod(this, "dispose");
}
}
Custom.Clock.registerClass('Custom.Clock', Sys.Preview.UI.Xaml.Control);

在Default.aspx页面中加入一个Xaml Control，内容如下：

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Name="PreviewScript.js" Assembly="Microsoft.Web.Preview" />
</Scripts>
</asp:ScriptManager>
<div>
<asp:Xaml ID="Xaml1" runat="server" XamlUrl="~/xaml/Clock.xaml" Width="350" Height="350" ClientType="Custom.Clock">
<Scripts>
<asp:ScriptReference Path="js/Clock.js" />
</Scripts>
</asp:Xaml>
</div>
</form>
</body>

按Ctrl + F5运行就可以看到漂亮的时钟了。
源码下载：https://files.cnblogs.com/shanyou/SilverlightFutures.zip

posted @ 2007-05-06 17:42  张善友  阅读(5119)  评论(7)  编辑  收藏  举报