1 / 25

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

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

Melvin
Download Presentation

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

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 『2007 Windows Live Spaces Gadgets 部落格小工具設計大賽』教育訓練 講師:微軟MVP紀天佑

  2. Agenda • Gadget 介紹 • Gadget開發所需技術,環境需求 • 官方範例 ,環境設定 • 剖析Gadget – Manifest, Script, Style Sheet • Gadget 專案範本 • 在 IDE 環境中除錯 • 描繪 Gadget 內容及事件處理 • 將 Gadgets 加入 Space, Live • 在Space中使用透明背景 • 寬度偵測 • 作者模式 or 觀眾模式 • Getting and setting preferences • 取得外部資料 RSS, WebService • 相關資源

  3. Gadget 簡介 • Gadget 定義 – 小工具 • Gadget 種類 • SideBar • SideShow • Web Gadget (Live, Space) 網頁小工具

  4. 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

  5. Gadget 開發環境需求 • Web Server running locally • Development IDE write more complex JavaScript code http://www.microsoft.com/taiwan/vstudio/express/vwd/

  6. 官方範例 • 下載網址: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.

  7. 環境設定 • 將 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 範例請參閱背忘稿

  8. 剖析 Gadget • Gadget Manifest 是個 XML 檔,定義一些Gadget的屬性, 包括Gadget Script 檔及Gadget Style Sheet的位置. • Gadget Script 檔 是個 JavaScript 檔,是Gadget所有的程式所在. • Gadget Style Sheet - 是個 選擇性的 CSS檔, 協助我們設定UI的 CSS

  9. Gadget Manifest • 定義一些Gadget的靜態屬性. • Gadget Script 檔及Gadget Style Sheet的URL位置. • 標題列文字及其圖示. • Fully Qualified Namespace,是該 Gadget 獨一無二的識別名稱,為了避免與其他Gadget 名稱衝突,建議以下例規則命名. CompanyName.TeamName.GadgetName FirstName.LastName.GadgetName • 小工具的簡短的描述.

  10. 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>

  11. Gadget Script • The JavaScript file 用來繫結存放gadget 內容的 DIV 元素. • 使用HTML元素來繫結gadget 的內容. • 需與定義在XML中的Fully Qualified Namespace一致

  12. 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;

  13. 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");

  14. 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; }

  15. Gadget 專案範本 • 下載專案範本http://microsoftgadgets.com/livesdk/GadgetTemplate/GadgetTemplate.zip. • 不要解壓縮zip檔,直接放在 我的文件\Visual Studio 2005\Templates\ProjectTemplates\ • 在VS 2005 中開新網站,語言選C#,就能看到 Windows Live Gadget 範本

  16. 在 IDE 環境中除錯 • 依範本建立專案後請先修改 • Namespace • Manifest XML • Script File initialize中加入 m_el.innerText = “Hello, world!”; • 啟始URL http://gadgets.start.com/gadget.aspx?manifestUrl=(你的Manifest XML) • 啟用IE除錯 • 設定中段點 • 以IDE除錯

  17. 描繪 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);

  18. 描繪 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>';

  19. 將 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/上傳

  20. 在 Space 中使用透明背景 if (window.parent != window.self) { document.body.style.backgroundColor = "transparent"; }

  21. 寬度偵測 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();

  22. 作者模式 or 觀眾模式 • Web.Gadget.Mode.author • Web.Gadget.Mode.viewer • Getting and setting preferences儲存參數, 使用明碼傳遞, 不能放有安全議題的資料 範例請參閱背忘稿

  23. 取得外部資料 • Web.Network.createRequest • Yahoo 新聞範例 • 天氣 Web Service 範例 範例請參閱背忘稿

  24. 相關資源 • Web Gadget Developer's Guide • API Reference • 小工具設計活動網址 http://gadget.blueshop.com.tw/2007contest/microsoft/spaces/gadgets/ 第一次活動到11月23日截止

  25. Thank You 會後再請學員將問卷繳回,謝謝您

More Related