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 /> </Scripts> </asp:Xaml> </div> </form> </body>
按Ctrl + F5运行就可以看到漂亮的时钟了。 源码下载:https://files.cnblogs.com/shanyou/SilverlightFutures.zip
|
请发表评论