Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Silverlight 實務應用範例講座<br />董大偉<br />MSDN講座專屬講師<br />Session Code :<br />
本場次大綱- Develop Rich Web Application with Silverlight<br />緣起 - 解決方案總是從問題而來<br />Silverlight 是什麼? 對你重要嗎?<br />Silverlight對W...
What&apos;s Silverlight?- Develop Rich Web Application with Silverlight<br />
解決方案總是從問題而來- Develop Rich Web Application with Silverlight<br />Silverlight 的 5W 1H<br />WHAT   - 什麼是Silverlight?<br />WHE...
WHAT - 什麼是Silverlight?- Develop Rich Web Application with Silverlight<br />微軟的RIA(Rich Interactive Application)開發技術<br />真...
Silverlight 2.0的架構圖<br />
Silverlight 2.0的架構圖<br />
WHEN - 何時需要使用Silverlight? - Develop Rich Web Application with Silverlight<br />想拋開競爭對手時…<br />想讓客戶耳目一新時…<br />需要在網頁/Web AP...
Silverlight 2.0的開發架構<br />DB Server<br />SilverLight 2.0開發架構<br />Web Server(IIS、Others) <br />ASP.NET(Silverlight Web Con...
Mozilla Firefox
 Apple Safari
 Opera
…</li></ul>Browser<br />.Net Code<br />(.xaml.vb/.xaml.cs)<br />XAML<br />(.xaml)<br /><ul><li>VS2008 SP1
Blend 2 SP1
Silverlight SDK</li></ul>Silverlight Player 2.0( 豐富的GUI能力 + .NET CLR支援 )<br /><ul><li>Silverlight 2.0(4.6MB)</li></li></ul...
WHY  - 為何要使用Silverlight?- Develop Rich Web Application with Silverlight<br />徹底解決過去Web應用程式UI很難用的問題<br />一舉突破過去HTML框架的限制, 讓...
WHO - Silverlight適合誰來使用?- Develop Rich Web Application with Silverlight<br />ASP.NET (或其他Web)應用程式開發人員<br />Windows Form應用程...
WHERE - 在哪裡使用Silverlight?- Develop Rich Web Application with Silverlight<br />網頁的一角<br />一整個網頁頁面 或 全螢幕<br />崁入在Windows應用程式...
Demo<br />Silverlight可以做些什麼???<br />
HOW  - 如何開發Silverlight? - Develop Rich Web Application with Silverlight<br />你需要準備的工具<br />VS2008 + SP1<br />Blend 2 + SP1...
HOW  - 如何開發Silverlight? - Develop Rich Web Application with Silverlight<br />建議您學習的技術<br />XAML/ASP.NET/Silverlight<br />一...
建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 SP 1+ Blend  2 SP1<br />
<ul><li>Page.Xaml主場景,內含建立主場景的Xaml指令碼、區域資源、動畫指令、場景外觀…等。
Page.Xaml.vb(或cs)</li></ul>主場景對應的程式碼檔案,用以控制主場景中的Xaml元素、控件的事件處理…等。<br />此為主要的程式碼撰寫位置<br />
<ul><li>App.Xaml全域應用程式宣告,主要用於宣告全域資源…等工作。
App.Xaml.vb(或cs)</li></ul>全域應用程式碼,主要用於處理全域定義、物件宣告、初始化…等功能。<br />
<ul><li>Bin資料夾Silverlight編譯後的檔案
TestPage.html為測試頁面
.dll檔案為編譯後的組件
.xap為壓縮格式檔案,將會被複製到WebSite,內含.dll與AppManifest.xaml</li></li></ul><li><ul><li>ClientBin資料夾Silverlight編譯且壓縮後的.xap檔案,將複製到此資料夾<...
<ul><li>TestPage.aspx</li></ul>.aspx格式的測試頁面,內含Silverlight控件(Web Control)<br />&lt;asp:SilverlightID=&quot;Xaml1&quot; runa...
TestPage.html.html格式的測試頁面,透過&lt;Object&gt;標記承載.xap檔案。<br />&lt;object data=&quot;data:application/x-silverlight,&quot; typ...
建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 + Blend  2<br />
建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 + Blend  2<br />
建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 + Blend  2<br /><ul><li>Visual Studio 2008 SP1</li></ul>開發網站(.aspx or .html...
Silverlight應用程式開發架構- Develop Rich Web Application with Silverlight<br />
Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />OK, 讓我們面對現實…<br />確實在有些應用程式開發中,架構並非優先考量<br />真實世界...
Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />與架構有關的一些字眼<br />Security(安全性)<br />Performance(效能...
Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />與架構有關的一些字眼<br />單機版<br />Client-Server<br />N-tie...
Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Other...
Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Other...
Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Other...
Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Other...
Upcoming SlideShare
Loading in …5
×

董大偉,Silverlight實務應用範例講座

2,819 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

董大偉,Silverlight實務應用範例講座

  1. 1. Silverlight 實務應用範例講座<br />董大偉<br />MSDN講座專屬講師<br />Session Code :<br />
  2. 2. 本場次大綱- Develop Rich Web Application with Silverlight<br />緣起 - 解決方案總是從問題而來<br />Silverlight 是什麼? 對你重要嗎?<br />Silverlight對Web應用程式的影響?<br />Silverlight將對你帶來怎樣的改變?<br />你應該怎麼使用/導入Silverlight開發技術?<br />Silverlight開發架構<br />Silverlight範例講座<br />Silverlight實務技巧<br />
  3. 3. What&apos;s Silverlight?- Develop Rich Web Application with Silverlight<br />
  4. 4. 解決方案總是從問題而來- Develop Rich Web Application with Silverlight<br />Silverlight 的 5W 1H<br />WHAT - 什麼是Silverlight?<br />WHEN - 何時需要使用Silverlight?<br />WHY - 為何要使用Silverlight?<br />WHO - Silverlight適合誰來使用?<br />WHERE - 在哪裡使用Silverlight?<br />HOW - 如何開發Silverlight 應用程式?<br />
  5. 5. WHAT - 什麼是Silverlight?- Develop Rich Web Application with Silverlight<br />微軟的RIA(Rich Interactive Application)開發技術<br />真正適合實現Web應用程式的解決方案<br />4.6M的Run-Time, 在瀏覽器中運行<br />類似FLASH/FLEX崁入網頁, 以ActiveX形式存在<br />開發人員撰寫XAML碼和.cs或.vb指令,將建置好的程式,放到網站上讓使用者下載到用戶端執行…<br />
  6. 6. Silverlight 2.0的架構圖<br />
  7. 7. Silverlight 2.0的架構圖<br />
  8. 8. WHEN - 何時需要使用Silverlight? - Develop Rich Web Application with Silverlight<br />想拋開競爭對手時…<br />想讓客戶耳目一新時…<br />需要在網頁/Web AP上實現不易完成的UI時…<br />想降低Web開發成本時…(Really?)<br />想開發具架構(常用型, 非拋棄式)的Web應用程式時…<br />
  9. 9. Silverlight 2.0的開發架構<br />DB Server<br />SilverLight 2.0開發架構<br />Web Server(IIS、Others) <br />ASP.NET(Silverlight Web Control)PHP、JSP、ASP<br />XML Web Services<br />WCF、AJAX、WS、sockets<br /><ul><li>IE 6.0+
  10. 10. Mozilla Firefox
  11. 11. Apple Safari
  12. 12. Opera
  13. 13. …</li></ul>Browser<br />.Net Code<br />(.xaml.vb/.xaml.cs)<br />XAML<br />(.xaml)<br /><ul><li>VS2008 SP1
  14. 14. Blend 2 SP1
  15. 15. Silverlight SDK</li></ul>Silverlight Player 2.0( 豐富的GUI能力 + .NET CLR支援 )<br /><ul><li>Silverlight 2.0(4.6MB)</li></li></ul><li>WHEN - 何時需要使用Silverlight? - Develop Rich Web Application with Silverlight<br />現階段不適用<br />無法確定用戶瀏覽器狀態的環境<br />Mobile Solution<br />
  16. 16. WHY - 為何要使用Silverlight?- Develop Rich Web Application with Silverlight<br />徹底解決過去Web應用程式UI很難用的問題<br />一舉突破過去HTML框架的限制, 讓Web應用程式開發更加自由<br />跳過莫名其妙的Postback, 與毫無道理的AJAX<br />提供網頁與應用程式的動態效果解決方案<br />為何不用FLASH/Flex?<br />
  17. 17. WHO - Silverlight適合誰來使用?- Develop Rich Web Application with Silverlight<br />ASP.NET (或其他Web)應用程式開發人員<br />Windows Form應用程式開發人員<br />坦白說…<br />
  18. 18. WHERE - 在哪裡使用Silverlight?- Develop Rich Web Application with Silverlight<br />網頁的一角<br />一整個網頁頁面 或 全螢幕<br />崁入在Windows應用程式中<br />崁入在MOSS網站中<br />以控制項型式出現在ASP.NET網頁當中<br />
  19. 19. Demo<br />Silverlight可以做些什麼???<br />
  20. 20. HOW - 如何開發Silverlight? - Develop Rich Web Application with Silverlight<br />你需要準備的工具<br />VS2008 + SP1<br />Blend 2 + SP1<br />DeepZoom Composer <br />Silverlight Tools For VS2008 SP1<br />
  21. 21. HOW - 如何開發Silverlight? - Develop Rich Web Application with Silverlight<br />建議您學習的技術<br />XAML/ASP.NET/Silverlight<br />一般.NET 3.5開發技術<br />Web Service / WCF Service <br />LINQ (Language-Integrated Query)<br />LinqToSql / ADO.NET Entity Framework<br />ADO.NET Data Service<br />
  22. 22. 建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 SP 1+ Blend 2 SP1<br />
  23. 23. <ul><li>Page.Xaml主場景,內含建立主場景的Xaml指令碼、區域資源、動畫指令、場景外觀…等。
  24. 24. Page.Xaml.vb(或cs)</li></ul>主場景對應的程式碼檔案,用以控制主場景中的Xaml元素、控件的事件處理…等。<br />此為主要的程式碼撰寫位置<br />
  25. 25. <ul><li>App.Xaml全域應用程式宣告,主要用於宣告全域資源…等工作。
  26. 26. App.Xaml.vb(或cs)</li></ul>全域應用程式碼,主要用於處理全域定義、物件宣告、初始化…等功能。<br />
  27. 27. <ul><li>Bin資料夾Silverlight編譯後的檔案
  28. 28. TestPage.html為測試頁面
  29. 29. .dll檔案為編譯後的組件
  30. 30. .xap為壓縮格式檔案,將會被複製到WebSite,內含.dll與AppManifest.xaml</li></li></ul><li><ul><li>ClientBin資料夾Silverlight編譯且壓縮後的.xap檔案,將複製到此資料夾</li></ul>再透過.aspx或.html頁面承載.xap檔案<br />請注意:IIS必須設定為支援XAP格式檔案<br />
  31. 31. <ul><li>TestPage.aspx</li></ul>.aspx格式的測試頁面,內含Silverlight控件(Web Control)<br />&lt;asp:SilverlightID=&quot;Xaml1&quot; runat=&quot;server&quot; Source=&quot;~/ClientBin/SilverlightApplication8.xap&quot; MinimumVersion=&quot;2.0.30523&quot; Width=&quot;100%&quot; Height=&quot;100%&quot; /&gt;<br />
  32. 32. TestPage.html.html格式的測試頁面,透過&lt;Object&gt;標記承載.xap檔案。<br />&lt;object data=&quot;data:application/x-silverlight,&quot; type=&quot;application/x-silverlight-2-b2&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;<br />&lt;paramname=&quot;source&quot; value=&quot;ClientBin/SilverlightApplication8.xap&quot;/&gt;<br />&lt;/object&gt;<br />
  33. 33. 建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 + Blend 2<br />
  34. 34. 建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 + Blend 2<br />
  35. 35. 建立Silverlight 2.0應用程式開發工具-使用visual Studio 2008 + Blend 2<br /><ul><li>Visual Studio 2008 SP1</li></ul>開發網站(.aspx or .html)<br />撰寫程式碼(.NET Code)<br />支援intellisense(xaml, html, js, vb,cs)<br /><ul><li>Expression Blend 2SP1</li></ul>開發操作介面(XAML)<br />支援所視即所得的UI設計、支援拖放<br />建立layout、開發動畫、變形...等畫面效果<br />
  36. 36. Silverlight應用程式開發架構- Develop Rich Web Application with Silverlight<br />
  37. 37. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />OK, 讓我們面對現實…<br />確實在有些應用程式開發中,架構並非優先考量<br />真實世界中的專案,總是在時間與成本下被拉扯<br />然而?開發架構對於開發人員是否有好處?<br />
  38. 38. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />與架構有關的一些字眼<br />Security(安全性)<br />Performance(效能)<br />Flexibility(彈性)<br />Scalability(延展性)<br />Dependency (相依性)<br />
  39. 39. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />與架構有關的一些字眼<br />單機版<br />Client-Server<br />N-tier<br />SOA<br />
  40. 40. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Others)<br />Web Server(WCF/WS)<br />AP Server(Buseness Object)<br />
  41. 41. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Others)<br />Web Server(WCF/WS)<br />AP Server(Buseness Object)<br />運行在Internet或Intranet<br />相關的開發技術:HTML、ASP.NET、Silverlight、Web Service/WCF Service Call、REST Call<br />
  42. 42. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Others)<br />Web Server(WCF/WS)<br />AP Server(Buseness Object)<br />運行在Intranet<br />相關的開發技術:Web Service、WCF Service、 ADO.NET Data Service<br />
  43. 43. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />DB Serever<br />(StoreProc)<br />Browser(IE/Others)<br />Web Server(WCF/WS)<br />AP Server(Buseness Object)<br />運行在Intranet<br />相關的開發技術:ORM(LinqToSQL / ADO.NET Entity Framework)、Windows Service、.NET Enterprise Service<br />
  44. 44. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />為何要把應用程式分很多層?<br />降低相依性<br />便於維護與擴充、容易切割、降低開發/異動成本<br />提高延展性<br />有機會在不改變程式的狀況下提高效能<br />提高安全性<br />分層把關<br />
  45. 45. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />一個Silverlight的Web應用程式開發實例<br />用戶端介面展示層<br />Silverlight、ASP.NET<br />服務層<br />Web Service 、WCF Service<br />ADO.NET Data Service<br />AP Server<br />Business Logic / Data Access Class<br />ADO.NET Entity Framework / LinqToSql<br />DB Server(SQL Server)<br />
  46. 46. Silverlight應用程式的開發架構- Develop Rich Web Application with Silverlight<br />OK, 讓我們面對事實…<br />確實有些應用程式在開發中,架構並非優先考量<br />真實世界中的專案,總是在時間與成本下被拉扯<br />開發架構對於開發人員是否有好處?<br />Silverlight與生俱來的開發架構觀念<br />架構對開發人員是有好處的…<br />要問的是…你認為在這個專案中需不需要?<br />如果架構中的每一層,都是由同一個開發人員來撰寫,架構是否還有意義?<br />
  47. 47. Silverlight範例與相關技巧- Develop Rich Web Application with Silverlight<br />
  48. 48. Silverlight應用程式範例講座- Develop Rich Web Application with Silverlight<br />Silverlight到底能做些什麼?<br />這些範例如何實現?<br />範例中的Silverlight相關重要技術<br />Silverlight與ASP.NET如何整合?<br />
  49. 49. Summary<br />透過Silverlight得以開發出兼具架構與UI親和力的Web應用程式<br />利用Silverlight可以輕易完成過去Web應用程式無法達成的功能<br />讓你的產品縮短開發時間、降低開發成本、提高競爭力、便於維護或異動<br />與現有技術相容,和ASP.NET相輔相成<br />具前瞻性、支援.NET 3.x以及未來的.NET重要技術<br />將適合的技術用在適當的場合…<br />
  50. 50. Silverlight相關資源<br />筆者 BLOG http://blog.studyhost.com/<br />筆者 RUN!PC Silverlight專欄<br />書籍:Silverlight 2.0範例權威講座(旗標-董大偉)<br />MSDN網站Silverlight篇:http://msdn.microsoft.com/zh-tw/library/cc838158(VS.95).aspx<br />
  51. 51. - Develop Rich Web Application with Silverlight<br />Q & A<br />
  52. 52. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.<br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />

×