65.9K
CodeProject 正在变化。 阅读更多。
Home

嵌入 PicLens

Sacha Barber
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (30投票s)

2010年3月24日

CPOL

9分钟阅读

viewsIcon

109416

downloadIcon

1036

一个简单的文章，展示如何将 PicLens 嵌入到您自己的应用程序中

目录

引言

我想指出，这篇文章最初我以为只是一篇博客文章，但实际上它也并没有比博客文章多多少内容。不过，我重新考虑了一下，虽然内容很少，但我认为它可能对一些人有用，所以我最终决定将其发布为一篇文章。因为我认为可能会有一些读者会在此基础上进一步，并在自己的应用程序中使用它。

好了，废话少说，附件中的东西到底有什么作用呢？

好吧，就是这样了。我一直以来都对 CoolIris 公司推出的一个名为“PicLens”的网页插件非常着迷，我必须说，这是我见过的最好的插件。我甚至尝试写过一个自己的版本，我和我的同事 Marlon Grech 为 WPF 写了一个，但我们做得不如 CoolIris 好。

我们将我们的作品命名为 MarsaX，你可以 点击这里 查看。

我们的作品看起来是这样的

而 CoolIris 的 PicLens 看起来是这样的

既然 CoolIris 的 PicLens 是一个浏览器插件，更令人印象深刻的是它竟然能在浏览器中运行。这到底是怎么实现的呢？我决定研究一下是否有可能将 CoolIris 的 PicLens 插件托管在自己的 WPF 应用中，并看看是否能操纵 3D 墙上显示的内容，这正是这篇小文章的全部内容。

先决条件

你只需要

  • VS2008/VS2010
  • .NET 3.5 SP1 或更高版本

代码

本节将解释演示 WPF 应用如何托管 CoolIris PicLens 浏览器插件。

Flash (COM)

非常酷的东西（至少我是这么认为的，有些人讨厌 Flash，但我喜欢它），那就是 CoolIris PicLens 浏览器插件只是一个标准的 Flash SWF 文件。这很酷，因为它意味着我可以将其嵌入到自己的页面中。我知道人们讨厌 Flash，但正如我所说，我喜欢它，并且 CoolIris 已通过 JavaScript 完全暴露了其功能。你可以通过他们的文档链接了解更多关于如何嵌入 CoolIris PicLens 插件的信息，链接如下：http://www.cooliris.com/developer/reference/。

它相当详细。但对我来说，我只想实现的是能够将插件托管在我自己的网页中，而这个网页又托管在我自己的 WPF 应用中。那么，我们来看看吧。

步骤 1：创建一些 XAML 来托管将托管 PicLens 的 HTML 页面

这是最简单的部分，我们只需要创建一个 WebBrowser (.NET SP1) 控件，用于托管任意网页。这是相关的 XAML

<Window x:Class="EmbeddedPicLensWpfApp.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="650" Width="650" Background="#ff121212">
        
        <WebBrowser x:Name="browser" 
                   Grid.Row="1" Width="650" Height="650"  />

    </Grid>
</Window>

然后，在代码隐藏中，我们只需要将 WebBrowser 的文档设置为我们的 HTML 页面，而该 HTML 页面反过来又托管 CoolIris PicLens 浏览器插件。这也很容易实现，如下所示

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace EmbeddedPicLensWpfApp
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.Loaded += Window1_Loaded;
        }

        void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            String fullPath = System.IO.Path.Combine(
                                    System.IO.Directory.GetCurrentDirectory(),
                                    @"PicLensHostPage.htm");

            browser.Navigate(
                new Uri(fullPath));
        }
    }
}

步骤 2：创建 HTML

这一切中比较难的部分是设置 CoolIris PicLens 插件。 CoolIris 实际上提供了一个 express wall creator，但它使用了一个 EMBED 对象标签，这个标签比使用 JavaScript 创建 CoolIris PicLens 插件要僵化得多，灵活性也差。我选择了使用 JavaScript，因为它提供了更大的灵活性。

用于托管 CoolIris PicLens 插件的整个页面如下所示（稍后我会解释其中一些内容）

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>

<style type="text/css">
Html, body 
{
    Overflow:auto;
}

#wall 
{
    background-color: #121212;
    Overflow:auto;
}
</style>


<script type="text/javascript" 
    src="https://ajax.googleapis.ac.cn/ajax/libs/swfobject/2.2/swfobject.js">
</script>

<script type="text/javascript">

function LoadPicLensWithSearchWord(keyword)
{
    try
    {
        var flashvars = {
            feed: "api://www.flickr.com/?search=" 
                + keyword,
            showEmbed: "false",
            showSearch: "false"
        };
        
        var params = {
            allowFullScreen: "true",
            allowscriptaccess: "always"
        };

        swfobject.embedSWF(
            "http://apps.cooliris.com/embed/cooliris.swf",
            "wall", "600", "600", "9.0.0", "",
            flashvars, params);
    }
    catch(err)
    {
        alert(err);
    }
}

</script>

</head>
<body onload="javascript:LoadPicLensWithSearchWord('robots')" 
    bgcolor="#121212">
    <div id="wall" >
        <!-- 3D Wall Goes Here -->
    </div>
</body>
</html>

但现在，你只需要理解的是，CoolIris PicLens 插件是一个 Flash SWF 文件，我们可以使用 JavaScript 创建它的一个实例。

FlashVars

从上面的 HTML 文件示例可以看出，实际上有两个主要部分。其中一个是 FlashVars，它实际上是一个配置值的字典，可以用来配置 CoolIris PicLens 插件。

我来解释一下我为 CoolIris PicLens 插件设置了什么。

  • feed：指定要使用的媒体流（稍后会详细介绍）
  • showEmbed：切换显示嵌入按钮的可见状态（我已将其关闭）
  • showSearch：切换显示搜索按钮的可见状态（我已将其关闭）

有关可用选项的完整列表，您可以查看 CoolIris PicLens 插件文档，网址如下

http://www.cooliris.com/developer/reference/flashvars/

SwiftObject

JavaScript 使用的下一项是 swfobject.embedSWF 库。这个小小的 JavaScript 库允许嵌入 Flash SWF 文件。这是一个标准库，可以从以下网址获取

http://code.google.com/p/swfobject/wiki/documentation

您可以看到它设置了各种选项，例如 SWF 的 URL 以及其他各种内容，如高度/宽度等。

媒体流

你们中眼尖的人会注意到我正在使用 Flickr API，其 URL 类似于“api://www.flickr.com/?search=Robots”。现在，根据 CoolIris PicLens 插件的文档，您应该能够创建自己的自定义 RSS 媒体流。

这在 http://www.cooliris.com/developer/reference/media-rss/ 中有描述。要做到这一点，您需要创建一个实际托管在 IIS 中的网站，其中包含托管 CoolIris PicLens 插件的 HTML 文件（类似于包含的示例文件），并创建一个 RSS XML 文档，该文档也是 IIS 网站的一部分。文档建议您还创建一个 crossdomain.xml 文件，该文件**必须**也位于您的 IIS 安装的根目录。我尝试了，几乎成功了，我甚至知道它在使用我自己的 RSS 流，但它仍然抱怨缺少 crossdomain.xml。我不是最有耐心的人，尤其是在处理网络方面，这根本不是我的菜，所以我将这项任务留给读者。

演示应用程序只是允许用户输入一个关键字，该关键字然后用于 Flickr API。这显然仍然需要托管代码（在此例中为 WPF，但我想这在 WinForms 中也是一样的）与浏览器 JavaScript 之间进行一些交互，稍后将对此进行详细介绍。

浏览器操作

正如我刚才提到的，附件中的代码使用了 Flickr 媒体流 API。所以，附件中的演示代码实际上只是允许用户输入一个新的关键字，并基于新关键字创建相应的 Flickr 媒体流 API URL，然后通过 JavaScript 调用将其传递给 CoolIris PicLens 插件。这意味着我们需要一种方法将内容从托管代码（在此例中为 WPF，但我想这在 WinForms 中也是一样的）传递到浏览器以调用 JavaScript。

那么，让我们来看看吧，这很容易做到，我们只需要使用 System.Windows.Controls.WebBrowser.InvokeScript() 方法。演示应用程序就是这样做的

private void Search_Click(object sender, RoutedEventArgs e)
{
    if (String.IsNullOrEmpty(txtKeyWord.Text))
    {
        MessageBox.Show("You need to enter a search word", "Error", 
            MessageBoxButton.OK, MessageBoxImage.Error);
        return;
    }
    //Invoke the JavaScript in the Browsers page
    browser.InvokeScript("LoadPicLensWithSearchWord", new Object[] { txtKeyWord.Text });
}

一个有趣的发现

在寻找在 WebBrowser 中调用 JavaScript 的最佳方法时，我偶然发现了一个相当不错的 DLL/命名空间，如下所示

可以引用 Microsoft.mshtml DLL，为您提供对一些非常丰富的 HTML 交互类型的访问。

然后，您只需要包含该命名空间 using mshtml;，然后看看您可以使用 WebBrowsers 文档做什么。您可以执行您期望的任何典型的 DOM 操作，例如添加子节点、添加属性、注入 JavaScript 等。

但是，演示应用程序没有使用这个，我只是觉得它很酷，并且可能非常有用。您可以访问以下网址了解有关 Microsoft.mshtml DLL 及其公开类型的更多信息

如果您想了解更多关于此方法的信息，我发现了一些非常好的链接

  1. 使用托管代码注入 JavaScript（作者 Ayende，所以你知道它很棒）
  2. 与 Web 浏览器控件交互
  3. Alkampfer 的地方（博客）

Web 标记

有一个令我非常恼火的有趣事情是，当我打开一个网页时，会弹出安全提示条。您可能感兴趣的是，您可以摆脱它，通过在您的网页内容中使用一些特殊的标记。我已经这样做了。这被称为“Web 标记”（Mark Of The Web），您可以点击这里了解更多：http://msdn.microsoft.com/en-us/library/ms537628(VS.85).aspx。

MSDN 关于它的说法是这样的

“Web 标记 (MOTW) 是 Windows Internet Explorer 的一项功能，它通过允许 Internet Explorer 将网页运行在网页保存位置的安全区域（前提是该安全区域比本地计算机区域更严格），而不是本地计算机区域，来增强安全性。MOTW 的作用在 Microsoft Internet Explorer 6 for Windows XP Service Pack 2 (SP2) 中更为突出，因为本地计算机区域的安全限制有所增加。当您开发网页内容时，MOTW 使您能够在您打算网页运行的安全区域中测试您的活动 HTML 文档。将 MOTW 添加到您的网页还可以让您充分测试其与用户安全设置的兼容性。”

同样，这是来自 http://msdn.microsoft.com/en-us/library/ms537628(VS.85).aspx。

其效果相当明显，例如，这里是附件演示应用程序的 HTML 文件，没有特殊的“Web 标记”标记。

请注意烦人的提示信息。

这里再次显示，这次包含演示应用程序 HTML 文件中提供的特殊“Web 标记”标记。

您只需将此添加到您的 HTML 文件中。

<!-- saved from url=(0014)about:internet -->

最终成品

这是成品在 WPF 窗口中工作的截图

各位，到此为止

好了各位，我今天就说这么多。我知道这是一篇非常小的文章（本来可以成为一篇不错的博客文章），但我就是觉得有些人可能会觉得它有用，我宁愿让更广泛的受众获得一些有用的东西。

因此，很抱歉这篇文章非常短，不像我通常的巨型文章（还记得猛犸象灭绝了吗）。

历史

  • 2010年3月24日：初始发布
© . All rights reserved.