乱弹琴 Silverlight 2.0 (10) Javascript调用Silverlight

摘要：前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴 Silverlight 2.0 系列文章。

本篇介绍Javascript调用Silverlight。

ScriptableTypeAttribute/ScriptableMemberAttribute 两个特性使Silverlight的类型或方法暴露给Javascript供Javascript调用。还需要HtmlPage的RegisterCreateableType/RegisterScriptableObject注册类型或方法。注册后的方法也可以使用HtmlPage的UnregisterCreateableType/UnregisterScriptableObject取消类型或方法的注册。

示例：(求斐波那契数列某一位次的斐波那契数)

HTML:
<div class="container">
    <div>
        <input type="button" class="btn" onclick="javascript:RegType();" value="注 册" />
        <input type="button" class="btn" onclick="javascript:UnRegType();" value="取 消" />
    </div>
    <div>
        位次：<input class="txt" id="txtNum" type="text" />
    </div>
    <div>
        结果：<input class="txt" id="txtResult" type="text" />
    </div>
    <div>
        <input class="btn" value="计 算" type="button" onclick="javascript:CreateType();" />
    </div>
    <div id="msg">
        未注册 'Fibonacci' 类型
    </div>
</div>

Javascript:
<script type="text/javascript">
var slID = "<%=Xaml1.ClientID %>";
    
function $(objID)
{
    return document.getElementById(objID);
}

function RegType()
{
    $(slID).content.RegManager.Reg();
    $("msg").innerText = "已注册 'Fibonacci' 类型";
}

function UnRegType()
{
    $(slID).content.RegManager.UnReg();
    $("msg").innerText = "未注册 'Fibonacci' 类型";
}

function CreateType()
{
    var f = $(slID).content.services.createObject("Fibonacci");
    var num = $("txtNum").value;
    
    $("txtResult").value = f.Fib(num);
}
</script>

document.getElementById("") 获得Silverlight的实例，content属性调用注册的类型的方法，调用的是当前Silverlight当前实例的方法。

XAML:
<UserControl x:Class="BrowserRelated.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="40" Loaded="UserControl_Loaded">
    <StackPanel Background="DarkGreen">
        <TextBlock x:Name="tbkStatus" Text="未注册 'Fibonacci' 类型"
                   Margin="30,10" Foreground="Yellow"></TextBlock>
    </StackPanel>
</UserControl>

C#:
public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
    }      

    [ScriptableMemberAttribute]
    public void Reg()
    {
        HtmlPage.RegisterCreateableType("Fibonacci", typeof(Fibonacci)
        tbkStatus.Text = "已注册 'Fibonacci' 类型";
    }

    [ScriptableMemberAttribute]
    public void UnReg()
    {
        HtmlPage.UnregisterCreateableType("Fibonacci");
        tbkStatus.Text = "未注册 'Fibonacci' 类型";
    }

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        HtmlPage.RegisterScriptableObject("RegManager", this);
    }
}

[ScriptableTypeAttribute]
public class Fibonacci
{
    [ScriptableMemberAttribute]
    public int Fib(int num)
    {
        int first = 1;
        int second = 1;
        int third = first + second;

        if (num == 1)
        {
            return first;
        }

        if(num==2)
        {
            return second;
        }          

        for (int i = 3; i < num; i++)
        {
            first = second;
            second = third;
            third = first + second;
        }
        
        return third;
    }
}

运行效果：









上图可看出，如果取消注册，将引发脚本错误。


类型和方法必须都是公开的，否则抛出异常。使用比较简单，可参考上面的例子理解。

结束语：

通过上一篇和这一篇的介绍，初步了解了Javascript与Silverlight的交互。接下来介绍其他内容。