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

每日《肥猫》：Windows Vista 的侧边栏小部件

Raj Lal
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.69/5 (54投票s)

2007年1月31日

CPOL

6分钟阅读

viewsIcon

320012

downloadIcon

1232

每日呆伯特是一个简单的 Windows Vista 边栏小工具，可以将每日呆伯特漫画显示在您的桌面上。

免责声明

本小工具仅供教育目的，不以任何方式认可将本小工具用于个人或商业用途，在您的 Vista 边栏上查看呆伯特漫画。如果您想查看每日漫画，您需要访问网站 www.dilbert.com。所有与呆伯特漫画相关的图像均为 © Scott Adams, Inc. 的版权材料。

引言

随着微软 Vista 在全球范围内有史以来最广泛的发布，2007 年开启了小工具开发的新时代。小工具是小型、轻量但功能强大的应用程序，它们停留在 Windows Vista 边栏上。小工具最酷的地方在于它不依赖于任何特定的语言或技术，而且您不需要成为一名火箭科学家来创建小工具。HTML 和 JavaScript 的基础知识就足够了，但您也可以使用任何 Microsoft 语言（用于 Windows/Web）来扩展小工具。一旦您了解了小工具开发的基本规则，生产力和创新就只有天空才是极限。

本文描述了一个简单的 Windows Vista 边栏小工具，它可以将每日呆伯特漫画传递到您的桌面。

feedburner.com 提供了一个 RSS Feed，它以 XML 文件的形式提供每日呆伯特的内容。其背后的想法是读取该文件，解析内容并在您的边栏中精美地显示它。用户可以查看过去 5 天的漫画。好处是，对于所有那些（像我一样）想以呆伯特漫画开始新的一天的人来说，不必去网站甚至打开 Feed 就能看到它。只需单击边栏小工具中的日期，一个弹出窗口就会显示当天的漫画。

本文还讨论了边栏小工具开发的五个常见功能

  1. 创建：一个包含最少文件数的简单小工具
  2. 使用 Ajax：从网站（RSS feed）读取 XML 文件。从 http://feeds.feedburner.com/tapestrydilbert 获取并解析呆伯特漫画的 RSS Feed。
  3. 解析 XML：提取图像的路径
  4. 丰富的显示：小工具的外观和感受
  5. 弹出窗口：Windows 边栏弹出窗口的一个简单实现，用于显示图像

实际应用

为了保持您的兴趣，这是它在边栏中的样子。

DailyDilbert in Action

我们开始吧。

创建一个简单的小工具

要创建一个无花哨的小工具，您只需要两个文件：一个 HTML 文件 (main.html) 和一个用于配置的 XML 文件 (gadget.xml)，这两个文件都需要放在一个名为 DailyDilbert.Gadget 的文件夹中，该文件夹应位于 Windows Sidebar/Gadgets 文件夹内。

一个 HTML 文件可以是一个简单的 HTML 文件，包含一些文本和高度：200px；宽度：130px；以适应小工具窗口的大小。

一个名为 Gadget.xml 的 XML 文件（清单）必须以以下格式与 HTML 文件放在同一个文件夹中

Tag 描述
<name> 小工具在小工具选择框中显示的名称
<author> 编写小工具的人的姓名，作者
<copyright> 版权信息，包括姓名和版权日期
<description> 小工具的描述及其功能
<icon> 图标文件的名称，显示在小工具选择框中的图形
<code> 构成您小工具的 HTML 文件的名称
<website> 与小工具关联的网站

更多信息请访问此链接。

这里没什么高深的，小工具的名称“每日呆伯特”如上所示，命名空间主要是为了对多个小工具进行分组（保留供将来使用），您可以在这里写“mynamespace”。MinPlatformVersion。必需。预期值为“1.0”。

您有 icon.png，它将显示在下面的“添加小工具”窗口中，以及 logo.png，它将显示在“添加小工具”窗口右下角的版权部分附近。dragicon.png 将在小工具被拖到“添加小工具”窗口内时使用。基本类型给出了您在边栏中拥有的应用程序类型，这里我们有 HTML。

“权限”控制小工具中的权限量。如果您想通过小工具访问网页，则需要“完全”权限。通过这两个文件，您可以在边栏中部署和测试您的小工具。<permission> 标签和 <type> 标签将在未来版本的小工具开发中更具灵活性。

通常一个小工具会包含这些文件

小工具清单 定义小工具属性的 XML 文件，包括名称、图标和描述
HTML 文件 定义小工具的核心代码
HTML 设置文件 公开小工具设置供用户更改
图像、脚本和样式表 用于 HTML
图标 用于小工具选择器

这是架构概述

Architecture overview

您可以在此处获取更多详细信息。

话虽如此，现在让我们根据最初的“每日呆伯特”想法来构建我们的小工具。有关边栏清单元素的更多信息也可以在此处找到。

使用的图片

当您创建边栏小工具时，您可能需要注意的重要事项之一是外观和感觉。

图标 拖动图标 关于表单 Logo 背景

这些是用于小工具的图像。

获取 RSS Feed

一旦您的小工具图像准备就绪，我创建了一个 HTML 文件 main.html 和一个 gadget.xml 文件，配置如下。HTML 文件将有五个“DIV”元素来获取 feed 数据。

小工具的 Feed

我们有一个 URL，我们使用 MSXML2.XMLHTTP 对象（Ajax 的核心）调用它，直到 feed 加载完成。这是实现此功能的魔法 JavaScript 代码

function getRSS() {
    loading.innerText = "Connecting...";                    
    rssObj = new ActiveXObject("Msxml2.XMLHTTP");
    rssObj.open("GET", "http://feeds.feedburner.com/tapestrydilbert", true);
    rssObj.onreadystatechange = function() {
        if (rssObj.readyState === 4) {
            if (rssObj.status === 200) {    
                loading.innerText = "";                
                rssXML = rssObj.responseXML;
                page = 0;
                parseRSS();
                if (chkConn) { clearInterval(chkConn); }
            } else {
                var chkConn;
                loading.innerText = "Unable to connect...";                
                chkConn = setInterval(getRSS, 30 * 60000);
            }
        } else {
            loading.innerText = "Connecting...";
        }
    }    
    rssObj.send(null);
}

现在我们有了 feed，我们需要从 feed 中的图像创建弹出窗口。这是实现此功能的 parseRSS 函数

当您点击一个标准 feed 的工作日时，它会显示如下，而周日剪辑则有所不同。

function parseRSS(page) {
    if (!page) { page = 0; }
    start = page * 5;
    end = (page * 5) + 5;
    rssItems = rssXML.getElementsByTagName("item");
    rssTitle = null; rssAuthors = null; rssSummary = null; rssLink = null;
    
    if (end > rssItems.length)
    {
    end = rssItems.length
    }
    for (i=start; i<end; /> rssItems.length)
        {
        }
        else
        {
        rssTitle = rssItems[i].firstChild.text;
        rssSummary = rssItems[i].getElementsByTagName("description"); 
        rssSummary = rssSummary[0].text;
        var position_http=rssSummary.indexOf('http');
        var position_gif=rssSummary.indexOf('.gif');
        var position_jpg=rssSummary.indexOf('.jpg');
        var position_img =0;
        System.Gadget.Flyout.file = "DilbertFlyout.html";
        
        if (position_gif >0)
        {
        position_img=position_gif-position_http;
        }
        else
        {
        position_img=position_jpg-position_http;
        }
        rssItem= Mid(rssSummary,position_http,position_img + 4);
        
        cell = i - (page * 5);
        document.getElementById("cell" + (cell)).innerHTML = '

<div onclick="showFlyout(\'' + rssItem + '\');" align="center">      '
                             + Mid(rssTitle,10,25) + '
</div>
';//'+ cell + '::' + i + '::' + page + '::' + start + '::' + end + '
        document.getElementById("cell" + (cell)).title = 
                                                 "Click to show/hide";
        }
    }
}

我们所做的是检查并解析 feed 描述标签中的图像字符串，并相应地设置弹出窗口的大小。周日漫画是 JPEG 格式，而普通工作日图像是 GIF 格式，尺寸如上所示。一旦您有了 feed 和图像 URL，您就调用一个函数来在弹出窗口中创建 Dilbert。

function BuildDilbertOfTheDay()
{
    try
        {
        document.write('<"+System.Gadget.Settings.read(sURL)+" />');
        }
        catch(e)
        {
        }   
}

有关弹出窗口的更多信息，请此处。

要调整弹出窗口的大小，我们需要在 flyout.html 的 Body Onload 事件中添加一个小的 onload 函数

function startUpPage() {
 //Resize the page
 document.body.style.width 
                     = System.Gadget.document.parentWindow.myWidthVariable;
 document.body.style.height 
                     = System.Gadget.document.parentWindow.myHeightVariable;
}

每日呆伯特运行中：周日漫画片段

参考文献

历史

  • 2007 年 1 月 31 日：首次发布
  • 2007 年 2 月 5 日：小幅修订
  • 2007 年 2 月 6 日：修订内容
  • 2007 年 2 月 11 日：与 Scott Adams 讨论后添加免责声明
  • 2007 年 2 月 15 日：修复了 Rama Krishna Vavilala 报告的 Dockhide 错误

感谢

感谢您一路阅读！希望您觉得这篇文章有用，如果您觉得有用，请给我投票/评论，并请多保重。

© . All rights reserved.