Helloj2ee学Silverlight之四——如何通过JavaScript在HTML网页里嵌入SL程序

Helloj2ee学Silverlight之四又如期和各位见面了。之三我们讨论了如何在HTML网页里嵌入Silverlight控件，之四我们要讨论的就是如何通过JavaScript在HTML网页里嵌入Silverlight控件。

其实可以说这些东西VS都帮我们做好了，但是为什么Helloj2ee需要自己手工构建一遍呢？原因很简单，就是想理解其中的原理，自己写的代码一定要牢牢掌控在自己的手中。通过JavaScript在HTML网页里嵌入SL程序，我们需要的就是一个被称之为Silverlight.JS的文件，总之之四 Helloj2ee就和这个文件死磕了。

 

1 使用Silverlight.JS文件

Silverlight.JS文件提供了若干个方法，供程序员在HTML网页里调用。如果你和Helloj2ee一样是从桌面转到网络上，我打算举一个简单的C#例子类比Silverlight.js文件。如下例所示，我们新建了一个类名为Silverlight，里面只有一个静态的方法CreateObject。

复制代码
namespace SilverlightLib
{
    public class Silverlight
    {
        public static void CreateObject()
        {
            Console.WriteLine("Create Object");
        }
    }
}
复制代码

 

如果，我们在Main函数里使用这个对象，我们需要做什么呢？我们需要声明该类的命名空间，然后就在里面调用。如下所示：

复制代码
代码
using SilverlightLib;
namespace CSharpAnalogy
{
    class Program
    {
        static void Main(string[] args)
        {
            Silverlight.CreateObject();
            Console.ReadKey();         
        }
    }
}
复制代码

 

Silverlight.JS文件就好比我们刚才写得Silverlight.cs文件，它提供了一个一系列的方法帮助我们把Silverlight嵌入在HTML网页当中，这些具体的方法参考可以参见参考文献[1]。我们在Main函数里希望使用刚才我们写得Silverlight类，那么我们需要使用using关键字声明，同样在HTML网页里需要使用Silverlight.JS提供的方法，也需要声明。如下所示：

<script type="text/javascript" src="Silverlight.js"></script>

 

我们最需要使用的是它提供的createObject方法。一个最简单的通过JavaScript嵌入Silverlight对象的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>EmbeddingWithJS</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function onSLLoad(plugIn, userContext, sender) {
            window.status +=
                plugIn.id + " loaded into " + userContext + ". ";
        }
        function onSLError(sender, args) {
            // Display error message.
        }
    </script>
</head>
<body>
    <div id="slHost">
        <script type="text/javascript">
            Silverlight.createObject(
                        "Bin/Debug/HelloSilverlight.xap", slHost, "sl",
                        {
                            width: "100%", height: "100%",
                            background: "white", alt: "<!--not installed-->",
                            version: "3.0.40818.0"
                        },
                        { onError: onSLError, onLoad: onSLLoad },
                        "param1=value1,param2=value2", "row3");
        </script>
    </div>
</body>
</html>
复制代码

 

大家不要害怕没有学过JavaScript，然后找一本JavaScript的书看一遍。因为HelloJ2ee也没有学过JavaScript，事实证明，有些东西是无师自通的，比如吃饭，睡觉还有JavaScript。Helloj2ee将会一步一步解释一下上面的代码。“信Helloj2ee，一步搞定JavaScript”。

上面的代码是标准的HTML标签和JavaScript语言混合而成。混合的方法有两种（也许不止两种，Helloj2ee仅凭上面的代码简单总结），一种是外面写个JS文件，然后在HTML网页里引用一下，如引用Silverlight.JS文件。还有一种就是直接把JavaScript的源码写在HTML网页里，如createObject方法。两种方法都要用一个<script>标签括起来，表示这不是HTML网页里的标签了，这是我脚本的地盘，然后type属性就要指定这是JavaScript，而不是VBScript等等。剩下的就是在里面写源码了。

 上面的代码最重要的是Silverlight.JS提供的createObject方法。这个方法有如下几个参数。

Silverlight.createObject(source, parentElement, id, properties, events, initParams, userContext);

第一个参数是指定Silverlight的文件在哪儿，这一个和直接使用Object标签里的source参数是一样的（参见Helloj2ee学SL之三）;

第二个参数从名字上也能看出来是指Silverlight控件放在哪个HTML元素上，这里是放在一个名字为“slHost”的div上;

第三个参数就是给这个Silverlight控件起个名字，就好像“Helloj2ee”或者“二狗子”一样，便于将来访问这个元素，我们在这里将这个Silverlight控件起名为“sl”;

第四个参数是properties属性，它由一个数组组成。它总是由“属性名：属性值”这样组成，中间用“,”间隔开。上面的例子中列举了宽度，高度都占据整个页面（100%），背景色为白色，alt属性表示，如果本机没有安装Silverlight的话，一个网页的表示，在这里是会显示一个“not installed”的字符。Version属性表示的是Silverlight所使用的版本。事实上，这里面也可以一个属性都不设置，用“{}”表示，那么Silverlight控件可以以默认的方式显示在网页上。

第五个参数表示的是事件的集合，这里面是如果Silverlight控件如果发生了个什么事通过这种机制通知外部的JavaScript。这种思想是遍地开花，到处都会有的。比如委托等，具体可以参见Helloj2ee的这个博文系列（http://www.cnblogs.com/helloj2ee/category/189440.html）。这里列举了两种比较典型的事件，一个是OnError事件，另一个是OnLoad事件，它们分别对应了两个函数。当然如果不需要JavaScript和Silverlight交互的话，也可以直接传入一个空值“{}”。

第六个参数是一组初始化的参数，这一组参数是可以直接传递给Application对象的Startup事件当中的。我们举个例子，现在我们已经可以看到传递了两组参数，这两组参数分别是Value1和Value2，那么我们在Silverlight程序里去接受这两个参数值。在这个程序里我们所需要做的事情就是将传递进来的参数一个一个变成一个TextBlock，然后加入到MainPage的StackPanel当中。注意下面的LayoutRoot是一个StackPanel对象。

复制代码
代码
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
            foreach (String key in e.InitParams.Keys)
            {
                ((MainPage)RootVisual).LayoutRoot.Children.Add(new TextBlock()
                {
                    VerticalAlignment= System.Windows.VerticalAlignment.Center,
                    HorizontalAlignment= System.Windows.HorizontalAlignment.Center,
                    FontSize=20,
                    Text = String.Format(
                        "from InitParams: {0} = {1}", key,
                        e.InitParams[key])
                });
            }
        }
复制代码

 

如果你运行程序，会发现运行的结果如下图：

再往下是第七个参数，这个参数主要是可以直接传递给Silverlight控件的onLoad事件处理函数，在上面的例子当中就是onSLLoad函数。该函数有如下三个参数，plugIn即代表插入的Silverlight控件，userContext即是这第七个参数的值，至于sender就是代表的谁发送的这个事件。

function onSLLoad(plugIn, userContext, sender) ；

2 如何寻找Silverlight.JS文件

七个参数说完了，那么现在还有一个问题就是……“我上哪儿去找这么好的Silverlight.JS文件呢？” 其实很简单，你任意新建一个Silverlight程序，只要一路next下去，那么你的工程里就一定包含了这个文件，只不过HelloJ2ee是在这里“剑走偏锋”。而且测试的网页也不用你自己写，VS也自动生成好了。

 我个人其实是非常痛恨这种极其好用的工具，它就像鸦片，时间久了，你就上瘾，脱离不开它。可能诸多80末或者90初的程序员一开始就接触的是C#，.Net，VS2005，VS2008，VS2010。如果一个刚入学的大学生问我学习什么语言，我是一定不会推荐他直接学习C#或则Java的，我一定告诉他用C，C++。因为一开始就使用C#，你根本就不知道什么是开辟内存，什么是栈，什么是堆，值和引用等等。所有的问题都避免了，于是你认为理所当然。事实上一个从C++转型到C#是非常容易的。但是一个C#程序员转型到C++，你可能会崩溃。那么摆着这么一大堆好用的工具你到底是用还是不用呢？一个办法就是像Helloj2ee这样，先尝试不用工具自己手工建立，懂了原理之后，还手工建么？当然不，当然是一路Next。我曾经看过一本书，不过整本书的内容都没看，就看了封面，被一句话给震撼了，当时我就想：“咋就这么牛逼呢？把我上面的这么一大段话，全部浓缩成下面一句话，还排比，还对状，确实是我Helloj2ee难以忘其项背的”这一句话就是：

Thinking in low level，writing in high level。

好了还有你当然可以在网上也能找到Silverlight.JS文件，比如在MSDN的Code Gallery上面。

3 为什么需要Silverlight.JS文件

也许刚一开始，我们只有通过<Object>标签将Silverlight控件嵌入在网页当中（参见Helloj2ee学Silverlight之三），但是这样一来，什么检查是否安装了Silverlight，版本是否正确等等统统都交给了程序员，于是微软为了减轻程序员负担，所以就提供了这么一个Silverlight.js文件，让我们CreateObject就把这些事情都搞定。

此外使用Object标签的方法我们就丧失了编程的方法来创建Silverlight控件，这样失去了很多的灵活性，使用编程的方法，我们传参数，给控件起名字，搞事件处理函数等等，这些都是Object标签难以搞定的事情。总之微软就是整天帮我们想着减轻负担，最终可以让我们一键搞定所有的事情，等到那一天也许我们这些人就失业了。当然这是后话了。

此外，如果你已经看懂了Helloj2ee的这篇文章，你不妨尝试着看看参考文献[2]，说实话一个程序员不看英文资料，你真是很难成为高手。不妨试着看看吧，相信你看了此文，在看这个参考文献，“轻松”。

附件代码：/Files/helloj2ee/Helloj2ee学SL4代码.rar

参考文献

[1] Silverlight Documentation（Silverlight 4 Beta）Silverlight.js Reference

[2] Silverlight Documentation（Silverlight 4 Beta）How to: Add Silverlight to a Web Page by Using Java Script

 

 

posted @   helloj2ee  阅读(1460)  评论(9)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae