现在的位置: 首页 > 综合 > 正文

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

2012年07月25日 ⁄ 综合 ⁄ 共 5149字 ⁄ 字号 评论关闭
[索引页]
[源码下载]

稳扎稳打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 getset; }

        
/// <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(
thisnew StartEventArgs()
                
{
                    CurrentTime 
= dt
                }
);
            }

        }


    }


    
/// <summary>
    
/// 开始事件的 EventArgs
    
/// </summary>

    public class StartEventArgs : EventArgs
    
{
        
/// <summary>
        
/// 当前服务端的时间
        
/// </summary>

        [ScriptableMember]
        
public DateTime CurrentTime getset; }
    }

}

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, 01000);
        }


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

    
</

抱歉!评论已关闭.