biggates的心得

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

从上一篇的 Hello World 中可以看到,一个Gadget实际上就是一个标准的XML文件。在<Module></Module>标签里面,就是整个Gadget的内容了。它包括三个部分:

  • <Content> 标签里面是整个 Gadget 的"工作区",这里的内容通常包含了一个 Gadget 的外貌(通过HTML / CSS)和功能(多数通过 Scripts )。
  • <UserPerfs> 标签里面是一个用户可以进行修改的选项。比如一个 RSS 阅读器就需要一个<UserPerfs>来保存用户指定的 RSS 源的地址。注意,如果需要多个选项,那么就需要添加多个 <UserPerfs> 标签。 
  • <ModulePerfs> 标签里面是这个 Gadget 的描述,比如 Gadget 的标题、作者、分类什么的。用户是无法更改它的。

我们来看一个实际的例子(来自 http://code.google.com/apis/gadgets/docs/basic.html#Content ):

 1<?xml version="1.0" encoding="UTF-8" ?>
 2
 3<Module>
 4  <ModulePrefs title="Go to Photo Album" height="250" scaling="false" />
 5  <Content type="html">
 6    <![CDATA[ 
 7      <div style="text-align:center">
 8        <a id="Riggs" title="My Photo Album" target="_blank" href="http://picasaweb.google.com/doc.examples/ShelfBoy">
 9          <img border="0" alt="Photo" src="http://doc.examples.googlepages.com/Riggsie-OP.jpg" title="Click Here.">
10        </a>
11      </div>
12    ]]>
13  </Content>
14</Module>
15

这个 Gadget 的<Content>标签的 type 属性值为 "html" ,意味着<Content> 的内容是HTML。在<![CDATA[    ]]>标签里,就是HTML代码了。我们看到,整个 Gadget 只是一个<div> 里面一个带 <a> 的 <img> 标记。

Go to Photo Album

Photo
由 Google 强力驱动的小工具

嗯,撇开底下那个"Add to Google" 的链接不管,整个 Gadget 的样子的确如同我们所设想的一样:只有一张图片。

没错,只要修改 <Content> 里面的 <![CDATA[  ...  ]]> 的内容,就可以把 HTML 做成一个 Gadget 。并且,在 HTML 代码里面可以使用 <style> 和 <script> 标签。

说到这里,大家一定忍不住摩拳擦掌,跃跃欲试了吧……

记住著名的Google Gadget Editor : http://code.google.com/apis/gadgets/docs/gs.html#GGE

posted on 2008-01-06 09:55  biggates  阅读(679)  评论(0编辑  收藏  举报