目前为止不管后台写了多少逻辑(已经登录了Google,取了相册数据),我们的Gadget都还是那个看上去白白的Gadget。而要想让它看上去有所不同,就要在main.xml这个文件中,制定我们想要的“长相”(就跟征婚启事里写的一样,身高1617,体重不超过55公斤,相貌端正,贤良淑惠)。

如果你已经下载了我提供的源码,就可以打开看看,对照实际效果来看代码,应该很好理解。我们总计在界面上放了几样东西:

  •  一张背景图(就是白白的那个)
  •  一张PicasaLogo
  •  两行表示欢迎的文字(就是label啦)
  •  一个用来显示相册信息的列表(listbox),当然,目前列表中还一个列表项都没有(列表项称之为item
  •  最后又贴了两张图,其中一张是某企业的logo(笑)

其中值得注意的事情有这么几件:

一是背景图片绝非可有可无,按google的说法,像label这种东西,如果没有放在一张背景图片之上的话,是显示不出来的。

二是Gadget中界面的内容,样式和布局都在这一个文件中指定。

三是Gadget的界面没有HTML那种流动布局的效果,就是说,所有要显示的元素,必须明明白白的指出它的位置,也就是每个元素的xy属性,是从该元素的父元素左上角开始计算的坐标。如果你先写了一个label(拿label举个例子,实际上用什么效果都是一样的),再挨着它写了一个label,两个label你都没有指定xy的值,那么这个两个label会重叠着显示在一起。不信你可以试一试。

四是图片的源文件位置,从代码中可以看到指定本机上的相对目录是可以的,那么指定一个网络上的url可以么?例如http://www.sina.com.cn/images/logo.gif?如果你头脑中还存在着HTML的印象,可能想当然的以为可以这么做,而事实上不行,GadgetWeb没有天然的联系(没记错的话,我已经说过四次了)。后面处理相册缩略图的时候,我们会看到怎么把网络上的图片显示出来。

写过图形用户界面程序的人一定想问,如何让界面上的元素与代码产生联系呢?例如我们的列表,我想在代码中对它作些修改的时候,如何取得它的引用呢?在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的代码才参透呢,愚笨愚笨)。

在我们剩下的唯一一个重要函数MainfetchAlbumThumbnail()中,就是使用这种方法来取得相册缩略图的图片并显示在Gadget的界面中的。

这个函数我就不逐一分解了,相信你一定看得懂。