目前为止不管后台写了多少逻辑（已经登录了Google，取了相册数据），我们的Gadget都还是那个看上去白白的Gadget。而要想让它看上去有所不同，就要在main.xml这个文件中，制定我们想要的“长相”（就跟征婚启事里写的一样，身高1米6至1米7，体重不超过55公斤，相貌端正，贤良淑惠）。
如果你已经下载了我提供的源码，就可以打开看看，对照实际效果来看代码，应该很好理解。我们总计在界面上放了几样东西：
- 一张背景图（就是白白的那个）
- 一张Picasa的Logo
- 两行表示欢迎的文字（就是label啦）
- 一个用来显示相册信息的列表（listbox），当然，目前列表中还一个列表项都没有（列表项称之为item）
- 最后又贴了两张图，其中一张是某企业的logo（笑）
其中值得注意的事情有这么几件：
一是背景图片绝非可有可无，按google的说法，像label这种东西，如果没有放在一张背景图片之上的话，是显示不出来的。
二是Gadget中界面的内容，样式和布局都在这一个文件中指定。
三是Gadget的界面没有HTML那种流动布局的效果，就是说，所有要显示的元素，必须明明白白的指出它的位置，也就是每个元素的x和y属性，是从该元素的父元素左上角开始计算的坐标。如果你先写了一个label（拿label举个例子，实际上用什么效果都是一样的），再挨着它写了一个label，两个label你都没有指定x和y的值，那么这个两个label会重叠着显示在一起。不信你可以试一试。
四是图片的源文件位置，从代码中可以看到指定本机上的相对目录是可以的，那么指定一个网络上的url可以么？例如http://www.sina.com.cn/images/logo.gif？如果你头脑中还存在着HTML的印象，可能想当然的以为可以这么做，而事实上不行，Gadget与Web没有天然的联系（没记错的话，我已经说过四次了）。后面处理相册缩略图的时候，我们会看到怎么把网络上的图片显示出来。
写过图形用户界面程序的人一定想问，如何让界面上的元素与代码产生联系呢？例如我们的列表，我想在代码中对它作些修改的时候，如何取得它的引用呢？在Gadget中这一点还比较方便，主要有两个途径：一是只要你给元素赋了name属性，例如我就给列表项起了一个名字叫做contentListBox，在main.xml中的这一行：
<listbox height="130" name="contentListBox" width="200" x="25" y="100"
之后就可以直接在代码中用contentListBox这个值来访问这个列表项了（而且任你在代码中怎么找，也找不到声明或者初始化这个变量的地方）——当然前提是起的名字必须是唯一的。有意思吧？
第二种方式比较传统也比较少用，可以通过DOM对象访问每个元素。
废话不多说，来看看在代码中给列表插入列表项怎么做。
列表项对应着Gadget
API提供的一个名为item的对象实例，但我们要用new item()这样的语法来得到一个新的列表项并逐一设置它的属性么？不不，有更简便也更好玩的方法，我们只要新建一个字符串：
var itemXml= '<item name="album_item"><label>列表项</label></item>';
然后调用列表contentListBox的方法来添加就可以，像这样：
var newItem = contentListBox.appendElement(itemXml);
方便么？这种用法使得开发人员不需要为一个图形界面的组件掌握两套语法（XML的和JavaScript的），非常贴心。
好，现在来说另一个问题，既然不能为一个img对象的src属性指定一个网络地址，那到底如何显示网络上的图片呢？答案很长，如果你有了图片的url（就是 http://开头的那种啦），首先要通过XmlHttpRequest把图片的数据取回来，然后把这部分数据赋给src属性。
具体点，记得一个请求最重要的四部分数据么？url：就是该图片的url；请求类型：因为是要求数据，自然是“GET”；请求头：对本请求来说没有；消息体：同样没有。
所以发请求的部分并不困难，待请求的状态变为4，也就是说明回传数据已到达的时候，就可以从请求的responseStream这个属性得到图片的二进制数据。假设在代码中我们要显示的图片是<img name=”myImg”/>,记得么，使用名字可以直接访问这个图片，再假设我们的请求对象取名为xhRequest，像下面这样：
myImg.src=xhRequest. responseStream;
如此就可以了！哈哈，简单吧（我当初倒是找了半天，读过了YouTube Gadget的代码才参透呢，愚笨愚笨）。
在我们剩下的唯一一个重要函数Main的fetchAlbumThumbnail()中，就是使用这种方法来取得相册缩略图的图片并显示在Gadget的界面中的。
这个函数我就不逐一分解了，相信你一定看得懂。