iGoogle 小工具製作心得

iGoogle 小工具主要是以 XML 為主體，再加上 HTML、CSS 及 JavaScript 所組成的，基本上只要會後面三種語言，要開發 iGoogle 小工具是非常快樂的一件事。

在這裡我只做一些的教學及心得分享，詳細的規範及 API 說明，請察看官方網站 Google 小工具 API 開發人員指南，開發指南裡面寫的很清楚，還有很多的範例可以參考。

心得建議：

• 再開發時建議 XML 的檔名不要太正式，iGoogle 的平台會 cache XML，造成檢視上會出現不一致情況，等到要發佈時再取一個正式的檔名，避免不必要的問題發生。
• 如果要使用 session 和 cookie 做登入驗證的話，最好使用 <iframe> 去處理，會比較容易達成且安全問題也比較少。
• 在 ModulePrefs 中的 category 屬性也記得加上去，在官方的開發人員指南中並沒有說明，共有：
  
  • politics
  • tools
  • funandgames
  • lifestyle
  • finance
  • communication
    
  • 等...。


• 多利用[便條簿]做測試可以減少不少時間。
  
• 在測試時最好在 iGoogle 上另開一個[分頁]，免得自己原本常用的小工具被打亂。
  
• 在測試的[分頁]中最好加上[開發人員小工具]這個小工具去管理 cache 問題。
  

小工具範例：

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs
    title="單位換算"
    description="更方便的介面處理單位制度上的換算"
    directory_title="單位換算"
    author="Jax"
    author_email="weskerjax+feed@gmail.com"
    thumbnail=
      "http://weskerjax.googlepages.com/unit_converter_thumbnail.png"
    screenshot=
      "http://weskerjax.googlepages.com/unit_converter_screenshot.png"
    title_url="http://jax-work-archive.blogspot.com/"
    category="tools"
    height="300">
    <Locale lang="zh-tw" country="TW"/>
    <Require feature="tabs"/>
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref
   name="type"
   display_name="預設開啟的頁籤"
   default_value="長度"
   datatype="enum">
    <EnumValue value="長度"/>
    <EnumValue value="重量"/>
    <EnumValue value="面積"/>
    <EnumValue value="體積"/>
  </UserPref>
  <Content type="html">
  <![CDATA[
<style type="text/css">
.JContent table{
    margin-top:5px;
    width:100%;
}
.JContent th{
    background-color:#99CCFF;
    padding-top:5px;
}
.JContent label{
    text-align:center;
    padding:3px;
    display:block;
    font-size:12px;
}
.JContent label input{
    display:block;
    text-align:left;
    line-height:1.1em;
    font-size:11px;
    width:95%;
}
</style>
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
function set_event__MODULE_ID__(tabId){
    var inputs=_gel(tabId).getElementsByTagName('input');
    for (var i=0, j=inputs.length; i<j; i++){
        el=inputs[i];
        /*設定 onkeyup 時處理單位換算*/
        el.onkeyup=function(){
            this.value=this.value.match(/[0-9]+[\.]?[0-9]*/);
            var rate=this.getAttribute('rate');
            var value=parseFloat(this.value)/parseFloat(rate);

            var table=this;
            while(table.tagName!="TABLE"){table=table.parentNode;}

            var inputs=table.getElementsByTagName('input');
            for (var i=0, j=inputs.length; i<j; i++){
                chg=inputs[i];
                r=chg.getAttribute('rate');
                if(r==rate){continue;}

                if(this.value){chg.value=value*parseFloat(r);}
                else{chg.value='';}
            };
        };
        /*設定 onfocus 選取所有文字*/
        el.onfocus=function(){this.select()};
    };
    /*讓小工具能夠自行調整大小*/
    _IG_AdjustIFrameHeight();
}
function init() {
    /*建立頁籤並選定預選頁籤*/
    var tabs = new _IG_Tabs(__MODULE_ID__,prefs.getString("type"));
    tabs.addTab("長度","J_length",set_event__MODULE_ID__);
    tabs.addTab("重量","J_weight",set_event__MODULE_ID__);
    tabs.addTab("面積","J_area",set_event__MODULE_ID__);
    tabs.addTab("體積","J_volume",set_event__MODULE_ID__);
}
_IG_RegisterOnloadHandler(init);/*載入時呼叫的事件處理常式*/
</script>
<div class="JContent" id="J_length">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>公尺<input rate="1" type="text" /></label></td>
      <td><label>公里<input rate="0.001" type="text" /></label></td>
      <td><label>海里<input rate="0.00053996" type="text" /></label></td>
    <tr>
      <td><label>英吋<input rate="39.370" type="text" /></label></td>
      <td><label>英呎<input rate="3.2808" type="text" /></label></td>
      <td><label>英碼<input rate="1.0936" type="text" /></label></td>
    </tr>
      <td><label>台尺<input rate="3.3003" type="text" /></label></td>
      <td><label>市里<input rate="2e-3" type="text" /></label></td>
      <td><label>市引<input rate="0.03" type="text" /></label></td>
    </tr>
  </table>
</div>
<div class="JContent" id="J_weight">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>公斤<input rate="1" type="text" /></label></td>
      <td><label>公克<input rate="1e+3" type="text" /></label></td>
      <td><label>公噸<input rate="1e-3" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>英磅<input rate="2.2046" type="text" /></label></td>
      <td><label>盎司<input rate="35.273" type="text" /></label></td>
      <td><label>英噸<input rate="9.8421e-4" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>美噸<input rate="0.0011023" type="text" /></label></td>
      <td><label>格令<input rate="15432" type="text" /></label></td>
      <td><label>克拉<input rate="5000" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>台斤<input rate="1.6667" type="text" /></label></td>
      <td><label>台兩<input rate="26.667" type="text" /></label></td>
      <td><label>市擔<input rate="0.02" type="text" /></label></td>
    </tr>
  </table>
</div>
<div class="JContent" id="J_area">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>公畝<input rate="100.00" type="text" /></label></td>
      <td><label>公頃<input rate="1" type="text" /></label></td>
      <td><label>平方公里<input rate="0.01" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>平方英寸<input rate="155e+5" type="text" /></label></td>
      <td><label>平方英尺<input rate="107640" type="text" /></label></td>
      <td><label>平方碼<input rate="11960" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>英畝<input rate="2.4711" type="text" /></label></td>
      <td><label>平方英里<input rate="0.003861" type="text" /></label></td>
      <td> </td>
    </tr>
  </table>
</div>
<div class="JContent" id="J_volume">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>立方公尺<input rate="1" type="text" /></label></td>
      <td><label>公升<input rate="1e+3" type="text" /></label></td>
      <td><label>毫升<input rate="1e+6" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>英國加侖<input rate="219.97" type="text" /></label></td>
      <td><label>液體加侖<input rate="264.17" type="text" /></label></td>
      <td><label>固體加侖<input rate="227.02" type="text" /></label></td>
    </tr>
  </table>
</div>
  ]]>
  </Content>
</Module>

範例預覽：

範例原始檔：unit_converter.xml


第一個開發的小工具：