Windows Vista 或 Windows 7 操作系统
HTML、CSS、JavaScript、XML
新建一个文件夹，取名为'MyWeather.Gadget',并在该文件夹下创建一个名称为'WeatherReport.html'的网页文件，该文件将作为主页面被显示，其对应的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'的文件，该文件用于描述整个小工具程序的框架，其对应代码如下：
制作三个名称分别为'icon.png'、'dragicon.png'和'logo.png'的图形文件，拷贝到'MyWeather.Gadget'目录下。其中各个文件的尺寸如图所示。
将'MyWeather.Gadget'文件夹拷贝到'%系统根目录%Program Files/Windows Sidebar/Gadgets/'目录下。注意：此步操作需要管理员权限。然后右击桌面，选择'小工具'，在弹出的'百宝箱'界面中选择'简易天气预报程序'小工具，并拖动到桌面的任意位置，如果一切顺利的话，界面应该如下图所示。
在'MyWeather.Gadget'目录创建一个名为'settings.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'的文件，该文件用于实现'飞出窗体'的显示，其对应代码如下：
修改主页面的代码，加入脚本实现对'飞出窗体'的显示控制。其主页面的代码在修改后为：
修改'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可能会出现乱码