前文說道開發(fā)一個Gadget可以分為兩個步驟：先寫界面的XML文件，再寫邏輯部分的JavaScript。我們就遵循這個步驟來寫一個再簡單也不過的Gadget。

用到的工具有兩個，一個是隨Google Desktop SDK附帶的Gadget Designer，用來編寫并有限的預覽界面，還可以調(diào)試JavaScript（這個就更有限了）；一個是Google Desktop，用來測試寫好的Gadget。下面要寫的例子是我在為某研究院某個項目策劃階段作POC時所寫的一個小例子，可以顯示一個Google用戶的Picasa相冊中的Album名稱和縮略圖。雖然很小，但包含了Google賬戶的自動登錄，顯示網(wǎng)絡(luò)圖片，XmlHttpRequest的使用等很多實用技巧。整個完成之后是這個樣子：

請跟我一起來。現(xiàn)在打開Gadget Designer，選擇File->New Gadget，輸入了名稱“Picasa”之后，就可以看到一個完整Gadget的雛形了。你可以找到這個項目所在的文件夾，雙擊其中的gadget.gmanifest，此時如果你已經(jīng)安裝了Google Desktop，就可以看到Desktop自動啟動，并把這個很“白”的Gadget（別笑，除了一張白色背景圖片以外，確實什么也沒有）顯示在Sidebar中。如圖：

到項目文件夾里可以看到一個main.xml文件和一個main.js文件。我們的界面就是在main.xml文件里指定的，打開它，可以看見它指定了一張GadgetDesigner幫我們生成的白色png圖片作背景，還指定了我們要導入哪些個.js文件。我們來小改兩個地方：

一是把view的height改成250，二是給img元素添加一個屬性name并給一個值，就像這樣：

然后雙擊gadget.gmanifest，看看更改效果：

乍一看貌似沒什么改變，但是注意看我用黑色線圈出來的那一條橫杠，那是我們的Gadget的下邊沿，說明它的高度還是變化了，但是白色的背景沒有變，因為我們沒有改變背景圖片的大小。現(xiàn)在通過.js文件中代碼的方式來改變背景圖片的高度，可以看出些有意思的東西。

打開main.js文件，你應(yīng)該會看到一個view_onOpen()函數(shù)，這就是Gadget啟動時會自動調(diào)用的第一個函數(shù)（好吧，并不嚴格，但是在調(diào)用的順序上，它的確是相當靠前的），我們就在這個函數(shù)內(nèi)部添加下面這一句：

再雙擊gadget.gmanifest運行看看，白色背景也變高了吧。

我知道你一定會問，代碼里的bgImage是什么東西？怎么沒見在任何地方聲明這個變量，也沒見任何地方作初始化呢？回想我們剛才在main.xml文件里做了什么？我們給背景圖片取了一個名字，叫bgImage，而且別懷疑，你在代碼里訪問的這個bgImage，正是那張圖片！背后的工作就是Gadget Host通過JavaScript引擎為我們做的，凡是在.xml文件里放置的東西（無論什么，圖片也好，按鈕也好，一個抽象的div也好），只要你給了一個name屬性，在JavaScript代碼中就可以直接使用這個名字來訪問該對象（前提是你給的名字得是獨一無二的），這與瀏覽器中隨時可以訪問document對象而不用做任何聲明一樣，那是瀏覽器這個運行環(huán)境提供的對象，隨時可用。

另一個值得注意的地方是在.xml文件里，屬性的值都必須加上引號，像height=”250”（因為那里使用的是標準的xml語法），而在JavaScript代碼中，就要根據(jù)屬性具體的類型來決定，像高度這種整數(shù)型的值，就不用加。

你可能還會問，那么bgImage這個對象，是什么類型的，它有些什么屬性和方法可供我使用呢？它是一個img類型的對象，參考http://code.google.com/intl/zh-CN/apis/desktop/docs/gadget_apiref.html這個鏈接，這也是Google Desktop Gadget的API參考頁面，列出了Gadget Host提供的各種對象屬性和方法的說明（雖然事實驗證，Google自己列的這些都不全面，后話）。

最后叮囑一句：盡管main.xml文件里的東西（什么img啊，以后還會加進div啊，checkbox之類的東西）看起來多么的像HTML，Gadget都和Web沒有天然的聯(lián)系。Google自己發(fā)布了一些Gadget，例如Gmail和Google Docs，外觀與這兩個服務(wù)的網(wǎng)頁非常像，再加上Gadget也主要使用JavaScript開發(fā)（也少不了Universal Gadget跟著摻合），間接導致了總有人把Gadget顯示的地方考慮成一個小的瀏覽器窗口，而想把Web的一些東西簡單的放在這里，到底行不行呢？李寧說：一切皆有可能。阿迪說：沒有不可能。匹克說：我能，無限可能。我要說：可能，但很難（笑）。

所以在編寫Gadget的時候，最好的方法是把它當成純粹的桌面程序，忘掉Web的那一套。

這一節(jié)給大家入個門，下一節(jié)開始說說在Gadget中怎么做Google帳戶的登錄，還會很羅嗦的，請見諒（笑）。