使用GGE开发Google小工具(Google Gadget)

原文链接：http://hi.baidu.com/shirdrn/blog/item/9c144dfc1607e984b901a02d.html

刚开始研究Google的OpenSocial，发现还要从Google Gadget(即：Google小工具)学起来，有点无从下手。

首先在Google创建一个个人账户，已经有了可以直接登录，然后才能使用GGE来编辑托管文件，然后可以在自己的iGoogle上测试自己编写的小工具。

登录你的账号，然后打开链接http://code.google.com/intl/zh-CN/apis/gadgets/docs/tools.html，可以看到GGE编辑器。第一次进入，会看到自带的麽个默认的Hello World的例子，如图所示：

如果保存这个默认的helloworld.xml，直接进行发布，会出错的，如图所示：

一些验证的警告，可能，即使你点击OK也不会成功地忽略这些警告，所以，需要添加上警告中提示的一些属性的设置。

下面，是我创建的一个简单的Google小工具命名为welcomeToMyBaiduSpace.xml，如图：

我修改一下，如下所示：

 
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="&#x6B22;&#x8FCE;&#x8BBF;&#x95EE;&#x6211;&#x7684;&#x767E;&#x5EA6;&#x7A7A;&#x95F4;:-)"
width = "320"
height = "200"
author = "shirdrn"
author_email = "shirdrn@hotmail.com"
description = "Shirdrn's first Google Gadget">
<Require feature="opensocial-0.7" />
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello,&#x6B22;&#x8FCE;&#x8BBF;&#x95EE;&#x6211;&#x7684;&#x767E;&#x5EA6;&#x7A7A;&#x95F4; http://hi.baidu.com/shirdrn
]]>
</Content>
</Module>
 
修改完成以后，选择左上角的“File”下的"Save"或者“Save As”保存即可。

我在其中输入中文字符了，可以看到，它会自动将中文转换为Unicode码。

OK，上面这个最简单的一个Google小工具就完成了。

然后，将自己编写Google小工具发布到自己的iGoogle上测试一下效果。

选择“File”下的“Publish”，会弹出一个验证警告对话框，如下所示：

单击“OK”即可，忽略这个警告，接着弹出对话框，如图所示：

这时，就要根据需要进行选择了。如果是这样的简单测试，选择“Add to my iGoogle page”发布到自己的iGoogle主页上即可，如果是一个具有复杂交互功能、比较成功的Google小工具，可以选择“Publish t0 iGoogle Directory”发布到iGoogle目录中供大家分享你的Google小工具，另外可以选择“Add to a webpage”发布到一个页面上。

我选择“Add to my iGoogle page”，这时会弹出一个确认添加到你的iGoogle上的提示页面，如图所示：

选择蓝色按钮“Add to Google”，添加到自己的iGoogle上，页面转向自己的iGoogle，你会看到多了下面一个Tab页：

OK，第一个Google小工具就开发测试完成了。下面，直接引用Google Gadget API参考，来简单说明一上上面XML代码的结构及其含义：

XML 文件中的 <ModulePrefs> 部分指定了小工具的特征，如标题、作者、首选大小等等。例如：

<Module>
  <ModulePrefs title="Developer Forum" 
    title_url="http://groups.google.com/group/Google-Gadgets-API" 
    height="200" 
    author="Jane Smith" 
    author_email="xxx@google.com"/> 
  <Content ...>
   ... content ...
  </Content> 
</Module>

小工具的用户不能更改这些属性。

下表列出了 <ModulePrefs> 属性：

属性	说明
title	提供小工具标题的可选字符串。该标题显示在 iGoogle 的小工具标题栏中。如果该字符串包含用户使用偏好替换变量，并且您打算将小工具提交至 iGoogle 内容目录，您还应提供 directory_title 以用于目录显示。
directory_title	提供应对 iGoogle 内容目录中的小工具显示标题的可选字符串。应仅包含要显示的文字文本，而不包含用户使用偏好替换变量。这是因为 iGoogle 内容目录显示小工具的静态视图，所以不能进行必要的替换以生成合理的标题。例如，如果小工具的标题是“Friends for __UP_name__”，则目录不能执行替换以为“ __UP_name__”提供合理的值。所以您仅将directory_title设置为“朋友”即可。
title_url	提供小工具标题链接至的网址的可选字符串。例如，您可以将标题链接至与小工具相关的网页。
description	描述小工具的可选字符串。
author	列出小工具作者的可选字符串。
author_email	提供小工具作者的电子邮件地址的可选字符串。您可以使用任何电子邮件系统，但是鉴于会收到大量垃圾邮件，因此不应使用个人电子邮件地址。一种方法是在小工具规范中使用 helensmith.feedback+coolgadget@gmail.com 形式的电子邮件地址。 Gmail 会省略加号 (+) 后的所有内容，所以该电子邮件地址可解释为 helensmith.feedback@gmail.com。 您可以在此处创建 Gmail 帐户。
author_affiliation	表示作者所属机构的可选字符串（如“Google”）。该属性对于包含在 iGoogle 内容目录中的小工具来说是必需的。
author_location	作者的地理位置，例如“美国加利福尼亚州山景城”。
screenshot	给出小工具屏幕截图的网址的可选字符串。该图片必须位于不能被 robots.txt 拦截的公共网站上。PNG 是首选格式，GIF 和 JPG 也可接受。小工具屏幕截图的宽度应为 280 像素。屏幕截图的高度应为使用小工具时的“正常”高度。有关屏幕截图指导方针的更多讨论内容，请参阅“发布至 iGoogle 内容目录”。
thumbnail	给出小工具缩略图的网址的可选字符串。该图片必须位于不能被 robots.txt 拦截的公共网站上。PNG 是首选格式，GIF 和 JPG 也可接受。小工具缩略图应为 120x60 像素。有关缩略图指导方针的更多讨论内容，请参阅“发布至 iGoogle 内容目录”。
height	指定小工具运行所在区域的高度的可选正整数。默认高度为 200。
width	指定小工具运行所在区域的宽度的可选正整数。默认宽度为 320。
scaling	指定在调整浏览器大小时是否保持小工具纵横比（高宽比）的可选布尔值。可自动纵向伸缩的小工具应将该属性设置为 True，而高度固定的小工具应将该属性设置为 False。默认为 True。
scrolling	内容超出给定空间时提供纵向和/或横向滚动条的可选布尔值。如果为 False，则会按照给定（这并不表示宽度不可组态）的高度和宽度修剪内容。默认为 False。
singleton	指定用户是否可从目录中多次添加小工具的布尔值。默认为 True，这意味着默认情况下，小工具仅能添加一次。无论如何选择，目录均可处理该属性。例如，iGoogle 内容目录通过对已添加的小工具灰显文本“已添加”来处理 singleton="true"。请注意，对该属性的更改可能不会立即被目录接受。 该属性不会阻止用户通过开发人员小工具或“按网址添加”来多次添加小工具。因此，您仍然需要编写小工具来支持多次添加实例。
author_photo	对于作者页面，是至照片（首选 70x100 PNG 格式，但也支持 JPG/GIF）的网址。
author_aboutme	对于作者页面，是个人说明（请尽量保持在 500 个字符内）。
author_link	对于作者页面，是至您的网站、博客等的链接。
author_quote	对于作者页面，是您想要包含的摘录（请尽量保持在 300 个字符内）

上面的Google小工具只是加入了一些文本内容，实际里面可以添加HTML、JavaScript、Flash等代码，完成复杂的功能，使用户能够体验到复杂的交互，下面使用一个别人开发的名称为ROT13的Google小工具，看一下效果如何，XML代码如下所示：

 
<?xml version="1.0" encoding="UTF-8" ?>
 
<Module>
<ModulePrefs title="&#x9B54;&#x672F;&#x8BD1;&#x7801;&#x5668;"
width = "320"
height = "200"
author = "shirdrn"
author_email = "shirdrn@hotmail.com"
description = "ROT13"/>
<Content type="html">
<![CDATA[
<script type="text/javascript"></script>
 
// The gadget version of ROT13.
// Encodes/decodes text strings by replacing each letter with the letter
// 13 positions to the right in the alphabet.
function decodeMessage (form) {
var alpha = "abcdefghijklmnopqrstuvwxyz";
var input = form.inputbox.value;
var aChar;
var message = "";
for (var i = 0; i <input.length; i++) 12) { // compensate for 0-based index
{
aChar = input.charAt(i);
var index = alpha.indexOf(aChar.toLowerCase());
 
// if a non-alphabetic character, just append to string
if (index==-1)
{
message += aChar;
}
 
// if you have to wrap around the end of the alphabet
else if(index >
index = 25 - index; // last item in array is at [25]
index = 12 - index; // because array starts with 0
aChar = alpha.charAt(index);
message += aChar;
}
 
// if you don't have to wrap
else {
aChar = alpha.charAt(index+13);
message += aChar;
}
}
document.getElementById('content_div').innerHTML = "<b>Your message: </b>" + message;
}
 
 
<FORM NAME="myform" ACTION="" METHOD="GET">Message: <BR>       <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>       <INPUT TYPE="button" NAME="button" Value="Transform" onClick="decodeMessage(this.form)">
</FORM>
<div id="content_div"></div>
]]>
</Content>
</Module>
 
上面代码中，title我给修改了，由于发布需要一些必要的属性，我自己给添加上了一些，如下所示：

    width = "320"

    height = "200"

    author = "shirdrn"

    author_email = "shirdrn@hotmail.com"

    description = "ROT13"

保存为magicDecoder.xml文件，实际上完整的URL形式为：

http://hosting.gmodules.com/ig/gadgets/file/117231683431063926075/magicDecoder.xml

然后，将其发布到我的iGoogle上，浏览效果如下所示：

填写一个Message，是字母串，我使用HelloShirdrn测试，如图所示：

关于ROT13，可以参考页面：

http://en.wikipedia.org/wiki/ROT13