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

与 Gadget Sidebar 进行网络连接

drew.perkins
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.75/5 (4投票s)

2007年3月31日

3分钟阅读

viewsIcon

65832

downloadIcon

1167

此小工具可轻松即时访问多台计算机上的共享网络文件夹，并通过侧边栏小工具提供简化的网络信息。还包括一个侧边栏，可在使用小工具和快捷方式时提高速度。

Screenshot - flyout.png

引言

当我第一次使用 Vista 时，我看到了那些小工具，并立刻爱上了即时访问的操作。使用我的小工具，它将多个快捷方式合并到一个小包中，并显著加快了我的计算机使用时间。这个小工具最适合局域网玩家和网络爱好者，因为这正是它的目标。另外请注意，在小工具中使用 VBScript，我不知道有多少人尝试过这样做，但我找到了一种使其有效工作的方法。

背景

当我开始这个项目时，我对 JavaScript 的能力了解有限。我试图尽可能地注释和简化我的代码，所以希望任何阅读我的文章的人都可以快速掌握这个 JavaScript 技巧。

由于我是一名年轻的程序员，我决定在这款小工具中注释几乎所有内容，因此应该相当容易理解。

您将学到什么

  1. 小工具中的 VBScript 用法
  2. Shell 命令
  3. 在小工具中使用多个文本文件，包括如何删除它们
  4. 代码组织
  5. 网络属性

使用代码

  • 根文件夹 (Network.gadget)
    • base.html
    • flyout.html
    • gadget.xml
    • settings.html
    • language (文件夹)
    • images (文件夹)

  • SubFolder (language)
    • css (文件夹)
    • vbs (文件夹)
    • javascript (文件夹)

  • SubSubFolder (css)
    • base.css
    • flyout.css
    • settings.css

  • SubSubFolder (vbs)
    • ipaddress.vbs
      (检索计算机名、IP 地址、域、Windows Vista 版本、windir 和当前用户)

  • SubSubFolder (javascript)
    • base.js
    • flyout.js
    • settings.js

首先创建简单的 XML 文档：gadget.xml

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
    <name>Network</name>
    <namespace>microsoft.windows</namespace>
    <version>1.0.0.0</version>
    <author name="Drew Perkins">
        <logo src="images/ntwk.png" />
        <info url="www.gallery.microsoft.com" />
    </author>
    <copyright></copyright>
    <description>Connect to any computer on your network from your sidebar.
    </description>
    <icons>
        <icon height="60" width="60" src="images/icon.png" />
    </icons>
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="base.html" />
            <permissions>full</permissions>
            <platform minPlatformVersion="0.3" />
        </host>
    </hosts>
</gadget>

现在，每当程序首次运行时，它将使用 VBScript 在 C:/Windows/networkvbs.txt 中创建一个文本文件。现在小工具将不会自动识别该文件，因此信息将显示为未定义。重新启动小工具，然后您就完成了（注意：在 Vista 的早期版本中，当我开发时，它没有这样做，但在最终的侧边栏构建中，小工具需要重新加载。将进行进一步的更新，以尝试解决此问题。）
base.html、base.css 和 ipaddress.vbs 都与此小工具的主启动相关。

弹出窗口

这个小工具的弹出窗口经过了极大的增强，可以实现小工具的快速操作。文件关联：flyout.html、flyout.css 和 flyout 图片文件夹。

<html>
<head>
    <title>Flyout</title>
    <link href="language/css/flyout.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="language/js/flyout.js" 
                    type="text/javascript"></script>
</head>
<body>
    <div id="flyout">
    <img id="hostComp" src="images/ntwk.png" align="left" border="0" 
                hspace="0" vspace="0" onclick="winHome()"/>
    <!--Host Computer Information-->
    <div id="flyoutContents" style="width: 735px; height: 50px">
            <div id="text"></div>
            <div id="text1"></div>
            <div id="text2"></div>
    </div>
    <!--Links and Picture Links for flyout-->
    <img id="hostComp" src="images/flyout/mydocuments.png" 
        align="left" float="left" border="0" hspace="0" 
        onclick="usrMydocuments()"/>
    <img id="hostComp" src="images/flyout/music.png" 
        align="left" float="left" border="0" hspace="0" 
        onclick="usrMusic()"/>
    <div>
            <ul id="linkOptions">
                <li>
                    <font color="#000000">&nbsp;&nbsp; </font>
                    <a id="enabledLanLink" href="javascript:void(0);">
                    <font color="#000000">Enable LAN</font></a>
                </li>
                <li>
                    <img id="hostComp0" src="images/flyout/pictures.png" 
                align="left" float="left" border="0" 
                hspace="0" onclick="usrPictures()"/>
                    <img id="hostComp1" src="images/flyout/documents.png" 
                align="left" float="left" border="0" 
                hspace="0" onclick="usrDocuments()"/>
                <font color="#000000">&nbsp;&nbsp; </font>
                    <a id="disabledLanLink" href="javascript:void(0);">
                    <font color="#000000">Disable LAN</font></a>
                </li>
                <li>
                    <font color="#000000">&nbsp;&nbsp; </font>
                    <a id="workgroupFolderLink" href="javascript:void(0);">
                    <font color="#000000">Network</font></a>
                </li>
            </ul>
    </div>
    </div>
</body>
</html>

Screenshot - flyout.png

我认为将小工具弹出窗口代码插入此教程是有价值的，因为代码很复杂，值得仔细研究。通过按小工具右上角的控制面板图标来访问弹出窗口。从图片中可以看到，显示的信息是计算机名、IP 地址和域。此外，弹出窗口的左上角是可点击的网络图片，它将带您进入 Vista 主目录（C:/）。左下角的小图标也是可点击的，允许您即时跳转到我的文档、我的音乐、我的图片和文档。前两个链接（启用 LAN/禁用 LAN）将释放 IP 地址或续订 IP 地址。这是我唯一能找到的阻止互联网流量的方法，并且无法完全禁用该设备。最后一个链接将使用户转到本地区域连接设备。

设置

小工具设置允许您添加网络计算机的 IP 地址，以便您可以查看该个人的共享文件夹。

<html>
<head>
<link rel="stylesheet" href="language/css/settings.css" title="docked" />
<script src="language/js/settings.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<table width="100%">
<!--Settings TextBox Values-->
  </tr>
      <td>
      <input id="compA"  type="text"/>
      <input id="Submit1" type="submit" value="Add" 
        style="width: 53px; height: 22px; font-size:x-small;" 
        onclick="return addA(compA.value)"/>
      <input id="compB"  type="text"/>
      <input id="Submit2" type="submit" value="Add" 
        style="width: 53px; height: 22px; font-size:x-small;" 
        onclick="return addB(compB.value)"/>
      <input id="compC"  type="text"/>
      <input id="Submit3" type="submit" value="Add" 
        style="width: 53px; height: 22px; font-size:x-small;" 
        onclick="return addC(compC.value)"/>
      </td>
  </tr>
<tr>
    <td>
    <font size="1">Ex: 192.168.0.100&nbsp;&nbsp;(Max: 3)</font>
    </td>
</tr>
</table>
</div>
</body>
</html>

Screenshot - settings.png

三个简单的 HTML 表单框允许用户将 IP 地址输入小工具，然后添加到文本文件中。该文本文件随后被小工具读取并在“网络计算机”位置显示。

结论

我在 MSDN 上花费了无数个小时来学习如何编写小工具和使用 JavaScript，最终想出了如何制作一个非常有用的工具。这个小工具起初似乎是不可能的，因为 Microsoft 仍在修复其 Windows 侧边栏中 VBScript 的错误，但我找到了绕过该问题的方法，并成功完成了它。我一直在不同的房子使用不同的网络，所以这个项目对我来说似乎很完美。我希望大家喜欢我的第一个小工具项目和教程，这个项目以后肯定会有更新。

© . All rights reserved.