http://flashview.ddvip.com/2008_12/Silverlight.rar
介绍
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 
;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Ink;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
using .Windows.Browser;
Silverlight20.WebPage
{
/**//*
* 脚本化类必须是 public
* 需要脚本化属性、思路方法、事件要标记为 [ScriptableMember]
* 如果类被标记为 [ScriptableType]则意味着其属性、思路方法、事件都是ScriptableMemberAttribute
*/
/**//// <summary>
/// 用于演示脚本化类
/// </summary>
// [ScriptableType]
public 
Scriptable
{
/**//// <summary>
/// 当前服务端时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime { get; 
; }
/**//// <summary>
/// Hello 思路方法
/// </summary>
/// <param name="name">名字</param>
/// <
s></s>
[ScriptableMember]
public 
Hello( name)
{
.Format("Hello: {0}", name);
}
/**//// <summary>
/// 开始事件
/// </summary>
[ScriptableMember]
public event EventHandler<StartEventArgs> Start;
/**//// <summary>
/// 触发开始事件所
思路方法
/// </summary>
/// <param name="dt"></param>
public void _disibledevent=> {
Start(this, 
StartEventArgs
{
CurrentTime = dt
});
}
}
}
/**//// <summary>
/// 开始事件 EventArgs
/// </summary>
public StartEventArgs : EventArgs
{
/**//// <summary>
/// 当前服务端时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime { get; ; }
}
}ScriptableDemo.xaml.cs
using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
using .Windows.Browser;
Silverlight20.WebPage
{
public partial ScriptableDemo : UserControl
{
.Threading.Timer _timer;
.Threading.SynchronizationContext _syncContext;
public ScriptableDemo
{
InitializeComponent;
this.Loaded 
RoutedEventHandler(ScriptableDemo_Loaded);
}
void ScriptableDemo_Loaded(object sender, RoutedEventArgs e)
{
// UI 线程
_syncContext = .Threading.SynchronizationContext.Current;
Scriptable s = Scriptable { CurrentTime = DateTime.Now };
// 将 Scriptable 对象注册到客户端中所对应客户端对象名为 scriptable
HtmlPage.RegisterScriptableObject("scriptable", s);
_timer = .Threading.Timer(MyTimerCallback, s, 0, 1000);
}
private void MyTimerCallback(object state)
{
Scriptable s = state as Scriptable;
// 每秒
次 UI 线程上指定思路方法
_syncContext.Post(OnStart, s);
}
void _disibledevent=>
// Scriptable 对象 _disibledevent=><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 />';
}
</script>
</head>
<body>
<div style="font-size: 12px" id="result">
</div>
<div style="font-size: 12px" _disibledevent=> 加载了 Silverlight20.WebPage.ScriptableDemo 后单击这里以测试 Silverlight 对可脚本化支持</div>
<div id="silverlightControlHost">
<object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="../ClientBin/Silverlight20.xap" />
<param name="EnableHtmlAccess" value="true" />
</object>
<
rame style='visibility: hidden; height: 0; width: 0; border: 0px'></rame>
</div>
</body>
</html>2、Silverlight和网页
DOM的间交互DOMDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.DOMDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Left" Margin="5">
<TextBox x:Name="txtMsg" />
</StackPanel>
</UserControl>DOMDemo.xaml.cs
using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
using .Windows.Browser;
Silverlight20.WebPage
{
public partial DOMDemo : UserControl
{
public DOMDemo
{
InitializeComponent;
Demo;
}
void Demo
{
// 获取当前页面 id 为 hello DOM并设置其样式
HtmlElement container = HtmlPage.Document.GetElementById("hello");
container.SetStyleAttribute("display", "block");
// 创建个 ul
HtmlElement ul = HtmlPage.Document.CreateElement("ul");
for (
i = 0; i < 10; i
)
{
// 创建个 li 并设置其显示内容
HtmlElement li = HtmlPage.Document.CreateElement("li");
li.SetAttribute("innerText", "hi: DOM");
// 将 li 添加到 ul 内
ul.AppendChild(li);
}
// 将 ul 添加到 id 为 hello DOM 内
container.AppendChild(ul);
// 创建个页面 button 并设置其 value 属性和 _disibledevent=> button.SetProperty("value", "hi: Silverlight");
button.AttachEvent("onclick", EventHandler<HtmlEventArgs>(HelloClick));
// 将 button 添加到 id 为 hello DOM 内
container.AppendChild(button);
}
void HelloClick(object sender, HtmlEventArgs e)
{
// 页面 button 单击后所需执行逻辑
txtMsg.Text "hi: Silverlightrn";
}
}
}DOMDemo.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>
</head>
<body>
<!--由 Silverlight 控制此 id 为 hello DOM-->
<div style="font-size: 12px; display: none" id="hello">
</div>
<div style="font-size: 12px">
加载 Silverlight20.WebPage.DOMDemo 后测试 Silverlight 和页面 DOM 交互</div>
<div id="silverlightControlHost">
<object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="../ClientBin/Silverlight20.xap" />
<param name="EnableHtmlAccess" value="true" />
</object>
<rame style='visibility: hidden; height: 0; width: 0; border: 0px'></rame>
</div>
</body>
</html>3、Silverlight和网页
JavaScript的间交互JSDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.JSDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Left" Margin="5">
<Button Margin="5" x:Name="invokeJS" Content="JavaScript" Click="invokeJS_Click" />
<TextBox Margin="5" x:Name="txtMsg" />
</StackPanel>
</UserControl>JSDemo.xaml.cs
using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
using .Windows.Browser;
Silverlight20.WebPage
{
public partial JSDemo : UserControl
{
public JSDemo
{
InitializeComponent;
this.Loaded RoutedEventHandler(JSDemo_Loaded);
}
private void invokeJS_Click(object sender, RoutedEventArgs e)
{
// 页面 JavaScript 思路方法
HtmlPage.Window.Invoke("silverlightInvokeJS", "webabcd");
// 执行任意 JavaScript 语句
HtmlPage.Window.Eval("silverlightInvokeJS('webabcd2')");
}
void JSDemo_Loaded(object sender, RoutedEventArgs e)
{
HtmlPage.Document.GetElementById("btnHello").SetStyleAttribute("display", "inline");
// 将此对象注册到客户端中所对应客户端对象名为 silverlightObject
HtmlPage.RegisterScriptableObject("silverlightObject", this);
}
/**//// <summary>
/// Hello 思路方法
/// 暴露给页面思路方法后在 Silverlight 中显示结果
/// </summary>
/// <param name="name">名字</param>
[ScriptableMember] // 脚本化此思路方法
public void hello( name)
{
txtMsg.Text .Format("Hello: {0}rn", name);
}
}
}JSDemo.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 silverlightInvokeJS(name) {
// Silverlight JavaScript 思路方法在页面上显示结果
document.getElementById('result').innerHTML "hello: " + name + "<br />";
}
function jsInvokeSilverlight(name) {
// JavaScript Silverlight 思路方法在 Silverlight 上显示结果
var obj = document.getElementById("xaml1").content.silverlightObject;
obj.hello(name);
}
</script>
</head>
<body>
<div style="font-size: 12px" id="result">
</div>
<div style="font-size: 12px">
加载 Silverlight20.WebPage.JSDemo 后测试 Silverlight 和页面 JavaScript 交互
<input type="button" id="btnHello" value="HelloSilverlight" _disibledevent=> style="display: none" />
</div>
<div id="silverlightControlHost">
<object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="../ClientBin/Silverlight20.xap" />
<param name="EnableHtmlAccess" value="true" />
</object>
<rame style='visibility: hidden; height: 0; width: 0; border: 0px'></rame>
</div>
</body>
</html>
最新评论