稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互

[索引页]
[×××]

稳扎稳打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://webabcd.blog.51cto.com/1787395/342779


示例
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
         */

         ///

         /// 用于演示脚本化的类
         ///

         // [ScriptableType]
         public class Scriptable
        {
                 ///

                 /// 当前服务端的时间
                 ///

                [ScriptableMember]
                 public DateTime CurrentTime { get; set; }

                 ///

                 /// Hello 方法
                 ///

                 /// "name">名字
                 ///
                [ScriptableMember]
                 public string Hello( string name)
                {
                         return string.Format( "Hello: {0}", name);
                }
                
                 ///

                 /// 开始事件
                 ///

                [ScriptableMember]
                 public event EventHandler Start;

                 ///

                 /// 触发开始事件所调用的方法
                 ///

                 /// "dt">
                 public void OnStart(DateTime dt)
                {
                         if (Start != null)
                        {
                                Start( this, new StartEventArgs()
                                {
                                        CurrentTime = dt
                                });
                        }
                }

        }

         ///

         /// 开始事件的 EventArgs
         ///

         public class StartEventArgs : EventArgs
        {
                 ///

                 /// 当前服务端的时间
                 ///

                [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);
                }
        }
}

 

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 />';
                }
         script>

head>
< body >
         < div style ="font-size: 12px" id ="result" >
         div>
         < div style ="font-size: 12px" onclick ="scriptableDemo();" >
                加载了 Silverlight20.WebPage.ScriptableDemo 后，单击这里以测试 Silverlight 对可脚本化的支持 div>
         < div id ="silverlightControlHost" >