使用 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 控件开发基础
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");
}
}
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.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());
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();
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
// 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;
angle += 180;
hourAnimation.from = angle.toString();
hourAnimation.to = (angle + 360).toString();
}
hourAnimation.to = (angle + 360).toString();
}
if (minuteAnimation) {
var minutes = now.getMinutes();
var angle = (minutes / 60) * 360;
angle += 180;
var minutes = now.getMinutes();
var angle = (minutes / 60) * 360;
angle += 180;
minuteAnimation.from = angle.toString();
minuteAnimation.to = (angle + 360).toString();
}
minuteAnimation.to = (angle + 360).toString();
}
if (secondAnimation) {
var seconds = now.getSeconds();
var angle = (seconds / 60) * 360;
angle += 180;
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);
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>
<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运行就可以看到漂亮的时钟了。
源码下载： [url]http://www.cnblogs.com/Files/shanyou/SilverlightFutures.zip[/url]
源码下载： [url]http://www.cnblogs.com/Files/shanyou/SilverlightFutures.zip[/url]
自由、创新、研究、探索……
 |
 |
 |
0人
|
了这篇文章 |
类别： ASP.NET AJAX┆阅读(
0)┆评论(
0) ┆ 返回博主首页┆ 返回博客首页
上一篇 Silverlight for Linux 下一篇 .NET with Ruby and ASP.NET vs. Rails [转载]
文章评论
发表评论
- 昵 称：
- 登录 快速注册
- 验证码：
-
点击图片可刷新验证码请点击后输入验证码博客过2级，无需填写验证码
- 内 容：
同时赞一个
每日博报 精彩不止一点
Copyright By 51CTO.COM 版权所有
