在很久以前 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 範例的步驟:
- 規劃介面和功能
- 建立好 widget project 的架構(備註1)
- 用繪圖軟體製作,可能是去背的處理或是設計規劃頁面等等
- 編寫程式碼(備註2)
- 將 widget project 托移到 widget converter 並按下 convert
- 將產生的 .widget 納入工具列之中
- 啟用 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 技術文件