Windows Desktop Gadget 開發

因為某些原因，最近學了一點Windows Desktop Gadget開發
* Windows Desktop Gadget也就是俗稱的桌面小工具


開發途中發現國內的資料似乎不太多，我想應該是不太熱門吧
在還沒開始玩前，其實我的桌面也不會擺小工具 
後來發現還蠻多人有再用小工具的.. 我見識太淺薄了XD



首先

對Gadget完全沒概念的話，可以看看這邊
裡面有關於小工具的整體架構說明及背景知識


接下來
有點背景知識之後，可以看一點Gadget API

Gadgets for Windows Sidebar - Gadget Object Reference
Gadgets for Windows Sidebar - System Object Reference

因為Gadget基本上是用html/js/css撰寫，只是多了一點可以用的api
到這邊，你可以試著組組看你想要的東西

當然，你可以用你熟悉的jquery或是其他javascript library

不過要注意一點：
這邊有個小問題 (應該是bug)：不支援直接套用click事件
正確一點的說法是，如果這個dom element原本沒有onclick事件的話，是不能直接加入的

舉例來說：


$('#myDiv').click(function(){  doSomething(); });
只寫這樣是不行的，點下去仍然不會觸發doSomething
必須在#myDiv上加入onclick這個attr才可以

<div id="myDiv" onclick="" ></div>
onclick是空的也沒關係，總之要有就對了

但是mouseover, mouseout等就沒這個問題，我也不知道為什麼
或許真的是bug XD

為你的小工具加上背景
要做出美觀的小工具，一個漂亮的背景是不可少的 雖然我偷懶沒用

這篇文章是中文文章，講的是加入背景的方法，還蠻詳細的
當然不可少的是Gadget API: Background Object

這邊先提一個常遇到的問題：
當兩個透明圖疊在一起的時候，會出現紫色的破圖 (Pink Problem)
這個問題就我查到的資料看來，應該沒有比較好的解法
算是一個bug，要不就是用美工避開，或是可用 gbackground元素的addImageObject加入圖片
這樣就不會有這個問題
詳細的說明可以看：Gadget開發實戰總結 2 （I See Pink Problem）


或許有人會想用css3pie或IE的Filter..等方法
做出CSS3的box-shadow(陰影)、border-radius(圓角)這些效果
這些的確是做得出來的
但是一樣要注意透明的部分(陰影、圓角處)，也會出現紫色破圖的問題


在小工具內使用AJAX
這邊大概是我弄最久的地方，雖然最後還是失敗了
直說的話，就是基本上還是沒辦法cross domain的，除非有要的服務提供Rest based API (參考)


我甚至還自己用ActiveX寫了Ajax來測試，確定是不行的 (如果有人試成功的話麻煩跟我說)
不過後來發現用jQuery.ajax其實功能是一樣的，不過要設定強制跨域


為此我還去找了Ajax的readyState狀態碼含意和HTTP的連接狀態碼含意
不然說實在的，只用library都不知道底層做了什麼XD

以下這兩個網址是用另一個方法取網路上的資料，也可以看看
Gadget開發實戰總結 1 （Gadget調用WebService）


英文：
介紹及資源：http://christ-offer.blogspot.com/2011/02/windows-7-gadget-development.html
範例：http://www.codeproject.com/KB/gadgets/DailyDilbert.aspx
很不錯的書，可以用Ctrl+F找關鍵字：http://www.innovatewithgadgets.com/