前文说道开发一个Gadget可以分为两个步骤：先写界面的XML文件，再写逻辑部分的JavaScript。我们就遵循这个步骤来写一个再简单也不过的Gadget。

用到的工具有两个，一个是随Google Desktop SDK附带的Gadget Designer，用来编写并有限的预览界面，还可以调试JavaScript（这个就更有限了）；一个是Google Desktop，用来测试写好的Gadget。下面要写的例子是我在为某研究院某个项目策划阶段作POC时所写的一个小例子，可以显示一个Google用户的Picasa相册中的Album名称和缩略图。虽然很小，但包含了Google账户的自动登录，显示网络图片，XmlHttpRequest的使用等很多实用技巧。整个完成之后是这个样子：

 

请跟我一起来。现在打开Gadget Designer，选择File->New Gadget，输入了名称“Picasa”之后，就可以看到一个完整Gadget的雏形了。你可以找到这个项目所在的文件夹，双击其中的gadget.gmanifest，此时如果你已经安装了Google Desktop，就可以看到Desktop自动启动，并把这个很“白”的Gadget（别笑，除了一张白色背景图片以外，确实什么也没有）显示在Sidebar中。如图：

clip_image002

到项目文件夹里可以看到一个main.xml文件和一个main.js文件。我们的界面就是在main.xml文件里指定的，打开它，可以看见它指定了一张GadgetDesigner帮我们生成的白色png图片作背景，还指定了我们要导入哪些个.js文件。我们来小改两个地方：



<view height="150" width="250" onopen="view_onOpen()">

<img src="stock_images\background.png" />

<script src="main.js" />

</view>

一是把view的height改成250，二是给img元素添加一个属性name并给一个值，就像这样：

<img name=”bgImage” src="stock_images\background.png" />

 

然后双击gadget.gmanifest，看看更改效果：

clip_image003

乍一看貌似没什么改变，但是注意看我用黑色线圈出来的那一条横杠，那是我们的Gadget的下边沿，说明它的高度还是变化了，但是白色的背景没有变，因为我们没有改变背景图片的大小。现在通过.js文件中代码的方式来改变背景图片的高度，可以看出些有意思的东西。

打开main.js文件，你应该会看到一个view_onOpen()函数，这就是Gadget启动时会自动调用的第一个函数（好吧，并不严格，但是在调用的顺序上，它的确是相当靠前的），我们就在这个函数内部添加下面这一句：

bgImage.height=250;

再双击gadget.gmanifest运行看看，白色背景也变高了吧。

我知道你一定会问，代码里的bgImage是什么东西？怎么没见在任何地方声明这个变量，也没见任何地方作初始化呢？回想我们刚才在main.xml文件里做了什么？我们给背景图片取了一个名字，叫bgImage，而且别怀疑，你在代码里访问的这个bgImage，正是那张图片！背后的工作就是Gadget Host通过JavaScript引擎为我们做的，凡是在.xml文件里放置的东西（无论什么，图片也好，按钮也好，一个抽象的div也好），只要你给了一个name属性，在JavaScript代码中就可以直接使用这个名字来访问该对象（前提是你给的名字得是独一无二的），这与浏览器中随时可以访问document对象而不用做任何声明一样，那是浏览器这个运行环境提供的对象，随时可用。

另一个值得注意的地方是在.xml文件里，属性的值都必须加上引号，像height=”250”（因为那里使用的是标准的xml语法），而在JavaScript代码中，就要根据属性具体的类型来决定，像高度这种整数型的值，就不用加。

你可能还会问，那么bgImage这个对象，是什么类型的，它有些什么属性和方法可供我使用呢？它是一个img类型的对象，参考http://code.google.com/intl/zh-CN/apis/desktop/docs/gadget_apiref.html这个链接，这也是Google Desktop Gadget的API参考页面，列出了Gadget Host提供的各种对象属性和方法的说明（虽然事实验证，Google自己列的这些都不全面，后话）。

最后叮嘱一句：尽管main.xml文件里的东西（什么img啊，以后还会加进div啊，checkbox之类的东西）看起来多么的像HTML，Gadget都和Web没有天然的联系。Google自己发布了一些Gadget，例如Gmail和Google Docs，外观与这两个服务的网页非常像，再加上Gadget也主要使用JavaScript开发（也少不了Universal Gadget跟着掺合），间接导致了总有人把Gadget显示的地方考虑成一个小的浏览器窗口，而想把Web的一些东西简单的放在这里，到底行不行呢？李宁说：一切皆有可能。阿迪说：没有不可能。匹克说：我能，无限可能。我要说：可能，但很难（笑）。

所以在编写Gadget的时候，最好的方法是把它当成纯粹的桌面程序，忘掉Web的那一套。

这一节给大家入个门，下一节开始说说在Gadget中怎么做Google帐户的登录，还会很罗嗦的，请见谅（笑）。