2008年3月9日 星期日

《 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 技術文件

沒有留言:

張貼留言