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

Bloglines 侧边栏小部件

Jim Rogers
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.75/5 (7投票s)

2007年2月2日

10分钟阅读

viewsIcon

44677

downloadIcon

633

一个通过 AJAX 检查 Bloglines 订阅源的小工具，附带一些开发技巧

Sample image

引言

本文介绍了一个 Vista 侧边栏小工具，它通过 AJAX 访问 Bloglines 的网络服务，在侧边栏中显示您的订阅源。本文将介绍该小工具代码的一些重点，以及小工具开发和调试的一些技巧。

这是什么？

摘自 Bloglines 网站

Bloglines 是一项免费的在线服务，用于搜索、订阅、创建和共享新闻订阅源、博客和丰富的网络内容。使用 Bloglines，无需下载或安装任何软件——只需注册成为新用户，即可随时随地从任何电脑或移动设备即时访问您的账户。

我使用 Bloglines 是因为它易于使用，它会记住我已阅读的内容，最重要的是，我可以在不同电脑之间切换，而无需担心任何内容同步问题。该小工具与 Bloglines 无缝集成，将文章标记为已读并显示最新信息。

只是看看？

如果您没有 Bloglines 账户，但想了解小工具如何工作，只需在选项对话框中输入“test”作为登录 ID，并输入任意密码。这将使小工具从网站加载静态 XML 文件——AJAX 功能将以相同的方式用于调试。订阅源不会被标记为已读，因为 XML 文件是静态的——但这应该是唯一的区别。

背景

Windows Vista 引入了一个新功能——侧边栏。它停靠在屏幕的左侧或右侧，用户可以将各种小工具添加到侧边栏。Vista 自带了一些小工具，还可以从微软的 Windows Live Gallery 下载更多小工具。

侧边栏小工具可以提供各种有趣和有用的信息。它们由 HTML 和脚本组成，并带有一些 附加 API。小工具基本上可以做任何网页能做的事情，它们还可以通过 API 访问本地系统的许多方面。

过去，许多 Microsoft 应用程序的插件都需要 C++ 编程或 Windows API 知识。通过依赖脚本和 HTML，Vista 侧边栏使小工具开发可供更广泛的开发人员群体使用。

Bloglines 小工具描述

这个小工具使用 AJAX 访问 Bloglines 网络服务 同步 API。在主窗口中，它显示您已订阅的订阅源列表，以及每个订阅源的未读项目计数。

Bloglines 允许将订阅源分组到文件夹中；小工具将这些显示为文件夹树。文件夹可以通过单击展开和折叠，文件夹中所有未读项目的总数显示在名称后面。如果列表高于窗口，可以通过将鼠标移动到顶部或底部边缘，或使用滚轮进行滚动——但您需要单击小工具以使其获得焦点才能使用滚轮。

单击链接会打开小工具的弹出窗口，如本文顶部的截图所示。窗口有点小，但足以查看项目。单击博客标题或帖子标题将在 Internet Explorer 中打开相应的链接。

小工具的标题显示未读帖子的总数，并包含一个链接，可将您直接带到您的 Bloglines 账户页面。

通用小工具设计

在深入了解这个小工具的具体细节之前，我们先了解一些关于侧边栏小工具的通用背景知识。

最简单的小工具将由两个文件组成

  • gadget.xml - 包含各种选项的 XML 清单；它必须是这个名称
  • 一个 HTML 文件 - 在清单中指定，并显示为侧边栏中的主窗口

一个小工具通常还会提供一个用于设置对话框的 HTML 文件。根据其功能，它还可能有一个弹出窗口，该窗口也由一个 HTML 文件组成。这是上面截图中较大的窗口。这些小工具窗口可以被视为 Explorer 的特殊微小实例；HTML 文件可以链接到样式表和脚本包含文件，并具有浏览器所有的脚本和显示功能，只是一些小例外。窗口之间以及设置存储方式存在一些差异，这将在后面讨论。

我不会在这里写一篇循序渐进的“入门”文章——我只想指出我在学习过程中学到的一些在互联网上不容易找到的东西。如果您有兴趣创建您的第一个小工具，Microsoft 有一个很棒的 教程，我就是跟着它学习的。

您还可以查看默认 Vista 小工具或您已下载并安装的小工具的代码。您会在以下位置找到它们

  • C:\Program Files\Windows Sidebar\Gadgets
  • C:\Users\[您的登录名]\AppData\Local\Microsoft\Windows Sidebar\Gadgets

由于文件只是 HTML 和 JavaScript 包含文件，如果您想了解其他作者是如何实现某些功能的，您可以完全访问这些代码。

关注点

小工具图像

小工具的一些图像在清单中指定。这是我的——MSDN 有关于此格式的完整文档。

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
    <name>Bloglines Feeds</name>
    <namespace>JimRogers</namespace>
    <version>1.0</version>
    <author name="Jim Rogers">
        <info url="www.JimandKatrin.com" />
        <logo src="images/jk.png" />
    </author>
    <copyright>&#169; 2007</copyright>
    <description>Keep track of your Bloglines feeds</description>
    <icons>
        <icon src="images/bloglines.png" />
    </icons>
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="bloglines.html" />
            <permissions>full</permissions>
            <platform minPlatformVersion="1.0" />
            <defaultImage src="images/bloglines_drag.png" />
        </host>
    </hosts>
</gadget>

有三个用于图像的标签

  • <icon> - 64x64 的小工具图标，显示在 Vista 的小工具库中（单击侧边栏顶部的加号）
  • <logo> - 48x48 的图像，显示在库详细信息部分的名称、版权和 URL 旁边
  • <defaultImage> - 将小工具从库拖到侧边栏时显示

这些图像都可以包含透明或半透明区域。它们可以是任何大小，但如果图标和徽标太大，它们将被缩小以适应上述大小。Vista 的图像插值效果很好，所以可以随意尝试一个超大图像——我的徽标缩小后看起来效果很好。

侧边栏图形对象

侧边栏有三个特殊的图形，以 HTML 标签的形式公开：gbackground、gimage 和 gtext。gbackground 是设置小工具背景图像的可靠方法；用 CSS 来做给我带来了一些麻烦。

  <g:background src="Images/bloglines_bg_170.png"
 style="position:absolute;top:0px;left:0px;z-index:-1"></g:background>
</body>
</html>

这些图形对象可以以有趣的方式进行操作；gimage 具有模糊、亮度、不透明度等属性。MSDN 有详细信息。

小工具事件

gadget API 暴露了许多事件；以下是一些更重要的事件

  • System.Gadget.onSettingsClosed
  • System.Gadget.onShowSettings
  • System.Gadget.onSettingsClosing
  • System.Gadget.Flyout.onShow

这些事件是主窗口、弹出窗口和设置窗口之间通信的便捷方式。例如，在包含在主窗口中的 bloglines.js 中，您会找到以下代码

System.Gadget.onSettingsClosed = SettingsClosed;
function SettingsClosed(event)
{
    if (event.closeAction == event.Action.commit)
    {
        Initialize();
    }
    // Don't do anything that might need to happen on reboot!
}

SettingsClosed 事件检查用户是否按下了 OK，然后使用更新的设置重新加载主窗口。

取消停靠

您可能希望实现的另一组 System.Gadget 事件是 onDock 和 onUndock。在事件处理程序中，可以修改小工具的样式、大小或内容。小工具可以在取消停靠时利用更多的屏幕空间来呈现更多信息或只是一个更大、更易于使用的界面。对于这个小工具，可以通过修改 body 样式来实现大小调整

if(System.Gadget.docked == true)
{
    document.body.style.width = 130;
    document.body.style.height = 170;
}
else
{
    document.body.style.width = 170;
    document.body.style.height = 240;
}

还有更多工作要做——更改背景图片、字体大小和一些其他元素的大小。这是 1.1 版的待办事项。

设置保留

小工具在计算机重启时会记住其设置，但如果小工具从侧边栏中移除，则设置会丢失。大概设计者认为从侧边栏中移除构成了一种“卸载”，并有理由删除设置。然而，从计算机上实际卸载小工具是一个单独的操作。

我在开发过程中硬编码了用户名和密码设置，这样我就不必每次重新加载小工具时都将它们输入到选项对话框中——这种情况经常发生。

XMLHttp 缓存

Internet Explorer 会积极缓存 AJAX 请求——我差点错过这一点，以为我看到的是相同的“新帖子”，因为它们已被修改。避免缓存的一种流行方法是将一个唯一的字符串（通常是 Date.getTime()）附加到 URL。这看起来很笨拙；我四处搜索，找到了从客户端控制此功能的标头

req.open("GET", BLOGLINES_LISTSUBS, true,
    System.Gadget.Settings.read("BloglinesId"),
    System.Gadget.Settings.read("BloglinesPW"));

// Tell IE never to cache
req.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null);

另请注意 open() 方法的 Id 和 password 参数；这是用于基本身份验证的。

HTTP 304 状态码

如果为没有未读项的订阅源调用 getitems API，Bloglines 将返回状态码 304。起初我以为这是错误，但实际上它是“未修改”状态码。Bloglines 使用此代码表示没有未读项，并且响应中没有返回正文；只有 304 标头。

我认为这与 WC3 规范 中的意图不符；304 用于缓存，并且只有在客户端进行“条件获取”时才应返回，即指定只有在自特定时间（客户端有缓存副本的时间）以来文件已被修改时才应返回文件。

这样做的最终结果是，当加载没有未读项的博客的弹出窗口时，Bloglines 不提供任何数据。博客标题和 URL 必须传递给弹出方法。博客描述在 getitems 实际返回数据时首次保存为设置。然后，在 304 的情况下，它从设置中加载。因此，您在弹出窗口中看不到博客的描述，直到您第一次加载该博客的未读项。

Javascript 对象

我在学习过程中学到的一件事是如何在 JavaScript 中动态构造对象；这在代码中用于按引用传递，这在 JavaScript 中无法通过参数完成。按引用传递对于填充树视图的递归函数至关重要。

var subCount = { count:0 };     // For passing by reference
...
flyoutInfo = { subId:subId, url:url, title:title };

文件

  • bloglines.html - 小工具内容
  • settings.html - 设置对话框
  • flyout.html - 弹出窗口
  • bloglines.js - 访问 Bloglines 网络服务和渲染主窗口的方法
  • ui.js - 用户界面方法
  • rss.js - 返回的 RSS 文档解析器
  • bloglines.css, flyout.css - 相应 HTML 文件的样式表

开发技巧

Visual Studio 2005

小工具可以使用任何编辑器开发，但 Visual Studio 当然方便进行语法高亮和格式化——如果您有集成的源代码控制，那就更方便了。这个小工具项目最初是一个 Visual C# ASP.NET Web 应用程序；默认文件被删除。它位于磁盘上，文件在 gadget 文件夹中；要重新加载小工具，我只需保存文件，关闭小工具，然后从小工具库将其添加回侧边栏。

如果您下载该项目，请务必将其解压缩到您的 gadget 文件夹，以便您也可以这样做。

调试

很难使用通常在浏览器中使用的某些快速简单的调试技术。警报完全不起作用，并且小工具窗口太小，无法在内容之后输出原始数据，仅仅是为了查看它。

幸运的是，脚本调试效果很好。最简单的调用方法是使用 debugger 关键字。将其放在您要调试的函数的顶部，或将其放在初始化函数中以立即开始调试。

function Initialize()
{
    debugger;   // Break here and ask if I want to debug
     var username = System.Gadget.Settings.read("BloglinesId");

熟悉的即时调试器对话框将出现，其中包含程序列表，包括 Visual Studio 和 Microsoft Script Editor。请记住在 Internet Explorer 中启用脚本调试。

如果您的小工具非常简单，或者您将对系统 API 的调用包装在 try 块中，您可以在 Explorer 中打开您的小工具的一部分或全部。或者，您可以编写一个类似但独立的 HTML 页面作为 JavaScript 的测试平台。这对于测试复杂的脚本（例如此小工具中使用的 AJAX 和 XML 解析代码）非常有用。在 IE 中，您可以利用警报和更好的错误报告；我使用了一个大的文本区域来查看从 Web 服务调用返回的原始数据。

历史

  • 2007 年 2 月 1 日 - 发布
© . All rights reserved.