「Google小工具」: Gadget & Mapplet (二)

(3). Gadget程式碼架構
Google小工具是由XML,HTML及Javascript組成，而XML中大部分的Tag是用來描述小工具,定義小工具之外部變數及指定所要引用的Gadget API。HTML及Javascript則必需於指定的Tag中編寫。
整個xml程式文件主要 Module 這個tag構成 ，其下又分成三部分主要的tab :ModulePrefs,UserPref 及Content
ModulePrefs:
主要用來定義小工具屬性：

屬性	說明
title	標題
title_url	標題的連結
description	文字描述說明
author	作者
author_email	作者email
screenshot	iGoogle小工具說明頁中的劃面截圖
thumbnail	iGoogle小工具清單中的小圖

ModulePrefs中另有一些子tag，其中很重要的一個是 Locale，利用此Tag可以達到多國語言版的小工具喔，要如何寫一個多國語言版的小工具呢?我將獨立一篇文章來介紹說明。

UserPref(非必要) :
此部分作用是定義一些變數，可作為個人化的參數傳遞，借以與Gadget溝通。
如下為Google Gadget Editor 的一個參數:Height。用來選擇設定我們編輯畫面的大小。

這個Tag有很大的用，如可以用來設定Gadget的字型顏色,背景顏色….等等。
而在程式中要如何讀取此參數的內容，如下:

var prefs = new gadgets.Prefs(__MODULE_ID__);   //__MODULE_ID__ 為內建特殊變數
var pName = prefs.getString("myname");   //取得myname的內容

Content:
此部分就是我們寫程式最重要的區塊了，但是也可以指定內容為別一個url連結。

屬性	說明
type	類別: html , url
href	在類別為url時，可以指定為外部內容
view	此屬性做為OpenSocial Gadget專用，即據有社群功能的Gadget
preferred_height	Gadget的預設高度
preferred_width	Gadget的預設寬度

詳原Gadget說明文件 http://code.google.com/intl/zh-TW/apis/gadgets/docs/reference.html

「Google小工具」: Gadget & Mapplet (一)

(1). 什麼是「Google小工具」?
Gadget 及 Mapplet 屬同一類的設計架構，都是以XML及使用特殊Tag包起來的HTML與Javascript所組成。
完整範例如:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html">
<![CDATA[
Hello, world!
<script language="javascript">
alert('Hello !!');
</script>
]]>
</Content>
</Module>

Gadget 及 Mapplet差別在於Gadget可以於iGoogle及支援Javascript Widget的Blog中嵌入；而Mapplet只能外掛於Google Map中的小工具。不過之間只需稍做小修改即可以相互轉換。

(2). Google Gadget Editor
如何簡單快速方便的編寫設計「Google小工具」，iGoogle中就有提供一個小工具Gadget Editor，此Editor提供了Privew功能而且還可以將xml程式碼hosting在Gadget Editor喔，對於沒有主機的小工具開發者是個福音。(謎之音 ~~ Google是個大善人呀)

a.如何新增Google Gadget Editor到igoogle中:
登入igoogle後點選右上連結「新增小工具 »」
以"Google Gadget Editor"字串搜尋，於找到的工小具下點 「立即新增」
回到iGoogle首頁就可以看到Google Gadget Editor

b.Google Gadget Editor 功能選單

New : 開啓內建的sample，Editor中內建很多實用的sample程式，可以供初學者學習。
Open : 開啓已存檔的程式。
Open from URL : 開啓已存在於網路中的程式。
Save : 存檔，也就是將程式hosting於Google。
Save AS : 另存不同檔名。原檔儲存的檔案不變即多一個程式檔案。
Rename : 將已存檔的程式改名稱。
Upload : 可以將程式檔由電腦上傳。
Publish : 將目前開啟的檔案(必需存檔)發佈到iGoogle小工具列表中。
Delete : 將hosting於google中的程式檔刪除。

先看一個我為客戶設計的Gadget