老師有提到開發 widget 的技巧
所以今天稍微來談一下 window mobile 6.5 上的 widget 開發
I. 戰前準備
首先要有 windows mobile 6.5 的執行環境,可以到 這裡下載 DTK裡面有含模擬器的映像檔,待會兒會用模擬器來執行程式
接著是開發環境
windows mobile 6.5 的 widget 全為 html 組成
因此只要有能寫 html 的編輯器即可
II. 開發
由於很多人都寫過相關的開發方式坎尼就直接引用 bauann 大所寫的 Widgets in Windows Mobile 6.5 - 簡介
大家可以直接看這篇,比坎尼寫的詳細多了 :D
剛剛提到 widget 由 html 構成
坎尼用 visual studio 開了個 html 檔,並加入下圖所示的網頁元素
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUOCebThfqdsKGFzI2c1pHEKgdhm29c5APU9dCpNPzF-KL4qUUaK1_9K90dllVbphIlZ-99BZoMjw5QzbmCjoC1KOYjF7qpbN4m_HFvkQM6Lo0mva4fdfYonrTrShaTTxDXvchWzhxmBfc/s400/wmw1.png)
"Show Messages" 按鈕會在 DIV 之中顯示使用者填入的字串
"Moving" 則是移動下方的灰色 div 到亂數位置
接著是此次的 javascript code
從下圖可得知,坎尼加入了 jquery 來開發
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxjy-CukwShpCIH1_NlkJFNCOadTni8MGRb2oyzMBHz8zIEtl7WIpda7FUxKrpI6vKXVDY3vgutWBwZe2sPsfJZdGkhOi9rfMJrNi86XdOViiNjRZKaGcFIpqfU5RgGNUAZ1bnJnzSnOC/s400/wmw2.png)
移動 div 的部份,坎尼用 jquery 的 animate 和 fadeOut 去展現動態效果
III. 安裝部署
接著是建立 config.xml 檔,讓 widget 安裝檔能被 windows mobile 6.5 辨別![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA3iFKOOxb_BlQU5tI51_xuRsKhVI_gz8RkTohyVnqsG8SFYdiJEnqnEs69Z-KazOxP6PCvC3sL3YLAsMT3eGAevVBSbDThaJXaoW1UOy_5WMj3Hk3KVa2-tLY8JTHM7yyYRsCcwN5yAXj/s400/wmw3.png)
接著把 html、jquery-1.3.2.min.js、Config.xml 還有要作為 logo 的 e04.png
利用壓縮程式壓成 zip 檔案,接著把副檔名改為 .wgt
這樣一來, widget 的安裝檔就完成了,趕快放到模擬器上試試看吧
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdaAnP0YmvJGV9-_acoF_dHX95_s-sn2ggAW7WLsjnFGu8BcBZQFBlc7k9xXLOqQ3YEayovhJSh_imukgliEPcQf-bUKb0hEt0ot7wA0qAUvZNjXUjTtS73vJ1Z2YuGzA2CnanpF0CeLU/s400/wmw4.png)
直接在 windows mobile 6.5 中點選 wgt 檔即可安裝
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59rUWptub46xW9MkoaKFszN2A2LYzHl5PsdvxAdtaJUnys1r-usnZwcjAfu2W4zdhhZh48C7ZqKqi9kJjpFmCl3adY8n7etKw8oXko5y-MXERSC7BP4Wim9dI1OP1wU6HZFElbSY2Jh3B/s400/wmw5.png)
安裝好會自動開啟程式,來測試一下成果
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWU_d4v4KlgiA0tMjDsY9xTdStlc9AxEZmnaXMsLTYBhEj4NBMxrakeaTtRmKqTzXmsFAxIBm98R00fw5lnfx6cPibpduL7ooy02Er4B730i5cNtf6UEJCLJlAyPZ4sgJYVZ-dF6XbmHnX/s400/wmw6.png)
應該是硬體受限的緣故
原本寫好的 html 在 pc 上會有動態淡出淡入的效果
但到了 windows mobile 上,效果就不見了
IV. 解除安裝
這裡提一下如何解除安裝請依照下圖步驟:Start -> Settings -> System -> Remove Programs
再選擇要解除安裝的 widget 程式即可
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkSWhyWIH3nzBUTL4HOPBLUQaU_VEG0lk59ds1XvVoKAZtt6oapP5UaC8u-Aj-LOh7hyhbWqF-lJgLhcpEnIwxpJLEW39k8lmibBwKIbeB8qsGqwurph076Sg8ZHB82ixjqLyKHloZKDbS/s400/wmw7.png)
V. 小結
雖然 widget 提供 html 的開發方式但很多動態的表現不如 pc 上來的順暢
所以最好著重在功能性的開發
由於為 html,動態資料交換就必須利用 Ajax 及 WebService 等技術
但若能用 jquery 從中當作媒介,相信會簡單許多
(也不用像研討會王老師講的,寫AJAX寫到快哭了 XD
本篇粗淺的介紹一下 windows mobile 的 widget
有錯還望高手們來指正 :)