歡迎 來到Yahoo!奇摩Widget Engine 的精彩世界！ 您好。本教學課程將會為您介紹您需要瞭解的一切內容，讓您可以使用 XML 與 JavaScript 來建立簡單 的 Widget，並將其提交至我們的Yahoo!奇摩Widget工具網站「更多Widget工具」裡。首先，我們將為您 介紹開始使用時所需要的所有基本公用程式，以及 Mac 與 Windows Widget 工具的封裝方式，然後會 為您介紹如何撰寫 XML 的最佳、完整流程，接下來我們會深入探討 Yahoo!奇摩Widget Engine 的 JavaScripting，最後將會說明當將您製作的 Widget工具提交給我們的官方網站登錄時需要遵循的步驟， 從而為我們的教學課程畫上圓滿的句號。 我們已經盡了最大的努力來使本文內容淺顯易懂，希望不會使大家對這些技術術語感到困惑，但是擁有為 HTML 或 CSS 程式編寫的經驗還是會對您有所幫助的。 請注意，本教學課程只是要為您簡介包羅萬象的 JavaScript (它也包含了 XML 的介紹)。當您完成了本教 學課程之後，您可能會想要買本 JavaScripting 的書，深入瞭解語言的部分，然後利用陣列、“for” 與 “while” 迴圈、規則運算式及其他常用工具來建立更高階的 Widget。 因此，別想著結束的事情，讓我們現在就開始學習吧。以下是在閱讀本教學課程時所需要注意的各種不同 的內容。
這是一個指示方塊。當您看到綠色方塊中的文字之後，請依照其中提供的指示來進行。 這是程式碼方塊。這些是您可以使用的 XML 或 JavaScript 的程式碼片段。如果此方塊是綠色的，請在適當的地方使用程式碼。
這是一個包含了重要資訊的方塊。當您遇到可以透過此方塊中的指示或建議來避免的問 題時，請盡量依照指示來進行。如果這裡包含程式碼方塊，您應該特別注意，確定程式 碼與您在方塊中找到的程式碼一致。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
1
Yahoo!奇摩Widget Engine 首先，您可能會需要 Yahoo!奇摩Widget Engine 3.x。您可以從 http://tw.widget.yahoo.com/download/ 中 找到它。在開始本教學課程之前，請先啟動它。
文字編輯器 接下來您需要使用文字編輯器。在 Windows 中，您可以使用 NotePad，或者如果在 Mac 中，您可以 使用 TextEdit，但是請務必使用純文字 (只需選擇「格式」>「建立純文字」即可)。但是，我們建議您使 用協力廠商的文字編輯器來編輯程式碼，如此您將可以隨意快速有效地編寫程式碼。對於 TextEdit 來說， 預設設定會使它依預設儲存為 RTF 格式，因此您最好取得一個真正的文字編輯器，這樣您就無須處理這 些問題了。 就在 Windows 上執行的文字編輯器而言，比較好的的協力廠商工具為 NoteTab Light (它是免費的) 或 EditPlus (約三十美元的價格可能會使您望之卻步)。您可以到 http:// www.notetab.com/ntl.php 上取得 NoteTab Light，或到 http://www.editplus.com/ 上取得 EditPlus。EditPlus 有一個試用期，因此您可以 對其進行測試，確定它是否值得您購買，還是使用 NoteTab Light。 在 Mac 上，也有兩個編輯器可供您使用。您可以花 199 美元購買 BBEdit (http://www.barebones.com/products/bbedit/index.shtml)，而且也可以先試用以確定是否值得購買及使 用，或者您也可以選擇使用其他免費的編輯器。最好的免費編輯器有兩套，一套是 TextWrangler (http://www.barebones.com/products/textwrangler/index.shtml)，它是 BBEdit 的簡易版，另一套是 SubEthaEdit (http://www.codingmonkeys.de/subethaedit/)，這是用於非商業用途的文字編輯器，而且擁 有令人驚訝的合作模式，當需要其他人幫您編寫程式碼時，它是非常好用的。
影像編輯器 接下來，該是影像編輯器展示用途的時候了。遺憾的是，影像編輯器幾乎沒有免費的，因此，如果想要製 作出最佳的圖形，您就需要花點錢來購買了。不過，也有一個好消息提供給您；那就是有一種叫做 GIMP (http://www.gimp.org/) 的圖形編輯器，它不僅是免費的，而且既可以在 Windows 上使用，也可以在 Mac OS X 上使用。但是，使用 GIMP 會有一定的困難，即您所要學習的介面可能不是很人性化，也就是說 學習的過程將會很艱難。如果您想要花錢購買 (或者如果您已經擁有這些程式了)，任何正廠的市售影像編 輯器都很好用，只要它能夠匯出 PNG 檔案 – 您將最常用到的格式即可。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
2
影像編輯器，續 下面為您列出了一些比較好的程式。 • Photoshop http://www.adobe.com/products/photoshop/main.html • Paint Shop Pro http://www.corel.com/servlet/Satellite?pagename=Corel3/Products/ Display&pfid=1047024307383&pid=1047023911984 • Painter http://www.corel.com/servlet/Satellite?pagename=Corel3/Products/ Display&pfid=1047024307407 • Macromedia Fireworks http://www.macromedia.com/software/fireworks/
說明文件與Widget工具 最後，您需要一些說明文件以及其他一些項目。很顯然地，您需要這個教學課程，但同時您也需要「Yahoo! 奇摩Widget Engine 參考手冊」(您隨時都可以到 http://tw.widgets.yahoo.com/download/ 上找到最新的 版本)。還有一本有關 JavaScript 的書也會對您有所幫助；我們推薦您購買 JavaScript - The Definitive Guide by David Flanagan。您可以從這裡買到它： http://www.amazon.com/exec/obidos/ASIN/0596000480/konfabulator-20/104-7470693-6959168?creati ve=125581&camp=2321&link_code=as1。如果您的荷包並不充裕，您也可以在線上找到許多很好的資 源。如果您在搜索引擎中輸入「JavaScript 參考」，出現的許多內容都會很有幫助。 在 Windows 與 Mac 上都有您將會需要的Widget製作工具，叫做 Widget Converter (http://widgetgallery.com/view.php?widget=36343)。這個方便小巧的 Widget 可以將超秘密 Windows Widget工具格式轉換為您可以進入及執行的格式。最好的一點是，完成之後，只需將您的工作拖回 Widget 工具中即可，它將會把格式再轉換回原格式！ 請光臨 http://tw.widget.yahoo.com/download/，查看您可以在該網站上找到的所有好東西，以使您的 Widget工具能夠盡善盡美！ 注意：所有價格皆以美元為單位。 注意 2：Pixoria, Inc. 不對協力廠商網站的內容負任何責任，也不對上述協力廠商程式的內容或執行結果 負任何責任。光臨這些網站及使用這些程式的風險需由您自己承擔。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
3
萬事具備... ...現在我們就準備開始吧。有關 Widget工具，您所必須瞭解的第一件事，就是它是以「配套」的形式出 現的。您可以將配套想像成一個一般人不會想要進去一探究竟的資料夾。配套中包含您建立 Widget工具 所需要的一切內容。
請使用以下指示來開啟您的 "My Widgets" 資料夾中的 “The Weather.widget”。 Windows 使用者： 在 Windows 中，您將需要使用 Widget Converter 來檢視配套內容。或者，您也可以將副檔名 .widget 變 更為 .zip，然後解壓縮檔案，並查看裡面的內容。Windows Widget 配套基本上都是偽裝的 zip 檔案。 Mac 使用者： 在 Mac 中，如果您想要查看 Widget工具 配套中的內容，只需按住 Control 鍵，同時在 Finder 中按一 下 Widget工具，並選擇「顯示封裝內容」即可。在 "The Weather" 上，您將不會看到此內容，但是某些 Widget 是跨平台的，而且是 Windows 格式的。請遵循 Windows 使用者指示來開啟那些特殊的 Widget。
當您進入配套中之後，請快速瀏覽一下。所有 Widget工具 配套的共同之處是，它們都 有一個名為 "Contents" 的資料夾，您可以在其中找到一個 .kon 檔案。通常它也會包 含一個儲存有影像的資料夾，有些時候，如果 Widget 是在 Mac 上開發的，而且作者 選擇包含它，您就可以找到一或多個 .js 檔案以及一個 Info.plist 檔案。您也可能會找 到一個 .scpt 檔案，但這種可能性幾乎是微乎其微的。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
4
檔案類型的簡略分類 .kon 包含 Widget工具 的主要程式碼。Yahoo!奇摩Widget Engine 首先會尋找這個檔案，並會在使用者按兩 下 Widget工具 配套時讀取其中的指示。這幾乎始終包含了初始影像定位及參照的程式碼 (XML 或 eXtensible Markup Language)，還有偏好設定與關於方塊等項目。它通常也會包含建立 Widget工具 功 能的大部分程式碼 (JS 或 JavaScript)，但不會一直包含。有時候，尤其是在比較複雜的 Widget工具 中， JavaScript 會儲存在 .js 檔案中，但是這不是必須的，而且所有程式碼仍然可以包含在 .kon 檔案中。 .js 如果存在的話，它通常會包含大部分 (如果不是全部) 使 Widget工具 執行所需要的 JavaScript。在這個 檔案中並沒有 XML。這裡只有 JavaScript。有時候您會發現不只一項，但這種情形很少見。 .Info.plist 另外一個檔案使用了 XML，但是它會由 Mac OS X 存取，以找出有關將要顯示給使用的 Widget工具 的 版本資訊。在 Windows 上，此檔案會遭到忽略，而且如果 Widget工具 是跨平台 (Windows) 配套格式， 在 Mac OS X 上它也會遭到忽略。 .scpt 這是一個 AppleScript 文件，其中包含了 AppleScript 命令，而且這種命令可能有很多。如果不包含的話， 指令碼就會相當複雜，而且會被用來降低 .js / .kon 檔案的複雜性。如果您看到了這些檔案的其中之一， Widget工具 可能就只能在 Mac 上執行。 您可能還會遇到其他一些檔案類型，但是這些檔案是很常見的檔案。 通常，如果您看到了不同的檔案類型，它要不然就是影像，要不然就可能是用來達成特定目的的。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
5
現在我們可以開始了嗎？ 您已經有文字編輯器了，是嗎？ 我希望是這樣的。如果還沒有，您最好使用「我需要什麼」一節中的連 結取得一個文字編輯器。您不可以使用 Microsoft Word！
請在您選擇的純文字編輯器中開啟 Weather.widget/Contents/The Weather.kon。 對於熟悉 HTML 的人來說，您將會認得您正在查看的檔案的語法。 在 XML 中，文字的大小寫非常重要，因此請使用與在 The Weather 及 Widget工具 中所使用相同的大 小寫。對於不熟悉的人來說，讓我們來幫您快速瞭解吧。 首先，您最好先在第一行進行 XML 宣告來開始您的 Widget工具。XML 宣告會告知 Yahoo!奇摩Widget Engine 它正在讀取的內容是有效的 XML，而且它也會告知 Yahoo!奇摩Widget Engine，XML 規格版 本以及它使用的編碼為何。 <?xml version="1.0" encoding="UTF-8"?>
您指定的檔案編碼必須與實際檔案編碼相符。例如，如果您的檔案表明 'encoding = "UTF-8"'，那麼就表示您的文字編輯器正在編輯 MacRoman 編碼檔案，如果您鍵入 "°" 或 "©" 這類的字元，您的 Widget工具 中就會出現一些奇怪的字元，或者會出現更糟 糕的情況，即您的 Widget工具 可能會根本無法載入。可以使用的最佳編碼是 Unicode 編碼 UTF-8 或 UTF-16。請查閱您的文字編輯器說明文件來瞭解編碼支援方式的不 同。如果要複製另一個 Widget工具 的文字，請記住這點，以確定編碼是否為您想要的 或所期望的編碼。 在 XML 宣告的下方，您將會看到其他一些 XML 標籤。如果您注意一下，下一行會通知 Yahoo!奇摩 Widget Engine，Widget工具 程式碼會透過 <widget> 標籤的使用來開始。標籤屬性可以讓您告知 Yahoo! 奇摩Widget Engine 一些內容，例如 Widget工具 能夠執行所需的 Yahoo!奇摩Widget Engine 的最低版 本以及 Widget工具 自己的版本。您還會看到，在 .kon 檔案的結尾有一個 </widget> 標籤，它會通知
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
6
Yahoo!奇摩Widget Engine，在那一行，它已經到達了 Widget工具 的程式碼的結尾。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
7
XML 基礎，續 <widget version="1.6.7" minimumVersion="1.7"> [...] </widget>
XML 標籤一定會有一個用來關閉它的結尾標籤 (通知剖析器停止讀取該特殊元素的程 式碼)。例如，如果您有一個 <image> 標籤，您就必須使用相對應的 </image> 標籤來 關閉它。您也可以使標籤成為巢狀結構 (而且在 HTML 與 XML 中都必須這樣做)，例 如： <widget> <image> <src>Images/My Great Image.png</src> <hOffset>74</hOffset> <opacity>85%</opacity> </image> </widget>
或者，您也可以使用這種格式來識別大部分屬性，並以 /> 來結束標籤： <widget> <image src="Images/My Great Image.png" hOffset="74" opacity="85%" /> </widget>
您還可以混合搭配使用 (但是在這種情況下請勿使用 "/>")： <widget> <image src="Images/My Great Image.png"> <hOffset>74</hOffset> <opacity>85%</opacity> </image> </widget>
無論如何，我們想要強調的一點就是，請務必使您所有的開頭標籤都能正確關閉 (而且 使用時開頭標籤與關閉標籤都必須正確拼寫)，這樣當您嘗試執行 Widget工具 時，才不 會遇到一些奇怪的錯誤。如果有一個字母位置錯誤，或您在標籤中打錯了字母，Yahoo! 奇摩Widget Engine 都會搞混。這些電腦是非常挑剔的！
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
8
XML 基礎，續 您會看到在 Widget工具 中只有那麼幾種類型的標籤，而且這幾種標籤會位於其他標籤的巢狀結構之下， 來以任何一種方式為該標籤提供屬性。例如，<image> 標籤中通常會有一個 <src> 標籤，以指出該影像 的來源。或者，再舉一個例子，例如在 <text> 標籤中，您可能會找到 <font> 或 <data> 標籤，以告知 Yahoo!奇摩Widget Engine 要在文字物件上使用的字型或資訊。某些您將會在 Widget工具 中找到的以 及您自己使用的常見標籤範例如下所示： <?xml version="1.0" encoding="(Your .kon file encoding)"?>：XML 宣告，它會通知剖析器它正在讀取哪 一種 XML 及編碼。 <widget>：開始 Widget工具 編碼的強制標籤。 <debug>：開啟與關閉除錯視窗，以及為顯示除錯的方法與時間提供選項。 <version>：定義 Widget工具 的版本。 <minimumVersion>：定義 Widget工具 能夠執行所需要的 Yahoo!奇摩Widget Engine 的版本。 <window>：定義要將 Widget工具 畫為多大的強制標籤。視窗範圍之外的任何內容都會被裁切掉。 <name>：定義視窗名稱。可用於稍後在 JavaScript 中的操作。 <title>：定義視窗的標題。用於按控制鍵/按下滑鼠右鍵以將 Widget工具 的名稱顯示給使用 者 (關於 <title>) 及顯示在其他區域中。 <height>：定義視窗的高度，單位為圖素。 <width>：定義視窗的寬度，單位為圖素。 <visible>：這是一個布林值 (1 或 0，可用 true 或 false 來取代)，它定義了是否可以看見 Widget工具。如果在將 Widget工具 顯示給使用者之前，您需要擷取某些資料或執行一些短處理程序，它 將會很有用。 <image>：允許在 Widget工具 中使用影像。 <name>：定義影像名稱。可用於稍後在 JavaScript 中的操作。 <hOffset>：定義從視窗的左上角水平位移影像多少個圖素。 <vOffset>：定義從視窗的左上角垂直位移影像多少個圖素。 <hRegistrationPoint>：定義在例如位移與旋轉等作業中，以其為基礎的 X 圖素座標。依照 預設，它會設定為 0 (影像的左側)。 <vRegistrationPoint>：定義在例如位移與旋轉等作業中，以其為基礎的 Y 圖素座標。依照 預設，它會設定為 0 (影像的上邊緣)。 <rotation>：定義影像旋轉的度數。 <opacity>：0 到 255 之間的數值，它定義了影像的不透明度。也可以使用百分比數值。 <onMouseDown>：可用來定義當在影像物件上按下滑鼠按鈕時所發生的事情。 <onMouseUp>：可用來定義當在影像物件上放開滑鼠按鈕時所發生的事情。這比 onMouseDown 動作更受到歡迎。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具
9
<text>：允許在 Widget工具 中使用文字。 <name>：定義文字的名稱。可用於稍後在 JavaScript 中的操作。 <data>：定義文字的內容。 <hOffset>：定義從視窗的左上角水平位移文字多少個圖素。它會受到 <alignment> 標籤的 影響。 <vOffset>：定義從視窗的左上角垂直位移文字多少個圖素。它會使用文字的基線來位移， 而不會使用文字的頂點。 <alignment>：可以在此處使用 "left"、"center" 及 "right" 數值，以定義從哪裡開始畫出文 字。 <color>：以 16 進位數值定義文字的顏色 (例如：#000000 是黑色，#8000FF 是紫色， #FFFFFF 是白色)。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 10
XML 基礎，續 <font>：定義在文字中使用的字型。 <size>：字型大小，以點為單位。 <opacity>：0 到 255 之間的數值，它定義了文字的不透明度。也可以使用百分比數值。 <onMouseDown>：可用來定義當在文字物件上按下滑鼠按鈕時發生的事情。 <onMouseUp>：可用來定義當在文字物件上放開滑鼠按鈕時發生的事情。 這比 onMouseDown 動作更受到歡迎。 <textarea>：允許在 Widget工具 中使用文字輸入。 <name>：定義 textarea 的名稱。可用於稍後在 JavaScript 中的操作。 <hOffset>：定義從視窗的左上角水平位移輸入多少個圖素。它會受到 <alignment> 標籤的 影響。 <vOffset>：定義從視窗的左上角垂直位移輸入多少個圖素。它會使用文字的基線來位移， 而不會使用文字的頂點。 <lines>：可用來定義一次顯示多少行。 <columns>：定義在因有更多文字而導致輸入捲動之前，文字輸入的寬度。 <color>：以 16 進位數值定義文字的顏色 (例如：#000000 是黑色，#8000FF 是紫色， #FFFFFF 是白色)。 <font>：定義在輸入中使用的字型。 <bgColor>：以 16 進位數值定義輸入背景的顏色 (例如：#000000 是黑色，#8000ff 是紫 色，#ffffff 是白色)。 <bgopacity>：0 到 255 之間的數值，它定義了輸入背景的不透明度。 也可以使用百分比數值。 <onKeyPress>：可用來定義每次按下按鍵時發生的動作。 <action trigger="(Some event here)">：可讓事件在 Widget工具 第一次載入時、在電腦從 睡眠模式恢復之後、當它的偏好設定變更時，以及其他更多情形下發生。 這可以針對不同事件多次使用！ <about-box>：與影像物件中 <src> 標籤的工作方式一樣，但是它是用於關於方塊的。可 多次使用來取得多個關於方塊。
請在您的文字編輯器中檢查 "The Weather.kon"，並且看一下用來得知當您編寫 Widget 工具 時何種物件可以立即使用的不同標籤。完成之後，請關閉 "The Weather.kon"。 還有其他許多許多的標籤，我們在這裡就不一一列出了。如果您想要瞭解有關 Widget工具 可以顯示及執 行的更多內容，請查閱「Yahoo!奇摩Widget Engine 參考手冊」來瞭解其他物件、屬性及動作觸發器。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 11
我們要如何讓它執行呢？ 在以上列出的基本 XML 清單中，您首先應該注意的是，所有基本物件都有一個共同的特點：即 <name> 標籤。此標籤允許在 JavaScript 中操作物件，這就是 Yahoo!奇摩Widget Engine 用來使 Widget工具 能 夠正常運作的程式碼。 JavaScript 又稱為指令碼語言，也就是說它無須由使用者編譯即可執行。它也比其他許多程式碼語言簡單 得多，因此是一般電腦使用者學習的最佳選擇。 我們之前曾經提到過，使 JavaScript 與您的 XML 物件能夠搭配使用的主要元素是名稱標籤。還有許多 方法也可以執行此項作業，我們就先從其中一種最簡單的方法開始。 name.attribute = 255;
現在我們就分開來講。 • 句點前面的部分是放置物件名稱的地方。它只能以字母開頭 (而且必須是小寫字母才正確)，而且只能包 含英數字元以及底線 ("_" 字元)。配置名稱的常用方式如下所示，而且都是可以接受的。您最好將物件命 名為簡短的名稱，這樣當您使用時才會比較容易記住。 • myGreatName79 • my_great_name_79 • mygreatname79 • 之前的程式碼中，句點後面的部分是物件的屬性。您應該在此處鍵入 "opacity"、"hOffset" 或 "font" 等 內容，來為句點前您命名的物件設定其各自的屬性。在上述的 XML 清單中，您可以看到與您正在操作的 物件一起使用的一些屬性。此外，「Yahoo!奇摩Widget Engine 參考 PDF」中也會為您提供完整的清單。 • "=" 運算子會將它後面的數值指定給命名的物件屬性。 • 編碼的最後一部分是指定給物件屬性的數值。總共有三種可以指定的不同數值。 • 布林值 - 它可以是 0 或 1，或者如果您想更容易識別的話，您也可以選擇分別將其設定為 false 或 true。 • 文字值 - 它可以是任何數字。 • 字串 - 此種類型的數值可以包含文字與數字。當設定此數值時，您需要用引號將其括起來。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 12
JavaScript 簡介，續 嘿。如果您沒有完全理解所有的內容，也不必緊張。以下有一些範例，應該可以幫助您擺脫困境。 sun.opacity = 145; main_window.visible = true; main_window.shadow = 0; myText.data = "Hello, World!"; weatherinfo.tooltip = "Today, I think, is a good day for some sun."; colorChangedText.color = "#6C189C";
現在，以上所示的範例中有一個很酷的地方，就是如果您已經使用 XML <name> 標籤正確定義及識別元 素，它們都會在 Widget工具 中執行。以下是當電腦讀取以上列出的程式碼時，它將會看見的以純英文記 錄的內容。 Change the opacity of the object named "sun" to 145/255, or about 57%. This uses a literal value. Make the Widget window "main_window" visible. This uses a boolean value. Change the Window "main_window" so it doesn't render a shadow (Mac only). This uses a boolean value. Change the text object "myText" so that it reads "Hello, World!" This uses a string. Change the tooltip of the "weatherinfo" object so that it reads "Today, I think, is a good day for some sun." This uses a string value. Change the color of the text "colorChangedText" to a royal violet. This uses a string value (in hexadecimal format).
如您所見，變更物件屬性其實非常簡單。而且當 Yahoo!奇摩Widget Engine 讀取到每個引數時，它便會 立即執行它。 您也可以定義您稍後可以使用及任意變更的變數。變數與數學方程式中的變數相似，此外，除了標準文字 值，例如 47 或 3.5 以外，您也可以將字串與布林數值放進它們之中，而且您可以將它們命名為 "x" 或 "y" 以外的名稱。 相同的規則也適用於變數名稱，如物件名稱一樣，因為變數也是物件。 var literalValue = 83.4523; var booleanValue = true; var stringValue = "I can see my house from here!";
我們忘記提到一點... 當將變數或屬性設定為文字值時，如果需要，您可以使用數學。當然，您也可以使 用其他變數或物件名稱。此範例的最後一行也表明您可以將一些文字加到變數中的方式。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 13
var foo1 = 83.4523 / 2; var foo2 = (480 / 72) * (foo1 + 472.213); foo1 = main_window.width + foo2; textObject.data = "My whimsical number is " + foo1 / foo2 + ".";
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 14
JavaScript 簡介，續 另外還有 Yahoo!奇摩Widget Engine 可以為您擷取的系統屬性。大多數屬性為動態；它們會於每次使用 時更新資訊。Widget工具 中的系統屬性與物件屬性之間，唯一的實際區別是您無法設定許多系統屬性， 您只能從其中讀取並使用它們。但是有一些例外，例如 system.volume，您可以將其設定至 0 與 16 之 間的文字值。讓我們來看一下作用中的這些屬性。 image.opacity = system.cpu.idle * 2.55; // 由於透明度屬性是超出 255 的文字值 // 且 system.cpu.idle 將會傳回從 0 到 100 的數字，因 此我們會 // 將該數值乘以 2.55 以使它將可使用全範圍 // 的透明度。 // 順帶說明一下，這些都是單行註解... 對於 // 提供解釋或注意事項而言很有幫助。 system.mute = true; // 這將會關閉電腦的聲音。// 將其設定 // 為 false 將會傳回它在靜音前 // 所設定的音量。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 15
提示語 (“Hello, World!”)； 好，現在讓我們將在這裡新發現的知識付諸實踐。該是編寫您第一個 Widget工具 的時間了。您將不需要 針對這個目的開啟圖形編輯應用程式。
在您的純文字編輯器中建立新文件，並將其命名為 "My First Widget.kon"。 然後將以下程式碼寫進去。 <?xml version="1.0" encoding="UTF-8"?> <widget> <debug>on</debug> <window> <name>main_window</name> <title>My First Widget</title> <height>30</height> <width>300</width> <visible>true</visible> </window> <text> <name>myText</name> <color>#FF0000</color> <size>18</size> <alignment>left</alignment> <vOffset>25</vOffset> <hOffset>2</hOffset> </text> <timer> <name>timer</name> <interval>1</interval> <ticking>true</ticking> <onTimerFired> var cpuLoad = system.cpu.activity; myText.data = cpuLoad + "% CPU load"; myText.opacity = cpuLoad * 2.55; </onTimerFired> </timer> </widget>
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 16
我的第一個 Widget工具，續 首先，請注意程式碼的縮排方式。為了使您的程式碼始終清楚易讀，您應該始終為其縮排。 使用 tab 鍵是執行此操作最簡單與最好的方法，但是如果您喜歡的話，您也可以使用空格鍵。某些編輯 器甚至會自動為您的縮排程式碼，因此您花在磨損 tab 鍵上的時間會更少，而用在編寫程式碼的時間會 更多。 此程式碼每一秒鐘會執行一次，如計時器的 "interval" 標籤所定義的一樣。如果您希望的話，您可以將它 變更為更長時間或更短時間更新一次。 接下來，您可以看到在 onTimerFired 標籤中粗略翻譯成英文的程式碼，如此您便可以更輕鬆地看見正在 發生的情況。 建立稱為 "cpuLoad" 的新變數，並將目前CPU 的負載百分比置於其中。 變更 "myText" 以使其資料 (文字內容)結束的地方有 "% CPU load"。 變更 "myText" 的透明度以符合 cpuLoad 變數。
儲存 "My First Widget.kon"，然後向上到「Yahoo!奇摩Widget Engine 裝備圖示」(Mac) 或「Yahoo!奇摩Widget Engine 工作列圖示」(Windows)，選擇「開啟 Widget工具…」， 並導覽至您已儲存 "My First Widget.kon" 的地方。開啟它。 注意：如果您的 CPU 負載不高，可能無法看見它，因此如果發生此類情況，請播放視 訊檔案或某些音樂或開啟程式，這樣將會花費一些時間來載入，如此您才可以看見 Widget工具 正在運作的情況。
非常酷，對不對？ 瞭解它有多簡單了嗎？ 但是我們發現，如果您的 CPU 負載並不太高，它甚至還不會 出現。那麼我們如何解決這個問題呢？ 好吧，讓我們看一下 "if...else" 陳述式的簡介。這個程式基本上大多數時間都會違反您的工作習慣，並且 會惹得您很煩。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 17
if (cpuLoad > 80) { myText.data = "You're working your computer rather hard!"; } else { myText.data = "The computer isn't doing much right now... Get back to work!"; }
某些人會使用如上所示的大括號來寫程式。有些人則會在與 if...else 條件陳述式同一行上使用大括號，以 使其更為精簡。關於此操作的範例，請參見以說明。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 18
我的第一個 Widget工具，續 if (cpuLoad > 80) { myText.data = "You're working your computer rather hard!"; } else { myText.data = "The computer isn't doing much right now... Get back to work!"; }
Yahoo!奇摩Widget Engine 不會管您寫程式的方法，您只需使用您覺得更有意義的方法即可。 此外，請注意程式碼的縮排方式。Yahoo!奇摩Widget Engine 也不會管您縮排程式碼的方法，但是為了保 持最佳效果，您最好正確地縮排程式碼，以維持最高的可讀性。 無論使用什麼方式，現在讓我們開始來寫程式。新的程式碼可以在下一頁中找到。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 19
我的第一個 Widget工具，續 對 "My First Widget.kon" 進行以下變更並儲存它，然後在除錯視窗中按一下「重新載入Widget工具」。 <?xml version="1.0" encoding="UTF-8"?> <widget> <debug>on</debug> <window> <name>main_window</name> <title>My First Widget</title> <height>30</height> <width>300</width> <visible>true</visible> </window> <text> <name>myText</name> <color>#FF0000</color> <size>18</size> <alignment>left</alignment> <vOffset>25</vOffset> <hOffset>2</hOffset> </text> <timer> <name>timer</name> <interval>1</interval> <ticking>true</ticking> <onTimerFired> <!-var cpuLoad = system.cpu.activity; myText.data = cpuLoad + "% CPU load"; if (cpuLoad < 40) { myText.opacity = 102; } else { myText.opacity = cpuLoad * 2.55; } //--> </onTimerFired> </timer> </widget>
這將會強迫 Widget工具 隨時至少保持一些可見度。請注意，我們已經將一些 XML 註解標籤 (<!-- 與 //-->) 加到您的 JavaScript 中了。完成之後，XML 剖析器將不會在它讀到 if 陳述式中的 "<" 符號時以
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 20
為插入了另一個 XML 標籤，並隨後將其中斷。 恭喜您！您已經修復了第一個錯誤！現在，讓我們將一些功能加到這個壞小孩中。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 21
您的使用者將會很愛您 此刻，您的 Widget工具 基本上僅僅只是純文字而已。然而，為您的使用者提供一些方法來變更關於您所 建立的某些結果，並滿足他們的偏好設定，這是非常令人高興的，所以，就讓我們開始吧。 您只需簡單將偏好設定標籤加到程式碼中便可新增偏好設定，包括與偏好設定搭配的相關標籤。如果您想 要知道如何新增不同類型的偏好設定，您可以參考「Yahoo!奇摩Widget Engine 指引手冊 PDF」。 以下是跳現功能表偏好設定的範例。我們已經為偏好設定命名，因此我們可以稍後在 JavaScript 中使用 它，包括偏好設定左側的標題、偏好設定類型、跳現選取器的所有選項、第一次開啟偏好設定時依預設選 取的選項，以及偏好設定的簡要描述。 <preference> <name>continentSelector</name> <title>Your Continent:</title> <type>popup</type> <option>Africa</option> <option>Antarctica</option> <option>Asia</option> <option>Australia</option> <option>Europe</option> <option>North America</option> <option>South America</option> <defaultValue>North America</defaultValue> <description>Select your continent from the menu above.</description> </preference>
讓我們將一些不同類型的偏好設定加到我們的小專案中。顏色偏好設定將會適合我們的文字顏色，並且由 於 Widget工具 僅是文字，字型偏好設定將顯得非常重要。我們也可以新增更新間隔偏好設定，以讓使用 者決定他想要 Widget工具 更新 CPU 資訊的間隔。 下一頁將會介紹讓我們執行此操作的程式碼。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 22
新增偏好設定，續 在 Widget工具 標籤中的某處新增此程式碼，但不會將其以巢狀結構置於另一個標籤 中。 <preference> <name>textColorPref</name> <title>Text Color:</title> <type>color</type> <defaultValue>#FF0000</defaultValue> <description>Select a color for your text.</description> </preference> <preference> <name>textFontPref</name> <title>Text Font:</title> <type>font</type> <defaultValue>Futura Medium</defaultValue> <description>Select a font to use for your text.</description> </preference> <preference name="timerIntervalPref"> <title>Update Interval:</title> <type>slider</type> <minLength>1</minLength> <maxLength>15</maxLength> <ticks>15</ticks> <tickLabel>1</tickLabel> <tickLabel>Seconds</tickLabel> <tickLabel>15</tickLabel> <defaultValue>1</defaultValue> <description>Select how often you want the CPU information to update.</description> </preference>
所以，現在我們擁有亮紅色預設值的顏色偏好設定、將可讓使用者選擇他已安裝的任何字型的字型偏好設 定，以及含每秒刻度標記的計時器間隔偏好設定，其可讓使用者選擇及標記標籤，以便使用者能夠看見他 可以設定的間隔大小。但是我們尚未完成設定；實際上我們必須將這些偏好設定連結至真正的 Widget工 具 中，以便它們可於變更時執行某些動作。 這裡是我們編寫函數的地方，因此我們可以在一個以上的位置上執行程式，而無須複製及貼上程式碼。以 下是您編寫函數的方法...
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 23
function muteVolume() { system.mute = true; }
當您想要使用它時，只需如此執行即可。 muteVolume();
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 24
新增偏好設定，續 您甚至可以於呼叫函數時將變數與其他項目傳送至其中。這非常方便。您只需將逗號置於您想要為函數定 義的各變數之間即可。如果您有一個真的很複雜的函數，您可以定義任意數目的變數，但是針對範例，我 們只使用兩種變數： function adjustVolume(volumeToUse, muteIt) { if (muteIt) // 這將會檢查是否有資料被傳送至 muteIt 變數中。 { system.mute = muteIt; } system.volume = volumeToUse; }
當您想要呼叫此函數時，請將您想要傳送的由逗號分隔的數值放在一個變數結束的位置與另一個變數開始 的位置，以使 Yahoo!奇摩Widget Engine 可以看到它： adjustVolume(14, false); // 將音量設定為 14 而非 16，並關閉系統聲音
這樣您有可能可以僥倖成功，因為我們所編寫的函數是要處理不在此處的 muteIt 數值。請注意，此處並 沒有逗號，因為我們只傳送一個數值： var addedValue = 8 adjustVolume(6 + addedValue); // 將音量設定為 14 而非 16
請確訂您正確地傳送了變數；如果您編寫的函數預期收到字串，請確定您將為其提供一個字串。如在前一 個範例中所看到的內容一樣，您可以將變數或輸出從其他函數傳送至另一個函數。很靈巧，對不對？ Yahoo!奇摩Widget Engine 也擁有許多內建函數，跟 JavaScript 本身一樣。大多數函數都會要求您將一 或兩個數值傳送給它們，但某些函數不需要。關於 Yahoo!奇摩Widget Engine 特有函數的完整清單資訊， 請查看「Yahoo!奇摩Widget Engine 參考手冊」。 alert("Your house is on fire.", "Call 911", "That's nice"); print(unescape("This%20is%20some%20web%2Dready%20text%21")); beep(); var textToSpeak = "Your computer is talking to you. What say you?"; speak(textToSpeak); closeWidget();
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 25
新增偏好設定，續 將以下程式碼寫到檔案結尾，就在 </widget> 標籤的上方。 <action trigger="onLoad"> function updateBehavior() { myText.font = preferences.textFontPref.value; myText.color = preferences.textColorPref.value; timer.interval = preferences.timerIntervalPref.value; } updateBehavior(); </action> <action trigger="onPreferencesChanged"> updateBehavior(); </action>
儲存 .kon 檔案，重新載入您的 Widget工具，並充分檢驗您很炫的新偏好設定。 這個程式將會使您的 Widget工具 於每此啟動或其偏好設定變更時更新其外觀與行為。我們需要在它啟動 時對其進行變更，因為我們在 Widget工具 中為物件設定的數值已經是亮紅色文字了，其刷新間隔為 1 秒 鐘一次，而這可能不會反映出使用者想要看見的內容。 請注意，我們已經在程式碼中新增了對於 "updateBehavior()" 的呼叫。之前我們所做的一切是定義被稱 為 "updateBehavior" 的函數。您實際上需要在您想要使用此函數時呼叫它。 偏好設定將會於您的 Widget工具 關閉時自動儲存，因此不會出現手動儲存偏好設定時的忙亂情形。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 26
培養良好的 Widget工具 製作習慣 現在您已經擁有自己的 Widget工具 了，您應該如何打包它，以便其他人可以使用並分享它呢？ 以下是您與他人共享 Widget工具 之前應該執行的其他一些步驟。 您應該要做的一件事，就是設定 <debug>off</debug> 來關閉除錯視窗。許多使用者習慣使用不顯示除 錯視窗的 Widget工具。 如果您曾經在真實世界中開發過 Widget工具，您可能會想要在跟 .kon 檔案或 .js 檔案等一起新增一些 影像。如果您只是把 Widget工具 當做充滿這些東西的資料夾來散佈，人們將會不知道該做什麼。Yahoo! 奇摩Widget Engine 的使用者所習慣的 Widget工具 就是 Widget工具，它的封裝如果不正確，會讓人感 覺不是一個單一的檔案。 您需要做的就是將您所有的影像、.kon 檔案以及可以套用至 Widget工具 的 所有東西都放進 “Contents” 資料夾中，然後將 Contents 資料夾放進另一個使用您的 Widget工具 名稱的資料夾中，例如 “My Great Widget”。然後，請為檔案名稱加上 .widget 附檔名。在 Windows 上，您將不會看見任何警告，但是如 果您在 Mac 上，您將會看見這個訊息：
這正是我們想要的結果。請繼續並按一下「新增」 。您的資料夾將會不可思議地轉換成 Widget工具 圖示。... 如果您在 Mac 上，就是這樣。關於 Windows 這邊的更詳細指示 (或者，如果您需要從 Mac 中封裝
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 27
Windows 的提交內容)，請跳到第 23 頁來參考。如果您在 Mac 上，請跳到下一頁以取得關於其他您需 要執行的步驟的資訊...
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 28
分享您建立的成果 現在既然您的 Widget工具 已經最佳化了 (如果您在 Mac 上，您可能需要跳回一頁)，我們就可以為其打 包以便跨平台使用了！ 現在，要將單一檔案從資料夾中取出，Windows 會變得更難以處理。您似乎無法如在 Mac 上執行的操 作一般只透過新增檔案附檔名來執行。這就是 Widget Converter 開始加入的地方。 Widget Converter 是可以讓您以 Windows Widget 格式打包 Widget工具 的 Mac 與 Windows Widget 工具。Mac 使用者也可以執行為 Windows 配套的 Widget工具，這也是我們將它稱為跨平台格式的原 因。您需要在 Mac 或 Windows 上做的就是取得含 .widget 附檔名的資料夾，並將其拖放到 Widget Converter 上。Widget Converter 的螢幕將會顯示出您置於其上的 Widget工具 種類。
您所需要做的就是將 Widget工具 放到螢幕上，並按一下「轉換」。Widget工具 將會執行剩餘的作業。
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 29
分享您建立的成果，續 提交至網站登錄下載 如果您已遵循以上所有步驟來為 Widget工具 做好準備，那麼您就已經來到將它提交給我們登錄在網站上 的『更多Widget工具』的最終階段了！ 以下是一些硬性快速規則，可以使提交內容傳回給作者 (不過大部分都是常識)： • Widget工具 必須執行在 Widget工具 說明中提到的函數。 • 提交的檔案 (.dmg、.zip、跨平台 Widget工具 檔案或 .sit) 必須準備好供使用者下載 (我們不會因任何 理由重新封裝提交內容)。 • 除錯視窗不能在 Widget工具 執行時顯示出來 (由於錯誤或仍然開啟著 <debug> 選項)。 • Widget工具 不能包含您不是其唯一擁有者，或您尚未獲得使用權的享有著作權之資料。 • Widget工具 不能包含隨 Yahoo!奇摩Widget Engine 提供的 Widget工具 中的影像、聲音或 Info.plist 檔案 (人們使用時經常遇到的問題是在其 Info.plist 中出現 Part of Konfabulator 字串，以及在其「關於 方塊」上使用未經 Getty Images 授權的裝備影像)。 • Widget工具 不能包含任何具有冒犯性意識的影像、文字或聲音 (我們可能會提出聲明)。 • Widget工具 不是本教學課程的直接結果 – 亦即，如果 Widget工具 沒有本教學課程所提供內容中的主 要新增，我們將無法接受它。 我們更希望 Widget工具 具有以下一些特性，但是我們會盡量試著不要太過苛刻： • 具有吸引力的外觀 (是的，是有樣式上的重點)。 • 提供有用的功能 (可能只是娛樂而已)。 • 擁有一些獨特功能 (可將其與官方網站中『更多Widget』項目中的其他 Widget工具 區別開來)。 但是，我們將保留拒絕任何未達這些標準的提交內容的權利。 您的 Widget 符合這些標準嗎？ 如果符合，且如果您要將 Widget 提交給我們，那麼您接下來需要做的 就是建立一個作者帳號。您只需進入 http://tw.widget.yahoo.com/gallery 並按一下「發表你的Widget工 具」，然後按一下「新帳號」按鈕即可。請填寫您的資訊，登入，按一下「發表Widget工具」，填寫必要 資訊，提交Widget工具，一切便大功告成了！
Yahoo!奇摩 Widget Engine 如何製作一個 Widget 工具 30