如何設計一個可以放在Windows Live Spaces的Gadget部落格小工具,以外掛ETToday新聞速報為例

puma — Sat, 01 Dec 2007 11:49:00 GMT

最近Microsoft剛好有辦一個Windows Live Spaces Gadgets 部落格小工具設計大賽

因為小弟對這方面沒什麼研究,,就照網路上的一些範例來改,,做了一個可以提供

ETToday新聞速報的小工具....就分享給大家吧...

想要了解更多的範例可以到下面網站：

http://gadget.blueshop.com.tw/2007contest/microsoft/spaces/gadgets/tuition.aspx

基本上Gadget小工具應該包含下列四個檔案：

.js 檔→小工具的主要程式

.css檔→小工具的樣式

.xml檔→小工具的資訊說明

.gif or .jpg→小工具會用到的圖片資源

我只針對javascript檔的原始碼說明，如下：

// 註冊小工具的名稱空間 (namespace) registerNamespace("F6Team.puma.ETTodayNews"); //// 定義此小工具的建構元。 //(名稱必須相同於清單檔(XML)的設定)。 F6Team.puma.ETTodayNews = function(p_elSource, p_args, p_namespace) { // 做任何事之前必須先呼叫 initializeBase 函式。 F6Team.puma.ETTodayNews.initializeBase(this, arguments); // 設定一些私有成員變數 (private member variables)。 var m_this = this; var m_el = p_elSource; var m_module = p_args.module; /**************************************** ** initialize Method (初始化方法) ****************************************/ // 當你的物件開始執行時，這個 initialize 函式會永遠立即被呼叫。 this.initialize = function(p_objScope) { // 總是先呼叫 Base 物件的 initialize 函式。 F6Team.puma.ETTodayNews.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope); // 小工具背景透明化。 if (window.parent != window.self) { document.body.style.backgroundColor = "transparent"; } //顯示新聞資訊 ShowETToday(); }; F6Team.puma.ETTodayNews.registerBaseMethod(this, "initialize"); /**************************************** ** dispose Method (解除方法) ****************************************/ this.dispose = function(p_blnUnload) { // 清除所有的成員變數 m_this = null; m_el = null; m_module = null; // 最後總是呼叫 base 物件的 dispose 函式 F6Team.puma.ETTodayNews.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload); }; F6Team.puma.ETTodayNews.registerBaseMethod(this, "dispose"); /********************************************** ** 想要新增其他函式或方法可以寫到這　(副程式) **********************************************/ //顯示新聞資訊function function ShowETToday() { //插入一個iframe標籤 var iframe = document.createElement("iframe"); iframe.src="http://www.ettoday.com/common/ticker.htm"; iframe.width="300"; iframe.height="50"; iframe.marginwidth="0" iframe.marginheight="0" iframe.scrolling="no"; iframe.frameborder="0"; // 取得 Gadget 的寬度 var mWidth = m_el.offsetWidth; if (mWidth >= 300) {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 我們有足夠的空間顯示大張的圖片　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 iframe.width=mWidth; 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 } else {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // 假如空間不夠，將顯示小張的圖片　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 iframe.width=mWidth; }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //將iframe加入小工具 m_el.appendChild(iframe); //加入一個超連結網址 m_el.innerHTML=m_el.innerHTML+"<a href='http://blog.blueshop.com.tw/hent/' target='_blank'>Design By F6 Team puma</a>"; 　　　 //再更改內容之後,需要重新整理模組大小,這樣才能確定讓它顯示正確的大小 m_module.Resize(); } }; F6Team.puma.ETTodayNews.registerClass("F6Team.puma.ETTodayNews", "Web.Bindings.Base");

結果如下：

Widget/Gadget

如何設計一個可以放在Windows Live Spaces的Gadget部落格小工具,以外掛ETToday新聞速報為例