前文說(shuō)道開(kāi)發(fā)一個(gè)Gadget可以分為兩個(gè)步驟：先寫(xiě)界面的XML文件，再寫(xiě)邏輯部分的JavaScript。我們就遵循這個(gè)步驟來(lái)寫(xiě)一個(gè)再簡(jiǎn)單也不過(guò)的Gadget。

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

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

到項(xiàng)目文件夾里可以看到一個(gè)main.xml文件和一個(gè)main.js文件。我們的界面就是在main.xml文件里指定的，打開(kāi)它，可以看見(jiàn)它指定了一張GadgetDesigner幫我們生成的白色png圖片作背景，還指定了我們要導(dǎo)入哪些個(gè).js文件。我們來(lái)小改兩個(gè)地方：

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

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

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

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

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

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

另一個(gè)值得注意的地方是在.xml文件里，屬性的值都必須加上引號(hào)，像height=”250”（因?yàn)槟抢锸褂玫氖菢?biāo)準(zhǔn)的xml語(yǔ)法），而在JavaScript代碼中，就要根據(jù)屬性具體的類(lèi)型來(lái)決定，像高度這種整數(shù)型的值，就不用加。

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

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

所以在編寫(xiě)Gadget的時(shí)候，最好的方法是把它當(dāng)成純粹的桌面程序，忘掉Web的那一套。

這一節(jié)給大家入個(gè)門(mén)，下一節(jié)開(kāi)始說(shuō)說(shuō)在Gadget中怎么做Google帳戶(hù)的登錄，還會(huì)很羅嗦的，請(qǐng)見(jiàn)諒（笑）。