使用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