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

1

Silverlight 實務應用範例講座

董大偉MSDN 講座專屬講師

Session Code :

2

本場次大綱 - Develop Rich Web Application with Silverlight

緣起 - 解決方案總是從問題而來Silverlight 是什麼 ? 對你重要嗎 ?Silverlight 對 Web 應用程式的影響 ?Silverlight 將對你帶來怎樣的改變 ?你應該怎麼使用 / 導入 Silverlight 開發技術 ?Silverlight 開發架構Silverlight 範例講座Silverlight 實務技巧

3

What's Silverlight? - Develop Rich Web Application with Silverlight

4

解決方案總是從問題而來 - Develop Rich Web Application with Silverlight

Silverlight 的 5W 1H

WHAT - 什麼是 Silverlight?WHEN - 何時需要使用 Silverlight?WHY - 為何要使用 Silverlight?WHO - Silverlight 適合誰來使用 ?WHERE - 在哪裡使用 Silverlight?HOW - 如何開發 Silverlight 應用程式 ?

5

WHAT - 什麼是 Silverlight? - Develop Rich Web Application with Silverlight

微軟的 RIA(Rich Interactive Application) 開發技術真正適合實現 Web 應用程式的解決方案4.6M 的 Run-Time, 在瀏覽器中運行類似 FLASH/FLEX 崁入網頁 , 以 ActiveX形式存在開發人員撰寫 XAML 碼和 .cs 或 .vb 指令，將建置好的程式，放到網站上讓使用者下載到用戶端執行…

6

Silverlight 2.0 的架構圖

7

Silverlight 2.0 的架構圖

8

WHEN - 何時需要使用Silverlight? - Develop Rich Web Application with Silverlight

想拋開競爭對手時…

想讓客戶耳目一新時…

需要在網頁 /Web AP 上實現不易完成的 UI 時…

想降低 Web 開發成本時… (Really?)

想開發具架構 ( 常用型 , 非拋棄式 ) 的 Web 應用程式時…

9

Silverlight 2.0 的開發架構

Web Server(IIS 、 Others)

Browser

Silverlight Player 2.0( 豐富的 GUI 能力 + .NET CLR 支援 )

.Net Code(.xaml.vb/.xaml.cs)

ASP.NET(Silverlight Web Control)

PHP 、 JSP 、 ASP

XAML(.xaml)

XML Web Services

SilverLight 2.0 開發架構 DB Server

WCF 、 AJAX 、 WS 、 sockets

•VS2008 SP1•Blend 2 SP1•Silverlight SDK

•Silverlight 2.0(4.6MB)

•IE 6.0+•Mozilla Firefox• Apple Safari• Opera•…

10

WHEN - 何時需要使用Silverlight? - Develop Rich Web Application with Silverlight

現階段不適用無法確定用戶瀏覽器狀態的環境

Mobile Solution

11

WHY - 為何要使用 Silverlight? - Develop Rich Web Application with Silverlight

徹底解決過去 Web 應用程式 UI 很難用的問題

一舉突破過去 HTML 框架的限制 , 讓 Web 應用程式開發更加自由

跳過莫名其妙的 Postback, 與毫無道理的 AJAX

提供網頁與應用程式的動態效果解決方案

為何不用 FLASH/Flex?

12

WHO - Silverlight 適合誰來使用 ? - Develop Rich Web Application with Silverlight

ASP.NET ( 或其他 Web) 應用程式開發人員

Windows Form 應用程式開發人員

坦白說…

13

WHERE - 在哪裡使用Silverlight? - Develop Rich Web Application with Silverlight

網頁的一角

一整個網頁頁面或全螢幕

崁入在 Windows 應用程式中

崁入在 MOSS 網站中

以控制項型式出現在 ASP.NET 網頁當中

14

DemoSilverlight 可以做些什麼 ???

15

HOW - 如何開發 Silverlight? - Develop Rich Web Application with Silverlight

你需要準備的工具VS2008 + SP1

Blend 2 + SP1

DeepZoom Composer

Silverlight Tools For VS2008 SP1

16

HOW - 如何開發 Silverlight? - Develop Rich Web Application with Silverlight

建議您學習的技術XAML/ASP.NET/Silverlight一般 .NET 3.5 開發技術Web Service / WCF Service LINQ (Language-Integrated Query)LinqToSql / ADO.NET Entity FrameworkADO.NET Data Service

17

建立 Silverlight 2.0 應用程式開發工具 - 使用 visual Studio 2008 SP 1+ Blend 2 SP1

18

•Page.Xaml主場景，內含建立主場景的Xaml 指令碼、區域資源、動畫指令、場景外觀…等。

•Page.Xaml.vb(或 cs)主場景對應的程式碼檔案，用以控制主場景中的 Xaml元素、控件的事件處理…等。

此為主要的程式碼撰寫位置

19

•App.Xaml全域應用程式宣告，主要用於宣告全域資源…等工作。

•App.Xaml.vb(或 cs)全域應用程式碼，主要用於處理全域定義、物件宣告、初始化…等功能。

20

•Bin資料夾Silverlight 編譯後的檔案

TestPage.html 為測試頁面

.dll 檔案為編譯後的組件

.xap 為壓縮格式檔案，將會被複製到 WebSite ，內含 .dll 與 AppManifest.xaml

21

•ClientBin資料夾Silverlight 編譯且壓縮後的 .xap 檔案，將複製到此資料夾

再透過 .aspx 或 .html 頁面承載 .xap 檔案

請注意： IIS必須設定為支援XAP 格式檔案

22

•TestPage.aspx.aspx 格式的測試頁面，內含 Silverlight 控件 (Web Control)

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication8.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

23

TestPage.html.html 格式的測試頁面，透過 <Object>標記承載 .xap 檔案。

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%"><param name="source" value="ClientBin/SilverlightApplication8.xap"/></object>

24

建立 Silverlight 2.0 應用程式開發工具 - 使用 visual Studio 2008 + Blend 2

25

建立 Silverlight 2.0 應用程式開發工具 - 使用 visual Studio 2008 + Blend 2

26

建立 Silverlight 2.0 應用程式開發工具 - 使用 visual Studio 2008 + Blend 2 Visual Studio 2008 SP1

開發網站 (.aspx or .html)撰寫程式碼 (.NET Code)支援 intellisense(xaml, html, js, vb,cs)

Expression Blend 2 SP1開發操作介面 (XAML)支援所視即所得的 UI設計、支援拖放建立 layout 、開發動畫、變形 ... 等畫面效果

27

Silverlight 應用程式開發架構 - Develop Rich Web Application with Silverlight

28

Silverlight 應用程式的開發架構 - Develop Rich Web Application with Silverlight

OK, 讓我們面對現實…

確實在有些應用程式開發中，架構並非優先考量

真實世界中的專案，總是在時間與成本下被拉扯

然而 ? 開發架構對於開發人員是否有好處 ?

29


與架構有關的一些字眼Security(安全性 )

Performance( 效能 )

Flexibility(彈性 )

Scalability(延展性 )

Dependency (相依性 )

30


與架構有關的一些字眼單機版

Client-Server

N-tier

SOA

31


Browser(IE/Others)

Web Server(WCF/WS)

AP Server(Buseness

Object)

DB Serever(StoreProc

)

32


Browser(IE/Others)

Web Server(WCF/WS)

AP Server(Buseness

Object)


)

運行在 Internet 或 Intranet

相關的開發技術： HTML 、 ASP.NET 、 Silverlight 、Web Service/WCF Service Call 、 REST Call

33


Browser(IE/Others)

Web Server(WCF/WS)

AP Server(Buseness

Object)


)

運行在 Intranet

相關的開發技術：Web Service 、 WCF

Service 、 ADO.NET Data Service

34


Browser(IE/Others)

Web Server(WCF/WS)

AP Server(Buseness

Object)


)

運行在 Intranet

相關的開發技術： ORM(LinqToSQL /

ADO.NET Entity Framework) 、 Windows

Service 、 .NET Enterprise Service

35


為何要把應用程式分很多層 ?

降低相依性便於維護與擴充、容易切割、降低開發 /異動成本

提高延展性有機會在不改變程式的狀況下提高效能

提高安全性分層把關

36


一個 Silverlight 的 Web 應用程式開發實例用戶端介面展示層

Silverlight 、 ASP.NET

服務層Web Service 、 WCF ServiceADO.NET Data Service

AP ServerBusiness Logic / Data Access ClassADO.NET Entity Framework / LinqToSql

DB Server(SQL Server)

37


OK, 讓我們面對事實…確實有些應用程式在開發中，架構並非優先考量真實世界中的專案，總是在時間與成本下被拉扯開發架構對於開發人員是否有好處 ?Silverlight 與生俱來的開發架構觀念架構對開發人員是有好處的…要問的是…你認為在這個專案中需不需要 ?如果架構中的每一層，都是由同一個開發人員來撰寫，架構是否還有意義 ?

38

Silverlight 範例與相關技巧 - Develop Rich Web Application with Silverlight

39

Silverlight 應用程式範例講座 - Develop Rich Web Application with Silverlight

Silverlight 到底能做些什麼 ?

這些範例如何實現 ?

範例中的 Silverlight相關重要技術

Silverlight 與 ASP.NET 如何整合 ?

40

Summary透過 Silverlight得以開發出兼具架構與 UI親和力的 Web 應用程式利用 Silverlight 可以輕易完成過去 Web 應用程式無法達成的功能讓你的產品縮短開發時間、降低開發成本、提高競爭力、便於維護或異動與現有技術相容，和 ASP.NET相輔相成具前瞻性、支援 .NET 3.x 以及未來的 .NET 重要技術將適合的技術用在適當的場合…

41

Silverlight相關資源筆者 BLOG http://blog.studyhost.com/

筆者 RUN!PC Silverlight 專欄

書籍： Silverlight 2.0 範例權威講座 (旗標 - 董大偉 )

MSDN 網站 Silverlight篇：http://msdn.microsoft.com/zh-tw/library/cc838158(VS.95).aspx

42

Q & A

- Develop Rich Web Application with Silverlight

43

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

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

Technology

silverlight

silverlight 2

xaml