飘遥的Blog

C/C++/.NET
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2008-04-11 03:46  Zzx飘遥  阅读(787)  评论(0编辑  收藏

摘要:前言: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的交互。接下来介绍其他内容。