用 ASP.NET 製作 Google gadget

八月 14, 2008
Tags: , ,

google gadget 緣起：

客戶要求將現有網站部份資訊製作成 Google Gadget（Google 小工具）並希望在短時間內能夠上線使用，以求績效。

在考量時間不多且缺乏開發 gadget 經驗，決定採用 Google小工具API上所建議【將現有網頁或應用程式轉變為小工具】的方式來實作。

在客戶多次變更需求的過程中累積一些開發心得記錄下來和大家分享。

本文將集中在 ASP.NET 程式(.cs)和網頁(.aspx)部份，其它 gadget 相關技術資訊請自行參考 Google API 文件。

  • 讀寫使用者的設定值
  • 動態調整 gadget 高度


Base Class 基礎類別

下載 baseGadget.cs 。

default.xml 組態檔

default.xml

8. <Require feature="setprefs" /> 表示 gadget 要有「使用者偏好設定」功能。[API文件]
9. <Require feature="dynamic-height" /> 表示 gadget 要有「動態高度」功能。[API文件]
11,15,17. 本例中所使用的3種資料型態 enum,list,hidden。[API文件]

default.aspx.cx 程式

public partial class _Default :
    // 繼承 baseGadget 類別
    klcintw.network.google.gadget.baseGadget
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // 取得Google相關功能的 js library
        base.RegisterGadgetScriptInclude();
        // 使用動態調整高度的功能
        base.DynamicHeight();

        // 輸出各取得設定值
        Response.Write(string.Format("tEnum = {0}<br />",
            base.prefs_getString("tEnum")));
        Response.Write(string.Format("tList = {0}<br />",
            base.prefs_getString("tList")));
        Response.Write(string.Format("tHidden = {0}<br />",
            base.prefs_getString("tHidden")));
    }
}

default.aspx 網頁

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Horn Network</title>
<style type="text/css">
body {font-size:10pt;}
input.button {width:100px;}
</style>
</head>
<body>
<hr size='1' />
<a href="http://klcin.tw/net">Google Gadget with ASP.NET 示範</a>
<form id="form1" runat="server">
<hr size='1' />
<table style="font-size:8pt;" width="100%"><tr><td>
prefs.getString('XXX')<br />
<input type="button" class='button' value="tEnum" onclick="alert(prefs.getString('tEnum'));" /><br />
<input type="button" class='button' value="tList" onclick="alert(prefs.getString('tList'));" /><br />
<input type="button" class='button' value="tHidden" onclick="alert(prefs.getString('tHidden'));" /><br />
</td><td>
_args()['up_XXX']<br />
<input type="button" class='button' value="tEnum" onclick="alert(_args()['up_tEnum']);" /><br />
<input type="button" class='button' value="tList" onclick="alert(_args()['up_tList']);" /><br />
<input type="button" class='button' value="tHidden" onclick="alert(_args()['up_tHidden']);" /><br />
</td></tr></table>
<hr size='1' />
編輯tHidden欄位：<input type="text" id="txtHidden" value='<%=prefs_getString("tHidden")%>' />
<input type="button" value="儲存" onclick="fnSave();" />

<input type="hidden" id="tHidden" name="tHidden" value='<%=prefs_getString("tHidden")%>' />
    </form>
</body>
<script type="text/javascript">
var prefs = new _IG_Prefs();
function fnSave() {
    _gel('tHidden').value = _gel('txtHidden').value;
    prefs.set("tHidden", _gel('tHidden').value);

    window.setTimeout(reloadGadget, 2000);
}
function reloadGadget() {
    _gel('form1').submit();
}
</script>
</html>

在 client 端讀取「使用者偏好設定」的方法

  1. _args()['up_tEnum']); // 要在變數前面加 up_
  2. var prefs = new _IG_Prefs();
    prefs.getString(‘tEnum’);

在 client 端寫入「使用者偏好設定」的方法

  • var prefs = new _IG_Prefs();
    prefs.set("tHidden", ‘123’);

在 client 端動態調整高度的方法

  • _IG_AdjustIFrameHeight(); // 需要調整高度時即呼叫

備註：

  1. 其實 gadget 的所有參數都是由 url 傳遞的，如：

    所以參數資料量是有限制的。
  2. 為了讓 client 端（用 javascript）變更的設定值能傳回 server 端，必須要 post 回去。
    而此時就不能從 url 讀設定值因為不會變。
    所以要在 html 放一個 hidden 存放新的設定值回傳 server ，程式再從這個欄位讀取新值。

Filed under:
ASP.NET 2.0, C#, Google Gadget, 檔案下載 by klcintw

Comments are closed.