|
|
輕鬆學習製作一個 Windows Vista 資訊看板小工具
小工具是一種簡單且小型的應用軟體，它提供使用者一個快速組織個人相關資訊與工作的方式，例如，天氣小工具可以隨時提供氣象資訊，或是一個便籤小工具讓你隨時都可以使用它記錄事情。所以一個成功的小工具的設計精神在於擁有外觀美麗的使用者介面與簡少平常達成一件事情所需的步驟，一個在桌面讓你予取予求的小工具。
想要設計小工具，必須先了解它的操作模式，在正常狀況下，小工具一般是停靠或附著在資訊看板上的，以下稱為小工具的未卸離 (Docked) 狀態，小工具可以從資訊看板離開並卸離在桌面上的任何位置，這時稱為浮動 (Floating) 或已卸離 (Undocked) 狀態，除此之外，小工具還有擴展頁面 (Flyout) 狀態，你可以此狀態看見小工具顯示的更多資訊，通常按下小工具即可進入此狀態 ，然後要回到未卸離或已卸離狀態只要隨意在桌面其他位置按下即可。所有在資訊看板中執行的小工具，在同一時間只能有一個小工具進入擴展頁面狀態。最後要說明小工具的設定頁面 (Settings) 狀態，使用者可以在小工具右上角旁按下板手圖示進入該狀態，在此狀態你可以讓使用者設定他們的偏好設定與樣式。
＊怎樣的使用者介面設計才是對的 ?
一個小工具的介面設計往往決定使用者使用的意願，原因無他，因為小工具是常駐執行，已是桌面的一部分，使用者既然會換美麗的桌布，難道就不會使用一個外觀較有質感的小工具嗎？所以資訊看板小工具的外觀設計是不可忽視的使用意願的因素之一。
這裡提供幾個觀念與問題給您思考。
＊需要開發成小工具嗎？
- 設計的功能經常需要被讀取嗎？如果是的話，你可以開發成一個隨時在資訊看板上執行的小工具。
- 設計的功能會引起使用者的興趣嗎？因為使用者經常需要看見它，那乾脆放在桌面上不是更為便利呢。
- 顯示的資訊是有規則性的變化嗎？假如不是，使用者將會犧牲一點螢幕上的空間來顯示這些資訊，以便迅速的看到它。
＊設計觀念：
- 一個好的小工具會在任何時間提供實用的功能。
假如不是，使用者將會關掉小工具來釋放有限制的桌面空間；小工具可以提供實用的功能，方向如監控資訊、提供需要一整天都可以使用的功能、或是有趣的活動或遊戲。
- 次要的要求是設計一個運行良好又有正確效率的小工具。
它的功能是容易親人的，但是又不可易讓使用者過於分心，記得小工具是隨時在桌面上顯示的，但也不是在所有的時間都要被主動的使用，你要使用者去停留焦點在他們工作上，尤其過於炫耀的小工具可能會導致這種小缺點。
- 一個很棒的小工具是可以處理單一、完整又清楚的工作非常好的。
忽略無需的功能，可以使核心功能非常容易去組織使用，對於較重要的資訊使用較大的字體，確保只要透過幾次按下的動作就可以就可以使用平常需要的功能，就像是你可以設計多個小工具來對單一的工作做最佳化處理，這也將勝過製作一個小工具然後一次實現所有的事情，所以你需要給使用者更多的控制需求多於功能上的外在表現。
不正確的範例：
正確的範例：
在不正確的範例中，想要在一個小工具就試著處理多種事情，但是又處理的不是很好；小工具的單一工作化可以讓工作處理的比較好，所以給使用者專心於控制資料的取得多於使用的功能上的外在表現喔。
結論就是在開發小工具首先著手的主要任務就是實現您的產品與服務的核心功能，再來使小工具精確的佈局與嚴密的介面設計，還要使小工具在有限的空間內保證 最有效率的利用。
因為 Windows Vista 安裝完畢時就已經內建的小工具，它的檔案位置在 C:\Program Files\Windows Sidebar\Gadgets 裡，我們不建議你在這個資料夾開發小工具，請你在目前使用者自行安裝小工具的程式執行位置來開發小工具，操作步驟請參考 如下：
- 如果你的 Windows 資訊看板 沒有正確開啟，請按下「開始」→「所有程式」→「附屬應用程式」→「Windows 資訊看板」重新啟動資訊看板。
- 開啟小工具庫資料夾。按下「開始」，請在「開始搜尋」欄輸入
%userprofile%\appdata\local\microsoft\windows sidebar\gadgets
即可進入小工具資料夾，所以你可以在此資料夾開發小工具，而在此資料夾的小工具只會在目前的使用者可以使用而已，其他的使用者是看不到的；或是你也可以開啟「我的電腦」，自行開啟下列目錄，也可以進入個人的小工具資料夾。
C:\使用者\<使用者名稱>\AppData\Local\Microsoft\Windows Sidebar\Gadgets
- 建立小工具資料夾。在你的個人的小工具資料夾裡，建立一個新的資料夾，只要名稱是以 .gadget 為結尾的名稱就行了 ( 例如： GadgetName.gadget )，這個資料夾名稱單純只是辨識的名稱而已，並不是在「小工具庫」裡所顯示的名稱。
- 開發軟體。簡易的如記事本、 FrontPage，如果未來想要建立一個複雜的 Gadget，微軟也提供一套免費的開發軟體 Visual Web Developer 2005 Express 協助開發與除錯 。
Visual Web Developer 2005 Express 下載網址 : http://msdn.microsoft.com/vstudio/express/vwd/
- 開始開發小工具。然後請在您所建立的資料夾底下，建立小工具所需的清單檔、HTML 檔。(先著重功能，再美化介面，兩者都很重要)
- 測試與除錯小工具。只要在您所建立且具有合法名稱的資料夾底下的小工具，即可以透過 Windows 資訊看板 上方的
 (加入按鈕) 打開小工具庫，找到該小工具，拖曳至桌面即可使用該小工具 (或是連按兩下小工具的圖示，也可加入至資訊看板)；當檔案有修改過時，小工具必須重新加入才可以顯示修改後的程式。
- 開發完成。包裝成附檔名為 .gadget 的壓縮檔，方便其他使用者安裝使用。(詳見情形請見６)
每個小工具基本上可以是由 HTML 檔與檔案內的 Script 程式碼 (JavaScript 或 VBscript) 組合而成，就像一張網頁一樣，所以要開發小工具之前，你必須要有基本的網頁與 Script 程式碼 的基礎，你可以使用 Internet Explorer® 7 上的 DOM 與大部分的API，就像寫一般的標準網頁一樣，這也意味著你也可以使用 Ajax 與 DHTML 技術製作你的小工具，不僅如此，小工具還可透過專用的 Sidebar Gadget Object Model API 來擷取Windows系統的相關額外資訊，像是讀取 Windows 檔案與資料夾，或是讀取使用者資料夾的圖片、顯示無線網路連線的相關資訊與CPU的使用率等，更方便的是，其中展開顯示的「設定介面」與「儲存設定值」也都是透過撰寫 Script 檔來完成，所以 這一切不需要編譯過的二位元檔 (binary file) 來執行小工具，只要透過 Script 碼撰寫也可以輕鬆製做出功能的小工具。
來看一個簡單的小工具會有哪些檔案：
| 檔案類型
| 檔案需求
| 檔案說明
|
小工具清單檔
(Gadget Manifest)
| 必要
| 檔案採用 XML 結構的形式，檔案裡設定一些屬性(如名稱)與紀錄小工具組成所需的檔案位置。( 檔名固定為 gadget.xml )
|
| HTML 檔
| 必要
| 基本上小工具就是HTML檔所組成的，只要一些程式碼就是一個小工具，在這個必要的檔案裡
|
| HTML設定檔
| 選擇性
| 本質上也是 HTML檔，當你的小工具展開為「設定介面」時會開啟本檔案，讓使用者可以設定小工具。
|
| 影像(PNG、JPG等)、Script(程式碼)、CSS(樣式表)
| 選擇性
| 給 HTML 檔依功能需求使用。
|
| Icon 圖示檔
| 選擇性
| 給 清單檔 使用。 |
在製作第一個小工具之前，你必須先認識資訊看板小工具的執行位置，相對於網頁小工具是在 Windows Live 的網頁平台上運作，資訊看板小工具則是在作業系統內裡執行， 你可不能隨意放置就可以執行小工具，必須是在作業系統核准的特定資料夾裡且資料夾名稱必須以 .gadget 為結尾的名稱才可以正確執行。
首先 Windows 資訊看板小工具分為兩部分，其檔案位置分別為：
- %SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets (所有使用者皆可使用)
- %USER_DATA%\Local\Microsoft\Windows Sidebar\Gadgets (目前使用者可使用)
小工具為求精美的布局與完美的體驗，此時檔案較多且較為複雜，建議一個較專業的小工具的檔案結構安排如下：
| 檔案與資料夾
| 說明
|
| (根目錄)/
| 包含所有的小工具檔案。
|
| (根目錄)/(語系)/icon.png
| 小工具顯示在小工具庫的代表圖示。
|
| (根目錄)/(語系)/logo.png
| 小工具作者的代表圖示。
|
| (根目錄)/(語系)/drag.png
| 小工具從小工具庫中拖曳到資訊看板的預設圖案。
|
| (根目錄)/(語系)/gadget.xml
| 小工具 XML 清單檔 。( 檔名固定為 gadget.xml )
|
| (根目錄)/(語系)/name.htm
| 小工具的主要 HTML 檔。
|
| (根目錄)/(語系)/settings.htm
| 小工具的設定檔。(設定介面用)
|
| (根目錄)/(語系)/flyout.htm
| 小工具的擴展頁面檔。
|
| (根目錄)/(語系)/images/
| 圖片資料夾，包含小工具所需的所有圖片。
|
| (根目錄)/(語系)/images/bg_docked.png
| 小工具未卸離時的背景圖片。
|
| (根目錄)/(語系)/images/bg_undocked.png
| 小工具已卸離時的背景圖片。
|
| (根目錄)/(語系)/imgaes/bg_flyout.png
| 小工具擴展頁面後的背景圖片。
|
| (根目錄)/(語系)/js/
| Script 目錄，裡面包含各種 JavaScript 或 VBscript 檔。
|
| (根目錄)/(語系)/js/name.js
| 小工具的主要 HTML 檔所需的 JavaSrcipt 程式碼檔案。
|
| (根目錄)/(語系)/js/settings.js
| 設定檔所需的 JavaSrcipt 程式碼檔案。
|
| (根目錄)/(語系)/js/flyout.js
| 擴展頁面檔所需的 JavaSrcipt 程式碼檔案。
|
| (根目錄)/(語系)/css/
| 包含所有的 CSS 樣式表檔案。
|
| (根目錄)/(語系)/css/name.css
| 小工具的主要 HTML 檔所需的 CSS 樣式。
|
| (根目錄)/(語系)/css/flyout.css
| 擴展頁面檔所需的 CSS 樣式。 |
其中上表的 (根目錄) 的資料夾名稱可命名為 英文簡易名稱.gadget
(注意:資料夾名稱不同但 XML 清單檔的name標籤名相同只會讀取較新的檔案)
小工具支援多語系，而且應用很簡單，在上表中的(語系)次目錄可以省略，但是如果擺放在(語系)資料夾底下的檔案，會依作業系統的語系優先讀取(語系)資料夾下的檔案，換句話說，(語系)資料夾只是一種輔助手段，因為在小工具執行前，會複製該語系下的所有檔案到根目錄資料夾下，，(語系)資料夾名稱須命名為 (英文)=en-US、(繁體中文)=zh-TW ，依此類推。(注意:放在語系資料夾下的檔案，不需修改呼叫此檔案的檔案裡的呼叫路徑)
小工具的實際的目錄和檔案的結構，可能會因為特定的佈局與設計的需要，而與上表有所不同；但是，上表的結構是一個建立小工具最好的起始點。
資訊看板小工具 (Sidebar Gadget) 與一般網頁的執行環境有些許不同，如下：
- 小工具可以讀取跨網域的來源，因為將不同資訊加以整合與分析才可以創照出更多具有價值的應用。
「清單檔」其實就是紀錄一些小工具附加資訊的一些檔案，這些檔案本身不影響小工具的運作，但是會在小工具庫顯示這些資訊，而且是以 XML 格式來記載這些資訊，所以在建立小工具時你只要修改部分資料即可：
下載範例檔：
一個 小工具清單檔的範例 (gadget.xml) : (請用記事本開啟本檔)
| <?xml version="1.0" encoding="UTF-8" ?>
<gadget>
<!-- 指定小工具的名稱(必要) -->
<name>Hello, World!</name>
<!-- 指定小工具的版本(必要) -->
<version>1.0.0.0</version>
<!-- 指定作者的姓名 -->
<author name="Your Name">
<!-- 指定作者的資訊網址 -->
<info url="gallerylive.spaces.live.com" />
<!-- 指定作者的LOGO -->
<logo src="logo.png"/>
</author>
<!-- 著作者資訊 -->
<copyright>© 2007 Microsoft Corporation Taiwan</copyright>
<!-- 小工具的簡短的描述 -->
<description>我的第一個小工具</description>
<icons>
<!-- 指定小工具的圖示檔案 -->
<icon width="64" height="64" src="icon.png"/>
</icons>
<!-- 該標記內包含小工具的各種資訊(必要) -->
<hosts>
<host name="sidebar">
<!-- 指定小工具的HTML檔案位置(必要) -->
<base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
<!-- 指定小工具權限-建議為FULL(必要) -->
<permissions>Full</permissions>
<!-- 指定該小工具執行的所需最小平台版本-建議目前為1.0(必要) -->
<platform minPlatformVersion="1.0" />
<!-- 指定小工具的拖曳圖像檔案 -->
<defaultImage src="drag.png"/>
</host>
</hosts>
</gadget> |
其中你只要修改粗體字的部分即可，下表為標籤的詳細說明：
| 標籤
| 說明
|
| <name>
| 小工具的辨識名稱。
|
| <version>
| 小工具的版本說明。
|
| <description>
| 小工具的簡短敘述。
|
| <base>
| 小工具主要 HTML 檔案的位置。
|
| <icon>
| 顯示在小工具庫的小工具代表圖案。
|
| <defaultImage>
| 小工具從小工具庫中拖曳到資訊看板的預設圖案。
|
| <author>
| 小工具的作者姓名。
|
| <copyright>
| 小工具著作者的資訊版權宣告。
|
| <logo>
| 小工具著作者的LOGO。 |
為了更清楚、更簡潔地說明這些標籤，下面就把清單檔的元素逐一對應到小工具庫中所顯示的項目：
＊製作中文 Gadget 的相關注意事項 :
請將 XML 和 JavaScript 檔案格式存成 UTF-8 格式，且 xml 上標註 encoding 屬性，如<?xml version="1.0" encoding="UTF-8"?>如此一來，就可以顯示多國語言。
修改完小工具清單檔之後，我們已經知道小工具基本上就是在建立一個 HTML 網頁，根據剛才的範例，清單檔的 <base> 標籤將 HelloWorld.html 設為小工具主要的 HTML 檔，以下就是這個檔案的範例：
一個 小工具主要 HTML 檔的範例 :
|
| <html>
<head>
<title>Hello World!</title>
<style type="text/css">
body
{
width: 130px;
height: 75px;
}
</style>
</head>
<body>
<span>Hello World!</span>
</body>
</html> |
這是最簡單的範例，把 Hello World! 文字顯示出來，我們在此可以先來確認一個最簡單的小工具是否可在資訊看板正常運作。
小工具預覽圖:
接下來我們將要開始為小工具加入更多功能了，一個專業的小工具必然會有小工具的背景圖，來為小工具進行美化的動作，你也許會想到可以使用標準網頁所使用的技巧，也就是在 HTML 檔中的 <BODY> 元素的 background 屬性就行了，不過般到資訊看板小工具上使用的效果並不理想，而且也較不方便使用，所以微軟為此問題特別開發了一些在小工具上專用的顯示元素(Presentation Element) 來解決，來優化圖片顯示處理能力，其中為背景建立的全新特殊元素 <g:background> 將支援背景的寬高可調，也就是大小可以隨意設置，背景圖片也會隨設定自動放大或縮小，這是在標準網頁所沒有的特性，還有透明度與圖片邊框也特別為小工具優化，讓開發者在背景圖的處理上不用煩惱，像是使用 <img> 圖片元素一樣簡單。
在背景圖片格式的選擇上，JPEG 檔案是不支援透明的顯示，而 GIF 檔案格式的圖片支援透明顯示，但不支援半透明顯示，所以還是建議使用具有 Alpha 通道的 PNG 格式來成為你的第一選擇，支援半透明的 PNG 格式，不僅可以完全發揮 <g:background> 的特殊背景元素，更可以有較好的圖片邊框顯示，來達到更好的顯示效果，以下是如何加上背景圖的比較範例：
下載範例檔：
一個 小工具加入半透明背景的 HTML 範例 :
|
| ＊使用特殊的 <g:background> 元素來顯示背景圖片：
|
<html>
<head>
<title>Hello, World!</title>
<style>
body {
width:130;
height:60;
}
</style>
<meta http-equiv="Content-Language" content="zh-tw">
</head>
<body>
<g:background src="Background.png"
id="Background"
style="position:absolute;width:130;height:60;top:0;left:0;z-index:-1"/>
<span id="gadgetContent" style="font-family: Tahoma; font-size: 10pt;">Hello, World! 小工具! <br>使用<g:background>元素。
</span>
</body>
</html>
|
| ＊使用標準網頁<body>元素的 background 屬性來顯示背景圖片：
|
<html>
<head>
<title>Hello, World!</title>
<style>
body {
width:130;
height:60;
background: url('Background.png');
}
</style>
<meta http-equiv="Content-Language" content="zh-tw">
</head>
<body>
<span id="gadgetContent" style="font-family: Tahoma; font-size: 10pt;">Hello, World! 小工具!
<br>使用標準網頁的CSS</span>
</body>
</html> |
橘色字體是加入背景的部分，而你所需要修改的是紅色粗體部分，不過光用文字無法說服你，下面的比較可你讓你知道其中的差別。
所以建立完整半透明背景圖片的小工具的步驟是：
- 使用專業的繪圖軟體，建立一個 PNG 檔案，並且設定它的半透明特性。
- 在 <body> 部分定義一個 <g:background> 元素。
- 設定 <g:background> 的 src 屬性為 PNG 檔案名稱。
可以看到背景由白變黑，也有全透明模式。
在開發小工具的時候不只有要使用到背景圖而已，在背景圖上一定還需要其他的圖來達成專業的設計的準則，也許你還會繼續使用標準的 <img> 元素來加入圖片，不過在半透明的背景圖之上就無法完整實現這個功能，你會發現在圖的輪廓處會成為紫色的邊框，破壞原本設計的想法，所以微軟也為此設計了一些解決方式，一種是使用全新的 <g:image> 元素，另一種是使用 <g:background> 的背景元素，然後透過 addImageObject() 方法，不過很可惜的是 <g:image> 尚未完整支援，也許以後會支援，不過在那之前，這裡建議你使用第二種方法，來達成完美的雙層半透明圖疊合。
addImageObject 方法：
image_element = g:background.addImageObject(strUNC, intXOffset, intYOffset);
| 參數
| 說明
|
| strUNC
| 要加入的圖片的網址。
|
| intXOffset
| 圖片水平位移，從左方算起的距離。
|
| intYOffset
| 圖片垂直位移，從上方算起的距離。 |
下載範例檔：
一個 小工具加入半透明背景的 HTML 範例 :
|
| ＊使用 <g:background> 元素，然後透過 addImageObject() 方法加上第二層圖片：
|
<html>
<head>
<title>Use addImageObject</title>
<style>
body {
width:130;
height:60;
}
</style>
<meta http-equiv="Content-Language" content="zh-tw">
<script>
function initGadget(){
document.getElementById('Background').addImageObject("logo.png",0,0);
document.getElementById('Background').addImageObject("logo.png",43,0);
document.getElementById('Background').addImageObject("logo.png",43*2,0);
document.getElementById('Background').addImageObject("logo.png",0,16);
document.getElementById('Background').addImageObject("logo.png",43,16);
document.getElementById('Background').addImageObject("logo.png",43*2,16);
}
</script>
</head>
<body onload="initGadget();">
<g:background
src="Background.png"
id="Background"
style="position:absolute;width:130;height:60;top:0;left:0;z-index:-1">
</g:background>
</body>
</html>
|
| ＊使用全新的 <g:image> 元素來加上第二層圖片：
|
<html>
<head>
<title>Use G:IMAGE</title>
<style>
body {
width:130;
height:60;
}
</style>
<meta http-equiv="Content-Language" content="zh-tw">
</head>
<body>
<g:background
src="Background.png"
id="Background"
style="position:absolute;width:130;height:60;top:0;left:0;z-index:-1">
<g:image src="logo.png" /><g:image src="logo.png" /><g:image src="logo.png" />
<br>
<g:image src="logo.png" /><g:image src="logo.png" /><g:image src="logo.png" />
</g:background>
</body>
</html> |
同樣的道理，對於文字部分可以使用 addTextObject() 來處理文字與背景透明的問題。
小工具平台提供豐富的物件模型讓小工具可以與 Windows 互動，小工具可以使用一些操作，像是讀取檔案與資料夾、組織硬體資訊、顯示網路資訊；而在底下的範例中，在 <script>標籤內所要執行的是把一個環境變數顯示出來：
下載範例檔：
一個顯示系統環境變數的範例 :
|
| <html>
<head>
<title>Display an environment variable</title>
<style>
body
{
margin: 0;
width: 130px;
height: 65px;
}
#gadgetContent
{
width: 130px;
top: 24px;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
position: absolute;
}
#Background
{
width: 130px;
height: 65px;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
</style>
<script>
var defaultText = "Hello World!";
var variableName = "ProgramFiles";
function setContentText()
{
var envPath = System.Environment.getEnvironmentVariable(variableName);
if (envPath)
{
gadgetContent.innerText = envPath;
}
else
{
gadgetContent.innerText = defaultText;
}
}
</script>
</head>
<body onload="setContentText();">
<g:background id="Background" src="Background.png">
<div id="gadgetContent"></div>
</g:background>
</body>
</html> |
其中的 System.Environment.getEnvironmentVariable(variableName); 就是小工具所專有的 Gadget System APIs 裡的一個方法，該方法可以讀取系統環境變數，參數 variableName 就是參數名。
小工具預覽圖:
你的小工具可以顯示一個設定頁面並且可以儲存使用者設定，你不需要再去做額外的動作去儲存設定值，小工具平台會自動為你管理這些設定值。在這個範例裡，加入設定頁面去開啟使用者所設定的環境變數，然後把值顯示出來。首先你需要建立 HTML 檔、Settings.html 來達成"設定"的功能。
小工具動作預覽圖:
(使用者可以按下板手圖示進入設定設面，然後在欄位輸入環境變數，按下確定儲存，最後回到主頁面並顯示新的環境變數)
一些合法的環境變數，可以測試一下：
ALLUSERSPROFILE=C:\ProgramData
APPDATA=C:\Users\user\AppData\Roaming
HOMEPATH=\Users\user
LOCALAPPDATA=C:\Users\user\AppData\Local
PROGRAMDATA=C:\ProgramData
PUBLIC=C:\Users\Public
TEMP=C:\Users\user\AppData\Local\Temp
TMP=C:\Users\user\AppData\Local\Temp
USERPROFILE=C:\Users\user
下載範例檔：
一個顯示使用者所設定的環境變數範例 :(主要 HTML 檔)
|
| <html>
<head>
<title>Display an environment variable</title>
<style>
body
{
margin: 0;
width: 130px;
height: 65px;
}
#gadgetContent
{
width: 130px;
top: 24px;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
position: absolute;
}
#Background
{
width: 130px;
height: 65px;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
}
</style>
<script>
var defaultText = "Hello World!";
var variableName = "ProgramFiles";
<!-- Show settings check mark-->
System.Gadget.settingsUI = "settings.html";//設定設定頁面檔的檔案路徑
System.Gadget.onSettingsClosed = settingsClosed;//當設定頁面關閉後呼叫settingsClosed
function setContentText()
{
var envPath = System.Environment.getEnvironmentVariable(variableName);
if (envPath)
{
gadgetContent.innerText = envPath;
}
else
{
gadgetContent.innerText = defaultText;
}
}
function settingsClosed(event)
{
//當設定頁面關閉的時候，如果動作是確定則執行
if (event.closeAction == event.Action.commit)
{
variableName = System.Gadget.Settings.read("variableName");
setContentText();
}
}
</script>
</head>
<body onload="setContentText();">
<g:background id="Background" src="Background.png">
<div id="gadgetContent"></div>
</g:background>
</body>
</html> |
其中 System.Gadget.settingsUI = "settings.html"; 是設定頁面檔的檔案路徑，讓小工具開啟設定頁面功能，也就是使用者可以按下板手圖示進入設定頁面。
一個可以讓使用者可以儲存設定的檔案 : (Settings.html)
|
| <html>
<head>
<style>
body
{
width: 250px;
height: 75px;
font-family: Tahoma;
font-size: 10px;
}
</style>
<script>
System.Gadget.onSettingsClosing = settingsClosing;//當頁面關閉時呼叫settingsClosing
function loadSettings()
{
var currentSetting = System.Gadget.Settings.read("variableName");
if (currentSetting != "")
{
envVar.innerText = currentSetting;
}
}
function settingsClosing(event)
{
if (event.closeAction == event.Action.commit)
{
variableName = envVar.value;
//把variableName的值存到variableName設定名稱裡
System.Gadget.Settings.write("variableName", variableName);
}
}
</script>
</head>
<body onload="loadSettings()">
<label for="envVar">Environment Variable:</label><br />
<input type="text" name="envVar" id="envVar" length="40" />
</body>
</html> |
其中綠底的部分是檢查使用者是否已經設定一個環境變數，如果沒有請重新輸入新的環境變數。
而藍底的部分讓使用者儲存環境變數到名為 variableName 的設定值裡。
想知道更多設定值的儲存與讀取可以參可 MSDN System.Gadget.Settings 物件說明。
還有如果你想從 Settings.html 頁面呼叫小工具主頁面的元素的話，可以使用
System.Gadget.document.parentWindow.<id.method/id.Properties/function/variable>
的方式來達成，例如我要從 Settings.html 頁面更改主頁面的背景，我可以在 Settings.html 頁面裡加入下列程式碼:
System.Gadget.document.parentWindow.Background.src= "Background2.png";
如此一來，主頁面的背景就被更換掉了。
未卸離(Docked)資訊看板的小工具所佔的最小高度為 60 像素，而小工具的寬度從最小 25 像素至 130像素 可剛好符合資訊看板所能容下的寬度，如果 小工具的寬度超過 130 像素，則超過的部份能仍可以顯示；若是已卸離(Floating)的資訊看板則可以使用任意寬高，依據你的需求設定。
不過我們仍提供以下的建議：
- 未卸離小工具的寬度為 130 像素包含5 像素的陰影，其中左測陰影寬度為 2，右側陰影寬度為 3。
- 雖然在未卸離的小工具在高度上沒有任何限制，但是小工具能夠使用的空間有限，所以必須有效利用空間讓使用者看到更多小工具，好讓使用者更喜歡它。
- 已卸離小工具的寬高不建議超過 400x400 像素平方。
- 設定介面 (Settings HTML) 的最大寬度固定為 278 像素，超過則不顯示，而高度建議不要超過 400 像素。
- 設定介面裡的中文字型建議使用微軟正黑體(Microsoft JhengHei)，大小為 12 像素，行距為 14 像素。
對於已開發完成的小工具總不能讓使用者自己複製與貼上資料夾才能使用小工具，為了便利安裝，小工具可以使用兩種包裝格式 - ZIP 與 CAB ，再經過更換附檔名的動作就可以成為可直接執行的安裝檔。這裡以常用的 ZIP 壓縮檔來作範例，使用這個封裝方式時，小工具的檔案可以通通被壓縮在一個檔案裡，許多工具，包含 Windows 也有內建新增、解出與編輯ZIP 壓縮檔的功能。
要如何建立小工具安裝檔呢？
- 先把所有的小工具檔案全選起來，按下滑鼠右鍵，選擇「傳送到」，點選「壓縮的 (zipped) 資料夾」。
- 壓縮完畢請重新命名小工具，並且更改附檔名為 .gadget。
- 改完之後可以看見，壓縮檔的圖案變成小工具安裝檔的圖案了，你可以開始把此檔案傳給別人方便使用。
- 進入 Windows Live Gallery 網站，在左方點選「上傳項目」。
- 進入上傳項目頁面之後，請依順序詳細的填入應填欄位，然後在位置欄瀏覽您要上傳的小工具安裝檔(.gadget)，最後再勾選「同意使用規定」與上傳即可，請注意，剛上傳的小工具不可馬上使用，必須等候大約一天的時間並通過審核才可以在 Windows Live Gallery 找到它並使用喔!
[MSDN] Windows Sidebar (完整的資料)：
http://msdn2.microsoft.com/en-us/library/aa965850.aspx
[MSDN] Windows Sidebar Object Reference (小工具專用的API) :
http://msdn2.microsoft.com/en-us/library/aa965853.aspx
Microsoft Windows Sidebar (最新的消息與產品資訊) :
http://www.microsoftgadgets.com/
[MSDN] Gadget Corner (小工具的開發部落格) :
http://blogs.msdn.com/sidebar/
Gadget Samples for Windows Sidebar (一些小工具的範例下載) :
http://www.microsoft.com/downloads/details.aspx?familyid=B1E14E4F-3108-4C57-8B78-1157CA40DCC2&displaylang=en
Microsoft Sidebar for Windows Vista Beta 2 (比較舊的資訊,也可以參可) :
http://microsoftgadgets.com/Sidebar/DevelopmentOverview.aspx
Windows Sidebar 小工具的介面設計說明 :
http://msdn2.microsoft.com/en-us/library/aa974179.aspx
構建自己的 Windows Vista 邊欄小工具 (簡體) :
http://msdn.microsoft.com/msdnmag/issues/07/08/SideBar/default.aspx?loc=zh
在 Windows Vista 中編寫指令碼 - 建立小工具：第一篇 (繁體) :
http://www.microsoft.com/taiwan/technet/scriptcenter/topics/vista/gadgets-pt1.mspx
HTML and Script development :
http://msdn.microsoft.com/library/en-us/dnanchor/html/anch_webdev.asp
Web Development :
http://msdn2.microsoft.com/en-us/library/aa286532.aspx
Gadget 中文網 (一個專門為Gadget開設的非官方網站)(簡體) :
http://www.gadgets.net.cn/ 搜尋巨集 - 縮小搜尋範圍，在網海中突破重圍
搜尋引擎大家都用過，吃東西要先搜尋、做作業要搜尋、找知識要搜尋、買東西要搜尋，什麼都要搜尋，難怪到處都見得到放大鏡的圖示，也就知道搜尋是如此的重要了！在微軟的搜尋引擎 Live Search ( http://search.live.com ) 裡，你可以使用目前內建的網頁、新聞、學術、摘要等搜尋引擎之外，未來也將會繼續開放重要的搜尋模式如圖片、地圖等重要的搜尋方式，不過在那之前你還可以使用特定的搜尋方式，那就是「搜尋巨集」，如此一來，你不需搜尋整個網路，因為「搜尋巨集」其實就是一種小範圍的搜尋引擎，它能能縮小搜尋範圍，取得最符合您需求的搜尋結果。例如我要搜尋美食，那麼就專門找各大美食網站就可以涵括60%的美食資訊，不僅可以略掉不相關的資訊，更可以提高搜尋精準度，提升你的搜尋效率，節省你的寶貴時間。所以有了「搜尋巨集」就相當於航行在大海之中不只有「羅盤」這種網頁搜尋工具，更有了「雷達」可以偵測出你想要的東西在哪裡，也無須在茫茫網網大海之中裡大海撈針，找尋你的資料囉！
搜尋巨集，在 Live Search 並不會預設顯示，是由於巨集種類太多，一次顯示反而占用版面空間，你可以按下「尋找巨集」功能到 Windows Live Gallery 網站裡找尋更多的搜尋方式，像是已經由 MSN Taiwan 建立的購物、工作、娛樂、軟體、旅遊、留學、房屋、部落格、等種類的搜尋巨集可以加入到自己的 Live Search 使用之外，你也可以自己建立專屬的搜尋巨集，讓搜尋引擎也可以個人化，找尋自己所需的特定資料。以下將帶你如何使用「搜尋巨集」吧！
 如何使用「搜尋巨集」？
1.首先要知道如何進入 Live Search ，請在台灣微軟首頁按下「Live.com」的連結。
2.進入 Live Search 之後，只要移動游標選擇類別，就可分別點選「網頁」、「新聞」、「學術」、「摘要」中輸入關鍵字尋找內容，如果你想要使用「搜尋巨集」請按下「更多」，接著點選「尋找巨集」。
3.按下「尋找巨集」之後，進入 Windows Live Gallery 網站，按下「搜尋巨集」。
4.之後跳往搜尋巨集頁面，在此頁面裡收納許多建立者所建立的「搜尋巨集」，可以依照排列依據來找尋你想要使用的搜尋巨集，或是可以按最上方搜尋欄位，輸入一些該搜尋巨集名稱的關鍵字來讓系統幫你找尋收尋巨集，找到你想使用的搜尋巨集之後，按下「嘗試此巨集」，再按下「新增」就可以使用該巨集囉！
5.瀏覽器重新讀取你所選擇的搜尋巨集之後，你可以再放大鏡旁的欄位輸入關鍵字開始使用此特定範圍的搜尋引擎，特別的是，如果你使用 Internet Explorer 7 瀏覽器，你可以藉此機會新稱特定的搜尋巨集至你的常用搜尋引擎，之後你就可以快速的使用該「搜尋巨集」囉！
各式各樣的搜尋巨集 :
有了這麼多的搜尋引擎，不知各位眼花了沒？你可以想想如果能把網路的搜尋範圍縮小，那節省的是你的寶貴時間，專注找一下你想要的搜尋引擎是很值得的！
根據上一章可以知道如何製作一個只加入最基本的 HTML 的網頁小工具，而接下來將會介紹更複雜小工具製作範例，有了範例之後，學習會更快速喔！
這個範例主要是在學習如何加入事件至 Gadget ，包括使用 innerHTML 方法加入內容與使用 DOM 方法加入內容 要如何各自加入事件。
下載範例檔：
http://7cvpxg.blu.livefilestore.com/y1pLAgbfhAkEnshGpRhiD6r7wvHSJzuFc5a4FmhHn1i2ge5B7fwOQgu1VIfR8rY-m2ALoqIheTo7JZ2Zut130nncg1L7RAVAxLo/Just%20HTML%20with%20Events.zip?download
小工具外觀：
小工具 Javascript 程式碼 :
| // 註冊小工具的名稱空間 (namespace)
registerNamespace("Microsoft.Live.Spaces.Cookbook");
//// 定義此小工具的建構元 。
//(名稱必須相同於清單檔(XML)的設定)。
Microsoft.Live.Spaces.Cookbook.justHTMLwe = function(p_elSource, p_args, p_namespace) {
// 做任何事之前必須先呼叫 initializeBase 函式。
Microsoft.Live.Spaces.Cookbook.justHTMLwe.initializeBase(this, arguments);
// 設定一些私有成員變數 (private member variables)。
var m_this = this;
var m_el = p_elSource;
var m_module = p_args.module;
// 宣告成員變數來儲存元素物件。
var divHTML1= null;
var divHTML2= null;
var pHTML = null;
/****************************************
** initialize Method
****************************************/
// 當你的物件開始執行時，這個 initialize 函式會永遠立即被呼叫。
this.initialize = function(p_objScope)
{
// 總是先呼叫 Base 物件的 initialize 函式。
Microsoft.Live.Spaces.Cookbook.justHTMLwe.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
// 小工具背景透明化。
if (window.parent != window.self) {
document.body.style.backgroundColor = "transparent";
}
//在這裡我們使用 setupPage() 副函式來新增內容
setupPage();
};
Microsoft.Live.Spaces.Cookbook.justHTMLwe.registerBaseMethod(this, "initialize");
/****************************************
** dispose Method
****************************************/
this.dispose = function(p_blnUnload) {
// 卸離事件 - see below for how these events were added
document.getElementById("button1").detachEvent( "onclick", sayHello);
buttonHTML.detachEvent( "onclick", sayHello);
// 清除所有的成員變數
m_this = null;
m_el = null;
m_module = null;
divHTML1= null;
divHTML2= null;
pHTML = null;
buttonHTML = null;
// 最後總是呼叫 base 物件的 dispose 函式
Microsoft.Live.Spaces.Cookbook.justHTMLwe.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
};
Microsoft.Live.Spaces.Cookbook.justHTMLwe.registerBaseMethod(this, "dispose");
/****************************************
** Private Methods
****************************************/
function setupPage()
{
//建立一些 <DIV> 元素來包含兩種方式的HTML
divHTML1 = document.createElement("div");
m_el.appendChild(divHTML1);
divHTML2 = document.createElement("div");
m_el.appendChild(divHTML2);
//divHTML1 - 第一種方式
//藉由 innerHTML 方法加入 HTML 到 divHTML1
//在此設定你的 HTML 內容
var strHTML = "<p>button with event added via getElementById().</p>";
strHTML = strHTML + "<input type='button' value='click me' id='button1'>";
//用 innerHTML 方法把 strHTML 加入至 divHTML1
divHTML1.innerHTML = strHTML;
//附加一個按鈕的事件
document.getElementById("button1").attachEvent( "onclick", sayHello);
//divHTML2 - 第二種方式
pHTML = document.createElement("p");
// 附加一個 textnode 文字內容 至 pHTML
pHTML.appendChild(document.createTextNode("button with event added directly via DOM variable."));
// 附加一個 pHTML 至 divHTML2
divHTML2.appendChild(pHTML);
buttonHTML = document.createElement("input");
buttonHTML.type = "button";
buttonHTML.value= "click me";
buttonHTML.attachEvent( "onclick", sayHello);
divHTML2.appendChild(buttonHTML);
//再更改內容之後,需要重新整理模組大小,這樣才能確定讓它顯示正確的大小
m_module.Resize();
}
function sayHello() {
alert("Hello");
}
};
Microsoft.Live.Spaces.Cookbook.justHTMLwe.registerClass("Microsoft.Live.Spaces.Cookbook.justHTMLwe", "Web.Bindings.Base"); |
說明:
在 divHTML1 部分，由於是使用 innerHTML 加入一個按鈕，故要使用 getElementById("ID"); 方法來取得該物件，然後再用 attachEvent 附加(attach)一個事件至按鈕，由於第一個參數設定 onclick ，所以為每當按鈕按下之後，會執行 sayHello 副函式，即跳出文字顯示為 Hello 的提醒小視窗。而在 divHTML2 的部分，由於是使用 DOM 方法 createElement的方式增加一個按鈕，所以直接使用 createElement 建立元素時候的變數，再附加(attach)一個事件給本元素即可。
這個範例主要是在學習如何偵測小工具寬度，首先會顯示該小工具可以顯示內容的寬度，然後可以根據小工具寬度大小顯示不同大小的圖片。
下載範例檔：
http://7cvpxg.blu.livefilestore.com/y1pLAgbfhAkEnuuQrbfraEMRRnv62m4T7qOEI_4yBageujKOUPKOkbvvnQYQXwDaYzJUvzeRQb1j_kWdokE0-o9H0WMWIw59PJG/Just%20HTML%20with%20width%20detection.zip?download
小工具外觀：
小工具 Javascript 程式碼 :
|
| // 註冊小工具的名稱空間 (namespace)
registerNamespace("Microsoft.Live.Spaces.Cookbook");
//// 定義此小工具的建構元 。
//(名稱必須相同於清單檔(XML)的設定)。
Microsoft.Live.Spaces.Cookbook.justHTMLww = function(p_elSource, p_args, p_namespace) {
// 做任何事之前必須先呼叫 initializeBase 函式
Microsoft.Live.Spaces.Cookbook.justHTMLww.initializeBase(this, arguments);
// 設定一些私有成員變數 (private member variables)。
var m_this = this;
var m_el = p_elSource;
var m_module = p_args.module;
// 宣告成員變數來儲存元素物件。
var divHeader= null;
var divIMG= null;
/****************************************
** initialize Method
****************************************/
// 當你的物件開始執行時，這個 initialize 函式會永遠立即被呼叫。
this.initialize = function(p_objScope)
{
// 總是先呼叫 Base 物件的 initialize 函式。
Microsoft.Live.Spaces.Cookbook.justHTMLww.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
// 小工具背景透明化。
if (window.parent != window.self) {
document.body.style.backgroundColor = "transparent";
}
//在這裡我們使用 setupPage() 副函式來新增內容
setupPage();
};
Microsoft.Live.Spaces.Cookbook.justHTMLww.registerBaseMethod(this, "initialize");
/****************************************
** dispose Method
****************************************/
this.dispose = function(p_blnUnload) {
// 清除所有的成員變數
m_this = null;
m_el = null;
m_module = null;
divHeader= null;
divIMG= null;
// 最後總是呼叫 base 物件的 dispose 函式
Microsoft.Live.Spaces.Cookbook.justHTMLww.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
};
Microsoft.Live.Spaces.Cookbook.justHTMLww.registerBaseMethod(this, "dispose");
/****************************************
** Private Methods
****************************************/
function setupPage()
{
////建立一些 <DIV> 元素來包含 HTML
//div
divHeader = document.createElement("div");
divHeader.className = "header";
m_el.appendChild(divHeader);
divIMG = document.createElement("div");
m_el.appendChild(divIMG);
// 取得 Gadget 的寬度
var mWidth = m_el.offsetWidth;
divHeader.innerHTML = "Gadget width: " + mWidth + "px." ;
if (mWidth >= 300) {
// 我們有足夠的空間顯示大張的圖片
divIMG.innerHTML = "<img src='" + m_module.resolveUrl('large.jpg') + "' width='300' height='225'>";
} else {
// 假如空間不夠，將顯示小張的圖片
divIMG.innerHTML = "<img src='" + m_module.resolveUrl('small.jpg') + "' width='125' height='137'>";
}
//再更改內容之後,需要重新整理模組大小,這樣才能確定讓它顯示正確的大小
m_module.Resize();
}
};
Microsoft.Live.Spaces.Cookbook.justHTMLww.registerClass("Microsoft.Live.Spaces.Cookbook.justHTMLww", "Web.Bindings.Base");
|
說明:
使用 m_el.offsetWidth 方法來偵測小工具寬度，然後透過判斷式，假如小工具寬度大於300px的話則顯示大張的圖片，小於300px的話則顯示小張的圖片。
注意:要使用與小工具在同一個目錄下的檔案需要使用 m_module.resolveURl('檔名.副檔名'); 才可以正確使用， m_module.resolveURl 方法可以把相對路徑改成絕對路徑以便小工具正確讀取使用。
這個範例主要是在學習如何偵測小工具寬度與如何加入 Flash 檔案，首先會顯示該小工具可以顯示內容的寬度，然後可以根據小工具寬度大小來修正 Flash 應該顯示的大小。
下載範例檔：
http://7cvpxg.blu.livefilestore.com/y1pLAgbfhAkEnvlE4FjsAufQzdjV4nypGmAMUe5PokkIEITstnxViV4qxSugXsNTKiCxVyc3h2jmAqurMeMunM0sK36Nrb9W8RP/Flash%20with%20width%20detection.zip?download
小工具外觀：
小工具 Javascript 程式碼 :
|
| // 註冊小工具的名稱空間 (namespace)
registerNamespace("Microsoft.Live.Spaces.Cookbook");
//// 定義此小工具的建構元 。
//(名稱必須相同於清單檔(XML)的設定)。
Microsoft.Live.Spaces.Cookbook.FlashwWidth = function(p_elSource, p_args, p_namespace) {
// 做任何事之前必須先呼叫 initializeBase 函式
Microsoft.Live.Spaces.Cookbook.FlashwWidth.initializeBase(this, arguments);
// 設定一些私有成員變數 (private member variables)。
var m_this = this;
var m_el = p_elSource;
var m_module = p_args.module;
// 宣告成員變數來儲存元素物件。
var divHeader = null;
var elTheMovie = null;
/****************************************
** initialize Method
****************************************/
// 當你的物件開始執行時，這個 initialize 函式會永遠立即被呼叫。
this.initialize = function(p_objScope)
{
// 總是先呼叫 Base 物件的 initialize 函式。
Microsoft.Live.Spaces.Cookbook.FlashwWidth.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
// 小工具背景透明化。
if (window.parent != window.self) {
document.body.style.backgroundColor = "transparent";
}
//在這裡我們使用 setupPage() 副函式來新增內容
setupPage();
};
Microsoft.Live.Spaces.Cookbook.FlashwWidth.registerBaseMethod(this, "initialize");
/****************************************
** dispose Method
****************************************/
this.dispose = function(p_blnUnload) {
// 清除所有的成員變數
m_this = null;
m_el = null;
m_module = null;
divHeader= null;
elTheMovie = null;
// 最後總是呼叫 base 物件的 dispose 函式
Microsoft.Live.Spaces.Cookbook.FlashwWidth.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
};
Microsoft.Live.Spaces.Cookbook.FlashwWidth.registerBaseMethod(this, "dispose");
/****************************************
** Private Methods
****************************************/
function setupPage()
{
////建立一些 <DIV> 元素來包含 HTML
//div
divHeader = document.createElement("div");
divHeader.className = "header";
m_el.appendChild(divHeader);
// 取得 Gadget 的寬度
var mWidth = m_el.offsetWidth;
divHeader.innerHTML = "Gadget width: " + mWidth + "px." ;
// 決定 Flash 動畫的大小，預設值為 300 x 200
var flashWidth = 300;
var flashHeight= 200;
var flashRatio = flashHeight / flashWidth;
if (mWidth-10 < flashWidth) {
// 假如 Gadget 的寬度小於 Flash 的寬度加10px，則把 Flash的 寬度設為小工具的寬度再減10
flashWidth = mWidth-10;
flashHeight = flashWidth * flashRatio;//Flash 高度隨原本寬高比例而變
}
//建立一個 embed 元素，並設定一些屬性
elTheMovie = document.createElement("embed");
elTheMovie.setAttribute('src', m_module.resolveUrl('masking.swf'));
elTheMovie.setAttribute('type','application/x-shockwave-flash');
elTheMovie.setAttribute('wmode','transparent');
elTheMovie.setAttribute('width',flashWidth);
elTheMovie.setAttribute('height',flashHeight);
elTheMovie.setAttribute('scale','noborder');
m_el.appendChild(elTheMovie);
//再更改內容之後,需要重新整理模組大小,這樣才能確定讓它顯示正確的大小
m_module.Resize();
}
};
Microsoft.Live.Spaces.Cookbook.FlashwWidth.registerClass("Microsoft.Live.Spaces.Cookbook.FlashwWidth", "Web.Bindings.Base");
|
說明:
在這個範例程式裡，紅色部分為如何加上 Flash 的程式碼，綠色部分為如何加上寬度偵測的程式碼，如果你不想使用寬度偵測的話則把綠色部分程式碼刪除即可。
注意:要使用與小工具在同一個目錄下的 Flash 檔案需要使用 m_module.resolveURl('檔名.副檔名'); 才可以正確使用， m_module.resolveURl 方法可以把相對路徑改成絕對路徑以便小工具正確讀取使用。
這個範例主要是在學習如何製作一個下拉選單與如何使用儲存偏好設定值，首先 使用者可以從下拉選單選擇要顯示的文字，然後把選擇的文字用 setPreference 存起來，下次執行小工具時再顯示上次所選擇的文字。
下載範例檔：
http://7cvpxg.blu.livefilestore.com/y1pLAgbfhAkEntMV6PcIW0s7l5-lQBO0xqhltbOY-v9ApXlRd3XvLZhb201vjlVohtb4ezrWj-iNdpg3pU9u-v9pf128lf2CPNm/Dropdown.zip?download
小工具外觀：
小工具 Javascript 程式碼 :
|
| // 註冊小工具的名稱空間 (namespace)
registerNamespace("Microsoft.Live.Spaces.Cookbook");
//// 定義此小工具的建構元 。
//(名稱必須相同於清單檔(XML)的設定)。
Microsoft.Live.Spaces.Cookbook.Dropdown = function(p_elSource, p_args, p_namespace) {
// 做任何事之前必須先呼叫 initializeBase 函式。
Microsoft.Live.Spaces.Cookbook.Dropdown.initializeBase(this, arguments);
// 設定一些私有成員變數 (private member variables)。
var m_this = this;
var m_el = p_elSource;
var m_module = p_args.module;
// 儲存元素物件的成員變數
var m_selectdd = null;
var m_textdiv = null;
//儲存 dropdown 設定的陣列成員變數
var m_arOptions = null;
/****************************************
** initialize Method (初始化方法)
****************************************/
// 當你的物件開始執行時，這個 initialize 函式會永遠立即被呼叫。
this.initialize = function(p_objScope)
{
// 總是先呼叫 Base 物件的 initialize 函式。
Microsoft.Live.Spaces.Cookbook.Dropdown.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
// 小工具背景透明化 。
if (window.parent != window.self) {
document.body.style.backgroundColor = "transparent";
}
m_arOptions = setupArray();
setupPage();
};
Microsoft.Live.Spaces.Cookbook.Dropdown.registerBaseMethod(this, "initialize");
/****************************************
** dispose Method (解除方法)
****************************************/
this.dispose = function(p_blnUnload) {
// 卸離事件
m_selectdd.detachEvent( "onchange", onDropDownChange);
// 清除所有的成員變數
m_this = null;
m_el = null;
m_module = null;
m_selectdd = null;
m_textdiv = null;
m_arOptions = null;
//置空小工具內容
m_el.innerHTML = '';
// 最後總是呼叫 base 物件的 dispose 函式
Microsoft.Live.Spaces.Cookbook.Dropdown.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
};
Microsoft.Live.Spaces.Cookbook.Dropdown.registerBaseMethod(this, "dispose");
/****************************************
** Private Methods
****************************************/
function setupArray() {
var theArray = new Array()
theArray[0] = "I love Cats"
theArray[1] = "I love Dogs"
theArray[2] = "I love Monkeys"
return theArray;
}
function setupPage()
{
//使用 getPreference 方法來提取上次選擇的索引號
var selectedMessage = m_module.getPreference("selectedMessage");
if (selectedMessage == undefined || selectedMessage == '' || selectedMessage == null) {
//當沒有任何偏好設定值被儲存，則設初值為0
selectedMessage = 0;
}
// 假如在作者模式則顯示 dropdown 下拉選單 (因為 Live.com 永遠為執行在作者模式)
var mode = m_module.getMode();
if(mode == Web.Gadget.Mode.author){
m_selectdd = document.createElement("select");
m_el.appendChild(m_selectdd);
for (var i = 0; i < m_arOptions.length; i++) {
var newOption = document.createElement("OPTION");
newOption.text = m_arOptions[i];
newOption.value = i;
m_selectdd.options.add(newOption); //新增一個選項到 m_selectedd 節點上
}
// 設定 select 顯示為上次選擇的索引號與狀態
m_selectdd.selectedIndex = selectedMessage;
//附加一個 onchange 事件 ( 當值改變的時候，則執行 onDropDownChange 副程式 )
m_selectdd.attachEvent( "onchange", onDropDownChange);
}
//顯示出現在選擇的文字
m_textdiv = document.createElement("div");
m_el.appendChild(m_textdiv);
m_textdiv.innerHTML = m_arOptions[selectedMessage];
//再更改內容之後,需要重新整理模組大小,這樣才能確定讓它顯示正確的大小
m_module.Resize();
}
function onDropDownChange()
{
//宣告 selectedMessage 為 selectedIndex ，也就是把現在選擇的索引號設給 selectedMessage
var selectedMessage = m_selectdd.selectedIndex;
m_textdiv.innerHTML = m_arOptions[selectedMessage];
//儲存偏好設定值 (儲存現在選擇的索引號)
m_module.setPreference("selectedMessage", selectedMessage);
}
};
Microsoft.Live.Spaces.Cookbook.Dropdown.registerClass("Microsoft.Live.Spaces.Cookbook.Dropdown", "Web.Bindings.Base"); |
說明:
在這個範例程式裡，紅色部分為如何加上 下拉選單 的程式碼，綠色部分為顯示選擇文字的程式碼， 橘色部分為下拉選單出現改變的時候所觸發事件的程式碼，在此範例你可以看到一開始則讀取上次儲存的偏好設定值，而當使用者點選下拉選單的時候，會執行 onDropDownChange 函式，並儲存偏好設定值。
這個範例主要是在學習如何在 Windows Live Spaces 的執行環境下製作一個更複雜更完整的小工具，由於 Windows Live Spaces 有作者模式與觀眾模式兩種，所以要加入判斷現在在什麼模式，然後應該執行什麼，由於篇幅有限，以後會以增補內容來說明此範例。
下載範例檔：
http://7cvpxg.blu.livefilestore.com/y1pLAgbfhAkEnux6zG8b97ivHaIm7AfqX6jpnAySU5ygtRXfmkeFvq_yF0BvghpKIilLpDlXylvdhm0zbuy4cfzTCudOeJwRjiu/Dropdown%20with%20Edit%20mode.zip?download
這個範例主要是在學習如何製作一個在 Windows Live Spaces 下可以讓使用者儲存 HTML 原始碼並顯示使用者自訂內容的小工具，此範例應用了如何偵測模式與儲存偏好設定值，對於學習製作一個完善的 Windows Live Spaces 是一個很好的參考範例。由於篇幅有限，以後會以增補內容來說明此範例。
下載範例檔：
http://7cvpxg.blu.livefilestore.com/y1pLAgbfhAkEntAjzKko1VFr5jNpv1gsOAYoDIjr6A7VxUl2Bbry5tiBdkRxI3vvhicdao72RXN_Uk9G2xV4YPoOjLHx_INNhM7/HTML%20Sandbox.zip?download
為什麼要上傳小工具至 Windows Live Gallery 呢?
因為上傳網頁小工具至 Windows Live Gallery 可以把您辛苦製作的小工具分享給大家，讓別人一同享受您的成果，再者如果想要在 Windows Live Spaces 讓別人看到您製作的網頁小工具也只有上傳並審核一途喔~
- 首先先確定小工具清單檔(XML)的檔名是否為 gadget.xml ，只有這個檔名才能通過審核。然後把小工具目錄內的所有檔案壓縮成一個 zip 檔。
- 接下來進入 Windows Live Gallery 網站，在左方點選「上傳項目」。 http://gallery.live.com
- 進入上傳項目頁面之後，請依順序詳細的填入應填欄位，然後在位置欄瀏覽您要上傳的小工具壓縮檔(zip)，最後再勾選「同意使用規定」與上傳即可，請注意，剛上傳的小工具不可馬上使用，必須等候大約一天的時間並通過審核才可以在 Windows Live Gallery 找到它並使用喔!
一個基本的 Gadget 將包含下面 3 個檔案 :
- Gadget Manifest (清單檔) - 其檔案採用 XML 結構的形式，檔案裡定義一些屬性與紀錄 Gadget JavaScript 與 Gadget Style Sheet 檔案的位置。(附檔名:xml)
- Gadget JavaScript (程式檔) - 這個檔案包含一些程式碼，定義 Gadget 該如何動作。(附檔名:js)
- Gadget Style Sheet (樣式表) - 一個非必要的 CSS 檔案，這個檔案會紀錄 Gadget 如何呈現外觀與介面。(附檔名:css)
在這裡會先用一個最簡單的範例讓大家了解，所以請先下載範例檔並對照本文內容，順利學習如何製作小工具。
範例檔下載：http://7cvpxg.blu.livefilestore.com/y1pLAgbfhAkEnu0QRH2Tg5WtheXw8LJlAHhZ7kabx4RD8qFCswn545SnRUDEMKaRUDdUik1dCoit-RAeW_GE33p1E6a8bmCx4QY/Hello%20World.zip?download
一個 Gadget 的各種資訊必須定義在一個 XML 檔，這裡叫做 Gadget Manifest 檔，中文名可以稱呼為清單檔，意旨該檔案也紀錄一些檔案的清單，包括 Gadget JavaScript 檔與 Gadget Style Sheet 檔案，不只如此，該檔案可以記錄更多資訊，如下：
- 定義一些 Gadget 中的靜態屬性。
- 紀錄 Gadget JavaScript 檔與 Gadget Style Sheet 檔的位置。
- 可記錄 Gadget 的標題文字，這個標題將會顯示在 Live.com 與 Windows Live Spaces 小工具的標題列。
- 設定完整的名稱空間（Namespace) ，這個名稱空間將是該 Gadget 獨一無二的識別名稱。
一個 Gadget Manifest (清單檔) - XML 的範例:
|
| <?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:binding="http://www.live.com">
<channel>
<!-- 指定小工具的名稱 -->
<title>Hello World</title>
<!-- 給小工具一個簡短的描述 -->
<description>A Windows Live Spaces Example Gadget</description>
<!-- 指定預設的語言 -->
<language>zh-tw</language>
<!-- 定義 JavsScript 物件名稱，這個名稱將與 Gadget JavaScript 檔裡的物件名稱相同 -->
<binding:type>Microsoft.Live.Spaces.Cookbook.helloWorld</binding:type>
<item>
<!-- 指定 Gadget JavaScript 檔案的位置 -->
<link>HelloWorld.js</link>
</item>
<item>
<!-- 指定 Gadget Style Sheets 檔案的位置 -->
<link binding:type="css">HelloWorld.css</link>
</item>
<icons>
<!-- 指定一個圖檔為 Live.com 小工具標題列的圖示 -->
<icon height="32" width="32">TitleIcon.gif</icon>
</icons>
</channel>
</rss> |
＊需要注意的是在<icons>...</icons>的標籤是用來設定 Live.com 裡小工具標題列的圖示，如果要製作 Spaces Gadget 則可以刪除此部分。
以下是 XML 檔對應到 Live.com 小工具的對照圖：
＊製作中文 Gadget 的相關注意事項 :
請將 XML 和 JavaScript 檔案格式存成 UTF-8 格式，且 xml 上標註 encoding 屬性，如<?xml version="1.0" encoding="UTF-8"?>如此一來，就可以顯示多國語言。
如何認識 Gadget JavaScript 的結構呢?
在這裡我們先繼續看簡單的範例:
|
|
// 註冊小工具的名稱空間 (namespace)
registerNamespace("Microsoft.Live.Spaces.Cookbook");
//// 定義此小工具的建構元 。
//(名稱必須相同於清單檔(XML)的設定)。
Microsoft.Live.Spaces.Cookbook.helloWorld = function(p_elSource, p_args, p_namespace) {
// 做任何事之前必須先呼叫 initializeBase 函式。
Microsoft.Live.Spaces.Cookbook.helloWorld.initializeBase(this, arguments);
// 設定一些私有成員變數 (private member variables)。
var m_el = p_elSource;
var m_module = p_args.module;
/****************************************
** initialize Method (初始化方法)
****************************************/
// 當你的物件開始執行時，這個 initialize 函式會永遠立即被呼叫。
this.initialize = function(p_objScope)
{
// 總是先呼叫 Base 物件的 initialize 函式。
Microsoft.Live.Spaces.Cookbook.helloWorld.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
// 小工具背景透明化 。
if (window.parent != window.self) {
document.body.style.backgroundColor = "transparent";
}
//現在我們讓小工具自動顯示 Hello World 字樣 ,並使用 innerHTML 方法。
m_el.innerHTML = "Hello World!"; //(主程式)
};
Microsoft.Live.Spaces.Cookbook.helloWorld.registerBaseMethod(this, "initialize");
/****************************************
** dispose Method (解除方法)
****************************************/
this.dispose = function(p_blnUnload) {
// 清除所有的成員變數
m_this = null;
m_el = null;
m_module = null;
// 最後總是呼叫 base 物件的 dispose 函式
Microsoft.Live.Spaces.Cookbook.helloWorld.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
};
Microsoft.Live.Spaces.Cookbook.helloWorld.registerBaseMethod(this, "dispose");
/****************************************
** 想要新增其他函式或方法可以寫到這 (副程式)
****************************************/
};
Microsoft.Live.Spaces.Cookbook.helloWorld.registerClass("Microsoft.Live.Spaces.Cookbook.helloWorld", "Web.Bindings.Base"); |
在此我們先了解這個範例是最基本的範例，在粗體字「m_el.innerHTML = "Hello World!";」的部分是整個範例中最重要的地方，像是主程式一樣，一切的運作規則由此紀錄著，而其他的程式碼可以當成模板，是 Gadget 最基本的部分，需要修改的部分僅在設定更多成員變數與修改自己的物件名稱，如下：
Microsoft.Live.Spaces.Cookbook.helloWorld 是物件名稱，前半部分Microsoft.Live.Spaces.Cookbook 也是名稱空間，
其定義在第一行 registerNamespace("Microsoft.Live.Spaces.Cookbook"); ，為了避免與其他的 Gadget 名稱互相衝突，其命名規則建議如下：
CompanyName.TeamName.GadgetName
FirstName.LastName.GadgetName
可依照建立者的公司名、團隊名或是以個人名義當作名稱都可以，最後再填入小工具的英文名稱。
再來認識一下範例中綠底的部分，稱為 initialize method ，這個 method 會在 Gadget 讀取時會自動執行，在這個 method 裡可以擺放讀取資料並反映出內容的程式碼，不過為了整體程式碼看起來更乾淨，可以把程式碼移到其他部分，如上範例紅色背景所示，需要的時候再從 initialize method 呼叫它。
而範例中黃底部分是 dispose method ，這個 method 會在 Gadget 不再需要繼續運作的時候執行，這裡可以小心加入需要清除的成員變數(private member variables)與卸離事件(detach events)以保護記憶體溢出，節省 IE 佔用的記憶體空間。
Gadget 可藉由兩種方法來對小工具加入內容，其一是使用 DOM (Document Object Model) 文件物件模型的節點概念來顯示各種內容，另一種則直接使用 innerHTML 方法來顯示內容，前者的好處在於可連結事件與動態建立內容，而兩者方法都需要把內容附加至 p_elSource 參數所包含的原始 DIV 元素之下，為了簡化程式碼，建議先在範例程式碼裡，先設立如下兩個私有成員變數
|
| var m_el = p_elSource;
var m_module = p_args.module; |
這樣一來就可以用把所有的元素附加至 m_el 私有成員變數下，而 m_module 就宣告成 Gadget 模組類別(Module Class)物件，此物件包含許多方法，可以參考 API 文件，稍待也會提及到。
那麼有了 m_el 變數之後，我們先直接使用 innerHTML 方法加入內容，如寫成 「m_el.innerHTML="HTML原始碼"; 」，就可以做出一個最簡單的 Gadget，例如此範例為:
|
| m_el.innerHTML = "Hello World!"; |
則在 Live.com 小工具顯示為如下：
接下來可以加入更完整的 HTML 原始碼：
|
| m_el.innerHTML = "<a href=\"http://tw.msn.com\">前往 MSN 台灣首頁</a>"
+"<br>"
+"<a href=\"http://gallery.live.com\">前往 Windows Live Gallery </a> |
則在 Live.com 顯示為
如果不使用 innerHTML 方法，可以用 DOM 的文件節點概念來顯示內容，範例如下：
|
| //建立一個文字輸入欄位
var textE = document.createElement("input");
textE.type = "text";
textE.value = "請輸入文字";
m_el.appendChild(textE);
//建立一個按鈕
var buttonE = document.createElement("button");
buttonE.value = "按鈕";
buttonE.attachEvent('onclick', btn_onClick); //綁定一個 onclick 事件至 buttonE
m_el.appendChild(buttonE);
//按鈕按下之後所呼叫的函式
function btn_onClick()
{
alert('按鈕已被按下');
} |
則在 Live.com 顯示為
要使用這種方法，必須知道 DOM 的各種建立、操作、設定節點的方法該如何使用，以下列出常用的節點方法：
- createElement(tagName)
建立一個節點，例如建立<br>換行標籤。
var node = document.createElement("<br>");
- appendChild(newChild)
將newChild附加至目前的節點之中，而newChild將成為目前節點的子節點
- removeChild(oldClild)
從目前節點中刪除oldChild子節點。
- setAttribute(name,value)
設定名稱為 name 的屬性，其值為 value。
imgE.setAttribute("width","100"); //設定此圖的寬為100px
知道以上節點方法就可以賦予 Gadget 更多功能的可能性，如果到目前為止範例都能看的懂，恭喜你，您已經具備開發小工具的能力了，要如何讓小工具增加更多功能，可以參考下一節，這裡主要是介紹要如何加入內容與從哪裡開始加入程式碼， 讓您先有個觀念。
小工具可以從空間名稱與小工具物件名稱來設定CSS Class，範例如下：
|
| .Microsoft_Live_Spaces_Cookbook_helloWorld
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
} |
為了避免和其他的 Gadget CSS 重複，請盡量可能再加入一個選擇器，範例如下：
|
| /* 凡 DIV 標籤皆會套用此CSS樣式 */
.Microsoft_Live_Spaces_Cookbook_helloWorld DIV
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* 凡有設定 class="intro" 的標籤為 intro 才會套用此CSS樣式*/
.Microsoft_Live_Spaces_Cookbook_helloWorld .intro
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
} |
要在Gadget 裡儲存偏好設定值很容易，您可以透過 p_args.module 代表的模組類別 (Module Class) 物件，然後使用 API 提供的提取、儲存、刪除偏好設定值的方法來儲存關鍵字與值，關鍵字名稱(key)必須是一個字串，而值(value)可以是純字串或是一個 JavaScript 物件，這些偏好設定值相關方法的函式如下:
|
|
getPreference(key); // 根據關鍵字來提取偏好設定值
setPreference(key, value); // 根據關鍵字來儲存偏好設定值
deletePreference(key); // 根據關鍵字來刪除偏好設定值
|
特別要注意的是，每個 Gadget 不能儲存太多偏好設定值，目前太約只開放 1000 字元(包含關鍵字名稱與偏好設定值)，在未來會提供另外的 APIs 來儲存大量資料，不過現在尚未完成。
還有要注意的是，當你在儲存一個使用者的偏好設定值，即 setPreference 方法，這個偏好設定值在此 Gadget 尚未重新讀取網頁之前，是不可用 getPrefernce 來提取的，就算讀取也為之前的值。
範例:
|
|
CompanyName.TeamName.ExampleGadget = function(p_elSource, p_args, p_namespace)
{
CompanyName.TeamName.ExampleGadget.initializeBase(this, arguments);
var m_this = this;
var m_module = p_args.module;
var m_preferenceKey = "prefKey"; //宣告關鍵字為preKey
this.initialize = function(p_objScope)
{
CompanyName.TeamName.ExampleGadget.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
// 嘗試提取偏好設定值
var prefValue = m_module.getPreference(m_preferenceKey);
if (prefValue == null)
{
var prefValue = new Object();
savedValues = new Array();
savedValues.push("some value");
savedValues.push("some other value");
prefValue.savedValues = savedValues;
prefValue.arbitraryData = 3.14159;
// 儲存偏好設定值 (在這我們可以直接儲存 JavaScript 物件，沒有限制只能儲存字串值，這樣可以減低複雜度)
m_module.setPreference(m_preferenceKey, prefValue);
}
else
{
//刪除偏好設定值
m_module.deletePreference(m_preferenceKey);
}
}
}
CompanyName.TeamName.ExampleGadget.registerClass( "CompanyName.TeamName.ExampleGadget", "Web.Bindings.Base");
|
由以上範例可以學習如何在 Gadget 裡儲存偏好設定值，方便使用者記錄自己的喜好設定。
在 Windows Live Spaces 裡我們也可以藉由 add gadget URL (加入小工具網址) 來儲存預設的偏好設定值，只要在網址後方加入 wxp_ini 的參數，而參數的值必須採用下列格式：
{ 'preferenceName' : 'value' , 'anotherPreferenceName' : 'value' }
這樣的寫法與 JavaScript 拿來寫物件導向程式的觀念 - JSON (JavaScript Oriented Notation) 寫法是類似的，不過這個值需要用 escape 編碼，才可以正常儲存，所以正確的加入網址如下：
http://spaces.live.com/api.aspx?wx_action=addGadget&wxp_url=GalleryGadgetUrl&wxp_ini=%7B%27preferenceName%27%3A%27value%27%2C%27anotherPreferenceName%27%3A%27value%27%7D
為何需要判斷小工具的執行平台呢？
因為有些網頁小工具，例如計數器，只適合在 Windows Live Spaces 上應用，也為了讓小工具能夠在不同的平台上執行不同的程式碼，所以需要有判斷小工具的程式碼，讓小工具正確執行該有的應用。
為了讓事情簡單化，這裡定義一些 enum (列舉型態)：
|
|
ToddOs.WhereAmI.Location = Web.Enum.create("Live","Gallery","Spaces");
|
在這裡示範如何偵測小工具是否執行在 Spaces 裡:
示範副程式：
|
|
function CheckWhereAmI()
{
var loc = window.location.toString()
// 偵測到網址有 spaces.start.com 則為 Windows Live Spaces
if (loc.indexOf("spaces.start.com") >= 0)
{
m_isSpaces = ToddOs.WhereAmI.Location.Spaces;
//順便讀取Windows Live Spaces 的帳號名稱
m_spacesName = loc.substring(loc.indexOf("host=") + 5, loc.indexOf(".spaces.live.com"));
}
else //否則為 Windows Live Gallery 或是 Live.com，假設小工具不理會在 Gallery 執行。
{
m_location = ToddOs.WhereAmI.Location.Live;
}
}
|
有了以上的副程式以後，就可以用如下的判斷式來決定要執行的程式碼。
|
|
if ( m_location == ToddOs.WhereAmI.Location.Spaces ) {
//擺放小工具在 Windows Live Spaces 要執行的程式碼。
}
else if( m_location == ToddOs.WhereAmI.Location.Live ){
//擺放小工具在 Live.com 要執行的程式碼。
}
|
Windows Live Spaces 的小工具擁有兩種執行模式，一種是在「編輯您的分享空間」執行的作者模式 (Author) ，另一種是給大家瀏覽的觀眾模式 (Viewer)，您可以依據模式的不同來給予不同的執行內容，而這些可以透過 p_args.module 代表的模組類別 (Module Class) 物件，且使用 API 所提供的 getMode() 方法來判斷。
p_args.module.getMode() 的回傳值固定為
作者 : Web.Gadget.Mode.author
觀眾 : Web.Gadget.Mode.viewer
兩種。
範例：
|
|
// 先宣告一個私有成員變數方便以後使用模組類別物件
m_module = p_args.module;
//宣告 m_mode 為 getMode 方法的回傳值
m_mode = m_module.getMode() ;
if ( m_mode == Web.Gadget.Mode.author )
{
// 執行 Spaces 小工具在「編輯您的分享空間」的模式下所要執行的程式碼
}
else if( m_mode == Web.Gadget.Mode.viewer )
{
// 執行 Spaces 小工具在「瀏覽者」的模式下所要執行的程式碼
}
|
不過要注意的是，網頁小工具在 Live.com 裡只有作者模式 (Author Mode) ，因為自己的個人化網頁 Live.com 也只有自己看到而已，如此也就不需要加上以上的程式碼範例。
小工具的寬度對整體的介面、外觀精美度是很重要的，在 Live.com 裡，小工具總是設定為 100% 的寬度，而實際的寬度會依照欄位的多寡不同而決定，而每個欄位的寬度是相同的；在 Windows Live Spaces 裡，小工具在較大的欄位可以調整框度，可調整的範圍也只有「全寬度」會是「半寬度」而已，雖然小工具不管在哪個平台執行都不能調整寬度，不過卻可以透過 p_elSource 參數的 offsetWidth 方法來偵測小工具寬度，然後再依據需要放上不同寬度範圍而執行不同的程式碼。
|
|
var myWidth = p_elSource.offsetWidth
|
Live.com 小工具在不同情況下的寬度表：
| 螢幕解析度
| 欄位數目
| 小工具寬度 (Pixel)
|
| 800x600
| 4
| 166
|
| 3
| 229
|
| 2
| 355
|
| 1
| 732
|
| 1024x768
| 4
| 222
|
| 3
| 303
|
| 2
| 466
|
| 1
| 955 |
有時候小工具在設計上，因為某事件發生過後而可能會更改小工具的外觀大小，這時候就需要模組類別 (Module Class) 物件的 resize 方法來重新顯示小工具的外觀。
範例：
|
|
p_args.module.resize();
|
製作 Gadget 除了本系列文章還有哪些資料可以參考 ?
http://microsoftgadgets.com/livesdk/index.htm - 英文版 Web Gadget SDK 文件集。
http://microsoftgadgets.com/livesdk/docs/apiref.htm - 英文版 Windows Live Gadget 平台的 API 文件。
http://dev.live.com/gadgets/default.aspx?app=gadgets - Spaces Gadget 官方網站。
http://spacesplatform.spaces.live.com - 英文官方 Spaces 開發部落格 。
http://www.liveside.net - 一個擁有許多 gadgets 資訊的第三方網站。
http://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=1062&SiteID=1
- 一個關於 Windows Live Spaces Gadget 開發的英文官方 MSDN 論壇 。
要如何讓小工具增加更多功能，可以參考下一節，下一章節將有更多範例喔～
Live.com 小工具與 Windows Live Spaces 小工具皆屬於 Web Gadget 的範圍內，那麼什麼是 Web Gadget ?
Gadget ，中文稱作「小工具」，泛指具有簡單、精巧、只達成某項功能或是可以取得特定部分資訊的小軟體，如果在個人網頁上執行的 Gadget 則稱為 「Web Gadget」也就是「網頁小工具」。這類小工具都有著共通的特性，那就是不能單獨執行，必須要有可以讓它執行的地方，而「網頁小工具」的責執行在「Live.com」或「Windows Live Spaces」，而另一種不屬於 Web Gadget 的「資訊看板小工具」則執行在 Windows Vista 裡面的「資訊看板」。
一個 Web Gadget 的設計宗旨如下:
- 為單一功能與目標而建立。
- 必須有所簡潔、簡單、易用，避免繁雜。
- 在介面上顯示必要的資訊與特色。
- 必須呈現使用著容易了解的資訊。
- 讓使用者能省下許多時間專注在更重要的資訊上。
- 不能取代真正的應用軟體。
範例：
|
|
|
- 複雜的介面
- 把一個網頁嵌入在 Gadget
- 看起來比較像應用軟體
|
- 所有的設計構思必須環繞在它最主要的目的上。
- 能用最少的設定讓使用者簡單的操作。
- Gadget 小工具的設計取得單一目標與符合使用者情景為中心。一個 Gadget 無法完整取代應用軟體的地位，而事實上它更像幫助已存在軟體或服務的小工具，而且藉由使用者加入小工具到自己的部落格首頁或是其他網頁裡，就可以讓 Gadget 給您一個宣傳產品或服務的機會。
- Gadget 小工具必須能後快速的取得與顯示資訊，以免讓使用者過度等待。
＊總而言之，一個好的小工具需要發揮它的實用性與資訊取得的便利性，而且還要有簡單易用的介面，假如是太複雜、太專業的功能就不需要使用小工具，反而會弄巧成拙，失去小工具應有的價值。
1.要建立一個網頁小工具 (以下可簡稱 Gadget ) 並非困難，但也需要一些製作網頁程式的基礎知識，如 XML、Javascript、CSS、HTML。
2.除此之外，建議在您的電腦裡架設一套網站伺服器(建議為IIS)，以方便測試與除錯您的 Gadget。
3.當然還要有一個開發軟體，簡易的如記事本、 FrontPage，如果未來想要建立一個複雜的 Gadget，微軟也提供一套免費的開發軟體 Visual Web Developer 2005 Express 協助開發與除錯 。
Visual Web Developer 2005 Express 下載網址 : http://msdn.microsoft.com/vstudio/express/vwd/
你必須設定 Internet Explorer 內的信任與存取各網域的資料來源 ，以方便除錯開發中的 Gadget。
1.首先，在 Internet Explorer 內選擇 ｢工具｣ → ｢網際網路選項｣ → ｢安全性｣ → ｢信任的網站｣ → ｢網站｣ ，新增 ｢http://*.live.com｣ 與 ｢http://*.start.com｣。
2.在 Internet Explorer 內選擇 ｢工具｣ → ｢網際網路選項｣ → ｢安全性｣ → ｢網際網路｣ → ｢自定 層級｣ → ｢存取各網域的資料來源｣，設定為 ｢提示｣ ，層級為 ｢中等｣。 然後繼續再選擇｢網際網路選項｣ → ｢安全性｣ → ｢信任的網站｣ → ｢自定層級｣ → ｢存取各網域的資料來源｣，設定為 ｢提示｣ ，層級為 ｢中等｣。
3. 在 Internet Explorer 內選擇 ｢工具｣ → ｢網際網路選項｣ → ｢ Temporary Internet files｣ → ｢設定｣ 變更為 ｢每次查閱畫面時｣。
1.首先，下載並儲存範例檔案。下載網址：http://microsoftgadgets.com/livesdk/samples/samples.zip
2.把範例檔案解壓縮至「 C:\Gadgets 」資料夾，然後在此資料夾就會建立一個「 C:\Gadgets\Samples 」資料夾。
(在此壓縮檔裡，會解壓縮出 Hello、Notepad、RssGadget、WebWrapper 四個資料夾)
3.開啟「控制台」 → 「系統管理工具」 → 「 Internet Information Services 」 → 「新增虛擬目錄」 且命名為「 Gadgets 」，並把目錄指向「 C:\Gadgets\Samples 」資料夾 。
*注意:操作此步之前，您的作業系統必須安裝 Internet Information Service (IIS) ，這項功能在Windows XP 是不會預設安裝的，如何安裝可以參考 「此頁」
4.接著請在 Internet Explorer 確認 小工具的清單檔 (Manifest) 也就是Gadget 的 XML 檔網址是否可正常連結使用 - 依範例，則在網址列輸入 「 http://localhost/Gadgets/hello/HelloWorldGadget.xml 」即可正確連到本機 IIS 裡的檔案。你可以看到Gadget 的 XML 檔在 IE 7 會顯示如下的樣貌。
請注意：
- 如果Gadget 的 XML 檔網址為有效網域網址則在 Live.com 可直接拿來使用，不需上傳至 Windows Live Gallery，但是如果為 Wnindows Live Spaces 所製作的小工具則需要上傳至 Windows Live Gallery 並通過審核，才可正式使用，而直接拿自己的網址直接加入 Windows Live Spaces 是無法讓大家看到您辛辛苦苦製作的小工具喔。
- 不管在 Live.com 或 Spaces 裡，Gadget 的 XML 檔網址必須為該網址的預設Port 80 ，不可自行設定為其他值，如 http://localhost:88/ 。
1.然後打開瀏覽器，在網址列輸入「 http://live.com 」進入個人化網頁平台，點選「新增專區項目」→「進階選項」，然後在「使用 URL 新增小工具」，填入剛才確認可連結的 Gadget 的 XML 檔網址 - 「 http://localhost/Gadgets/hello/HelloWorldGadget.xml 」，然後再按下「訂閱」，新增這個「 Hello World 」範例小工具。
2.按下訂閱鈕之後，如果成功，則不會顯示紅色的「無法新增此摘要，請稍後再試。」 並且會顯示如下的安全性提示框，請按「是」，這個安全性提示框是因為設定「存取各網域的資料來源」而出現的，之後你將可以在「我的專區」看到「Hello World」這個範例小工具，按下它則可重新加入「Hello World」範例小工具。
3.或者你可以在瀏覽器打入以下網址把完成的小工具直接加入至 Live.com 做測試喔!
http://www.live.com/?add=Gadget 的 XML 檔網址
例如本範例則要打成
http://www.live.com/?add=http://localhost/Gadgets/hello/HelloWorldGadget.xml
1.請直接在瀏覽器網址列輸入以下網址把完成的小工具直接加入至 Windows Live Spaces 做測試喔!
http://spaces.live.com/spacesapi.aspx?wx_action=create&wx_url=Gadget 的 XML 檔網址
例如本範例則要打成
http://spaces.live.com/spacesapi.aspx?wx_action=create&wx_url=http://localhost/Gadgets/hello/HelloWorldGadget.xml
2.接著會打開新視窗並顯示如下的安全性提示框，請按「是」，這個安全性提示框是因為設定「存取各網域的資料來源」而出現的。
3.然後可以看到分享空間的 Gadget 開發人員預覽頁面會預覽顯示剛才加入的 Gadget，請繼續按「安裝」。
4.接著就可以把該 Gadget 加入至 Windows Live Spaces 裡囉!
因為 Internet Explorer 預設的除錯功能為關閉的，若要開啟 IE 的除錯功能則選擇 ｢工具｣ → ｢網際網路選項｣ → 「進階」，把「停用指令碼除錯 (Internet Explorer)」與「停用指令碼除錯 (其它)」取消勾選即可。
- 請先選擇「檔案」→「開啟網站」，然後選擇要開啟的網站，之後再軟體右方選擇「方案總管」並拉開選單，然後依圖所示點選最上方的選項，再按右鍵選擇「屬性頁」。
- 請在「起始 URL 」填入「 http://gadgets.start.com/gadget.aspx?manifestUrl=Gadget 的 XML 檔網址」，例如本範例就用「 http://localhost/Gadgets/hello/HelloWorldGadget.xml 」 做為清單檔網址，也就是最後填入
「 http://gadgets.start.com/gadget.aspx?manifestUrl=http://localhost/Gadgets/hello/HelloWorldGadget.xml」即可，接著再按下「確定」。
- 之後打開你的 Gadget JavaScript 檔，設定中斷點。
- 按下 F5，即可啟動 Gadget 並偵錯。
建立好開發環境之後就可以開始動手做一個 Gadget 囉! 在下一章中，會教您如何製作一個 Gadget 唷!
 Live.com 除了可以加入RSS摘要之外，更可以加入許多小工具(Gadget)，小工具就好像是大型軟體的簡化版，像是 Windows Live Hotmail 的簡化版就是一個 Live.com 裡的小工具，也可以是為單一功能而設計的小軟體，像是天氣預報、會顯示時間的精美 Flash 時鐘等，也可以是網路收音機或是小遊戲，或是未來有更多主意都可能用小工具加以實現，有了許多小工具的 Live.com，網頁就被賦予更多的價值，讓 Live.com 就像是一個線上的桌面平台，也許您會問 Live.com 使用 Gadget 小工具有什麼好處呢? 是的! 沒錯! 以後不管您人在何方，只要登入 Live.com 之後，就等於是把包含著許多小軟體的桌面帶著跑，達成"工具"的"可攜性"，讓每天忙碌的你，不需要到哪裡都要再煩惱一次小軟體放在哪呢？小工具哪裡有呢? 不要急！Live.com 的目錄裡面也有擺著值得推薦的 Gadget 小工具，加入這些推薦的小工具之後，你一定還要更多 Gadget 小工具，所以微軟也有專門整合各種小工具與自訂內容的網站 - Windows Live Gallery ，在裡面你可以透過「搜尋 Gallery」的功能，把想要的小工具從百寶庫裡挖出來，也有以分類、最新與熱門等的方式展示來自世界各地「貢獻者」的 Gadget 小工具，相信在透過眾人的智慧之後，能讓 Live.com 更具使用價值，所以趕快將自己的個人 Live.com 網頁新增更多 Gadget 小工具，讓你的 Live.com 更活潑起來！把天氣、時間、遊戲、電視…等各項生活小工具放進來，讓你的生活玩更多！！
噓…別讓老闆聽到！透過 Live.com 也可以把小遊戲裝在自己的網頁中，忙碌之餘也該歡樂放鬆一下！
1.先按「新增專區項目」再按「目錄」接著選擇「Gadget 小工具」再選擇您想加入的小工具，最後再按下「新增」即可加入 Live.com。
1.先在瀏覽器網址列鍵入 http://gallery.live.com ，然後在下方選擇 Live.com ，代表是擺放在 Live.com 的小工具。
2.接著再點選「網頁小工具」，就可以瀏覽許多多大加上傳分享的 Gadget 小工具。
3.接著在頁面左方可以選擇您要顯示的「小工具分類」，如圖您還可以調整順序與檢視模式，然後在喜歡的小工具項目上按下「新增」。
4.按下「新增」之後，選擇「Live.com」則可把小工具加入至 Live.com 個人化首頁平台，如果選擇「分享空間」則可把小工具新增至「Windows Live Spaces」裡。
5.再次按下「新增」之後，會開新窗並進入下面畫面的頁面，這時 Live.com 會問您「是否要將此小工具新增到 Live.com?」請繼續按「新增」。
6.接著就會在 Live.com 出現該小工具的欄位，不過還不可以使用，因為還沒安裝呢！所以請按下「安裝小工具」。
7.安裝完畢之後，就可以放心使用這項工具囉！恭喜！
依照以上步驟，您學會了嗎？Windows Live Gallery 裡還有許許多多的網頁小工具等你去挖掘呢!
預告: 在下一篇裡我們將會教您如何在 Live.com 裡善用許多多已開發的小工具，讓生活更加豐富有趣。
 上網對時下年輕人是最流行也是最容易吸收新資訊的途徑，喜歡上網的人，必定有許多網站或是朋友的部落格要逛吧，這樣每天都會花上不少時間，而且你要逛的網站不一定會有更新的內容，就好像忙碌的你不可能到世界各地去現場看每場球賽，必定有個體育頻道幫你轉播一樣，而你只要在家躺著，把電視擺好，反而比在現場看的人還要更 High，所以在網路世界裡，各種想看的資訊、有用的內容，也要有個集中地，Live.com 個人化首頁就提供了一個很好的平台，創造了省時又省力的好方法，自訂要顯示來自網路上的最新內容，體驗自己當總編的樂趣，你也可以看成是書籤的進化版，由點變成面，一覽無疑，每天都要上網的你，何不試試 Live.com - 幫您隨時抓住網路動態的這個好幫手。
 Live.com 集合3大功能 - 搜尋、摘要、小工具，也就是 Search、RSS、Gadget。
搜 尋：您可以鍵入關鍵字搜尋網路上的資料。
RSS摘要：將各個網站所提供的主動餵食RSS資料內容至您的 Live.com，讓您以後不需再跑到該網頁瀏覽資訊。
小工具：從英文 Gadget 翻譯而來，專門為取得單一資訊或簡單的功能而設計，類似小軟體。
1.先在瀏覽器網址列鍵入 http://live.com ，然後在右上方按下登入。
＊不進行登入也可執行畫面功能，可是當次作業的各項設定紀錄可是不會存檔唷！那辛苦設定的下次就全部不見了。
2.進入登入畫面之後，鍵入帳號及密碼，再按下登入。接著就能進入 Live.com 體驗強大的資訊整合平台囉!
登入共分為「已有帳號舊使用者」、「無帳號新申請者」兩部分選擇。
(1)已有 Windows Live ID 或 MSN 帳號密碼者，若你已經先行開啟使用登入 MSN，系統會自動抓到你的個人已存有的帳號，你可從右方選擇要登入的帳號並輸入密碼，或可選擇使用不同帳號登入的選項。
(2)新使用者可以左方「註冊 Windows Live！」進行帳號申請。
1.在 Live.com 頁面右上方點選「選項」，然後頁面彈跳出小選單，只要移動滑鼠點選你要的選項，頁面就會自動更新。
2-1.可選擇未來整個頁面資訊出現的欄位排列方式
2.2.可選擇頁面的顏色
2-3.可選擇你要使用的語言介面
3.內容分類擺放，可以讓個人的網頁更清晰明瞭。
只要點選「新網頁」就會彈出小選單，可選擇「重新命名網頁」，鍵入自己喜歡的名稱。
還可點選「+新增網頁」，不斷擴增需要的網頁。
4.你瞧，這樣的分類就一目暸然囉！
5.有了多種分類之後，您可以拖曳分頁重新調整順序。
6.再加入許多資料後，要如何編排自己的內容呢？您可以使用滑鼠拖曳就能辦到這一切。
7.在每個 RSS 摘要都可以設定要顯示多少項目，這可以依照該 RSS 摘要的更新度而定；而重新整理功能可以在 RSS 讀取失敗的時候用到。
你已準備磨拳擦掌，讓自己的 Live.com 網站獨一無二了嗎？Live.com 以用戶為核心，讓你充分掌握一切，喜歡加入多少內容全由你決定！
簡單又多樣的新增、刪除功能，彈指之間輕而易舉。快將喜歡的內容加進個人 Live.com 頁面中，體驗網路生活的便利和無限可能！
Let's go！
(a) 首先假設什麼內容都沒有加入，所以先按新增專區項目添加內容。
(b) 在此假設要新增 Favorites (線上我的最愛) 小工具，選擇 Windows Live 目錄，在 Favorites 處按下滑鼠左鍵不放拖曳到下方網頁，就可添加 Favorites 小工具。
(a) 請在 Live.com 頁面左上方按下「新增專區項目」。
(b) 接著點選「進階選項」，在搜尋摘要空白欄位上，填上想要搜尋的關鍵字，再按下右邊的放大鏡執行搜尋動作。
(c) 在有關鍵字的眾多文章中，選擇想要的內容，並將滑鼠點選網址後方的「新增至 Live.com」。
(d) 接著會出現此 RSS 摘要的預覽，再按下「新增」就可以看到該內容已經被捕抓到你的個人 Live.com 網頁中囉！
(e) 以下是用「關鍵字」的方法把內容加入至 Live.com 的動畫範例。
(a) 點選「進階選項」，在「訂閱特定摘要」空白欄輸入網站提供的 RSS 網址(通常會紀錄在 圖上)，再按下右邊的「訂閱」，這樣就會自動將該網站最新的內容摘要抓到你的 Live.com 囉！
小秘訣：如果你不知你想要加入的網站有沒有提供 RSS 網址，那麼請直接輸入該網站的網址，Live.com 會自動在網站找尋 RSS 網址，如有則加入。
(b) 以下是用「RSS 網址加入」的方法把內容加入至 Live.com 的動畫範例。
什麼是 OPML ? 簡單說就是記錄許多 RSS 網址的 XML 檔案或是網址。
(a) 點選「進階選項」，在「匯入 OPML 檔案」空白欄輸入 OPML 網址(通常會紀錄在該網站的 圖裡)，或是按下瀏覽，打開存放在電腦中的 OPML 檔案，然後再按下右邊的「匯入」。
(b) 然後再按下「我的專區」，在「我的專區」裡擺放著剛剛記錄在 OPML 檔案裡所有的 RSS 網址。接著你可以拖曳至 Live.com 裡囉！
Live.com 共內建兩種方法 ，方法一可以分享該分頁裡的所有的內容，而方法二可以分享 Live.com 所有摘要的內容 。
(a) 在分頁的最右方可以看到「分享」鈕，按下之後可以選擇「使用電子郵件傳送連結」，然後再點選「確定」，接著就會彈出連結視窗，你可以把此連結用 Messenger 或 Email 傳送給您的朋友。
(b) 接著您的朋友只要在登入 Live.com 之後再網址列輸入此網址，然後會預覽在一個分頁裡，分頁名稱也會多出「(預覽)」，若您的朋友確定要加入，在黃色通知列按下「是」即可加入 。
將游標移至最下方文字列，按下「這裡」兩字，即開始進行匯出作業。
然後在新視窗裡會將你網頁中的內容項目呈現出來。將滑鼠移到「網頁」選單裡的「另存新檔」，將 ExportOPML 檔案存在你的電腦資料夾內，就完成匯出的動作。
然後再把檔案傳給朋友，讓你在 Live.com 裡的所有的摘要內容，能整個加入至朋友的 Live.com 網頁中唷!
在看完那麼多功能之後，一定會覺得 Live.com 是個輕鬆又方便收取新資訊的平台，在下一篇裡，我們將會繼續介紹如何在 Live.com 加入更多小工具 Gadget，包括 Email、天氣、日曆、時鐘、生理時間計算器、星座等，甚至收音機、電視機！！都可以加入到 Live.com 裡喔！不來試一下就可惜了呢！
Windows Live Toolbar 快捷按鈕的製作非常的簡單，只要透過 Windows Live Gallery 網頁中的「自訂快捷按鈕」頁面的指引，就可以馬上製作出個人化的快捷按鈕。
事前準備：
所欲新增到快捷按鈕的網址與名稱
100×100 像素 jpg 圖一張，檔案大小控制在 5K以下
16×16 像素bmp 圖一張
製作方式：
1.開啟 http://www.gallery.live.com，並以自己的 Hotmail Passport 登入。
2.開啟「自訂快捷按鈕」頁面，
2.1.文字標籤：(必填資訊) 
請輸入此按鈕在工具列上顯現的文字標籤。如：我的 MSN。此欄可以填入中文字。
2.2.名稱：(必填資訊)
請輸入快捷按鈕名稱，限單一字詞，且此欄位不允許非 ASCII 字元。如： “MyMSN”是允許的，但 “My MSN”、 “我的MSN” 是不被允許的。
2.3.快捷按鈕關鍵字： (必填資訊)
此欄位是用來識別您建立的快捷按鈕的單一字詞，例如某個數字、別名或公司名稱。此欄位也不允許非 ASCII 字元。
2.4.工具提示：(必填資訊)
所謂的工具提示是指當滑鼠游標移到快捷按鈕上方時會顯示的文字敘述，最多 128 個字元，可以是中文字。
2.5.快速鍵：(必填資訊)
快速鍵是指當您按下快速按鈕時，會開啟您所設定的網址，最多可設定同時開啟 5 個以上的網址，最少輸入一個。
特別注意事項：
2.5.1.您所建立的順序無法在此調整，在您新增之前，您就必需先想好順序。
2.5.2.請確認沒有列出超過 5 個以上的網址。
2.5.3.網址必須使用正確格式，如 http://www.live.com。每一行只輸入一個網址，並以 http:// 或 https:// 開頭。
2.6.圖示：
提供此快捷按鈕的圖示。若要有最佳顯示效果，請使用 16 x 16 像素的點陣圖 (BMP)，並以色票碼 #C0C0C0 為圖的底色。
上載影像若發生問題，請確認是否上載點陣圖影像 (副檔名為 .BMP)，以及檔案路徑是否正確。
3.在「免責聲明」的欄位中，勾選「同意上傳內容增補條款」後，按下「建立」即可完成快捷按鈕的製作。
4.接下來會跳到另一視窗中，您可以選擇「新增至我的工具列」、「下載已建立的快捷按鈕套件」或「在 Windows Live Gallery 與其他人分享此快捷按鈕」。
4.1.新增至我的工具列：
當您按下「新增至我的工具列」時，會將您所建立的快捷按鈕新增到工具列之中，在您重新啟動視窗之後，便可立即使用。
4.2.下載已建立的快捷按鈕套件：
您可以將建立好的快捷按鈕，以 *.btn 的檔案儲存到自己的電腦中，以便於自行修改內容、測試或上傳到 Windows Live Gallery 與其他人分享。相關內容，請參閱進階篇。
4.3.在 Windows Live Gallery 與其他人分享此快捷按鈕：
您可以將建立好的快捷按鈕上傳到Windows Live Gallery 中與大眾分享。
在您選擇此選項時，會先要求Hotmail Passport 登入 (假設您尚未登入)，此時將會連到「我的基本資料」中，您將會看到您所建立的快捷按鈕名稱後方會出 (尚待核准) 字樣。
大約幾個工作天即可被核准。核准之後，此快捷接鈕將會出現在 Windows Live Gallery 工具列的快捷按紐下載頁面中。
單純的網址群組
將網站中的所有連結統合成一個按鈕，方便網路使用者快速的點選到正確的網站，相較於 IE 瀏覽器中的「我的最愛」能提供更多的連結與分類。
即時性的文章顯示
如果網站提供RSS Feed 的功能，快捷按鈕可以立即顯示網站的最新的連結內容。
將網站的搜尋功能加入工具列中
Windows Live Toolbar 中有一個搜尋視窗，如果某個網站有搜尋的功能，您也可以將此新增到快捷按鈕中，並且透過Windows Live Toolbar 的搜尋視窗來使用此網站中搜尋功能。
|
Tools 
Help
的圖片，然後在圖上按右鍵，選擇 「複製捷徑」，然後把已經複製到剪貼簿裡的 RSS 網址貼入Live.com 裡的「進階選項」→「訂閱」裡，就可以用 Live.com 讀取 RSS 來源囉。
加註 * 為微軟官方所建立。 
