《 YWE 》入門第一步：介紹和工具的準備

在很久以前 YWE 4.0 那時候吧，我發下宏願說要研究一下
然後還紀錄了一下如何用 XML 寫 Hello World! 但是事隔多年，我現在才要繼續研究
而且還是因為數位內容專題想借用它的介面來呈現，天啊，這是報應吧！

Anyway，開始紀錄一下 What's Yahoo! Widget Engine 有人會問說
和桌面程式哪裡不同啊，一樣嗎之類的話語，官方網站的確有說：

「Yahoo!奇摩Widget工具」是供您下載各式各樣 “Widget工具” 的一項服務。Widget工具是一種迷你應用程式，可在電腦桌面上單獨執行。Widget的功能包羅萬象，例如：查看氣象、閱讀即時新聞、檢視個人行事 曆，或玩玩小遊戲。Widget工具通常位在電腦桌面上，看起來像是張小圖片或小動畫，和一般的應用程式不同。

那開發人員又會提問，主要是用啥米程式語言和工具去架構呢？

每一個Widget工具都是運用「Yahoo!奇摩Widget Engine」製作出來的。「Yahoo!奇摩 Widget Engine」是一種JavaScript應用程式平台，在Windows和Mac OS X的作業環境都可使用。

那重點就勾勒出來了對吧！用 Yahoo!奇摩 Widget Engine 去構築整個 Widget 的模式，而該模式
是一種資料交換的介面，可以加入 JavaScript 的平台。

更詳細的介紹請洽 Yahoo!Widget 官方網站喔！
以我的桌面來說安裝完 Yahoo!Widget 之後的工具各代表啥米：


而開發人員必須專一個方便的小工具來助興：

他可以讓 .widget 的工具反轉成製作時的資料夾，讓我們可以對他作解析；
亦可以我們做好 Widget 之後，他自動幫我們壓縮成 .widget 的檔案給 YWE 去執行喔。
開發人員最好是安裝比較時間啦，我個人這樣認為。

##CONTINUE##

製作 Widget 範例的步驟：

1. 規劃介面和功能
2. 建立好 widget project 的架構（備註1）
3. 用繪圖軟體製作，可能是去背的處理或是設計規劃頁面等等
   
4. 編寫程式碼（備註2）
5. 將 widget project 托移到 widget converter 並按下 convert
6. 將產生的 .widget 納入工具列之中
7. 啟用 Widget工具

備註1：

• 如果以製作著的角度來說，這點可以非常隨性。
• Project Name 之下，愛怎麼放就怎麼放，只要 .kon 的 xml 檔案在第一層。
• 其他說明參閱 NKTalk 的說明文件。

備註2：

• .kon 是 XML 所構成的，而亦可以增加互動的效果，這部份由 Javascript 去處理。
• 整個流程，最好是參閱 AJax 的觀念去思考。

以下是小範例：

• 元素有：去背的介面和文字連結



<widget minimumVersion="4.0" version="0.1a1">
<debug>on</debug>
<window>
<name>main_window</name>
<title>Picture Widget</title>
<width>228</width>
<height>228</height>

<image src="images/logo.png"/>
<text>
<name>Link</name>
<data>NCUE</data>
<size>25</size>
<hOffset>65</hOffset>
<vOffset>110</vOffset>
<onMouseUp>
 openURL("http://www.ncue.edu.tw");
</onMouseUp>
</text>
</window>
</widget>

此 Widget 呈現效果為以下圖片展示：


雖然是非常簡單的範例，但是足以讓我們跨入門檻的第一不，希望下一次的進度會直接進入到
JavaScript 的傳遞和資料整合的部份，開始撰寫功能的程式碼。

後記：
我一直以來都用 Editplus 在編寫關於網頁相關的程式碼，於是為了寫 .kon 的檔案
我將 XML 複製一份改名為 Kon，現在 .kon 的檔案都有顏色區別了，這樣眼睛好看一些 :)

參考來源：
NKTalk 技術文件