MSDN Magazine > 首頁 > 所有期刊 > 2007 > August >  小工具: 自訂您的 Windows Vista 資訊看板小工具
小工具
自訂您的 Windows Vista 資訊看板小工具
Donavon West

本文探討:
  • 資訊看板小工具剖析
  • 程式設計及偵錯 JavaScript
  • 延伸顯示和設定
  • 當地語系化
本文使用技術:
Windows Vista、JavaScript
下載本文程式碼: SidebarGadget2007_08.exe (181 KB)
線上瀏覽程式碼
您近來可能聽過關於小工具一堆傳聞 — 這些都是您在 Windows Vista™ 桌面上看過的輕量型應用程式。這裡有 Microsoft 支援的三種不同類型的小工具。資訊看板小工具是在 Windows Vista 桌面上執行。網站小工具也很類似,但是是執行在 Live.com 和 Windows Live Spaces 網頁上。SideShow 小工具則是執行在像是膝上型電腦的次顯示器、遙控器和電腦鍵盤之類的裝置上。
在本文中,我將探索資訊看板小工具的主要組成部分,然後示範如何將這些元素組合在一起來建立範例小工具:用於 Windows Vista 資訊看板的 MSDN® Magazine Ticker。請注意我的焦點完全是放在開發 Windows Vista 資訊看板小工具上。因此,當用到「小工具」一詞時,我專門是指資訊看板小工具 (如果您有興趣開發資訊看板小工具,請參閱 2007 年 1 月號《MSDN Magzine》中 Jeffrey Richter 的文章)。

什麼是資訊看板小工具?
資訊看板小工具可作為功能強大且實用的小工具。因此您可能會對建立他們有多簡單而感到驚訝。事實上,如果您通曉 HTML、CSS 和 JavaScript (而我猜想您們當中有很多人對這些都已經很熟悉),您很快就能上手。
小工具最簡單的形式不過是由 HTML 檔案和 XML 定義檔案組成。不用說,大多數小工具還包含其他檔案,例如影像檔案 (PNG 和 JPG)、樣式表 (CSS),以及指令碼 (JavaScript 和 VBScript 原始程式檔)。所有的內容都是存放在 ZIP 檔案中,此檔案會以 .gadget 副檔名重新命名。如果您想要的話,還可以抓取一個線上小工具,以 .zip 副檔名將它重新命名,然後輕鬆地探索它的內容。我建議把這當作是探查其他小工具看它們是由什麼組成的好辦法。

XML 定義檔案
將小工具結合在一起的是 XML 定義檔案 (或資訊清單)。我不確定是否應該稱此檔案為資訊清單,因為它並不含小工具中所有檔案的連結,它只包含主要 HTML 檔案 (擁有與其他檔案的連結)、幾個圖示檔案和小工具作者的網站等的連結。
[圖 1] 顯示典型的基本架構 XML 定義檔案。如您所見,這是一個具有小工具基本項目的標準 XML 檔案。下面是您應該特別注意的項目清單:
<?xml version=”1.0” encoding=”utf-8” ?>
<gadget>
  <name>Gadget Name Here</name>
  <namespace>YourCompanyNameHere</namespace>
  <version>1.0.0.0</version>
  <author name=”Company Name Here”>
    <info url=”http://contoso.com” text=”Vist our Web site” />
    <logo src=”logo.png” />
  </author>
  <copyright>&#0169; 2007</copyright>
  <description>your gadget description</description>
  <icons>
    <icon width=”64” height=”64” src=”icon.png” />
  </icons>
  <hosts>
    <host name=”sidebar”>
      <base type=”HTML” apiVersion=”1.0.0” src=”gadget.html” />
      <permissions>full</permissions>
      <platform minPlatformVersion=”0.3” />
    </host>
  </hosts>
</gadget>

  • name:小工具的標題。
  • version:小工具的版本號碼。
  • author:您的名稱或貴公司的名稱。
  • info url:網站網址。
  • info text:網站的易記名稱。
  • logo src:公司標誌圖像檔的名稱。
  • copyright:著作權標示。
  • description:小工具的描述。
  • icon src:小工具的圖示影像檔名稱。
  • base src:小工具的主要 HTML 檔案名稱。
定義檔案中大多數的項目都是用於顯示圖庫中的小工具。其中一個真正功能性的項目是基本項目的 src 屬性 — 這會指向啟動小工具的 HTML 檔案。我把它當成練習,將此檔案命名為 gadget.html,但其實任何有效的檔名皆適用。

主要 HTML 檔案
小工具的實作不過是一個最大寬度為 130 像素的 HTML 網頁。雖然這很不容易察覺,但主要 HTML 檔案 (即 XML 定義檔案中參考的那一個) 實際上會載入 Internet Explorer® 7 視窗中。不用說,這個視窗周圍並沒有邊框,而且它的位置是由資訊看板控制,但是裡面的所有一切基本上是一個 Web 應用程式。跟使用標準網頁一樣,您可存取 DOM 和大部分的 API。這表示您可以利用 AJAX 技術,來建立動態 HTML 項目、截獲事件等等。所有這些動作我都會在帶您逐步完成建置範例小工具的過程中示範,另外還會進行其他動作。
您也可以使用資訊看板小工具物件模型的 API。這些 API 提供一種方法作為讓小工具與系統溝通的介面。例如,您可以讀取無線網路卡的訊號強度、播放音效檔,或是判斷 CPU 使用量。
當查看小工具的 HTML 時,您會發現它與您編寫標準網頁所用的 HTML 完全沒有差別。以下是我用來開始幾乎所有資訊看板小工具專案的 HTML 程式碼:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
   <title></title>
   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
   <link href=”style.css” rel=”stylesheet” type=”text/css” />
   <script src=”local.js” type=”text/javascript”></script>
   <script src=”gadget.js” type=”text/javascript”></script>
</head>
<body>
   <div id=”gadget” class=”gadget”></div>
</body>
</html>
在此處呈現的範例中,小工具所有的 HTML 都是從 gadget.js JavaScript 檔案內動態建立而成。您大可以包含主要 HTML 檔案中大部分的標記,但這樣一來還有什麼樂趣?
請注意我是使用 CSS 樣式表,這正是操控小工具外觀的推手。跟處理任何網頁一樣,樣式表是設計絕佳外觀小工具不可或缺的部分。因此當產生專業外觀的小工具時,有必要對 CSS 具備充分的了解。
我應該註明雖然開發小工具的主要 HTML 檔案完全跟建置要在線上部署的網頁一模一樣,但小工具實作有個重要的優勢。您不用擔心跨瀏覽器的問題,因為小工具始終會在 Internet Explorer 下執行,您可以仰賴對 Internet Explorer 功能的支援,像是原生 PNG alpha 支援,而不需要針對瀏覽器的不相容性而撰寫程式碼。
我開始開發資訊看板小工具時,我發現這項支援很令人振奮。漸漸地,我開始將這視為理所當然,而當我最近必須設計網頁時,我發現自己因為必須再度應付跨瀏覽器的問題而變得很不耐煩。

JavaScript
如果您打算在小工具內做些有趣的事,最好是重溫一下 JavaScript。您可以使用 Internet Explorer 7 支援的任何指令碼語言進行編碼,但是您會發現「網際網路」上絕大部分小工具範例都是以 JavaScript 寫成。
如果您曾用過 JavaScript,可能有聽過「小心 Eval (eval is evil)」這句話。如果沒聽過,趕快上網查查,我等您。
現在知道您為什麼絕對不應該使用 Eval,我要來修訂一下這條規則,外加一項您絕對不應該將 JavaScript 文字放入 HTML 的屬性內部,也不應傳遞字串到 setInterval 或 setTimeout。我說您絕對不應該將 JavaScript 文字放到 HTML 的屬性內部,這包括了主體 onload 屬性,因為它根 eval 陳述式一樣也是在內部解譯。
我肯定您們當中有人會說:「不用主體 onload?那程式碼要怎麼執行?」我建議您開始養成附加函式到視窗物件的 onload 事件的習慣。下面這段程式碼片段說明如何附加到 onload 和 onunload 事件:
function pageLoad() {
    window.detachEvent(“onload”, pageLoad);
    window.attachEvent(“onunload”, pageUnload);
    //page initalization here
}

function pageUnload() {
    window.detachEvent(“onload”, pageUnload);
    //gadget is closing, clean up
}

window.attachEvent(“onload”, pageLoad);
藉著使用這個方法,網頁載入後 (也就是當 DOM 完成時) 會馬上呼叫 pageLoad 函式。請注意我在 pageLoad 中所做的第一件事是卸離事件。為了避免記憶體遺漏,在 JavaScript 中自行善後向來是個好主意。
我接下來設定 onunload 事件讓它在小工具終結後被呼叫 — 當使用者關閉小工具或當資訊看板關閉時。再次強調,這麼做是為了釋放任何可能會導致記憶體遺漏的參考。這也是您儲存任何必要設定的最後機會。我在本文稍後會談到設定。
您可能已經注意到,我對撰寫良好簡潔的 JavaScript 有點一絲不茍,所以請容我再次強調這一點。我強烈建議您在部署之前「Lint」一下程式碼。這不僅可讓程式碼更簡潔,甚至可以在錯誤發生之前將它們連根拔除。
Lint 是當初為一項工具所取的名稱,這個工具會標示出 C 原始程式碼有問題的地方。它現在是適用於許多來源語言的通用詞。其中一個比較適用於 JavapScript 的 Lint 應用程式是稱為 JSLint 的免費線上工具 (可從 www.jslint.com 取得)。
2007 年五月號的《MSDN Magazine》中有篇關於 JavaScript 相當不錯的特刊,標題為<使用物件導向技術來建立進階 Web 應用程式>,由 Ray Djajadinata 所著。如果您還沒拜讀過的話,不妨參考看看。該文將不厭其煩地幫助您撰寫更完善的小工具。

停駐和浮動
當小工具緊貼放置在資訊看板中時,是被視為處於停駐狀態。一經拖曳到桌面時,便成為浮動或未停駐。如我先前所述,停駐小工具的最大寬度為 130 像素。未停駐的小工具在寬度方面則無限制,允許您設計擴充的檢視。您可以利用這個多出來的空間來提供更豐富的體驗 (Microsoft 建議您對於未停駐小工具,不要用超過 400 像素平方)。
[圖 2] 顯示了我的《MSDN Magazine》Ticker 小工具 (顯示最近一期的捲動型文章標題) 和氣象小工具 (隨 Windows Vista 一起發行) 的停駐和浮動兩種狀態。氣象小工具是小工具在浮動時提供更豐富體驗的最佳範例 — 它從只報告目前溫度發展到報告詳細的未來三天氣象預測。《MSDN Magazine》Ticker 小工具並沒有顯示任何其他資訊,它只會以較寬的格式展開顯示相同的資訊。
[圖 2] 停駐和浮動小工具 (按影像可放大)
請注意小工具 (無論是停駐或浮動) 有個未記載的最小高度,為 57 像素。設定此一最小值的原因很明顯:當小工具處於浮動狀態所在的工具列高度是 57 像素 (見 [圖 3])。
[圖 3]  
您可以透過 System.Gadget.docked 來查詢小工具的目前狀態。如果處於停駐,它會傳回 true,若為未停駐,則傳回 false。另外還有兩個您可以監視以判斷停駐狀態何時變更的事件,即 System.Gadget.onDock 和 System.Gadget.onUndock。
您不能直接從 onDocked 或 onUndocked 事件內變更 document.body 的類別,來變更小工具的高度、寬度或背景影像 (這與我原先預期的恰恰相反)。您反而必須特別為 body 項目設定 style 物件的屬性。若要變更背景影像,可使用 System.Gadget.background API 來設定背景影像的檔名。以下為範例:
// called when the docked state changes
function dockStateChanged() {
    if (System.Gadget.docked) {
        System.Gadget.background = “images/background.png”;
        document.body.style.width = “130px”;
    } else {
        System.Gadget.background = “images/background-undocked.png”;
        document.body.style.width = “230px”;
    }
}

延伸顯示
延伸顯示會將使用者介面延伸到小工具本身邊界以外的地方。您可以將此視窗隨意用於任何東西 (延伸視窗並沒有最大大小的限制)。隨 Windows Vista 一起發行的股票小工具便是使用延伸顯示的小工具的好例子。按一下股票匯致使視窗延伸到小工具的側邊,顯示該股票活動的圖表 (見 [圖 4])。Live Search 小工具也使用延伸顯示,顯示您輸入的查詢所得的搜尋結果。[圖 5] 顯示了《MSDN Magazine》Ticker 小工具的延伸顯示。請注意當標題被按下時,UI 會從停駐的小工具往外延伸,以顯示文章標題、描述和作者名稱。
[圖 4] 顯示延伸顯示的股票小工具 (按影像可放大)
[圖 5] 顯示延伸顯示的 Ticker 小工具 (按影像可放大)
請注意資訊看板小工具延伸顯示是系統強制回應 — 一次只能顯示一個。如果使用者在小工具 A 上按一下,會造成延伸顯示,然後在小工具 B 按一下,會導致另一個延伸顯示,而小工具 A 的延伸顯示會關閉起來。此外,當小工具失去焦點時,它的延伸顯示也會關閉。
延伸顯示 API 是從 System.Gadget.Flyout 物件公開的。延伸顯示是存留在一個與主要 HTML 視窗完全隔離的視窗 (有它自己的 DOM)。因此,您必須提供不同的延伸顯示 HTML 檔案,還有任何其他必要的支援檔案。延伸顯示檔案是藉由將 System.Gadget.Flyout.file 設為延伸顯示 HTML 檔案的名稱來指定。
有個 API 可供您用來加速主要和延伸視窗之間的通訊。System.Gadget.Flyout.document 會傳回延伸顯示視窗的 Document 物件。您可以從主要小工具視窗來使用此物件,在延伸視窗中動態產生 HTML。
另外也有可透過主要和延伸顯示兩種程式碼擷取的事件。這些事件包括 onShow 和 onHide,前者是在延伸顯示文件建立後馬上呼叫,而後者則是在延伸顯示文件終結後馬上呼叫。
您可以透過程式設計的方式顯示或隱藏延伸顯示,方法是將 System.Gadget.Flyout.show 分別設為 true 或 false。而讀取此值可告知您延伸顯示視窗的目前狀態。
請記住,您無法控制延伸顯示的位置。資訊看板會根據畫面項目和小工具本身的位置來決定位置。例如,延伸顯示可顯示在小工具的左方或右方,或甚至是下方。

選項對話方塊
選項對話方塊可讓您向使用者呈現小工具的偏好設定清單。使用者體驗可能是您最求之不得的。對話方塊可以像標準網頁一樣,內含選項按鈕、核取方塊和文字方塊。
使用者可以在小工具工具列上按一下扭轉圖示 (見 [圖 3]),這會在您將滑鼠停駐到小工具上時出現。當使用者開啟小工具的選項對話方塊時,資訊看板會取得小工具的快照,並將影像顯示成小圖示 (見 [圖 6])。
[圖 6] 選項對話方塊 
我要特別註明,這個對話方塊的名稱有點模擬兩可。當您在小工具上按一下滑鼠右鍵時,小工具 UI 會呈現一個功能表,把這稱為「選項」。然而,API 卻把這當作「設定」。
發現使用者設定是存放在約 1990 年的 INI 檔案而不是比較現代的 XML 檔案,讓我蠻驚訝的。所幸還有其他小工具 API 可以讀取和寫入設定,因此設定是存放在何處以及是怎麼存放的,對您和您的應用程式來說都無太大關係。
當建立選項 UI 時,有幾個重點要注意。對話方塊的使用者區域的寬度是限制為 300 像素的最大值。高度並無限制,但《Microsoft UX Guide for Windows Vista Gadgets》建議的最大寬度為 278 像是,而高度不超過 400 像素。如果您需要更多空間,或許應該建立索引標籤式對話方塊。我在本文中不會討論實作索引標籤式 UI 的方法,但是網路上有充裕的資源供您學習怎麼做。
您必須指示小工具來啟用選項圖示。這是透過將 System.Gadget.settingsUI 設為 HTML 檔案的名稱來完成,一般是位在指令碼的小工具初始化部份。您也需要設定回呼函式在選項對話方塊關閉時使用 (以便讓小工具讀取新的使用者喜好設定)。要這麼做,您可以將 System.Gadget.onSettingsClosed 設為處理常式的名稱,如此處所示:
System.Gadget.settingsUI = “settings.html”;
System.Gadget.onSettingsClosed = settingsClosed; 

function settingsClosed(p_event) {
    //OK clicked?
    if (p_event.closeAction == p_event.Action.commit) {
        //yes, read settings here
    }
}
從這個範例您可以看到,當處理常式被呼叫時,會傳遞事件物件給它 — 更具體的說,是 System.Gadget.Settings.ClosingEvent 事件物件。假如 ClosingEvent 物件的 closeAction 屬性包含認可值,就表示使用者已選取 [確定],而您應該讀取新設定。否則的話,會取消選項對話方塊,那您就可以略過不讀取喜好設定。

讀取與寫入設定
設定是使用 System.Gadget.Settings.write 或 System.Gadget.Settings.writeString 寫入。兩者當中都會傳遞機碼/數值組。
相反地,設定是以 System.Gadget.Settings.read 或 System.Gadget.Settings.readString 來讀取。兩種函式都接受機碼,並會傳回一值。如果機碼不存在 (譬如機碼從未被寫入),兩者會傳回一個未定義值。
JavaScript 並不是強型別語言,因此如果您使用寫入和讀取,資訊看本會嘗試進行型別轉換。假如您想要確定寫入和讀取的確切內容,可考慮使用 writeString and readString,因為這些會呈現字串。視資料的類型而定,您得判斷哪個方法最適用。

當地語系化
資訊看板小工具以「當地語系化資料夾」的形式支援當地語系化。每當資訊看板嘗試載入資產 (小工具資訊清單、樣式表、影像檔、JavaScript 檔案) 時,它會依下列順序搜尋資料夾中的檔案:
  • 完整地區設定 (en-us、es-us、ja-jp)
  • 地區設定的語言部份 (en、es、ja)
  • 小工具根資料夾
例如,若您執行的是美國版本的 Windows Vista,並且喜好設定是設為西班牙文,資訊看板會先查詢 es-us 資料夾。假如在該處找不到檔案,資訊看板便會搜尋 es 資料夾。最後,如果還是找不到檔案,資訊看板便會搜尋小工具根資料夾。
語言想當然爾是很重要,但為什麼地點也重要呢?地點對於某些小工具來說其實非常重要。舉氣象小工具為例,您可以在美國和英國向使用者顯示晴天一詞,但地點可判定您應該以華氏 (美國) 或攝氏 (英國) 來顯示溫度。
許多開發人員可能只支援英文的小工具,但要是地區設定對您來說很重要的話,我建議您將所有語言特定的字串和地點特定的變數放在一個稱為 local.js 的 JavaScript 檔案中,並將此檔案放在小工具根資料夾內。然後為每個要支援的地區設定建立一個資料夾,將翻譯好的 local.js 版本複製到它們個別的資料夾中。下面是代表 en-us 之根資料夾中的 local.js 檔案的範例:
var L_Hello = “Hello”;
var L_Degrees = 0;
\es-es 資料夾中相同的檔案看起來可能像這樣:
var L_Hello = “Hola”;
var L_Degrees = 1;
當您希望顯示 Hello 時,是使用 L_Hello 變數,而不是寫死的字串。而當查詢氣象摘要時,是使用 L_Degrees 來要求適當格式。這會產生適當的語言的問候詞,並根據使用者的喜好設定報告溫度。在您的主要 JavaScript 程式碼中,當想要使用字串來判斷溫度要用什麼表示時,可以這麼做:
element.innerHTML = L_Hello;
if (L_Degrees === 0) {
    //load the Fahrenheit feed
} else {
    //load the Celsius feed
}
如您所見,您的程式碼會根據資訊看板所載入的 local.js 檔案而產生不同的反應。很酷吧?
請注意,因為小工具根目錄中有英文 local.js,所以小工具對不支援的地區設定還是可以操作,儘管是以後援語言表示 (在本例中為英文)。在小工具的根資料夾中支援預設語言相當重要。如果您不提供預設語言,而有人使用小工具不支援的語言 (意指您未為之建立子資料夾的語言),小工具將顯示空白字串。

難道沒有警告和確認訊息嗎?
我們在網站上全都看過「無效輸入,請重試一次」警告和「刪除記錄,您確定嗎?」確認對話方塊。開發人員通常都想要顯示這類的資訊性訊息。
不過,資訊看板已停用這些 JavaScript 函式。使用快顯對話方塊有違 Windows Vista 針對資訊看板小工具所訂的 UX 指導方針。假如您仍覺得非使用快顯畫面不可,可模擬這些函式。
要這麼做,請先在 HTML 的 head 項目中插入一個簡單的行標籤:
<script src=”alert.vbs” type=”text/vbscript”></script>
然後建立一個檔案包含 [圖 7] 中所示的程式碼,並將之命名為 alert.vbs。您現在便能隨意繼續使用警告和確認訊息。
‘simulate JavaScript alert() function
sub alert(prompt)
    MsgBox prompt, 48 , “Sidebar Gadget”
end sub

‘simulate JavaScript confirm() function
function confirm(prompt)
    dim res
    res = MsgBox (prompt, 33, “Sidebar Gadget”)
    if res=1 then
        confirm = true
    else
        confirm = false
    end if
end function


偵錯
偵錯 JavaScript 一向都需要一些技巧。許多開發人員都訴諸於在程式碼中放置警告來顯示特定變數的值。不過這並不是俐落的解決辦法。比較妥善的方法牽涉到使用 Visual Studio® (或甚至是免費的 Visual Web Developer™ 2005 Express Edition)。
只要將偵錯工具陳述式放到程式碼中,每次碰到需要檢查變數值的地方,執行小工具就可以了。當 JavaScript 執行偵錯工具陳述式時,您應該會看到一個快顯畫面,詢問您是否要偵錯應用程式 (見 [圖 8])。選擇 [是] 可讓您瀏覽整個小工具環境,包括 DOM,並查看建立的任何變數值。小工具在當時基本上是處於凍結的狀態。
[圖 8] 您想要偵錯小工具嗎? (按影像可放大)
[圖 9] 顯示了一段偵錯的程式碼,當中 refreshRate 變數的值為 24。這類的偵錯威力超強。試過之後,您肯定不會回頭繼續在程式碼中到處放警告陳述式。請注意 JavaScript 偵錯在下一版 Visual Studio 產品代碼 "Orcas" 中已經過大幅改良。您可以在<Visual Web Developer Orcas 中的 JScript 偵錯>閱讀更多關於這些新功能的資訊,而且您可以從 msdn2.microsoft.com/aa700831 下載 "Orcas" Beta 1。
[圖 9] 在 Visual Studio 中偵錯小工具 (按影像可放大)

封裝小工具
建立封裝最簡單的方法是使用 Windows 檔案總管。選取組成小工具的檔案,按一下滑鼠右鍵,並選取 [傳送到] | [壓縮的 (zipped) 資料夾]。
您也可將小工具封裝成 CAB 檔案,這是 Microsoft 原生壓縮保存格式。只要產生 CAB 檔案然後以 .gadget 副檔案將它重新命名就可以了 (順帶一提,如果您曾試過以 .zip 副檔名來重新命名 .gadget 檔案的話,Windows 檔案總管會在您嘗試開啟此 ZIP 檔案時提出警告,所以請改試著以 .cab 副檔名來重新命名檔案)。
如果您想要以程式設計的方式來產生小工具的話,您有幾個不同的方法可用。在我的專案中,我建立了下面稱為 make.bat 的批次檔:
@echo off

rem ** remove/create a test gadget folder
rd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
    Gadgets\MSDNSample.gadget\” /s /q
md “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample.gadget\”

rem ** copy all of the files into test area
xcopy . “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
    Gadgets\MSDNSample.gadget\” /y /s /q /EXCLUDE:exclude.txt

cd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample\”
cabarc -r -p n “%HOMEPATH%\Documents\MSDNSample.gadget” *
這是使用 Cabarc.exe 公用程式來產生 CAB 檔案 (Cabarc.exe 是隨 Visual Studio 一同安裝的免費 Microsoft 工具,它也作為 Cabinet SDK 的一部分分開提供,您可從 support.microsoft.com/kb/310618 下載取得)。
我從 Visual Studio 2005 內執行 make.bat,我已經把它設定成外部工具。批次檔會在使用者小工具資料夾 (即安裝時建立小工具的地方) 下建立資料夾,並將所有小工具檔案複製到新資料夾中。我的批次檔還會產生一個可供散發的 .gadget 檔案,並會將它放在 Documents 資料夾內。當採用這種方法時,並不需要按兩下 .gadget 檔案在開發機器上安裝小工具。我熱愛這個方法,因為它可讓我把其他我不想要跟小工具一起封裝的來源檔案放在我的 Visual Studio 專案資料夾中 (例如 Photoshop PSD 檔案)。如果您也是這麼做的話,只要確定將希望排除的檔案名稱放在 exclude.txt 檔案中就行了。

MSDN Magazine Ticker
小工具所有基本的元件都討論過了,我想示範一個把所有部份整合在一起的範例小工具。《MSDN Magazine》Ticker 小工具可供您下載進行安裝或單純查閱它的內容。
我希望範例小工具使用資訊看板小工具的所有主要功能 (延伸顯示、停駐與浮動狀態、選項、當地語系化等)。但我也希望範例小工具保持簡單,而且多少必須有點用處。
我決定採用顯示新聞頭條的 RSS 讀取程式。因為這個範例是用於《MSDN Magazine》文章,所以使用 RSS 摘要取得雜誌目前一期內的全部內容 (這可從 msdn.microsoft.com/msdnmag/rss/rss.aspx 取得),看來像是個明智的選擇。如果您選擇使用餵送新聞或運動頭條,或甚至是將多重摘要整合成單一資料來源,想想看您可以讓這個小工具多麼動態又富資訊呀。
Windows Vista 資訊看板內已附隨一個摘要頭條新聞小工具。我的範例獨特之處在於資訊呈現的方式。頭條新聞是以新聞看板的方式來顯示,就跟在新聞台的電視螢幕底端看到的一樣。
我的範例小工具也比隨 Windows Vista 一起發行的摘要小工具要精簡許多 — 它的高度只有 57 像素 (預設小工具的高度為 175 像素)。這非常適合畫面項目錙銖必較的小型螢幕 (或雜亂的資訊看板)。
這個小工具遵循本文中提到的所有建議:它使用延伸顯示在您按下頭條新聞時顯示詳細資訊,它讓您在 [選項] 對話方塊選擇三種不同的摘要重新載入次數,它進入浮動狀態時會變更大小,並且它還透過當地語系化資料夾支援數個語言。
我所討論到的資訊看板不過是皮毛,只是要示範開始著手有多麼容易。您可以發揮的還有很多。「其他資源」資訊看板有更詳細的資訊。

Donavon West 是一名獨立的顧問,擔任 LiveGadgets.net 的技術長 (CTO),並同時是 Windows Live Development 的 Microsoft MVP。他來自芝加哥,目前居住在巴爾的摩/華盛頓特區附近。他非常積極參與 Windows Vista 資訊看板及網站小工具兩者的小工具開發社群。您可以透過他的網站與他連絡:www.livegadgets.net

Page view tracker