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

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

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

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

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

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

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

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

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

<listbox height="130" name="contentListBox" width="200" x="25" y="100"

 

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

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

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

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


var itemXml= '<item name="album_item"><label>列表項</label></item>';

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

var newItem = contentListBox.appendElement(itemXml);

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

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

具體點，記得一個請求最重要的四部分數(shù)據(jù)么？url：就是該圖片的url；請求類型：因為是要求數(shù)據(jù)，自然是“GET”；請求頭：對本請求來說沒有；消息體：同樣沒有。

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

myImg.src=xhRequest. responseStream;

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

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

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