親自動手開發WIN7邊側欄小工具應用程式?

Windows7的小工具不僅能美化桌面環境，而且還具備許多的特色功能，可以用它來查詢天氣、航班、資訊、時間、股票......這些小工具給我們帶來美好的體驗的同時，也豐富了娛樂生活。那麼，我們自己該如何開發這類美觀實用的小工具嗎？下面筆者就以一個簡易天氣預報程式的開發過程為例，與大家共享此類程式開發的方法和經驗。

工具/原料

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"的檔案，該檔案用於描述整個小工具程式的框架，其對應程式碼如下：

簡易天氣預報程式
;

1.0.1.0





DIY易度空間 By ©feifeidown
天氣預報例項程式，用於實時觀測當地的天氣情況







true



full

製作三個名稱分別為"icon.png"、"dragicon.png"和"logo.png"的圖形檔案，拷貝到"MyWeather.Gadget"目錄下。其中各個檔案的尺寸如圖所示。

將"MyWeather.Gadget"資料夾拷貝到"%系統根目錄%Program Files/Windows Sidebar/Gadgets/"目錄下。注意：此步操作需要管理員許可權。然後右擊桌面，選擇"小工具"，在彈出的"百寶箱"介面中選擇"簡易天氣預報程式"小工具，並拖動到桌面的任意位置，如果一切順利的話，介面應該如下圖所示。

設定介面的開發

在"MyWeather.Gadget"目錄建立一個名為"settings.html"的檔案，該檔案用於顯示"設定彈出對話方塊"，其對應程式碼如下：






預報天數：
style="border:1px solid #0fee33; text-align:center; font-size:14px;color:Blue;" size=6/>天預報資訊


更新頻率：
style="border:1px solid #0fee33; font-size:14px; text-align:center; color:Blue;" size=6/>分鐘更新一次資料


該設定將會被提交給主頁面

為了實現"設定介面"與"程式主頁面"之間的資訊交換，需要編寫指令碼語言。在"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"的檔案，該檔案用於實現"飛出窗體"的顯示，其對應程式碼如下：

*簡易天氣預報小工具*

修改主頁面的程式碼，加入指令碼實現對"飛出窗體"的顯示控制。其主頁面的程式碼在修改後為：

*By feifeidown*

修改"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可能會出現亂碼