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

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

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

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

一是背景圖片絕非可有可無，按google的說法，像label這種東西，如果沒有放在一張背景圖片之上的話，是顯示不出來的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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