一个简单的 Windows Vista/7 小工具，用于预览 CodeProject 的精选文章
5.00/5 (27投票s)
使用 HTML/CSS/JavaScript/Ajax 创建一个简单轻巧的 Windows Vista/7 侧边栏桌面小工具
编者按
本文是系列文章之一，旨在展示 CodeProject 基础杂项工具和 API 的开发，这些工具和 API 可以轻松方便地用于离线文章编辑和预览、显示会员的声誉统计、使用 CodeProject 的搜索引擎查找读者感兴趣主题的文章等。本文介绍的 Windows Vista/7 侧边栏小工具是最新的网络应用程序，可用于预览 CodeProject 网站上由其会员和贡献者发布的精选内容。希望以下小工具对广大读者和为 CodeProject 网站贡献和阅读文章的会员非常有益。本文和上传代码的另一个重要目的是演示如何以创建上述小工具为例，轻松创建和部署 Windows Vista/7 侧边栏小工具。
引言
“小工具是轻量级的 HTML 和脚本应用程序，它们能够从各种来源（例如本地应用程序和控件，或网站和服务）获取和呈现信息或功能。具有网页制作经验的开发人员会发现创建小工具的过程非常熟悉...”
- Microsoft 开发人员网络 (MSDN)：为 Windows Vista/7 侧边栏开发小工具
在本文中，我们将介绍一个简单轻巧的 Windows Vista/7 桌面小工具的实现，该小工具允许预览在 CodeProject 主页上发布和宣布的精选文章。以下小工具将在用户指定的时间间隔内自动刷新，以呈现当前在 CodeProject 主网页上展示的那些新的精选文章。使用此小工具可以让用户及时了解 CodeProject 网站上发布的最新 CodeProject 精选文章，就像用户使用常规网络浏览器手动打开 CodeProject 主页一样。
此外，以下小工具提供了一项功能，可能对为 CodeProject 网站贡献文章的 CodeProject 会员非常有用。特别是，当会员曾经发布的一篇精选文章目前在 CodeProject 主网页上宣布时，小工具会通过播放通知声音或延迟显示文章公告来提醒。
在讨论过程中，我们将仔细研究一些基本方面，例如使用 HTML/CSS 标记语言创建小工具运行时在桌面侧边栏的小工具窗口中呈现的核心小工具主网页。特别是，我们将解释如何使用 HTML 和 CSS 样式来编写核心小工具主网页的基本布局。此外，我们还将深入探讨网络应用程序开发的一些重要主题，例如通过使用 DHTML/JavaScript 语言实现基本小工具功能，包括协调动态响应小工具行为的事件处理机制，用于下载和检索 CodeProject 主网页内容的 Ajax 请求，以及使用 JavaScript 的正则表达式 `RegExp` 对象、字符串操作函数和其他解析机制（例如 DOM - 文档对象模型）来从加载的主网页中提取有关精选文章的特定数据或以编程方式更新小工具的 HTML 文档内容，使用计时器在特定时间间隔内提供小工具动态刷新其呈现的内容等。
特别是，我们将演示如何维护核心小工具的主网页，该网页具有特定的布局，其中呈现精选文章公告。同时，我们将特别关注一些基本主题，例如设计小工具的核心网页，使用 CSS 样式表为核心小工具主网页 HTML 文档中使用的某些 HTML 元素提供属性值。
为了提供所讨论小工具的基本功能，我们将探讨如何实现用 JavaScript 编写的许多函数，这些函数将执行诸如渲染核心小工具主网页、加载 CodeProject 主网页内容以及使用正则表达式和 DOM 以编程方式检索和解析它们、处理事件以提供基本小工具的动态行为和功能（例如在特定时间间隔内刷新小工具窗口）、使用 JavaScript 的随机数生成器和数学函数随机选择当前精选文章所属的 CodeProject 网站类别、当特定 CodeProject 会员贡献的精选文章展出时触发声音通知等任务。
此外，我们还将花一些时间讨论创建小工具的设置对话框，该对话框允许通过设置刷新间隔的超时（以秒为单位）、用于通知目的的 CodeProject 成员身份名称来个性化使用以下小工具。此外，我们还将讨论 Windows 7 侧边栏小工具开发的各个方面，例如创建小工具的可安装包、使用各种内置和外部开发工具来执行小工具主脚本调试等。
背景
此时，让我们彻底讨论开发过程的基本步骤，该过程基于使用各种脚本语言，如 HTML/CSS 和 JavaScript，以及为此目的使用 Microsoft UI 开发工具。
创建项目
本文最开始要讨论的第一个初始方面是“从头”创建一个新项目，该项目包含在 Windows Vista/7 侧边栏桌面应用程序下提供小工具基本外观和功能所需的所有必要文件。
具体来说，最开始，我们应该在本地 PC 上的任何位置创建一个简单的目录，并将其命名为，例如 `CodeProject_FeaturedNotifier`。在这个目录中，我们只是打算创建以下子目录和文件集。
要在项目目录中创建的子目录列表
- ./css - 包含小工具 HTML 文档（例如 main.html 和 settings.html）的 CSS 样式表文件的子目录
- ./js - 包含提供小工具基本功能的特定脚本的子目录
- ./images - 包含在小工具主 HTML 文档中呈现的图像的子目录
- ./sounds - 包含小工具使用时播放的各种声音的子目录
小工具项目文件列表
- ./main.html - 核心小工具主网页
- ./settings.html - 在设置对话框窗口中显示的小工具主设置网页
- ./gadget.xml - 侧边栏应用程序访问和解析的小工具主配置文件
- ./css/gadget.css - 小工具主网页 main.html 加载的主 CSS 样式表文件
- ./css/settings.css - 在 settings.html 布局中使用的 CSS 样式表文件
- ./css/Main.min.css - 小工具加载的 CodeProject 主网页 CSS 样式表的本地副本
- ./js/main.js - 包含实现基本小工具功能的函数的 JavaScript 文件
- ./js/settings.js - 包含用 JavaScript 编写的用于管理设置的函数的 JavaScript 文件
- ./images/logo468x60.png - 包含在小工具主网页顶部呈现的 CodeProject 标志的图像
- ./images/logo64x64.png - 包含小工具图标的图像
- ./sounds/notify.wav - 当会员的特色文章发布时播放的通知声音 wav 文件
使用 HTML/CSS 的小工具主网页布局
正如我们上面在本文引言中已经讨论过的，Windows 侧边栏小工具的主要构建块是主网页（例如，main.html），它基本上包含在小工具窗口中呈现的布局。更具体地说，在这种特定情况下，我们实际上不会为此目的实现我们自己的自定义布局。相反，我们将使用小工具从原始 CodeProject 主网页加载的现有 HTML 文档。
此外，为此目的，我们需要下载并使用位于 https://codeproject.global.ssl.fastly.net/App_Themes/CodeProject/Css/Main.min.css?dt=2.8.170713.1 文件的相应 CSS 样式表。在这种情况下，我们不是在小工具主网页加载时每次都从该文件下载此 CSS 样式表，而是旨在手动下载此文件并通过调整布局中几个元素的特定属性值来修改其内容，以确保所需 HTML 内容在所讨论的小工具窗口中正确呈现。
以下 HTML 源代码说明了小工具的主网页布局。
main.html
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<title>CodeProject's Featured Article Gadget</title>
<link type="text/css" rel="stylesheet" href="./css/gadget.css">
<link type="text/css" rel="stylesheet" href="./css/Main.min.css">
<script src="./js/main.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
</head>
<body class="cpfa_gadget" onload="getFeaturedArticle(1);">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%; height: 40px">
<a href="<a href="https://codeproject.org.cn/">
https://codeproject.org.cn/</a>" target="_blank">
<img src="./images/logo468x60.png" style="width: 100%; height: 100%;"></a>
</td>
</tr>
<tr>
<td><div id="featured-article" style="display: block;
width: auto; height: auto;"></div></td>
</tr>
<tr><td align="center">
<span id="navigate"><a><p style="color:#6600ff;">
<b>BROWSE THIS ARTICLE!<b></p></a></span></div>
</td></tr>
</table>
</body>
</html>
./css/gadget.css
.cpfa_gadget{ margin: 0; width: 338px; height: 175px;
font-family: verdana; font-weight: bold; font-size: 20px; }
./css/Main.min.css: https://codeproject.global.ssl.fastly.net/App_Themes/CodeProject/Css/Main.min.css?dt=2.8.170713.1
可下载版本和本地版本的 Main.min.css 文件之间的主要区别在于，某些页面元素（例如字体大小和布局尺寸）的属性值已修改，以在小工具窗口中提供正确的文件内容呈现。
正如您可能从上面列出的代码中注意到的那样，小工具的主网页 main.html 与任何使用常规网络浏览器加载的普通网页非常相似。它通常包含指定元数据（例如内容类型和字符集）的 meta 标签，一个或多个指向本地 CSS 样式表和脚本文件的外部链接，文档的正文部分，我们在其中通过添加特定的 `
另一行相应地包含一个使用 `
最后一行的单元格用于渲染一个锚标签 ``，用于使用外部浏览器轻松导航到 CodeProject 网站上当前发布的文章网页。
此外，`
` 开始标签还包含事件处理属性 `onload="getFeaturedArticle(1);"`，该属性用于调用用 JavaScript 编写的特定例程 `getFeaturedArticle(1);`，该例程实际上在小工具窗口中呈现小工具的内容。此外，此时，除了小工具主页，我们还将讨论另一个 HTML 文档，它用作小工具设置对话框窗口布局。此文档与小工具主页位于同一目录中，根据 Windows Vista/7 侧边栏小工具开发模式，它有一个标准的保留名称，例如 settings.html。
settings.html
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<link href="./css/settings.css" rel="stylesheet" type="text/css" />
<script src="./js/settings.js"
type="text/javascript" language="javascript"></script>
<title>CodeProject's Settings</title>
</head>
<body>
<b>Interval:</b>
<select name="interval">
<option value="5">5</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="60">60</option>
</select> secs
<br/><b>Member's Name (e.g. "John Smith"):</b>
<br/><input name="member" class="member"
type="text" maxlength="75" />
<br/><b>Autoreview:</b><input name="autoreview"
type="checkbox" maxlength="75" />
</body>
</html>
./css/settings.css
.member{ margin: 0; width: 260px; }
body { margin: 0; width:260px; height:120px; }
settings.html 文档通常包含布局或通过使用特定的 HTML 标签（例如 `
除了构成所讨论小工具的特定 HTML 文档外，我们还使用位于小工具主项目根目录的 css 子目录中的多个 CSS 样式表。这些文件基本上包括：
- ./css/gadget.css - 包含小工具主网页的单一样式。
- ./css/settings.css - 包含在设置对话框窗口中呈现的设置 HTML 文档的样式。
- ./css/Main.min.css - 包含从 CodeProject 网站外部加载的主页片段的样式。此文件通常需要手动下载并移植到小工具项目中。
使用 JavaScript/AJAX 实现小工具的基本功能
除了网页开发指南之外，此时我们还将讨论如何通过创建用 JavaScript 编写的特定脚本来实施小工具的基本功能，这些脚本协调实现以下小工具的动态行为和响应的基本功能。
在开始之前，让我们再次简要回顾一下上面列出的 main.html 文件中包含的 HTML 文档。正如我们已经知道的，核心小工具主网页的 `
` 标签具有 `onload="getFeaturedArticle(1);"` 事件处理程序作为属性指定。文档加载事件通常在小工具主网页加载且就绪状态更改为“完成”时触发和处理。在这种情况下，当用户将小工具添加到侧边栏时，其主网页在本地加载并呈现在小工具窗口中。这通常会导致以下事件被触发并由执行的特定函数处理（例如，`getFeaturedArticle(1)`）。更具体地说，在这种情况下，我们最初调用 ./js/main.js 脚本文件中实现的 `getFeaturedArticle(cat_id)` 函数，该函数执行大部分工作来动态加载和渲染小工具的主网页内容。
var connection_id = 0;
function getFeaturedArticle(cat_id) {
var xhttp = new XMLHttpRequest();
var timeout_interval = parseInt(System.Gadget.Settings.read("interval"));
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var cpfa_contents = this.responseText.match(
new RegExp('<div class="feature-article">' +
'(.*)' + '</div>', "gm")).join();
document.getElementById("featured-article").innerHTML = cpfa_contents;
var cpfa_div = getElementByClassName("div", "thumbnail");
var cpfa_title = getElementByClassName("div", "title");
var cpfa_url = 'https://codeproject.org.cn' +
cpfa_div.childNodes.item(0).href.
substring(cpfa_div.childNodes.item(0).href.indexOf("/Articles"));
document.getElementById("navigate").childNodes.item(0).href = cpfa_url;
cpfa_div.childNodes.item(0).removeAttribute("href");
cpfa_title.childNodes.item(0).removeAttribute("href");
var author_name = System.Gadget.Settings.read("author_name");
if (author_name != "" && cpfa_contents.indexOf(author_name) > -1)
{
clearTimeout(connection_id);
System.Sound.playSound("./sounds/notify.wav");
if (System.Gadget.Settings.read("autoreview") == true)
window.location.href = cpfa_url;
connection_id = window.setTimeout(function() { getFeaturedArticle(1); },
timeout_interval * 1000 * ((timeout_interval > 5) ? 2 : 5));
}
}
}
xhttp.open("GET", 'https://codeproject.org.cn/?cat='+cat_id, true);
xhttp.send();
var cpfa_cats = new Array(1,2,9,10,18,22,23,24,25,26,27,28);
connection_id = window.setTimeout(function() { getFeaturedArticle(cpfa_cats[Math.
floor(Math.random() * cpfa_cats.length) + 1]); }, timeout_interval * 1000);
}
当执行以下函数时，它通常会向 CodeProject 网站执行 Ajax 请求以加载其主页。这通常通过使用声明的 `XMLHttpRequest` 或 `MSXML2.XMLHTTP.3.0` 对象来完成。特别是要加载 CodeProject 主网页内容，我们调用 `XMLHttpRequest.open(method, url, async)` 或 `XMLHttpRequest.send()` 的两个方法分别创建 HTTP 请求并将其分派到 Web 服务器。`XMLHttpRequest.open(method, url, async)` 方法通常接受三个主要参数作为其参数，包括添加到要发送的 HTTP 头部的 HTTP 方法“GET”或“POST”，要加载的网页地址的精确 URL 字符串，以及一个参数，其值指示我们是否要向服务器发送同步或异步请求。
在这种情况下，我们正在使用 JavaScript 的 `string` 拼接运算符来构造包含要加载页面 URL 的完整 `string`。我们通常使用作为 `getFeaturedArticle(cat_id)` 函数参数传递的 `cat_id` 变量的值。此外，我们使用 HTTP 方法“`GET`”并向 CodeProject Web 服务器执行异步请求。在通过调用 `send` 方法分派适当的 HTTP 请求后，我们将从 CodeProject 网站检索加载的主页的 HTML 内容。为此，我们实际上需要实现一个匿名回调函数，该函数将在 HTTP 请求完成时处理 `onreadystatechange` 事件。
通过实现以下回调函数，我们实际上创建了一个执行以下任务的机制。当 `onreadystatechange` 事件触发并调用特定回调时，我们实际上会检查加载文档的就绪状态是否“完成”以及 HTTP 状态码是否等于成功（代码：200）。如果是，我们将从 `XMLHttpRequest` 对象的 `xhttp.responseText` 属性获取加载的内容。
让我们预先提醒一下，在这种情况下，我们通常可以使用 `XMLHttpRequest` 对象的另一个稍微不同的属性 `xhttp.responseXML` 来简化解析加载内容的过程，通过访问 HTML 元素的 DOM 对象。然而，我们不能这样做，因为 CodeProject 网络服务器中设置并使用的 CORS 跨域 HTTP 请求策略违规通常禁止并阻止在 CodeProject 网站之外的资源中将 HTML 文档解析为 XML。
这就是为什么，为了解析和提取加载的 HTML 内容中的数据，我们转而使用 JavaScript 的正则表达式，特别是 `RegExp` 通用对象和 `match` 方法，它允许使用诸如 `
var cpfa_contents = this.responseText.match(
new RegExp('<div class="feature-article">' + '(.*)' + '</div>', "gm")).join();
既然我们已经通过执行 Ajax 请求检索了代表特色文章的 CodeProject 主网页内容，我们的目标是在核心小工具主网页中呈现以下内容。为此，我们显然需要访问文档对象并调用 `getElementById` 方法以获取小工具主网页中 `
` 范围内的对象，我们将在其中呈现先前检索到的特色文章内容。特别是，我们将使用此对象的 `innerHTML` 属性，通过简单地将 `cpfa_contents` 变量的值分配给以下属性，来动态地将以下内容添加到以下 `document.getElementById("featured-article").innerHTML = cpfa_contents;
在处理从 CodeProject 主网页加载的特色文章的 HTML 内容时，我们实际上需要提取位于特定 `
从另一方面看，另一个类似的问题是，侧边栏桌面应用程序与传统的 IE 网页浏览器不同，它使用现有最小化 beta 版本的 WebBrowser ActiveX 对象来渲染核心小工具的网页，这实际上导致侧边栏应用程序不支持常规浏览器中使用的许多 JavaScript 功能。例如，与功能齐全的浏览器不同，侧边栏桌面应用程序不支持 `getElementsByClassName(...)` 方法。
要通过类名获取特定元素的对象，我们必须实现我们自己的自定义 `getElementByClassName` 函数，它允许基于使用另一个当前受支持的 `getElementsByTagName` JavaScript DOM 函数来获取此类对象。
function getElementByClassName(tag_name, class_name) {
var object = document.getElementsByTagName(tag_name);
for (var index = 0; index < object.length; index++)
if (object[index].className == class_name)
return object[index];
}
在这种情况下，我们正在获取每个标签的对象数组，其名称指定为该函数的第一个参数，并通过遍历以下对象数组来执行简单的线性搜索，找到那些具有类名值分配给第二个函数参数的特定标签对象。一旦找到这样的对象，函数会立即返回其值。
在所讨论的 JavaScript 代码中，我们通常会两次调用以下 `getElementByClassName(...)` 函数，以分别获取类名等于“`thumbnail`”和“`title`”的 `div` 标签的特定对象。
var cpfa_div = getElementByClassName("div", "thumbnail");
var cpfa_title = getElementByClassName("div", "title");
在我们获取了这些对象并将其分配给 `cpfa_div` 和 `cpfa_title` 变量之后，我们正在提取这两个 `div` 标签内部的两个锚标签的 `href` 属性值。`href` 属性的值包含当前发布的精选文章的 URL。
稍后，通过使用这些值，我们将使用字符串连接函数（包括 `indexOf(...)` 函数，用于定位要解析的 URL 字符串中以“`/Article`”子字符串开头的片段的索引）以及 `substring(...)` 函数，提取从 `indexOf(...)` 函数返回的位置开始的 URL 字符串，从而构建一个包含以下文章地址的完整 URL 字符串。
正如我们已经知道的，分配给 `string` 的 href 属性的原始值包含错误的 URL 地址，例如，以“file://....”开头。这导致当前发布的精选文章无法使用外部网络浏览器进行导航。
var cpfa_url = 'https://codeproject.org.cn' + cpfa_div.childNodes.item(0).href.
substring(cpfa_div.childNodes.item(0).href.indexOf("/Articles"));
在这种情况下，我们使用之前获得的 `cpfa_div` 对象并访问 `childNodes` 属性以调用 `item(0)` 方法，该方法允许获取特定 `div` 标签部分内第一个也是唯一一个子锚标签的对象。之后，我们通常使用包含分配给锚标签特定 `href` 属性的 URL 字符串的 `href` 属性值。然后，我们定位并提取子字符串并将其附加到包含 CodeProject 主网页 URL 地址的 `string`。最后，通过这样做，我们为当前特色文章获取一个有效的 URL 字符串并将其分配给 `cpfa_url` 变量。
稍后，我们将 `cpfa_url` 变量的值赋给 `id="navigate"` 的锚标签的 `href` 属性，用于在小工具主网页底部显示带有文本“`浏览此文章`”的链接。
document.getElementById("navigate").childNodes.item(0).href = cpfa_url;
此外，为了移除不可用的链接，我们需要通过执行以下代码来移除 HTML 片段中特定锚标签的 `href` 属性。
cpfa_div.childNodes.item(0).removeAttribute("href");
cpfa_title.childNodes.item(0).removeAttribute("href");
正如我们已经讨论过的，以下小工具通常会在特定时间间隔内更新时显示不同的精选文章。为此，我们实际上需要通过将其用作 `window.setTimout` JavaScript 函数的回调参数来递归调用相同的 `getFeaturedArticle` 函数。这个通用函数通常在特定间隔过去后执行 `getFeaturedArticle`。对 `getFeaturedArticle` 的递归调用提供了实时小工具内容的更新。为了确保我们在每次小工具刷新后都渲染一篇新的精选文章，我们将实现并使用 CodeProject 文章类别的随机选择。为此，我们实际上需要声明并使用一个单独的数组，其中包含的每个项目都对应于一个特定的网站类别 ID。实际上，为了做到这一点，我们将使用 JavaScript `Math.floor()` 和 `Math.random()` 函数来生成类别 ID 数组中项目的索引值。这样，我们将在每次函数调用时选择一个不同的类别 ID 值并将其作为 `getFeaturedArticle` 函数的参数传递。然后，该值将附加到用作 `XMLHttpRequest.open` 方法参数的 URL 字符串中，正如已经讨论过的。
与 `window.setTimeout` 函数一起使用的另一个参数值是小工具设置中通过调用以下 Windows 小工具 API 函数读取的超时整数值。
var timeout_interval = parseInt(System.Gadget.Settings.read("interval"));
我想要关注的另一个重要方面是所创建小工具的通知功能实现。这通常可以通过使用相同的字符串操作函数（例如 `indexOf(...)`）来定位和提取当前特色文章作者姓名的数据来实现。要获取作者姓名字符串值，我们需要使用上面显示的相同 Windows 小工具 API 函数，特别是要检索 `author_name` 设置属性的值。
从那时起，我们再检查一下 `author_name` 属性值是否已设置，并且可以在正在渲染的精选文章公告文本中找到。如果是，我们清除 `window.setTimeout` 函数使用的当前超时值，使用此函数调用时返回的 `connection_id` 变量的值。此外，我们使用适当的 JavaScript 内置多媒体函数 `System.Sound.playSound("./sounds/notify.wav");` 播放包含在 ./sounds/notify.wav 文件中的通知声音。之后，我们通过执行上述类似步骤来检查 `autopreview` 选项是否已设置。如果是，我们将 `window.location.href` 的值设置为当前展出的精选文章的 URL 字符串，该字符串存储在相同的 `cpfa_url` 变量中。最后，我们修改超时间隔参数的值，以延迟显示由具有特定昵称的成员发布的精选文章，并再次调用 `window.setTimeout` 函数，这会导致对 `getFeaturedArticle` 函数的递归调用。在这种情况下，我们使用此函数的单个参数的初始值等于 `1`。这意味着，此时，精选文章的渲染过程将从 `id` 值等于 `1` 的类别重新开始，如下所示。
var author_name = System.Gadget.Settings.read("author_name");
if (author_name != "" && cpfa_contents.indexOf(author_name) > -1)
{
clearTimeout(connection_id);
System.Sound.playSound("./sounds/notify.wav");
if (System.Gadget.Settings.read("autoreview") == true)
window.location.href = cpfa_url;
connection_id = window.setTimeout(function() { getFeaturedArticle(1); },
timeout_interval * 1000 * ((timeout_interval > 5) ? 2 : 5));
}
最后，我们即将讨论的小工具开发最后一个主题是创建适当的脚本和许多函数，用于检索或设置设置参数的值，这些参数个性化所用小工具的整体外观和行为。
为此，我们必须创建在 settings.html 文档中加载和使用的 settings.js 文件。在以下文件中，我们实现了两个函数，包括一个同样处理 `onreadystatechange` 事件的函数，以及另一个分配给 `System.Gadget.onSettingsClosing` 属性的匿名回调函数。第一个函数用于读取每个用户定义的设置属性的值，并将其分配给 settings.html 文档中显示这些值的特定控件，当设置对话框窗口打开时。第二个函数在设置对话框窗口即将关闭或通过调用 `System.Gadget.Settings.write` API 函数保存这些设置参数值时执行，以处理触发的事件。
document.onreadystatechange = function()
{
if (document.readyState=="complete")
{
member.value = System.Gadget.Settings.read("author_name");
interval.selectedIndex = System.Gadget.Settings.read("timeout");
autoreview.checked = System.Gadget.Settings.read("autoreview");
}
}
System.Gadget.onSettingsClosing = function(event)
{
if (event.closeAction == event.Action.commit)
{
System.Gadget.Settings.write("author_name", member.value);
System.Gadget.Settings.write("timeout", interval.selectedIndex);
System.Gadget.Settings.write("autoreview", autoreview.checked);
System.Gadget.Settings.write("interval",
interval.options[interval.selectedIndex].value);
event.cancel = false;
}
}
本文中还值得讨论的一个话题是创建小工具的“飞出窗口”，但不幸的是，以下讨论实际上超出了本文迄今为止讨论的重点和主题。所介绍和开发的小工具不打算包含任何可用于呈现有关所宣布精选文章的各种额外信息的飞出窗口。
创建小工具的配置 XML 脚本
开发所讨论的小工具的最后一个基本步骤，使以下小工具准备好安装和使用，是创建小工具的主要配置文件 gadget.xml，其内容如下：
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>CodeProject's Featured Articles</name>
<namespace>CodeProject.API</namespace>
<version>1.0.0.0</version>
<author name="Arthur V. Ratz">
<info url=
"<a href="https://codeproject.org.cn/script/Membership/View.aspx?mid=11760135">
https://codeproject.org.cn/script/Membership/View.aspx?mid=11760135</a>" />
<logo src="./images/logo64x64.png" />
</author>
<copyright>CPOL © Arthur V. Ratz</copyright>
<description>"Preview CodeProject's Featured Articles"</description>
<icons>
<icon height="64" width="64" src="./images/logo64x64.png" /></icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="./main.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
正如您可能从上面的 XML 代码中注意到的那样，以下配置脚本具有以下标签，每个标签对应于一个具有多个参数属性的特定实体。特别是，在此脚本中，我们使用了诸如 `
Using the Code
如何部署、安装、使用此项目
部署完整的小工具包
最后，在我们创建了所有项目文件作为小工具开发过程的结果之后，我们还需要创建一个包含正在开发的小工具的包。这通常可以通过使用例如支持创建 zip 档案的现有文件压缩器之一来完成。通过压缩项目父目录中的所有这些文件，我们最终将得到 CodeProject_FeaturedNotifier.zip 文件。现在，为了能够安装和使用小工具，我们实际上只需将以下档案文件重命名为 `CodeProject_FeaturedNotifier.gadget`。此后，要安装新创建的小工具，我们必须双击以下文件并在特定对话框提示时确认安装。最后，安装的小工具将出现在桌面的侧边栏中。
要探索和深入研究作为小工具项目一部分的源代码，只需导航到其他子目录，例如根目录、css、js、images 和 sounds。
安装小工具就绪
要使用讨论中的小工具，只需下载 CodeProject_FeaturedNotifier.zip 存档文件并导航到 CodeProject_FeaturedNotifier\installer 目录，然后运行小工具包（例如，`CodeProject_FeaturedNotifier.gadget`）。这将在 Windows 侧边栏桌面应用程序中安装以下小工具，并使其在桌面上可见。请注意，安装的 Windows Vista/7 侧边栏小工具位于：
%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\CodeProject_FeaturedNotifier.gadget
调试指南
此外，当小工具已添加到侧边栏并使用 Microsoft Visual Studio 调试器运行时，您可以尝试调试以下源代码。为此，在 IE 网页浏览器设置中，Internet Explorer 11\工具\Internet 选项下，取消选中两个复选框：禁用脚本调试 (Internet Explorer) 和 禁用脚本调试 (其他)：
之后，启动 Microsoft Visual Studio，导航到 Microsoft Visual Studio\调试 菜单并切换 附加到进程 选项。最后，将出现一个对话框窗口，我们需要在该窗口中找到并指定正在运行的侧边栏进程。
选择侧边栏进程后，脚本调试即将开始。要执行实际调试，我们需要导航到 Visual Studio 解决方案资源管理器的左窗格，以找到我们的 gadget 源文件进行调试。通过这样做，gadget 的脚本内容将显示在 Visual Studio 的编辑器中，这允许例如设置调试断点或使用自动窗口或监视窗口检查特定变量的值。
或者，我们可以使用 IE 或其他网络浏览器内置的本机开发工具来实现类似目的。为此，只需导航到 工具\F12 开发人员工具 选项，即可预览 HTML 文档的 DOM 结构或启动脚本调试过程。
关注点
我创建 Windows Vista/7 侧边栏小工具只是为了好玩和满足我自己的需求，但它也可能对 CodeProject.com 其他贡献各种文章的会员有用，以及对包括企业家和经验丰富的 IT 专业人士在内的读者群体有用，他们热衷于阅读 CodeProject 网站上发布的文章。
反馈
我鼓励所有阅读和审阅过本文的人向我发送任何反馈，包括小工具的错误报告、您的特别感谢、希望使用更好的小工具或代码、各种评论、投票等。读者可以通过在下面的文章讨论论坛提交他们的帖子来联系我。
就这些，各位！
历史
- 2017 年 7 月 28 日 - 发布第一版修订（讨论小工具基本功能）