[索引页]
[源码下载]
[源码下载]
稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互
作者:webabcd
介绍
Silverlight 2.0 使用c#开发可脚本化的代码,Silverlight与宿主页面的DOM之间的交互,Silverlight与宿主页面的JavaScript之间的交互
ScriptableMemberAttribute - 需要脚本化的属性、方法、事件要标记为此
HtmlPage.RegisterScriptableObject - 将可脚本化对象注册到客户端
HtmlElement - 表示网页的文档对象模型 (DOM) 中的 HTML 元素
HtmlWindow - 提供 JavaScript 的 window 对象的 Silverlight 端的托管表示形式
在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html
示例
1、Silverlight对可脚本化的支持
Scriptable.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
{
/*
* 脚本化的类必须是 public 的
* 需要脚本化的属性、方法、事件要标记为 [ScriptableMember]
* 如果类被标记为 [ScriptableType],则意味着其属性、方法、事件都是ScriptableMemberAttribute
*/
/// <summary>
/// 用于演示脚本化的类
/// </summary>
// [ScriptableType]
public class Scriptable
{
/// <summary>
/// 当前服务端的时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime { get; set; }
/// <summary>
/// Hello 方法
/// </summary>
/// <param name="name">名字</param>
/// <returns></returns>
[ScriptableMember]
public string Hello(string name)
{
return string.Format("Hello: {0}", name);
}
/// <summary>
/// 开始事件
/// </summary>
[ScriptableMember]
public event EventHandler<StartEventArgs> Start;
/// <summary>
/// 触发开始事件所调用的方法
/// </summary>
/// <param name="dt"></param>
public void OnStart(DateTime dt)
{
if (Start != null)
{
Start(this, new StartEventArgs()
{
CurrentTime = dt
});
}
}
}
/// <summary>
/// 开始事件的 EventArgs
/// </summary>
public class StartEventArgs : EventArgs
{
/// <summary>
/// 当前服务端的时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime { get; set; }
}
}
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
{
/*
* 脚本化的类必须是 public 的
* 需要脚本化的属性、方法、事件要标记为 [ScriptableMember]
* 如果类被标记为 [ScriptableType],则意味着其属性、方法、事件都是ScriptableMemberAttribute
*/
/// <summary>
/// 用于演示脚本化的类
/// </summary>
// [ScriptableType]
public class Scriptable
{
/// <summary>
/// 当前服务端的时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime { get; set; }
/// <summary>
/// Hello 方法
/// </summary>
/// <param name="name">名字</param>
/// <returns></returns>
[ScriptableMember]
public string Hello(string name)
{
return string.Format("Hello: {0}", name);
}
/// <summary>
/// 开始事件
/// </summary>
[ScriptableMember]
public event EventHandler<StartEventArgs> Start;
/// <summary>
/// 触发开始事件所调用的方法
/// </summary>
/// <param name="dt"></param>
public void OnStart(DateTime dt)
{
if (Start != null)
{
Start(this, new StartEventArgs()
{
CurrentTime = dt
});
}
}
}
/// <summary>
/// 开始事件的 EventArgs
/// </summary>
public class StartEventArgs : EventArgs
{
/// <summary>
/// 当前服务端的时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime { get; set; }
}
}
ScriptableDemo.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
{
public partial class ScriptableDemo : UserControl
{
System.Threading.Timer _timer;
System.Threading.SynchronizationContext _syncContext;
public ScriptableDemo()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(ScriptableDemo_Loaded);
}
void ScriptableDemo_Loaded(object sender, RoutedEventArgs e)
{
// UI 线程
_syncContext = System.Threading.SynchronizationContext.Current;
Scriptable s = new Scriptable() { CurrentTime = DateTime.Now };
// 将 Scriptable 对象注册到客户端中,所对应的客户端的对象名为 scriptable
HtmlPage.RegisterScriptableObject("scriptable", s);
_timer = new System.Threading.Timer(MyTimerCallback, s, 0, 1000);
}
private void MyTimerCallback(object state)
{
Scriptable s = state as Scriptable;
// 每秒调用一次 UI 线程上的指定的方法
_syncContext.Post(OnStart, s);
}
void OnStart(object state)
{
Scriptable s = state as Scriptable;
// 调用 Scriptable 对象的 OnStart() 方法,以触发 Start 事件
s.OnStart(DateTime.Now);
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
{
public partial class ScriptableDemo : UserControl
{
System.Threading.Timer _timer;
System.Threading.SynchronizationContext _syncContext;
public ScriptableDemo()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(ScriptableDemo_Loaded);
}
void ScriptableDemo_Loaded(object sender, RoutedEventArgs e)
{
// UI 线程
_syncContext = System.Threading.SynchronizationContext.Current;
Scriptable s = new Scriptable() { CurrentTime = DateTime.Now };
// 将 Scriptable 对象注册到客户端中,所对应的客户端的对象名为 scriptable
HtmlPage.RegisterScriptableObject("scriptable", s);
_timer = new System.Threading.Timer(MyTimerCallback, s, 0, 1000);
}
private void MyTimerCallback(object state)
{
Scriptable s = state as Scriptable;
// 每秒调用一次 UI 线程上的指定的方法
_syncContext.Post(OnStart, s);
}
void OnStart(object state)
{
Scriptable s = state as Scriptable;
// 调用 Scriptable 对象的 OnStart() 方法,以触发 Start 事件
s.OnStart(DateTime.Now);
}
}
}
ScriptableDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight20</title>
<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
}
body
{
padding: 0;
margin: 0;
}
#silverlightControlHost
{
height: 100%;
}
</style>
<script type="text/javascript" src="../Silverlight.js"></script>
<script type="text/javascript">
function scriptableDemo() {
// scriptable - Silverlight 注册到客户端的对象
var obj = document.getElementById("xaml1").content.scriptable;
var output = document.getElementById('result');
output.innerHTML += obj.CurrentTime
output.innerHTML += '<br />';
output.innerHTML += obj.Hello("webabcd");
output.innerHTML += '<br />';
// obj.Start = responseStart;
// addEventListener - 添加事件监听器
// removeEventListener - 移除事件监听器
obj.addEventListener("Start", responseStart);
}
function responseStart(sender, args) {
document.getElementById('result').innerHTML += args.CurrentTime;
document.getElementById('result').innerHTML += '<br />';
}
</
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight20</title>
<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
}
body
{
padding: 0;
margin: 0;
}
#silverlightControlHost
{
height: 100%;
}
</style>
<script type="text/javascript" src="../Silverlight.js"></script>
<script type="text/javascript">
function scriptableDemo() {
// scriptable - Silverlight 注册到客户端的对象
var obj = document.getElementById("xaml1").content.scriptable;
var output = document.getElementById('result');
output.innerHTML += obj.CurrentTime
output.innerHTML += '<br />';
output.innerHTML += obj.Hello("webabcd");
output.innerHTML += '<br />';
// obj.Start = responseStart;
// addEventListener - 添加事件监听器
// removeEventListener - 移除事件监听器
obj.addEventListener("Start", responseStart);
}
function responseStart(sender, args) {
document.getElementById('result').innerHTML += args.CurrentTime;
document.getElementById('result').innerHTML += '<br />';
}
</