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

用于浏览“每日天文图片”的小工具

Michael Dunn
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.32/5 (30投票s)

2007年1月18日

9分钟阅读

viewsIcon

128011

downloadIcon

1077

本文介绍了一个 Vista 侧边栏小工具，您可以使用它来浏览 APOD 网站并查看每日图片的预览。

目录

引言

从小时候起，我就对外太空探索很感兴趣。我长期以来也是《每日天文图片》(APOD) 网站（APOD）的读者，该网站有数百篇关于各种天文主题的有趣且信息丰富的页面。（要查看自 1995 年 6 月以来的完整存档，请访问索引页。）但是，APOD 没有 RSS 源，索引页也只有文本，所以不容易浏览 APOD 来找到有趣的图片。这就是小工具的用武之地！本文介绍的侧边栏小工具让您可以轻松地浏览 APOD 页面，并显示每日图片的缩略图。

安装和使用小工具

当您从文章顶部的链接下载源代码时，您会在 zip 文件根目录中看到 APODViewer.gadget 文件。双击此文件，然后在提示时单击 Install 以安装小工具。这将自动将 APOD 小工具添加到侧边栏，但是您需要手动完成一个步骤。

小工具安装程序无法注册 DLL。APOD 查看器在 DLL 中使用了一个 ActiveX 控件，因此在注册 DLL 之前，小工具将无法工作。请按照以下步骤注册 DLL：

  1. 从侧边栏中移除 APOD Viewer 小工具，使其被卸载。
  2. 打开一个提升的命令提示符。
  3. 导航到此目录：%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\APODViewer.gadget\bin
  4. 运行命令 regsvr32 apodhelper.dll 来注册 DLL。

注册 DLL 后，小工具将完全正常工作。您可以使用 Add Gadgets 对话框将其重新添加到侧边栏。在此屏幕截图中，APOD 小工具位于左上角。

然后，小工具将运行并显示当前日期的 APOD 页面。这是小工具显示 1 月 29 日 APOD 图片的样子。

窗口顶部的四个链接会更改 APOD 页面。左箭头和右箭头按钮分别向前和向后移动一天。单击 Today 链接可返回当前日期的 APOD 页面，单击 Random 可跳转到随机的 APOD 页面。单击链接下方的日期将打开日期选择器，您可以在其中跳转到 1995 年至今的任何日期。

1.1 版本的新功能是搜索字段。您可以在编辑框中输入关键字，然后单击 OK 按钮搜索 APOD 网站的这些词。单击 OK 后，弹出窗口将关闭，小工具会打开一个新的浏览器窗口显示搜索结果。

小工具的底部显示 APOD 页面的标题以及当日图片的缩略图。单击标题将在新的浏览器窗口中打开 APOD 页面，单击缩略图可直接跳转到完整尺寸的图片。

如果您浏览到一个没有 APOD 的日期，小工具将显示一条错误消息，说明没有可用的 APOD 页面。

1.1 版本中的另一个新功能是幻灯片模式，即小工具会不时地更改为随机的 APOD 页面。要开启幻灯片模式，请单击小工具窗口旁边的选项按钮（看起来像一个小扳手）以打开选项对话框。

选中 View random APOD pages 复选框以启用幻灯片模式。您还可以更改图片切换的间隔；选项范围从 30 秒到 5 分钟。

小工具的工作原理

初始化

由于 APOD 网站没有 RSS 源，因此小工具必须抓取网页并提取其感兴趣的信息。由于我对 C++ 比 JavaScript 更熟悉，因此大部分有趣的工作都是用 C++ 完成的，并打包成了一个 ActiveX 控件。ActiveX 控件在 APODViewer.js 的 gadget_init() 函数中初始化，该函数在加载小工具时被调用。

var g_helper;
 
function gadget_init()
{
  // Create our helper AX object.
  g_helper = new ActiveXObject("MDunn.APODViewer.Helper");
 
  if ( g_helper )
    {
    // Tell it what dir it can create files in,
    // and start off with today's APOD.
    g_helper.SetGadgetPath ( System.Gadget.path );    
    OnTodayButton();
    }
}

作为初始化步骤之一，gadget_init() 通过将预定义变量 System.Gadget.path 传递给对象的 SetGadgetPath() 方法，来告诉 ActiveX 对象可以创建临时文件的目录。

获取 APOD 信息

当您在小工具中更改日期时，小工具会将新日期告知 ActiveX 对象，然后调用对象的 GetApodInfo() 方法。例如，单击 Today 按钮会运行此脚本：

function OnTodayButton()
{
  if ( g_helper )
    {
    g_helper.GoToToday();
    UpdateApodInfo();
    }
}
 
function UpdateApodInfo()
{
  // Update the date display: eg 1/17/2007
  datepicker.innerText = g_helper.CurrDateString;
 
  // Call the AX object to read the APOD page.
  // Error-handling is not shown here.
  if ( g_helper.GetApodInfo() )
    {
    apodtitle.href = g_helper.ApodPageURL;
    apodtitle.innerText = g_helper.ApodPageTitle;
    apodimg.src = g_helper.SmallImgURL;
    apodimglink.href = g_helper.LargeImgURL;
    }
}

GetApodInfo() 负责下载 APOD 网页并缓存将在小工具中显示的数据。它首先实例化一个 HTML 解析器对象，并下载新日期的 APOD 页面。HTML 被馈送到解析器，然后代码遍历页面中的所有链接。我们感兴趣的是缩略图，它是第一个具有子 <img> 标签的 <a> 标签。如果找到这样的链接，代码将保存 <a> 标签的 href（指向完整尺寸图片的 URL）以及 <img> 标签的 src（图片的较小版本）。如果找到了这些 URL，代码然后会从 HTML 中读取 <title>，它将在小工具中显示为缩略图上方的标题。

如果 GetApodInfo() 成功，小工具将从 ActiveX 对象公开的属性中读取 URL 和页面标题。例如，LargeImgURL 属性是指向完整尺寸图片的 URL。这些字符串被分配给小工具 UI 中相应的 HTML 元素。

技术说明

该小工具依赖于 APOD 网站的两个细节，这两个细节多年来一直保持一致（并且希望将来也能如此！）。

  1. 给定日期的 URL 必须是：http://antwrp.gsfc.nasa.gov/apod/apYYMMDD.html。
  2. APOD 页面中第一个带有 <img> 子标签的链接必须是指向完整尺寸图片的链接，并且子 <img> 必须是缩略图。

小工具目录中的文件

如果您导航到 APODViewer.gadget 目录，您将看到从原始 .gadget 文件中解压出来的所有文件。本节列出了每个目录的内容，以便您了解文件在何处，如果您想查看小工具的内部工作原理。

  • 根目录
    • APODViewer.js：控制主要小工具 UI 的脚本
    • flyout.js：控制弹出页面的脚本
    • options.js：控制选项对话框的脚本
    • APODViewer.css：用于主要小工具 UI 的 CSS 文件
  • bin 目录
    • APODHelper.dll：小工具使用的 ActiveX 控件
  • en-US 目录
    • gadget.xml：此 XML 文件描述了小工具，以及版本号等其他信息
    • APODViewer.html：主要小工具 UI 的网页
    • flyout.html：弹出页面的网页
    • options.html：选项对话框的网页
    • strings.js：此脚本文件包含本地化字符串
  • images 目录
    • 小工具网页和 Add Gadgets 对话框中使用的各种图标和图像

您可能会注意到 en-US 目录在其他文件中从未被引用。此目录包含本地化资源，Vista 在查找文件时会自动搜索它。例如，gadget.xml 的这一部分列出了主要 UI 的网页：

<gadget>
  ...
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="APODViewer.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

<base> 标签中的 src 属性没有目录名，因此 Vista 首先在小工具的根目录中查找。由于 APODViewer.html 不在那里，Vista 接着在 en-US 中查找，并找到该文件。要将小工具本地化为新语言，只需在 en-US 旁边添加一个新的语言目录，并将翻译后的文件放在该目录中即可。

构建和打包小工具

.gadget 文件可以是包含小工具所有文件的 ZIP 或 CAB 文件。我选择在演示下载中使用 CAB，因为 CAB 可以数字签名。本节列出了将小工具打包到 CAB 并对其进行签名所需的步骤。

  1. 将所有小工具文件设置在 APODViewer.gadget 目录中。
  2. 构建包含 ActiveX 控件的 DLL。将 DLL 复制到 APODViewer.gadget\bin 目录并在那里注册它。
  3. 打开命令提示符，导航到 APODViewer.gadget 目录。
  4. 运行 cabarc -p -r -s 6144 n APODViewer.cab *.* （-s 开关为 CAB 预留数字签名空间，如果您不打算签名 CAB，则应省略此开关。）
  5. 如果您有签名证书，请对 CAB 文件进行签名。
  6. 将 CAB 重命名为具有 .gadget 扩展名。

然后分发 .gadget 文件！如果您对文件进行了签名，提示将显示小工具名称以及签名证书中列出的公司名称。演示下载中的小工具文件已用我公司的证书签名，因此我们的名称会出现在提示中。

参考文献

请参阅 CodeProject 上的Gadgets Competition 页面中的资源部分。

"使用 Microsoft 的 XML 技术构建的控制台应用程序 HTML 解析器"，作者 Jeffrey Walton。

版权和许可

本文是受版权保护的材料，©2007，Michael Dunn。我知道这无法阻止人们在网上到处复制，但我必须这么说。如果您有兴趣翻译本文，请给我发电子邮件告知我。我不认为会拒绝任何人翻译的许可，我只是想知道翻译情况，以便在此发布链接。

本文附带的演示代码已发布到公共领域。我将其以这种方式发布，以便代码能使所有人受益。（我没有将文章本身设为公共领域，因为将文章仅在 CodeProject 上提供有助于提高我的知名度以及 CodeProject 网站。）如果您在自己的应用程序中使用演示代码，告知我一声将不胜感激（只是为了满足我满足于了解人们是否从我的代码中受益的好奇心），但并非必需。在您自己的源代码中注明出处也同样受欢迎，但并非必需。

修订历史

2007 年 1 月 17 日：文章首次发布。
2007 年 1 月 29 日：发布 1.1 版本，增加了搜索和随机页面查看功能。

© . All rights reserved.