目前為止不管后臺(tái)寫了多少邏輯（已經(jīng)登錄了Google，取了相冊(cè)數(shù)據(jù)），我們的Gadget都還是那個(gè)看上去白白的Gadget。而要想讓它看上去有所不同，就要在main.xml這個(gè)文件中，制定我們想要的“長(zhǎng)相”（就跟征婚啟事里寫的一樣，身高1米6至1米7，體重不超過(guò)55公斤，相貌端正，賢良淑惠）。

如果你已經(jīng)下載了我提供的源碼，就可以打開看看，對(duì)照實(shí)際效果來(lái)看代碼，應(yīng)該很好理解。我們總計(jì)在界面上放了幾樣?xùn)|西：

•  一張背景圖（就是白白的那個(gè)）
•  一張Picasa的Logo
•  兩行表示歡迎的文字（就是label啦）
•  一個(gè)用來(lái)顯示相冊(cè)信息的列表（listbox），當(dāng)然，目前列表中還一個(gè)列表項(xiàng)都沒(méi)有（列表項(xiàng)稱之為item）
•  最后又貼了兩張圖，其中一張是某企業(yè)的logo（笑）

其中值得注意的事情有這么幾件：

一是背景圖片絕非可有可無(wú)，按google的說(shuō)法，像label這種東西，如果沒(méi)有放在一張背景圖片之上的話，是顯示不出來(lái)的。

二是Gadget中界面的內(nèi)容，樣式和布局都在這一個(gè)文件中指定。

三是Gadget的界面沒(méi)有HTML那種流動(dòng)布局的效果，就是說(shuō)，所有要顯示的元素，必須明明白白的指出它的位置，也就是每個(gè)元素的x和y屬性，是從該元素的父元素左上角開始計(jì)算的坐標(biāo)。如果你先寫了一個(gè)label（拿label舉個(gè)例子，實(shí)際上用什么效果都是一樣的），再挨著它寫了一個(gè)label，兩個(gè)label你都沒(méi)有指定x和y的值，那么這個(gè)兩個(gè)label會(huì)重疊著顯示在一起。不信你可以試一試。

四是圖片的源文件位置，從代碼中可以看到指定本機(jī)上的相對(duì)目錄是可以的，那么指定一個(gè)網(wǎng)絡(luò)上的url可以么？例如http://www.sina.com.cn/images/logo.gif？如果你頭腦中還存在著HTML的印象，可能想當(dāng)然的以為可以這么做，而事實(shí)上不行，Gadget與Web沒(méi)有天然的聯(lián)系（沒(méi)記錯(cuò)的話，我已經(jīng)說(shuō)過(guò)四次了）。后面處理相冊(cè)縮略圖的時(shí)候，我們會(huì)看到怎么把網(wǎng)絡(luò)上的圖片顯示出來(lái)。

寫過(guò)圖形用戶界面程序的人一定想問(wèn)，如何讓界面上的元素與代碼產(chǎn)生聯(lián)系呢？例如我們的列表，我想在代碼中對(duì)它作些修改的時(shí)候，如何取得它的引用呢？在Gadget中這一點(diǎn)還比較方便，主要有兩個(gè)途徑：一是只要你給元素賦了name屬性，例如我就給列表項(xiàng)起了一個(gè)名字叫做contentListBox，在main.xml中的這一行：

之后就可以直接在代碼中用contentListBox這個(gè)值來(lái)訪問(wèn)這個(gè)列表項(xiàng)了（而且任你在代碼中怎么找，也找不到聲明或者初始化這個(gè)變量的地方）——當(dāng)然前提是起的名字必須是唯一的。有意思吧？

第二種方式比較傳統(tǒng)也比較少用，可以通過(guò)DOM對(duì)象訪問(wèn)每個(gè)元素。

廢話不多說(shuō)，來(lái)看看在代碼中給列表插入列表項(xiàng)怎么做。

列表項(xiàng)對(duì)應(yīng)著Gadget API提供的一個(gè)名為item的對(duì)象實(shí)例，但我們要用new item()這樣的語(yǔ)法來(lái)得到一個(gè)新的列表項(xiàng)并逐一設(shè)置它的屬性么？不不，有更簡(jiǎn)便也更好玩的方法，我們只要新建一個(gè)字符串：

然后調(diào)用列表contentListBox的方法來(lái)添加就可以，像這樣：

方便么？這種用法使得開發(fā)人員不需要為一個(gè)圖形界面的組件掌握兩套語(yǔ)法（XML的和JavaScript的），非常貼心。

好，現(xiàn)在來(lái)說(shuō)另一個(gè)問(wèn)題，既然不能為一個(gè)img對(duì)象的src屬性指定一個(gè)網(wǎng)絡(luò)地址，那到底如何顯示網(wǎng)絡(luò)上的圖片呢？答案很長(zhǎng)，如果你有了圖片的url（就是 http://開頭的那種啦），首先要通過(guò)XmlHttpRequest把圖片的數(shù)據(jù)取回來(lái)，然后把這部分?jǐn)?shù)據(jù)賦給src屬性。

具體點(diǎn)，記得一個(gè)請(qǐng)求最重要的四部分?jǐn)?shù)據(jù)么？url：就是該圖片的url；請(qǐng)求類型：因?yàn)槭且髷?shù)據(jù)，自然是“GET”；請(qǐng)求頭：對(duì)本請(qǐng)求來(lái)說(shuō)沒(méi)有；消息體：同樣沒(méi)有。

所以發(fā)請(qǐng)求的部分并不困難，待請(qǐng)求的狀態(tài)變?yōu)?/span>4，也就是說(shuō)明回傳數(shù)據(jù)已到達(dá)的時(shí)候，就可以從請(qǐng)求的responseStream這個(gè)屬性得到圖片的二進(jìn)制數(shù)據(jù)。假設(shè)在代碼中我們要顯示的圖片是<img name=”myImg”/>,記得么，使用名字可以直接訪問(wèn)這個(gè)圖片，再假設(shè)我們的請(qǐng)求對(duì)象取名為xhRequest，像下面這樣：

如此就可以了！哈哈，簡(jiǎn)單吧（我當(dāng)初倒是找了半天，讀過(guò)了YouTube Gadget的代碼才參透呢，愚笨愚笨）。

在我們剩下的唯一一個(gè)重要函數(shù)Main的fetchAlbumThumbnail()中，就是使用這種方法來(lái)取得相冊(cè)縮略圖的圖片并顯示在Gadget的界面中的。

這個(gè)函數(shù)我就不逐一分解了，相信你一定看得懂。