GVKun编程网logo

SilverLight创建JS,调用JS（silverlight开发工具包）

21

对于SilverLight创建JS,调用JS感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍silverlight开发工具包，并为您提供关于Javascript创建SilverlightPlug

对于SilverLight创建JS,调用JS感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍silverlight开发工具包，并为您提供关于Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式_javascript技巧、Silverlight 2学习教程（六）： Silverlight托管代码调用Javascript中的JSON对象、Silverlight 5 beta新特性探索系列:1.安装Silverlight 5 beta环境以及OOB模式下Silverlight 5 多窗口支持、silverlight 和js互相调用的有用信息。

本文目录一览：

SilverLight创建JS,调用JS（silverlight开发工具包）

SilverLight创建JS,调用JS（silverlight开发工具包）

1.Invoke和InvokeSelf

 

 

 

2.CreateInstance

 

 

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式_javascript技巧

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式_javascript技巧

默认情况下，生成的页面代码可能与下面的代码类似：

复制代码 代码如下:




IRERTranscript














Get Microsoft Silverlight





　　我们可以给object对象传递不同的参数，如xap包的加载地址，onLoad或onError事件句柄，背景色，最小版本号支持等等，完整的参数信息读者可以参考Silverlight 3中param参数列表汇总。object对象中一般会包含一段标记，是用来显示当客户端浏览器未安装Silverlight插件时要显示的内容的，我们可以自定义其中的内容，如：
复制代码 代码如下:







Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式_javascript技巧

　　当客户端浏览器未安装Silverlight插件时，程序会在相应的区域显示一张带有热区的图片，热区指向的位置是Microsoft提供的Silverlight安装地址。理论上，你可以指定任何的自定义代码来显示nonSilverlight的效果，但是Silverlight默认没有提供低版本Silverlight情况下要显示的效果，也就是lowSilverlight的情况。
Silverlight可以自动实现向前兼容，也就是在低版本下编译的Silverlight包可以在高版本下运行，相反，在高版本下编译的Silverlight包不能再低版本下运行，此时Silverlight插件会显示一张默认的图片用来告知用户升级插件，并弹出一个提示框，如下图：

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式_javascript技巧

 

Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式_javascript技巧

 

　　个人觉得这种用户体验并非很好，试想，如果当前页面上有多个Silverlight插件，岂不是要弹出多个提示框吗？那么如何来解决这个问题呢？事实上，我们除了直接在页面上添加object标记来呈现Silverlight外，还可以通过javascript脚本来动态添加Silverlight。Silverlight.js脚本为我们提供了一系列可用的方法，详细内容大家可以参考下msdn http://msdn.microsoft.com/zh-cn/library/cc838126(v=VS.95).aspx#isinstalled

　　以及如何通过脚本在页面上添加Silverlight，http://msdn.microsoft.com/zh-cn/library/cc265155(v=VS.95).aspx

　　msdn上给出了非常详细的例子来告诉我们如何使用这些脚本方法，有一点需要注意，使用Silverlight.js文件时一定要与当前Silverlight版本相一致，否则可能会有脚本错误，对应的Silverlight.js文件可以在微软的站点上下载，你会发现其实有很多个可用的版本，其中还包括支持调试的版本哦。

　　createObject方法参数在使用的时候有几个问题需要注意下：

　　1. 参数按顺序指定，如果有不需要传递的参数可用null代替。

　　2. parent element参数必须指定，也就是object标记的父元素，可直接将元素的id当做对象传入，但是在Firefox中不支持，此时可以使用document.getElementById(''elementId'')语句代替该参数即可。

　　3. param列表通过数组传递，参数名称与在object标记中使用的名称保持一致即可。

　　4. 事件列表如果没有对应的页面脚本则传null值，否则会报脚本错误。

　　5. 最后一个参数context如果不需要可以省去，不用传null或空值。

　　你应该注意到了，在使用createObject方法时我们可以顺便给Silverlight指定nonSilverlight效果，这个是通过param列表中的altHtml参数来指定的，实施上，我们在页面上直接使用object标记呈现Silverlight时也可以使用alt属性来指定nonSilverlight效果，这个与在object标记中直接插入html代码的效果相同。
通过使用createObject方法，我们完全可以自定义lowSilverlight效果了，下面是一个例子：

复制代码 代码如下:






　　使用Silverlight.isInstalled()方法可以判断客户端浏览器是否已经安装了指定版本的Silverlight插件，如果已经安装了，则使用Silverlight.createObject方法创建Silverlight对象，否则输出自定义的内容。

这里还有一篇文章个人觉得很有用，给大家分享下吧！

http://www.itstrike.cn/Question/Use-JavaScript-to-create-Silverlight-Object-createObject

Silverlight 2学习教程（六）： Silverlight托管代码调用Javascript中的JSON对象

Silverlight 2学习教程（六）： Silverlight托管代码调用Javascript中的JSON对象

 

在上一篇Blog文章中，讲述了JavaScript与Silverlight托管代码相互调用的一些方法。实际上，HtmlWindow的GetProperty方法和Invoke/InvokeSelf方法的返回值是Object类型的，代表 DOM对象或者JavaScript对象（HtmlDocument、HtmlElement、HtmlObject、ScriptObject）的返回值自动作为最接近的类型进行返回，但是，程序开发人员仍然需要明确地将该对象转换成相应的类型。所有的数字，由于跨浏览器的原因，都作为Double类型返回，如果需要Int32类型，则执行Convert.ToInt32()方法即可。

在现代的Web应用中，JSON的使用越来越频繁。Silverlight 2中要调用JavaScript中的JSON对象，首先在托管代码中声明一个类，类的属性与JSON对象的属性一致（不必完全一致），然后在托管代码中将ScriptObject对象转换成声明的这个类型即可。

下面是一个完整的例子：

Page.xaml：

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="600" Height="480">
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Canvas.Top="20">
            <TextBlock Canvas.Top="10" Canvas.Left="20">请输入您的姓名： </TextBlock>
            <TextBox x:Name="UserInput" Width="200" Height="30" Canvas.Top="40" Canvas.Left="20"></TextBox>
            <TextBlock x:Name="Msg" Canvas.Top="90" Canvas.Left="20" Foreground="Navy" FontSize="18" Width="500"></TextBlock>
            <Button Click="Button_Click" Content="单击我" FontSize="24" Width="160" Height="60" x:Name="BtnTest" Canvas.Top="160" Canvas.Left="20"></Button>
            <Button Click="JSONButton_Click" Content="JavaScript JSON 对象测试" FontSize="24" Width="300" Height="50" Canvas.Top="240" Canvas.Left="20"></Button>
            <TextBlock x:Name="Msg2" Canvas.Top="300" Canvas.Left="20" Foreground="Navy" FontSize="18" Width="500"></TextBlock>
            <TextBlock x:Name="Msg3" Canvas.Top="320" Canvas.Left="20" Foreground="Navy" FontSize="18" Width="500"></TextBlock>
        </Canvas>
    </Grid>
</UserControl>

Page.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
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;
using System.Runtime.Serialization.Json;

namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string UserInputContent = this.UserInput.Text;
            if (UserInputContent.Equals(String.Empty))
            {
                UserInputContent = "Hello Silverlight World!";
            }
            else
            {
                UserInputContent = "你好，" + UserInputContent;
            }
            HtmlWindow win = HtmlPage.Window;
            this.Msg.Text = UserInputContent;
            win.Alert("Silverlight 里面弹出的对话框。 " + UserInputContent);
            //执行页面中的js函数：
            win.Eval("getArraytest()");
            Object[] args = { "将此参数传递给 js 函数" };
            win.Invoke("getArrayTest", args);
         
            //如果页面中的值
            HtmlDocument doc = HtmlPage.Document;
            doc.GetElementById("UserName").SetAttribute("value", this.UserInput.Text);          
        }
        
        [ScriptableMember()]
        public string InterInvole()
        {
            string username = HtmlPage.Document.GetElementById("UserName").GetAttribute("value");
            this.UserInput.Text = username;
            this.Msg.Text = "您输入了：" + username; 
            return "你从js脚本中调用了 Silverlight 里面的方法。";
        }

        private void JSONButton_Click(object sender, RoutedEventArgs e)
        {
            ScriptObject so = HtmlPage.Window.Invoke("ReturnObject", null) as ScriptObject;
            Staple s = so.ConvertTo<Staple>();
            this.Msg2.Text = "大家好，我在  JavaScript JSON 对象中的名称是：" +  s.UserName;            
        }

        //接受Html页面传递的 JSON 字符串
        [ScriptableMember()]
        public void ReveiveJSON(string jsonString)
        {
            //注意引用：System.Runtime.Serialization.Json

            DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(Staple));
            System.IO.MemoryStream ms = new System.IO.MemoryStream(System.Text.Encoding.Unicode.GetBytes(jsonString));
            Staple staple = new Staple();
            staple = (Staple)json.Readobject(ms);
            Msg3.Text = "UserId = " + staple.UserId.ToString() + " ， UserName = " + staple.UserName;
        }
    }

    public class Staple
    {
        public string UserName { set; get; }
        public Double UserId { set; get; }       
    }
}

App.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
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 SilverlightApplication1
{
    public partial class App : Application
    {

        public App()
        {
            this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            // Load the main control           
            Page p = new Page();
            HtmlPage.RegisterScriptableObject("SilverlightApplicationExample", p);

            // 请注意这里的定义方法，如果这里的p写成 new Page()，则Javascript基本不能给 UserInput 赋值！
            this.RootVisual = p;
        }

        private void Application_Exit(object sender, EventArgs e)
        {

        }
        private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
        {

        }
    }
}

SilverlightApplication1TestPage.aspx：

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
<!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 runat="server">
 <title>Silverlight 2托管代码与Javascript交互的例子</title>
 <script type="text/javascript">
 //<!{CDATA[
 //定义全局变量：
 var testvar = "孟宪会";
 
 //定义全局函数：
 function getArraytest()
 {
  if(arguments.length > 0)
  {
   alert("js 对话框：您传递了参数。" + arguments[0]);
   return  arguments[0];
  }
  else
  {
   alert("js 对话框：无参数调用。");
   return "js 函数返回值";
  }
 } 
 
function SetUserName()
{
  alert(SilverlightPlugin.Content.SilverlightApplicationExample.InterInvole());
}


 var Staple = {
               UserId:100,
               UserName:'孟宪会',
               SayHello:function(){alert(this.UserName)}
               };
               
function ReturnObject()
{
  return Staple;
}

function SendJSONToSilverlight()
{
  SilverlightPlugin.Content.SilverlightApplicationExample.ReveiveJSON(JSON.stringify(Staple));
}

//定义Silverlight插件对象
var SilverlightPlugin = null;;
function pluginLoaded(sender)
{
   SilverlightPlugin = sender.get_element();  
}
 //]]>
 </script>
 <script src="json2.js" type="text/javascript"></script>
 <!-- http://www.JSON.org/json2.js -->
</head>
<body style="height: 100%; margin: 0;">
 <form id="form1" runat="server">
 <div style="border: 2px solid #EEE; margin: 20px;padding:20px">
  请输入你的名字：<input id="UserName" type="text" value="" />
  <input type="button" onclick="SetUserName()" value="将名字传递到 Silverlight" /> <input type="button" onclick="SendJSONToSilverlight()" value="将JSON传递到 Silverlight" /> 
 </div>
 <br />
 <div style="border: 2px solid #EEE;margin: 20px;">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <asp:Silverlight ID="Xaml1" runat="server" OnPluginLoaded="pluginLoaded" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="600px" Height="480px" />
 </div>
 </form>
</body>
</html>

单击“JavaScript JSON 对象测试”按钮，运行结果如下：

Silverlight 5 beta新特性探索系列:1.安装Silverlight 5 beta环境以及OOB模式下Silverlight 5 多窗口支持

Silverlight 5 beta新特性探索系列:1.安装Silverlight 5 beta环境以及OOB模式下Silverlight 5 多窗口支持

        Silverlight 5 beta版本总算于昨日放出，怀着激动的心情今天将开发环境更新为Silverlight 5 beta版本，并且接触Silverlight 5 beta的第一个新特性：OOB模式下的多窗口的弹出显示。

        现在我们开始Silverlight 5 Beta版本的安装，首先需要为VS2010打一个VS2010 SP1补丁，然后我们再下载Silverlight 5 Beta Tools for Visual Studio SP1，一步一步安装完毕，最后我们下载Silverlight 5 Features Document 新特性的文档。至此我们即可踏上Silverlight 5开发的征程。

        对于Silverlight 5 beta版本下面的新窗口的支持是基于OOB模式下的，所以我们首先新建一个Silverlight 5的应用程序，然后右键项目属性-->"允许浏览器外运行应用程序"勾中-->点击"浏览器外设置"-->"在浏览器外运行时需要提升 的信任"勾上。如下图所示：

        然后我们在后台代码中键入以下代码即可弹出一个窗口，点击窗口中的按钮我们可以继续弹出窗口，实现了无限制的弹出窗口。当然所有弹出的子窗口都是依赖于父 窗口而存在的。(Tip:在Silverlight 4.0中的Window类修改的大小都是自身窗口的大小，并不能弹出窗口)

 

  
  
    

  1. public partial class MainPage : UserControl 
    2. 
   
   
  2.   { 
    3. 
   
   
  3.       public MainPage() 
    4. 
   
   
  4.       { 
    5. 
   
   
  5.           InitializeComponent(); 
    6. 
   
   
  6.           PopWindow(400.0, 20.0, "第"+Flag+"个实例窗口"); 
    7. 
   
   
  7.       } 
    8. 
   
   
  8.       public static int Flag = 0; 
    9. 
   
   
  9.       private void PopWindow(double left,double top,string title ) 
    10. 
   
   
  10.       { 
    11. 
   
   
  11.           //设置Window的通用属性 
    12. 
   
   
  12.           Window testwindow = new Window(); 
    13. 
   
   
  13.           testwindow.Height = 400; 
    14. 
   
   
  14.           testwindow.Width = 500; 
    15. 
   
   
  15.           testwindow.Top = top; 
    16. 
   
   
  16.           testwindow.Left = left; 
    17. 
   
   
  17.           testwindow.Title = title; 
    18. 
   
   
  18.           testwindow.Visibility = Visibility.Visible; 
    19. 
   
   
  19.  
    20. 
   
   
  20.           //添加一个内部有按钮的Canvas，设置Canvas的背景色为白色 
    21. 
   
   
  21.           Button btn=new Button(); 
    22. 
   
   
  22.           btn.Width=80.0; 
    23. 
   
   
  23.           btn.Height=30.0; 
    24. 
   
   
  24.           btn.Content="点  击"; 
    25. 
   
   
  25.           btn.Margin = new Thickness(5, top + Flag * 10, 0, 0); 
    26. 
   
   
  26.           btn.Click += new RoutedEventHandler(btn_Click); 
    27. 
   
   
  27.           Canvas canvas = new Canvas(); 
    28. 
   
   
  28.           canvas.Children.Add(btn); 
    29. 
   
   
  29.           canvas.Background = new SolidColorBrush(Colors.White); 
    30. 
   
   
  30.           testwindow.Content = canvas; 
    31. 
   
   
  31.  
    32. 
   
   
  32.           //窗口默认值是WindowState.normal正常情况 
    33. 
   
   
  33.           testwindow.WindowState = WindowState.normal; 
    34. 
   
   
  34.               //WindowState.Maximized; 窗口最大化 
    35. 
   
   
  35.               //WindowState.Minimized; 窗口最小化 
    36. 
   
   
  36.               //WindowState.normal;    普通窗口 
    37. 
   
   
  37.  
    38. 
   
   
  38.       void btn_Click(object sender, RoutedEventArgs e) 
    39. 
   
   
  39.       { 
    40. 
   
   
  40.           PopWindow(400.0, "第"+Flag+"个实例窗口"); 
    41. 
   
   
  41.       } 
    42. 
   
   
  42.   } 
    43.

        本实例采用VS2010 +Silverlight 5 beta制作，如需源码请点击 SL5First.zip 下载。

silverlight 和js互相调用

silverlight 和js互相调用

1.sl调用js

比如我们在页面中定义一个js函数:

<script type="text/javascript">
        function fnTest(msg) {
            alert('fnTest：' + msg);
        }
    </script>

sl中可以有二种调用方式:

HtmlPage.Window.CreateInstance("fnTest","CreateInstance");

或者

HtmlPage.Window.Invoke("fnTest","Invoke");

运行的效果完全相同，但是建议用Invoke方法，原因是:

CreateInstance是HtmlWindow中定义的方法，而HtmlWindow继承自HtmlObject，再向上找HtmlObject又继承ScriptObject，最终调用的还是ScriptObject中的Invoke方法，所以用CreateInstance绕来绕去，最终还是绕到了Invoke上，还不如一步到位直接Invoke更高效。


2.sl修改dom元素属性

比如页面中有一个文本框: <input type="text" id="txtTarget" name="txtTarget" />

sl中同样也有二种方法调用:

HtmlPage.Document.GetElementById("txtTarget").SetAttribute("value","Silverlight");
HtmlPage.Document.GetElementById("txtTarget").SetProperty("value","Silverlight");

功能完全相同，同样建议用SetProperty方法，理由同上

3.sl为dom元素附加事件

HtmlPage.Document.GetElementById("txtTarget").AttachEvent("focus",new EventHandler(AttachJsMethod));

private void AttachJsMethod(object o,EventArgs e)
{
   HtmlPage.Window.Invoke("fnTest","silverlight");
}


以上代码将为txtGarget文本框附加onfocus事件处理函数:fnTest

 

4.js调用sl中的方法，属性

sl部分的关键处理是：要在暴露出来的方法/属性前加上[ScriptableMember()]，参考下面的代码：

[ScriptableMember()]
public string Hello(string Msg)
{
    return "Hello," + Msg;
}


[ScriptableMember()]
public void Test(string msg)
{
    MessageBox.Show("From Silverlight：" + msg);
}


private string _myName = "";

[ScriptableMember()]
public string MyName { set { _myName = value; } get { return _myName.Length == 0 ? "MyName Test" : _myName; } }

 

这里定义二个方法(一个有返回值，一个没返回值)，外加一个属性

 

然后要在App.Xaml.cs中注册类型，参考下面这样:

private void Application_Startup(object sender,StartupEventArgs e)
{
            MainPage mp = new MainPage();
            this.RootVisual = mp; 
            HtmlPage.RegisterScriptableObject("myMainPage",mp);

}

 

js中这可以使用了，不过得先给silverlight的object标签加一个参数，参考下面这样：
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/JavaScriptInvoke.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40818.0" />
            <param name="onLoad" value="SilverlightLoaded" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"https://www.jb51.cc/tag/decoration/" target="_blank">decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                   />
            </a>
        </object>


然后定义对应的函数:


<script type="text/javascript">

　　  var slCtl = null;

        function SilverlightLoaded(sender) {
            slCtl = sender.getHost();
            alert(slCtl.Content.myMainPage.Hello("JavaScript"));
        }

 

 

　　var fnClickTest = function() {
            if (slCtl != null) {
                slCtl.Content.myMainPage.Test("Hi")

                alert(slCtl.Content.myMainPage.MyName);
            }
        }

 </script>

为了测试fnClickTest，可以在页面中加一个button，类似这样:

<button onclick="fnClicktest()">调用SL中的方法</button>

 

说明:SilverlightLoaded会在silverlight控件加载完成时触发，触发完了以后，slCtl这个全局变量就保留了对silverlight的引用，其它地方就能继续调用silverlight中的各种方法和属性了

posted @  2009-12-18 09:23  菩提树下的杨过 阅读(3065) 评论( 2)  编辑  收藏
刷新评论 刷新页面 返回顶部

关于SilverLight创建JS,调用JS和silverlight开发工具包的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式_javascript技巧、Silverlight 2学习教程（六）： Silverlight托管代码调用Javascript中的JSON对象、Silverlight 5 beta新特性探索系列:1.安装Silverlight 5 beta环境以及OOB模式下Silverlight 5 多窗口支持、silverlight 和js互相调用的相关信息，请在本站寻找。

本文标签：

上一篇38.Silverlight读取服务器端格式化的Json数据

下一篇Silverlight中使用Json（silverlight怎么用）

相关文章