自己动手开发制作Win7桌面边侧栏小工具

来源： 系统大全 2012/12/18 11:43

Windows7系统桌面的小工具不仅能美化桌面环境，而且还具备许多的特色功能，可以用它来查询天气、航班、信息、时间、股票......这些小工具还带来美好的体验的同时，也丰富了娱乐生活。

那么自己该如何开发这类美观实用的win7桌面小工具呢？
下面系统大全就分享以一个简易天气预报程序的开发过程为例，与大家共享此类程序开发的方法和技巧。

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

制作过程需要用到的相关程序：

Windows 7 操作系
HTML、CSS、JavaScript、XML

主页面开发

新建一个文件夹，取名为"MyWeather.Gadget",并在该文件夹下创建一个名称为"WeatherReport.html"的网页文件，该文件将作为主页面被显示，其对应的HTML代码如下：

<html>
<head>
  <title>我的天气小应用程序</title>
   <meta http-equiv="MSThemeCompatible" CONTENT="yes" />
   <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />

  <link type="text/css" href="css/myWeather.css" rel="Stylesheet" />   
  <script defer src="js/myWeather.js" language=javascript type="text/javascript"> </script>  
</head>
<body onload="SpecialRefresh()" scroll="no" unselectable="on">    
  <g:background id="myBackground"  >
   <span id="gadgetContent" >
    <iframe id="myiframe" name="myiframe"  src="http://tianqi.xixik.com/cframe/4" allowtransparency="true" width="130" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
 *加载天气预报控件失败*请检查网络连接情况*
          </iframe>
      </span>       
  </g:background>
  </body>
</html>

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧

 

在"MyWeather.Gadget"目录下创建一个名称为"CSS"的新文件夹，并创建名称为"MyWeather.css"的层叠样式表文件，该文件将用于设置主页面"WeatherReport.html"的显示效果，其对应代码如下：
body{ margin: 0;  width: 134px;  height:150px;  border:1px solid #000000;
  font-weight: bold; font-size:small; background-color:White;
  vertical-align:top; text-align: center;  font-size:14px;}
#gadgetContent { margin: 0px; width: 130px; height:120px;vertical-align: middle;
      text-align: center;  float:none;  display:inline-block;   }    
#mybackground{  height:150px;  }    
#author{  font-size:15px; border-top:2px solid #45ff00; background-color:White;
     padding:0px; width:130px; height:30px; float:none;

     margin:2px 1px 1px 1px;   position:relative; z-index:3;  }

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧[page]
 

在"MyWeather.Gadget"目录下创建一个名为"js"的文件夹，并在该文件夹下创建一个名称为"MyWeather.js"的脚本文件，该文件用于控制主页面文件"WeatherReport.html"的行为。其对应代码如下：

var times =1; //1 代表 1分钟
var shows = 10;  //1 代表显示一天的预报信息
var ReceverString;
var GadgetTime;

function loadMian()
{      
  System.Gadget.visibilityChanged = checkVisibility;
  System.Gadget.onDock = Dock;
  System.Gadget.onUndock = unDock;   
}

function SpecialRefresh() {
  loadMian();
 

  if (updateTimeInterval == "") times = 10 * 1000 * 10;
  else times = updateTimeInterval * 60 * 1000;

  GadgetTime = setTimeout("self.location.reload()", times);
}

function checkVisibility()
{
       var isVisible = System.Gadget.visible;

      if (!isVisible)
      {
          clearTimeout(GadgetTime);
      }  
}

function unDock() {}
function Dock() {}

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

在"MyWeather.Gadget"目录下创建一个名为"gadget.xml"的文件，该文件用于描述整个小工具程序的框架，其对应代码如下：

<?xml version="1.0" encoding="utf-8"?>
<gadget>
<name>简易天气预报程序</name>  <!-- 定义Gadget名称 -->
 <namespace>http://jingyan.baidu.com/user/nuc/expList?type=1></namespace>
 <!-- 定义Gadget的命名空间，与JS交互 -->
<version>1.0.1.0</version>  <!-- 版本信息 -->
<author name="feifeidown">  <!-- 作者信息 --> 
   <info url="http://jingyan.baidu.com/user/nuc/expList?type=1" />
   <!-- 作者网站的链接地址(4) -->
   <logo src="logo.png"/>  <!-- 作者的Logo信息(5) -->
</author>
<copyright>DIY易度空间 By &#169;feifeidown</copyright><!-- 版权信息 -->
<description>天气预报实例程序，用于实时观测当地的天气情况</description>
<!-- 功能描述信息 -->
 <icons>
   <icon height="48" width="48" src="icon.png"/>  <!-- 显示在小工具待选箱时的图标(8) -->
 </icons>
<hosts>
   <host name="sidabar">  <!--仅支持Sidebar-->
     <autoscaleDPI>
       <!--_locComment_text="{Locked}"-->true
     </autoscaleDPI>
     <base type="HTML" apiVersion="1.0.0" src="WeatherReport.html"/>
     <!-- type仅支持html;src用以指明主界面的HTML源文件 -->
     <permissions>full</permissions><!--目前仅可以设置Full-->
     <platform minPlatformVersion="1.0" />
     <defaultImage src="dragicon.png"/>
     <!-- 在从小工具备选箱用鼠标拖到Sidebar时所显示的Logo -->
   </host>
</hosts>
</gadget>

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 


制作三个名称分别为"icon.png"、"dragicon.png"和"logo.png"的图形文件。
拷贝到"MyWeather.Gadget"目录下。其中各个文件的尺寸如图所示。

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

将"MyWeather.Gadget"文件夹拷贝到"%系统根目录%Program Files/Windows Sidebar/Gadgets/"目录下。

注意：此步操作需要管理员权限。
然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，界面应该如下图所示。

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧[page]
 

设置界面的开发

在"MyWeather.Gadget"目录创建一个名为"settings.html"的文件，该文件用于显示"设置弹出对话框"，其对应代码如下：<html>
<title>Setting 设置窗体示例</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<style type="text/css">
     body{color:Fuchsia;   font-size:12px;  height:100px;
     width:380px;  margin:10px; }
</style>
<script language=javascript type="text/javascript" src="js/settings.js"></script> </head>
<body onload="InitSettings()">
       <span style="float:left; display:inline;">预报天数：</span>
       <input id="ShowDays" type="text" value="1"
           style="border:1px solid #0fee33; text-align:center; font-size:14px;color:Blue;" size=6/>天预报信息
       <br />
       <span style="float:left; display:inline;">更新频率：</span>
       <input id="UpdateTimes" type="text" value="10"
           style="border:1px solid #0fee33; font-size:14px; text-align:center; color:Blue;" size=6/>分钟更新一次数据
       <br />
       <span  style="color:Green; margin-left:10px; width:160px; text-align:center;" >该设置将会被提交给主页面</span>

</body>
</html>

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

为了实现"设置界面"与"程序主页面"之间的信息交换，需要编写脚本语言。
在"js"目录下创建一个名为"settings.js"的脚本文件，其对应代码如下：

function InitSettings()
{
   var showDs=System.Gadget.Settings.read("ShowDays");
   var updateTs =System.Gadget.Settings.read("UpdateTimes");
   if (showDs != "") ShowDays.innerText = showDs;
   if (updateTs != "") UpdateTimes.innerText = updateTs;

   System.Gadget.onSettingsClosing = SettingsClosing;
}

function SettingsClosing(event)
{
   if (event.closeAction == event.Action.commit)
   {
       saveSettings();
   }
   event.cancel = false;  //关闭设置
}

function saveSettings()
{

   var showDs = ShowDays.value;
   var updateTs = UpdateTimes.value;

   System.Gadget.Settings.write("ShowDays", showDs);
   System.Gadget.Settings.write("UpdateTimes", updateTs);
}

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

修改"myWeather.js"文件，在其中加入与"设置页面"进行信息交换的代码,在增加部分代码后其完整程序如下：

var times =1; //1 代表 1分钟
var shows = 10;  //1 代表显示一天的预报信息
var ReceverString;
var GadgetTime;

function loadMian()
{
     
   System.Gadget.visibilityChanged = checkVisibility;
   System.Gadget.onDock = Dock;
   System.Gadget.onUndock = unDock;
  
  
   //该句的设置将使“设置”按钮生效
   System.Gadget.settingsUI = "settings.html";
   System.Gadget.onSettingsClosed = settingsClosed;
}

function settingsClosed()
{
    clearTimeout(GadgetTime);
   GadgetTime=setTimeout("self.location.reload();", 100);
}

function SpecialRefresh() {
   loadMian();
   var updateTimeInterval = System.Gadget.Settings.read("UpdateTimes");
   var showDaysForDisp = System.Gadget.Settings.read("ShowDays");
   var ifv = parent.document.getElementById("myiframe");
   var gc = parent.document.getElementById("gadgetContent");

   if (updateTimeInterval == "") times = 10 * 1000 * 10;
   else times = updateTimeInterval * 60 * 1000;

   if (showDaysForDisp != "")
   {
       if (showDaysForDisp < 1) showDaysForDisp = 1;
       if (showDaysForDisp >7) showDaysForDisp = 7;
       if (parseInt(showDaysForDisp,10) == 1) gc.style.overflow = "hidden";
       else { gc.style.overflow = "auto"; }

       shows = (showDaysForDisp - 1) * 102 + 120;
   }
   else
   {
        gc.style.overflow = "hidden";
        shows = (shows - 1) * 102 + 120;
   }

    ifv.style.height = parseInt(shows, 10);
    checkDockState();
   GadgetTime = setTimeout("self.location.reload()", times);
}

function checkVisibility()
{
        var isVisible = System.Gadget.visible;      
     
       if (!isVisible)
       {
           clearTimeout(GadgetTime);
       }  
}


}
function unDock() {}
function Dock() {}

将"MyWeather.Gadget"文件夹拷贝到"%系统根目录%Program Files/Windows Sidebar/Gadgets/"目录下。注意：此步操作需要管理员权限。

然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，点击小工具当中的"选项"按钮，界面应该如下图所示。

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

"飞出窗体"的设计

在"MyWeather.Gadget"目录下创建一个名为"Flyout.html"的文件，该文件用于实现"飞出窗体"的显示，其对应代码如下：

<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
      <style type="text/css">
  body{   text-align:left;   height:120px; width:240px;  background-color:White;
          }
          #myFOBackGround{   height:100px; width:240px;}           
          #FOauthor{  font-size:16px;  width:240px; text-align:center;border-top:1px solid #22FF01;  display:block; }
          #weather_fo{ display:block; border:1px solid #34ef32; }
      </style>
<script src="js/myWeather.js" type="text/javascript" language=javascript></script>

</head>
  <body onload="changeThema()">
      <g:background id="myFOBackGround">           
              <iframe allowtransparency="true" id="weather_fo" src="http://tianqi.xixik.com/cframe/7" 
                   width="225" height="90" frameborder="0"
                   marginwidth="0" marginheight="0" scrolling="no" >
              </iframe>  
              <span id="FOauthor">*简易天气预报小工具*</span>              
      </g:background>
     
  </body>
</html>

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧[page]
 

修改主页面的代码，加入脚本实现对"飞出窗体"的显示控制。其主页面的代码在修改后为：

<html>
<head>
  <title>我的天气小应用程序</title>
   <meta http-equiv="MSThemeCompatible" CONTENT="yes" />
   <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />

  <link type="text/css" href="css/myWeather.css" rel="Stylesheet" />
 
  <script defer src="js/myWeather.js" language=javascript type="text/javascript"> </script>
 
</head>
<body onload="SpecialRefresh()" scroll="no" unselectable="on">    
  <g:background id="myBackground"  >
   <span id="gadgetContent" >
    <iframe id="myiframe" name="myiframe"  src="http://tianqi.xixik.com/cframe/4" allowtransparency="true"
                  width="130" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
 *加载天气预报控件失败*请检查网络连接情况*
          </iframe>
      </span>       
  </g:background>
  <span  id="author"  rows="1 " alt="双击打开扩展面板" ondblclick="showFlyout()"  >*By feifeidown*</span> 
</body>
</html>

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

修改"myWeather.js"脚本文件，加入对"飞出窗体"的控件部分，完成后其代码如下：

var times =1; //1 代表 1分钟
var shows = 10;  //1 代表显示一天的预报信息
var ReceverString;
var GadgetTime;

function loadMian()
{      
  System.Gadget.visibilityChanged = checkVisibility;
  System.Gadget.onDock = Dock;
  System.Gadget.onUndock = unDock;
  //该句的设置将使“设置”按钮生效
  System.Gadget.settingsUI = "settings.html";
  System.Gadget.onSettingsClosed = settingsClosed;

  System.Gadget.Flyout.file = "Flyout.html";
  System.Gadget.Flyout.onHide = FOonHide;
  System.Gadget.Flyout.onShow = FOonShow;
//    System.Gadget.Flyout.show = true; }

function settingsClosed()
{
   clearTimeout(GadgetTime);
  GadgetTime=setTimeout("self.location.reload();", 100);
}

function SpecialRefresh() {
  loadMian();
  var updateTimeInterval = System.Gadget.Settings.read("UpdateTimes");
  var showDaysForDisp = System.Gadget.Settings.read("ShowDays");
  var ifv = parent.document.getElementById("myiframe");
  var gc = parent.document.getElementById("gadgetContent");

  if (updateTimeInterval == "") times = 10 * 1000 * 10;
  else times = updateTimeInterval * 60 * 1000;

  if (showDaysForDisp != "")
  {
      if (showDaysForDisp < 1) showDaysForDisp = 1;
      if (showDaysForDisp >7) showDaysForDisp = 7;
      if (parseInt(showDaysForDisp,10) == 1) gc.style.overflow = "hidden";
      else { gc.style.overflow = "auto"; }

      shows = (showDaysForDisp - 1) * 102 + 120;
  }
  else
  {
       gc.style.overflow = "hidden";
       shows = (shows - 1) * 102 + 120;
  }

   ifv.style.height = parseInt(shows, 10);
   checkDockState();
  GadgetTime = setTimeout("self.location.reload()", times);
}

function checkVisibility()
{
       var isVisible = System.Gadget.visible;      
    
      if (!isVisible)
      {
          clearTimeout(GadgetTime);
      }  
}
function unDock() {}
function Dock() {}
function FOonHide()
{
  GadgetTime = setTimeout("self.location.reload()", 2000);
}

function FOonShow()
{
  if (System.Gadget.docked) {
      System.Gadget.Flyout.Document.parentWindow.weather_fo.style.backgroundColor = "Red";
  }
  else
  {
      System.Gadget.Flyout.Document.parentWindow.weather_fo.style.backgroundColor = "White";
  }
}

function showFlyout()
{
 
      stopTimer();
      System.Gadget.Flyout.show = true; 

}

function stopTimer() {
  if (GadgetTime) {
      clearInterval(GadgetTime);
  }
}

将"MyWeather.Gadget"文件夹拷贝到"%系统根目录%Program Files/Windows Sidebar/Gadgets/"目录下。注意：此步操作需要管理员权限。

然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，点击小工具当中的"选项"按钮，然后双击小工具界面下方的文本，如果一切顺利，界面应该如下图所示。

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

美化窗体

创建名称分别为"background1.png"、"background2.png"、"FObg1.png"和"FObg2.png"的图片文件。
并拷贝到images文件夹目录下，其大小如图如下，用于实现小工具的自定义皮肤效果。

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

修改"Myweather.js"脚本文件，加入对皮肤的设置控制代码，在加入部分代码后其最终完整代码如下：

var times =1; //1 代表 1分钟
var shows = 10;  //1 代表显示一天的预报信息
var ReceverString;
var GadgetTime;

function loadMian()
{
     
   System.Gadget.visibilityChanged = checkVisibility;
   System.Gadget.onDock = Dock;
   System.Gadget.onUndock = unDock;
  
   //该句的设置将使“设置”按钮生效
   System.Gadget.settingsUI = "settings.html";
   System.Gadget.onSettingsClosed = settingsClosed;

   System.Gadget.Flyout.file = "Flyout.html";
   System.Gadget.Flyout.onHide = FOonHide;
   System.Gadget.Flyout.onShow = FOonShow;
//    System.Gadget.Flyout.show = true;
}

function settingsClosed()
{
    clearTimeout(GadgetTime);
   GadgetTime=setTimeout("self.location.reload();", 100);
}

function SpecialRefresh() {
   loadMian();
   var updateTimeInterval = System.Gadget.Settings.read("UpdateTimes");
   var showDaysForDisp = System.Gadget.Settings.read("ShowDays");
   var ifv = parent.document.getElementById("myiframe");
   var gc = parent.document.getElementById("gadgetContent");

   if (updateTimeInterval == "") times = 10 * 1000 * 10;
   else times = updateTimeInterval * 60 * 1000;

   if (showDaysForDisp != "")
   {
       if (showDaysForDisp < 1) showDaysForDisp = 1;
       if (showDaysForDisp >7) showDaysForDisp = 7;
       if (parseInt(showDaysForDisp,10) == 1) gc.style.overflow = "hidden";
       else { gc.style.overflow = "auto"; }

       shows = (showDaysForDisp - 1) * 102 + 120;
   }
   else
   {
        gc.style.overflow = "hidden";
        shows = (shows - 1) * 102 + 120;
   }

    ifv.style.height = parseInt(shows, 10);
    checkDockState();
   GadgetTime = setTimeout("self.location.reload()", times);
}

function checkVisibility()
{
        var isVisible = System.Gadget.visible;      
     
       if (!isVisible)
       {
           clearTimeout(GadgetTime);
       }  
}

function checkDockState()
{
   if (System.Gadget.docked) {  Dock(); }
   else {  unDock(); }

}
function unDock() {
   var mybground = document.getElementById("myBackground");
   mybground.src = "url(images/background2.png)";
   author.style.color = "gray";
}
function Dock() {
   var mybground = document.getElementById("myBackground");
   mybground.src = "url(images/background1.png)";
   author.style.color = "red";
}

function FOonHide()
{
   GadgetTime = setTimeout("self.location.reload()", 2000);
}

function FOonShow()
{
   if (System.Gadget.docked) {
       System.Gadget.Flyout.Document.parentWindow.weather_fo.style.backgroundColor = "Red";
   }
   else
   {
       System.Gadget.Flyout.Document.parentWindow.weather_fo.style.backgroundColor = "White";
   }
}

function showFlyout()
{
       stopTimer();
       System.Gadget.Flyout.show = true; 

}

function stopTimer() {
   if (GadgetTime) {
       clearInterval(GadgetTime);
   }
}
function changeThema() {

   if (!System.Gadget.docked) {
       var pp = document.getElementById("FOauthor");
       var dd = document.getElementById("weather_fo");
       dd.style.backgroundImage = "url(images/FObg1.png)";
       pp.style.color = "Red";
       pp.style.backgroundColor = "Orange";
   }
   else {
       var pp = document.getElementById("FOauthor");
       var dd = document.getElementById("weather_fo");
       dd.style.backgroundImage = "url(images/FObg2.png)";
       pp.style.color = "Gray";
       pp.style.backgroundColor = "White";

   }

}

将"MyWeather.Gadget"文件夹拷贝到"%系统根目录%Program Files/Windows Sidebar/Gadgets/"目录下。注意：此步操作需要管理员权限。

然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，点击小工具当中的"选项"按钮，然后双击"尺寸"按钮，如果一切顺利，界面应该如下图所示。

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧

开发制作Win7桌面边侧栏小工具教程,开发制作Win7桌面边侧栏小工具技巧
 

注意事项：

安装或复制文件时需要管理员权限
设计Gadget应遵守的原则：在有效的空间内保持其有效性;
还有一个要注意的地方，小工具的页面和文件必须是utf-8编码字符集,如果是gb2312可能会出现乱码。

猜你喜欢

新闻资讯

装机必备

生活服务

现代都市人很多起床第一件事就是拿手机看最新的新闻资讯，看看今天最新的资讯内容，现在手机上各种新闻客户端有很多，如果今日头条，腾讯新闻，凤凰新闻，网易新闻等。

进入专区

安卓装机必备，一站式必装应用大全，为您精选好用的手机必装应用，自动为您推荐当下热门、好用的软件。安装精品应用更加方便快捷！

  • 必剪app 必剪
  • 饭团看书app 饭团看书
  • 饭团探书app 饭团探书
  • 卡通相机app 卡通相机
  • 盲盒大玩家app 盲盒大玩家
  • 多多计算器安卓版 多多计算器
  • 嘿市app 嘿市
  • 头像空间app 头像空间
进入专区

生活服务分类聚集的大量我们生活中平常用的软件，只要你想得到的基本通通有，欢迎使用！

  • 垃圾分类大师安卓版 垃圾分类大师
  • 标准商标查询安卓版 标准商标查询
  • 医学三基题库安卓版 医学三基题库
  • 天天看港剧安卓版 天天看港剧
  • 趣伴安卓版 趣伴
  • 日本换乘安卓版 日本换乘
  • 蘑菇影视安卓版 蘑菇影视
  • 影院通电影票安卓版 影院通电影票
进入专区

相关文章教程

用户评论

全部
//wap教程