2007 windows live spaces gadgets
Download
1 / 25

Full presentation - PowerPoint PPT Presentation


  • 266 Views
  • Uploaded on

『2007 Windows Live Spaces Gadgets 部落格小工具設計大賽 』 教育訓練. 講師 : 微軟 MVP 紀天佑. Agenda. Gadget 介紹 Gadget 開發所需技術 , 環境需求 官方範例 , 環境設定 剖析 Gadget – Manifest, Script, Style Sheet Gadget 專案範本 在 IDE 環境中除錯 描繪 Gadget 內容及事件處理 將 Gadgets 加入 Space, Live 在 Space 中使用透明背景 寬度偵測 作者模式 or 觀眾模式

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Full presentation' - Melvin


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
2007 windows live spaces gadgets l.jpg

『2007 Windows Live Spaces Gadgets 部落格小工具設計大賽』教育訓練

講師:微軟MVP紀天佑


Agenda l.jpg
Agenda

  • Gadget 介紹

  • Gadget開發所需技術,環境需求

  • 官方範例 ,環境設定

  • 剖析Gadget – Manifest, Script, Style Sheet

  • Gadget 專案範本

  • 在 IDE 環境中除錯

  • 描繪 Gadget 內容及事件處理

  • 將 Gadgets 加入 Space, Live

  • 在Space中使用透明背景

  • 寬度偵測

  • 作者模式 or 觀眾模式

  • Getting and setting preferences

  • 取得外部資料 RSS, WebService

  • 相關資源


Gadget l.jpg
Gadget 簡介

  • Gadget 定義 – 小工具

  • Gadget 種類

    • SideBar

    • SideShow

    • Web Gadget (Live, Space) 網頁小工具


Gadget4 l.jpg
Gadget 開發所需技術

  • Dynamic HTML and CSS http://msdn2.microsoft.com/en-us/library/aa155110.aspx

  • JavaScript http://msdn2.microsoft.com/en-us/library/6974wx4d.aspx

  • Document Object Model (DOM) http://www.w3.org/DOM/ http://www.javascriptkit.com/domref/

  • ECMAScript (JavaScript) object-oriented programming functionality

    http://www.asp.net/AJAX/Documentation/Live/ClientReference/Global/TypeClass/default.aspx


Gadget5 l.jpg
Gadget 開發環境需求

  • Web Server running locally

  • Development IDE write more complex JavaScript code

    http://www.microsoft.com/taiwan/vstudio/express/vwd/


Slide6 l.jpg
官方範例

  • 下載網址:http://microsoftgadgets.com/livesdk/Samples/Samples.zip

  • Hello World

    Barebone Gadget to illustarte the minimal code required writing a Gadget.

  • Notepad

    A simple notepad Gadget that illustrates how to store and retrieve user data inside a Gadget.

  • RSS

    A simple RSS Gadget to illustrate how a RSS feed can be easily pulled and displayed inside a Gadget. You can use this as a template and plug in any RSS feed.

  • Web

    Wrapper Shows how you can build your UI with an HTML file, wrap the content inside a Gadget.


Slide7 l.jpg
環境設定

  • 將 Samples 目錄設為IIS的虛擬目錄

  • 嘗試下列網址以確定Web Server正常http://localhost/Gadgets/hello/HelloWorldGadget.xml

  • 將下列網址入信任的網站http://*.live.com http://*.start.com

  • 自定信任的網站安全層級 啟用 - 存取各網域資料來源

  • 停用Internet Explorer快取

  • 嘗試執行 Hello World Gadgethttp://gadgets.start.com/gadget.aspx?manifestUrl=http://localhost/Gadgets/hello/HelloWorldGadget.xml

範例請參閱背忘稿


Gadget8 l.jpg
剖析 Gadget

  • Gadget Manifest

    是個 XML 檔,定義一些Gadget的屬性, 包括Gadget Script 檔及Gadget Style Sheet的位置.

  • Gadget Script 檔

    是個 JavaScript 檔,是Gadget所有的程式所在.

  • Gadget Style Sheet -

    是個 選擇性的 CSS檔, 協助我們設定UI的 CSS


Gadget manifest l.jpg
Gadget Manifest

  • 定義一些Gadget的靜態屬性.

  • Gadget Script 檔及Gadget Style Sheet的URL位置.

  • 標題列文字及其圖示.

  • Fully Qualified Namespace,是該 Gadget 獨一無二的識別名稱,為了避免與其他Gadget 名稱衝突,建議以下例規則命名.

    CompanyName.TeamName.GadgetName FirstName.LastName.GadgetName

  • 小工具的簡短的描述.


Gadget manifest demo l.jpg
Gadget Manifest Demo

<?xmlversion="1.0"?>

<rssversion="2.0"xmlns:binding="http://www.live.com">

<channel>

<!–設定小工具名稱-->

<title>Hello World</title>

<link>http://www.microsoft.com</link>

<!–小工具的簡短的描述,使用者安裝時會出現 -->

<description>A sample hello world binding.</description>

<!--設定預設的語言-->

<language>zh-tw</language>

<!--設定JavsScript中的物件全名,這名稱需與 Script 檔中的物件名稱一致-->

<binding:type>Microsoft.Live.GadgetSDK.HelloWorldGadget</binding:type>

<item>

<!--設定 Gadget Script 檔案的位置 -->

<link>http://localhost/Gadgets/Hello/HelloWorldGadget.js</link>

</item>

<item>

<!--設定 Gadget CSS 檔案的位置-->

<linkbinding:type="css">http://localhost/Gadgets/Hello/HelloWorldGadget.css</link>

</item>

<icons>

<!--設定Gadget標題列上的圖示檔案, 選擇性項目, 只有在Live有效, 可不設-->

<iconheight="32"width="32">http://localhost/Gadgets/Hello/MyGadget.png</icon>

</icons>

</channel>

</rss>


Gadget script l.jpg
Gadget Script

  • The JavaScript file 用來繫結存放gadget 內容的 DIV 元素.

  • 使用HTML元素來繫結gadget 的內容.

  • 需與定義在XML中的Fully Qualified Namespace一致


Method in gadget script l.jpg
Method in Gadget Script

  • The initialize method

    Gadget載入時自動執行,適合用來接收資料及描繪Gadget的內容

  • The dispose method

    不再需要Gadget時執行, 需把私有變數皆設為null及解開所有的事件繫結

  • Private member variables and methods

    下列語法可宣告類別層級的區域變數, 你可在gadget的任何地方使用它.

    var m_el = p_elSource;


Gadget script demo l.jpg
Gadget Script Demo

registerNamespace("Microsoft.Live.GadgetSDK"); //註冊你的Gadget 的名稱空間

// 定義Gadget 的建構函式(必需與Manifest 檔中的名字一致)

Microsoft.Live.GadgetSDK.HelloWorldGadget = function(p_elSource, p_args, p_namespace){

//做任其他事之前先呼叫initializeBase來初始化基底類別及其成員

Microsoft.Live.GadgetSDK.HelloWorldGadget.initializeBase(this, arguments);

var m_el = p_elSource; //初始化類別層級的變數

//類別實體化後會立即呼叫initialize 方法

this.initialize = function(p_objScope){

Microsoft.Live.GadgetSDK.HelloWorldGadget.getBaseMethod(this, "initialize",

"Web.Bindings.Base").call(this, p_objScope); //呼叫基底類別的initialize 方法

m_el.innerText = “Hello, world!”; //設定 組成 Gadget 的 DIV 中內容

}

Microsoft.Live.GadgetSDK.HelloWorldGadget.registerBaseMethod(this, "initialize");

this.dispose = function(p_blnUnload){

m_el = null;//一定要記得釋放類別層級的變數

Microsoft.Live.GadgetSDK.HelloWorldGadget.getBaseMethod(this, "dispose",

“Web.Bindings.Base”).call(this, p_blnUnload); //最後一定要呼叫基底類別的dispose 方法

}

Microsoft.Live.GadgetSDK.HelloWorldGadget.registerBaseMethod(this, "dispose");

}

//註冊類別及設定其繼承Web.Bindings.Base

Microsoft.Live.GadgetSDK.HelloWorldGadget.registerClass("Microsoft.Live.GadgetSDK.HelloWorldGadget", "Web.Bindings.Base");


Gadget style sheet css l.jpg
Gadget Style Sheet (CSS)

  • Gadget 可有自己的 CSS名稱則依 Namespace 及 Gadget name, 只是以底線替換 “點”

  • 為了避免影響其它的 Gadgets,建議使用全名加分類來定義CSS 例如以下列語法來定義DIV的樣式

    .Microsoft_Live_GadgetSDK_HelloWorldGadget DIV

.Microsoft_Live_GadgetSDK_HelloWorldGadget

{

color: navy;

letter-spacing:2px;

font-weight:bold;

}


Gadget15 l.jpg
Gadget 專案範本

  • 下載專案範本http://microsoftgadgets.com/livesdk/GadgetTemplate/GadgetTemplate.zip.

  • 不要解壓縮zip檔,直接放在 我的文件\Visual Studio 2005\Templates\ProjectTemplates\

  • 在VS 2005 中開新網站,語言選C#,就能看到 Windows Live Gadget 範本


Slide16 l.jpg
IDE 環境中除錯

  • 依範本建立專案後請先修改

    • Namespace

    • Manifest XML

    • Script File

      initialize中加入 m_el.innerText = “Hello, world!”;

    • 啟始URL http://gadgets.start.com/gadget.aspx?manifestUrl=(你的Manifest XML)

  • 啟用IE除錯

  • 設定中段點

  • 以IDE除錯


Gadget17 l.jpg
描繪 Gadget 內容及事件處理

  • 使用 innerHTML

  • 使用 Document Object Model (DOM)

m_el.innerHTML =

"<input type=button value='按我' onclick='alert(\"Hello Gadget!\");'>";

var MyButton = document.createElement("button");

MyButton.value = "按我";

MyButton.attachEvent('onclick', SayHello);

m_el.appendChild(MyButton);


Gadget iframe flash l.jpg
描繪 Gadget 內容 iframe & Flash

  • 使用Iframe描繪內容

  • 使用Flash描繪內容

m_iframe = document.createElement("iframe");

m_iframe.frameBorder = "0";

m_iframe.src = "http://www.google.com.tw";

m_iframe.width="95%";

m_iframe.height="300px";

p_elSource.appendChild(m_iframe);

m_el.innerHTML ='<embed src="http://www.youtube.com/v/NA6KrKZrFv0&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>';


Gadgets space live l.jpg
Gadgets 加入 Space, Live

  • 將Gadget新增到Live

    • 新增專區項目\進階選項\使用 URL 新增小工具

  • 將Gadget新增到Space (開發人員模式)

    • http://spaces.live.com/api.aspx?wx_action=addGadget&wxp_url=(你的Manifest XML)

  • http://gallery.live.com/上傳


Space l.jpg
Space 中使用透明背景

if (window.parent != window.self)

{

document.body.style.backgroundColor = "transparent";

}


Slide21 l.jpg
寬度偵測

if (m_el.offsetWidth < 500)

m_el.innerHTML =

"<img src=http://farm1.static.flickr.com/95/268449126_79644afb71_m_d.jpg>";

else

m_el.innerHTML =

"<img src=http://farm1.static.flickr.com/95/268449126_79644afb71_d.jpg>";

m_module.resize();


Slide22 l.jpg
作者模式 or 觀眾模式

  • Web.Gadget.Mode.author

  • Web.Gadget.Mode.viewer

  • Getting and setting preferences儲存參數, 使用明碼傳遞, 不能放有安全議題的資料

範例請參閱背忘稿


Slide23 l.jpg
取得外部資料

  • Web.Network.createRequest

  • Yahoo 新聞範例

  • 天氣 Web Service 範例

範例請參閱背忘稿


Slide24 l.jpg
相關資源

  • Web Gadget Developer's Guide

  • API Reference

  • 小工具設計活動網址

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

    第一次活動到11月23日截止


Thank you l.jpg

Thank You

會後再請學員將問卷繳回,謝謝您


ad