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

创建数据库驱动的 Vista Gadget

Bryan Sachdeva
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.27/5 (5投票s)

2007年12月10日

CPOL

7分钟阅读

viewsIcon

67434

downloadIcon

1191

本文演示了如何创建可以从数据库中提取数据的自动刷新 Vista 侧边栏小工具。

Screenshot -

引言

创建 Vista 小工具并不像我想象的那么简单。此外，一开始使用数据库来生成小工具内容似乎也不可能。但当然，技术没有限制，所以我写了这篇文章来演示如何做到这一点。下面的代码将引导您完成基本小工具的设置。然后，它将添加数据库驱动的组件，使其能够拉取数据并显示它。

我使用的数据库是 Sybase iAnywhere 的 SQL Anywhere 10。要访问数据库，小工具会发出 HTTP 请求，这对于 SQL Anywhere 来说很容易做到，因为它有一个内置的 HTTP 服务器，允许将 SQL 查询公开为 Web 服务。您可以在此处免费下载 SQL Anywhere 的开发者版。

下面的源代码和解释将指导您创建本文附带的演示小工具。基本上，该小工具会从 SQL Anywhere 10 附带的示例数据库中提取数据，并显示实时数据库统计信息以及“Customers”表中的数据列表。

背景

Windows Vista 侧边栏小工具是一种用户友好、高度图形化的实用程序或“小部件”，允许用户查看正在运行的应用程序的关键信息。数据库驱动的解决方案可以使用小工具来显示存储在数据库中的重要应用程序信息。例如，您可以创建一个小型通知小工具来通知用户某些数据库更改，或收集数据库统计信息以进行性能监控。

运行演示小工具

要运行演示，请先将文件解压缩到一个文件夹。

通过运行以下命令启动 SQL Anywhere 10 演示数据库

> dbeng10 -n SidebarDemo "%SQLANYSAMP10%"\demo.db -xs http(port=8888)

然后，通过从解压缩的文件夹位置运行以下命令来安装脚本和 Web 服务

> dbisql -c "ENG=SidebarDemo;UID=dba;PWD=sql" setup.sql

最后，双击“sqlanywhere10.gadget”文件以安装和加载演示小工具。

创建基本侧边栏小工具

小工具不过是一个微型 HTML 页面。华丽的外观是通过透明图像（PNG 或 GIF）、CSS 样式和 JavaScript 功能实现的。微软在此处提供了有关如何入门的详细信息。但我只会重述您需要的基本知识。

清单文件

首先，您需要设置您的清单 XML 文件，该文件基本上只是为侧边栏描述小工具，并提供用户在安装小工具之前可以看到的信息。清单文件 **必须** 命名为“gadget.xml”。

以下是 gadget.xml 文件所需的所有内容。请注意，我们正在从 <host><base src="..."> 标记链接到 gadget.html。

<?xml version="1.0" encoding="utf-8"?>
<gadget>
  <name>Your Gadget Title Here</name>
  <namespace>windows.sdk</namespace>
  <version>1.0.0.0</version>
  <author name="Your Name Here">
    <info url="www.YourWebSiteHere.com" />
  </author>
  <copyright>Your Copyright Here</copyright>
  <description>Your Description Here.</description>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="gadget.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

HTML 文件

接下来，您需要实际定义 HTML 文件。HTML 格式通过 CSS 实现，功能通过 JavaScript 实现。请记住，微软创建了一个 XML 命名空间“g”，它公开了一些有用的标记。即“background”、“image”和“text”标记。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>SQL Anywhere 10 Sidebar Demo</title>
        <script type="text/javascript" src="gadget.js"></script>
        <link type="text/css" rel="Stylesheet" href="gadget.css" />
    </head>
    <body onload="loadMain()">
        <g:background src="img/gadget.png">
            <div class="content">
                <div class="title">Database Stats</div>
                   <div id="stats">
                </div>
                <div class="title">Customer List</div>
                <div id="data">
                </div>
                <div class="nav">
                    <table class="navbar">
                        <tr>
                            <td>
                                <img id="upButton" src="img/buttonUp_Off.png" 
                                 alt="Previous Page" class="button" onclick="pageUp()" />
                            </td>
                            <td id="page">
                                0/0
                            </td>
                            <td>
                                <img id="downButton" src="img/buttonDown_Off.png"
                                  alt="Next Page" class="button" onclick="pageDown()" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </g:background>
    </body>
</html>

需要注意的关键点是

  • 指向“gadget.css”样式表的链接，<link type="text/css" rel="Stylesheet" href="gadget.css" />。
  • 指向 gadget.js JavaScript 文件的链接，<script type="text/javascript" src="gadget.js"></script>。
  • 使用 <g:background src="img/gadget.png"> 标记将“gadget.png”设置为背景。
  • 三次调用 JavaScript 函数：onload="loadMain()"、onclick="pageUp()" 和 onclick="pageDown()"。

接下来，您需要查看 CSS 格式。我将只介绍其中重要的部分

body 是定义小工具宽度和高度的地方。这些是正常显示小工具的 **必需** 项。您还应该将边距设置为 0，这样就不会有任何奇怪的边框。

body

{

    margin: 0 0 0 0;
    
    width: 120px;
    
    height: 240px;
    
}

content 类是定义小工具内容边距的地方。如果您使用背景图片，这会很有用。

重要提示

您可能会想，为什么我会有这个 content div，而没有直接将边距放在 body 中。这是因为背景是一个标签，它也会受到边距的约束。因此，内容应该具有特定的边距，位于背景之上。

.content
{
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 25px;
}

最后，我们将完成 JavaScript 文件。这是赋予小工具功能的部分。我将只介绍用于实际从数据库检索数据的代码。

全局变量说明

var statsRequest; //The XMLHTTP request for the db stats



var dataRequest; //The XMLHTTP request for the db data



var numpages = 0; //The number of pages of data retrieved



var currentpage = 0; //The current page in view



var resultsperpage = 4; //The number of data rows per page to show

由于 onload="loadMain()" 设置在 HTML 文件中，因此它将在小工具加载时调用此函数。

function loadMain()
{
    displayStats();
    displayData();
}

这将调用两个显示函数。我将只介绍数据库统计信息函数，因为数据库数据函数几乎相同。将调用以下函数。请注意 setTimeout("displayStats()", 500); 调用，这会导致此函数每 500 毫秒自动重新调用一次。这就是实现小工具自动刷新的方法。JavaScript 将每 500 毫秒不断调用此函数。您可以根据需要设置此刷新时间。

function displayStats()

{

  var url = "https://:8888/SidebarDemoStats";

  statsRequest = new ActiveXObject("Microsoft.XMLHTTP");

  statsRequest.onreadystatechange = writeStats;

  statsRequest.open("GET", url, true);

  statsRequest.send(null);
  setTimeout("displayStats()", 500);

}

唯一需要做的就是创建一个 XMLHTTP 请求，该请求将从指定 URL 检索 HTML 输出。为了在所有情况下都保持小工具的响应性，您应该将 statsRequest.open() 的第三个参数设置为 true。这将使请求对象在非阻塞异步模式下运行。您会看到 writeStats() 被指定为请求状态更改时要调用的函数。

function writeStats()
{
    if(statsRequest.readyState == 4)
    {
        if(statsRequest.status == 200)
        {
            document.getElementById('stats').innerHTML = "<table id='statsTable'
               class='data'>" + statsRequest.responseText + "</table>";
        }
    }
}

一旦请求状态为“OK”，您所需要做的就是将 innerHTML 设置为所请求 HTML 的值。

创建数据库 Web 服务以提供 HTML

如上所示，JavaScript 将尝试从指定的 URL 拉取数据。因此，您需要确保当小工具向该 URL 提交 HTTP 请求时，确实有一些 HTML 被返回。幸运的是，SQL Anywhere 10 会为您完成所有工作，因此您只需编写一些 SQL 语句来返回数据，它将处理其余部分。

在查询编辑器中连接到“demo”数据库后，运行 SQL 脚本 setup.sql。我将重点介绍该脚本在数据库数据检索方面的作用。用于设置数据库统计信息检索部分的脚本几乎相同。

CREATE PROCEDURE "DBA"."GetSidebarDemoData"()

  RESULT (html_doc XML)
  BEGIN
    DECLARE datacursor CURSOR FOR SELECT "CompanyName" FROM "GROUPO"."Customers"
        ORDER BY "CompanyName";

    DECLARE html LONG VARCHAR;
    DECLARE company LONG VARCHAR;

    SET html = '';

    CALL dbo.sa_set_http_header( 'Content-Type', 'text/html' );

    OPEN datacursor;
    lp: LOOP

      IF SQLCODE <> 0 THEN LEAVE lp END IF;
      FETCH NEXT datacursor INTO company;
      SET html = HTML_DECODE( XMLCONCAT( html, '<tr><td>' + company + '</tr></td>' ) );

    END LOOP;
    CLOSE datacursor;

    SELECT HTML_DECODE( XMLCONCAT(html) );
  END

该脚本所做的就是创建一个存储过程。在您的过程中，打开一个 cursor 来遍历您的 SELECT 语句。在迭代游标时，使用 XMLCONCAT 过程将结果作为 XML（或在此情况下为 HTML）标记返回。另外，使用 HTML_DECODE 过程清理任何非 HTML 符号。

最后，您需要做的就是将存储过程转换为 Web 服务。这只需一个 SQL 语句即可完成

CREATE SERVICE "SidebarDemoData" TYPE 'RAW' AUTHORIZATION OFF USER "DBA" AS CALL 
    GetSidebarDemoData();

提交您的更改。现在您只需要部署小工具。

部署您的 Gadget

首先要做的是确保您的数据库正在运行 HTTP 侦听器。您可以通过在运行 SQL Anywhere 10 数据库时指定以下启动选项来做到这一点。您可以根据需要设置端口，只需确保它与 JavaScript 文件中之前指定的 URL 中使用的端口相对应。

> dbeng10.exe yourdb.db -xs http(port=8888)

-xs http(port=8888) 是实现神奇效果的部分。基本上，它告诉数据库引擎绑定到端口 8888 并侦听请求。当收到请求时，将根据关联的 SQL 语句或存储过程生成响应。

要安装您的小工具，只需将其复制到 C:\Users\YourUserName\AppData\Local\Microsoft\Windows Sidebar\Gadgets。

或者，只需将所有内容打包成一个 zip 文件，然后将文件重命名为 *.gadget。双击它，它将自动安装和加载小工具！

关注点

尽管目标只是创建一个数据库驱动的 Vista 小工具，但（至少对我来说）已经很清楚，SQL Anywhere 10 的 Web 服务功能为开发人员提供了一个强大的平台，用于任何类型的应用程序的数据库支持。我建议在此处阅读有关其产品的更多信息。

© . All rights reserved.