SQL Server2008的安装,SQLServer2008的安装......
2023-02-22 273 安装
亲自动手开发WIN7边侧栏小工具应用程序
来源：互联网
2023-02-21 17:04:20 430
Windows7的小工具不仅能美化桌面环境，而且还具备许多的特色功能，可以用它来查询天气、航班、信息、时间、股票......这些小工具给我们带来美好的体验的同时，也丰富了娱乐生活。那么，我们自己该如何开发这类美观实用的小工具吗？下面笔者就以一个简易天气预报程序的开发过程为例，与大家共享此类程序开发的方法和经验。
工具/原料
- Windows Vista 或 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>
在"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; }
在"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() {}
在"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 ©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>
制作三个名称分别为"icon.png"、"dragicon.png"和"logo.png"的图形文件，拷贝到"MyWeather.Gadget"目录下。其中各个文件的尺寸如图所示。
将"MyWeather.Gadget"文件夹拷贝到"%系统根目录%Program Files/Windows Sidebar/Gadgets/"目录下。注意：此步操作需要管理员权限。然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，界面应该如下图所示。
设置界面的开发
在"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>
为了实现"设置界面"与"程序主页面"之间的信息交换，需要编写脚本语言。在"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);
}
修改"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/"目录下。注意：此步操作需要管理员权限。然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，点击小工具当中的"选项"按钮，界面应该如下图所示。
"飞出窗体"的设计
在"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>
修改主页面的代码，加入脚本实现对"飞出窗体"的显示控制。其主页面的代码在修改后为：
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>
修改"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/"目录下。注意：此步操作需要管理员权限。然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，点击小工具当中的"选项"按钮，然后双击小工具界面下方的文本，如果一切顺利，界面应该如下图所示。
美化窗体
创建名称分别为"background1.png"、"background2.png"、"FObg1.png"和"FObg2.png"的图片文件，并拷贝到images文件夹目录下，其大小如图如下，用于实现小工具的自定义皮肤效果。
修心"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/"目录下。注意：此步操作需要管理员权限。然后右击桌面，选择"小工具"，在弹出的"百宝箱"界面中选择"简易天气预报程序"小工具，并拖动到桌面的任意位置，如果一切顺利的话，点击小工具当中的"选项"按钮，然后双击"尺寸"按钮，如果一切顺利，界面应该如下图所示。
注意事项
安装或复制文件时需要管理员权限
设计Gadget应遵守的原则：在有效的空间内保持其有效性;
还有一个要注意的地方，小工具的页面和文件必须是utf-8编码字符集,如果是gb2312可能会出现乱码
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：win7如何把游戏全屏并且去除黑边 下一篇：WIN7如何显示出文件的扩展名和后缀名
相关文章
