Silverlight 入門

本頁(yè)內(nèi)容

	什么是 Silverlight？
	Web 開(kāi)發(fā)的演變：轉(zhuǎn)向 Web.Next
	構(gòu)建一個(gè)簡(jiǎn)單的 Silverlight 應(yīng)用程序
	創(chuàng)建供視頻播放器使用的 UI
	了解 Silverlight 調(diào)用
	結(jié)束語(yǔ)

什么是 Silverlight？

Silverlight 是一種新的 Web 呈現(xiàn)技術(shù)，能在各種平臺(tái)上運(yùn)行。借助該技術(shù)，您將擁有內(nèi)容豐富、視覺(jué)效果絢麗的交互式體驗(yàn)，而且，無(wú)論是在瀏覽器內(nèi)、在多個(gè)設(shè)備上還是在桌面操作系統(tǒng)（如 Apple Macintosh）中，您都可以獲得這種體驗(yàn)。Microsoft .NET Framework 3.0（Windows 編程基礎(chǔ)結(jié)構(gòu)）中的呈現(xiàn)技術(shù) XAML（可擴(kuò)展應(yīng)用程序標(biāo)記語(yǔ)言）遵循 WPF (Windows Presentation Foundation)，它是 Silverlight 呈現(xiàn)功能的基礎(chǔ)。

本白皮書(shū)將逐步引導(dǎo)您了解 Silverlight 的基本情況，以及如何使用 Microsoft 的眾多工具（包括 Microsoft Expression Blend、Microsoft Visual Studio 2005 和 XAML）來(lái)構(gòu)建內(nèi)容豐富的圖形站點(diǎn)。首先，讓我們了解一下 Silverlight 發(fā)展歷程的相關(guān)背景信息，以及它在開(kāi)發(fā)領(lǐng)域所處的位置。

返回頁(yè)首

Web 開(kāi)發(fā)的演變：轉(zhuǎn)向 Web.Next

CERN 的 Tim Berners-Lee 發(fā)明現(xiàn)代 Web 時(shí)，初衷是將其作為允許在基于網(wǎng)絡(luò)的系統(tǒng)上存儲(chǔ)和鏈接靜態(tài)文檔的系統(tǒng)。之后的數(shù)年間，隨著創(chuàng)新的發(fā)展和成熟，“活動(dòng)”文檔自然而然地成為了現(xiàn)代 Web 發(fā)展的新階段，這些文檔在收到訪問(wèn)請(qǐng)求時(shí)即會(huì)生成，文檔中包含特定于時(shí)間或用戶的信息。CGI 之類的技術(shù)成為了這一階段的實(shí)現(xiàn)基礎(chǔ)。隨著時(shí)間的推移，在 Web 上生成文檔的功能變得極為重要，技術(shù)上的發(fā)展也歷經(jīng) CGI、Java、ASP，到達(dá) ASP.NET 階段。

在使開(kāi)發(fā)人員擁有采用服務(wù)器開(kāi)發(fā)模式并使用 Visual Studio 系列產(chǎn)品中的同類最佳工具快速開(kāi)發(fā)高質(zhì)量 Web 應(yīng)用程序的能力這一方面，ASP.NET 樹(shù)立了一個(gè)里程碑。

事實(shí)證明，用戶體驗(yàn)是 Web 應(yīng)用程序中的一大障礙，在這方面，技術(shù)上的限制使 Web 應(yīng)用程序無(wú)法提供與使用本地?cái)?shù)據(jù)的客戶端應(yīng)用程序同樣豐富的用戶體驗(yàn)。

XMLHttpRequest 對(duì)象（2000 年由 Microsoft 作為 Internet Explorer 5 的一部分發(fā)布）成為了異步 JavaScript 和 XML (AJAX) 技術(shù)的基礎(chǔ)，該技術(shù)使 Web 應(yīng)用程序能夠更加動(dòng)態(tài)地響應(yīng)用戶輸入，因?yàn)椴捎迷摷夹g(shù)時(shí)只會(huì)刷新網(wǎng)頁(yè)的一小部分，并不需要重新加載所有內(nèi)容。基于 AJAX 構(gòu)建的創(chuàng)新型解決方案（如 Windows Live Local 映射）使 Web 應(yīng)用程序更進(jìn)一步，已經(jīng)能夠提供與客戶端類似的用戶體驗(yàn)。

Silverlight 是應(yīng)用程序開(kāi)發(fā)人員和設(shè)計(jì)人員可以向其客戶呈現(xiàn)潛在用戶體驗(yàn)豐富性的下一個(gè)發(fā)展階段。為了實(shí)現(xiàn)此目的，它允許設(shè)計(jì)人員展現(xiàn)其創(chuàng)造力并以能夠直接對(duì) Web 產(chǎn)生影響的格式保存其工作。過(guò)去，設(shè)計(jì)人員會(huì)使用提供了豐富輸出功能的工具來(lái)設(shè)計(jì)網(wǎng)站和用戶體驗(yàn)，但在這些設(shè)計(jì)的實(shí)現(xiàn)能力方面，開(kāi)發(fā)人員會(huì)受到 Web 平臺(tái)的限制。在 Silverlight 模型中，設(shè)計(jì)人員可以構(gòu)建所需的用戶體驗(yàn)，并將其表示為 XAML。隨后，開(kāi)發(fā)人員可以使用 Silverlight 運(yùn)行時(shí)直接將該 XAML 合并到網(wǎng)頁(yè)中。因此，兩者的合作可以比以往任何時(shí)候都更加緊密，從而提供豐富的客戶端用戶體驗(yàn)。

由于 XAML 屬于 XML，因此它是基于文本的，能夠?yàn)檫@些豐富的內(nèi)容提供與防火墻兼容的、易于檢查的說(shuō)明。盡管其他技術(shù)（如 Java 小程序、ActiveX 和 Flash）可用來(lái)部署比 DHTML/CSS/JavaScript 更豐富的內(nèi)容，但它們都會(huì)向?yàn)g覽器發(fā)送二進(jìn)制內(nèi)容。這就導(dǎo)致難以進(jìn)行安全性審核，更不用說(shuō)還有更新上的困難，因?yàn)檫M(jìn)行任何更改后都必須重新安裝整個(gè)應(yīng)用程序，而這并不是友好的用戶體驗(yàn)，并且可能導(dǎo)致頁(yè)面停滯。如果使用 Silverlight，則需要更改豐富的內(nèi)容時(shí)，服務(wù)器端會(huì)生成新的 XAML 文件。用戶下次瀏覽到該頁(yè)面時(shí)，會(huì)下載該 XAML 并更新體驗(yàn)，而不需要進(jìn)行任何重新安裝。

Silverlight 的核心是瀏覽器增強(qiáng)模塊，其作用是呈現(xiàn) XAML 并在瀏覽器界面上繪制生成的圖形。它的下載體積較?。ú坏?2 MB），可以在用戶點(diǎn)擊包含 Silverlight 內(nèi)容的站點(diǎn)時(shí)進(jìn)行安裝。該模塊向 JavaScript 開(kāi)發(fā)人員公開(kāi) XAML 頁(yè)面的底層框架，以便實(shí)現(xiàn)頁(yè)面級(jí)的內(nèi)容交互，這樣，開(kāi)發(fā)人員就可以進(jìn)行自己的工作，例如編寫事件處理程序或使用 JavaScript 代碼來(lái)處理 XAML 頁(yè)面內(nèi)容。

不過(guò)，理論方面的探討已經(jīng)夠多的了！我們還是通過(guò)實(shí)踐來(lái)看一看我們的第一個(gè) Silverlight 項(xiàng)目。

返回頁(yè)首

構(gòu)建一個(gè)簡(jiǎn)單的 Silverlight 應(yīng)用程序

我們先來(lái)看一看 Microsoft Expression Blend，使用該工具創(chuàng)建一個(gè) XAML 格式的非常簡(jiǎn)單的應(yīng)用程序，以供 Silverlight 使用。要在 Blend 中創(chuàng)建 Silverlight 應(yīng)用程序，請(qǐng)選擇 File（文件）->New project（新建項(xiàng)目），此時(shí)會(huì)打開(kāi)“New Project”（新建項(xiàng)目）對(duì)話框。請(qǐng)參見(jiàn)圖 1。

圖 1. 使用 Expression Blend 創(chuàng)建新的 Silverlight 項(xiàng)目

選擇 OK（確定），即會(huì)創(chuàng)建一個(gè)新項(xiàng)目。該項(xiàng)目將包含一個(gè)默認(rèn) HTML 頁(yè)面、該頁(yè)面的一些 JavaScript 源代碼、一篇 XAML 文檔和該 XAML 文檔的 JavaScript 源代碼及 Silverlight.js。

Silverlight.js 包含用于下載和實(shí)例化 Silverlight 控件的代碼。它作為 Silverlight SDK 的一部分提供給用戶。

Default.html 是標(biāo)準(zhǔn)的 HTML 網(wǎng)頁(yè)。該網(wǎng)頁(yè)包含三個(gè) JavaScript 腳本引用，分別指向 Silverlight.js、Default.html.js（其中包含特定于應(yīng)用程序的用于安裝 Silverlight 的代碼）和 Scene.xaml.js（其中包含在 XAML 中定義的應(yīng)用程序事件的事件處理程序）。

它被設(shè)計(jì)為一個(gè)獨(dú)立的頁(yè)面 (default.html)，與實(shí)例化邏輯 (default.html.js)、設(shè)計(jì) (Scene.xaml) 和事件代碼 (Scene.xaml.js) 分開(kāi)。不過(guò)，理論方面的探討已經(jīng)夠多了，現(xiàn)在我們開(kāi)始開(kāi)發(fā)一個(gè)簡(jiǎn)單的應(yīng)用程序。

返回頁(yè)首

創(chuàng)建供視頻播放器使用的 UI

在項(xiàng)目中添加視頻文件。為此，請(qǐng)右鍵單擊屏幕右上方 Project Files（項(xiàng)目文件）窗口中的項(xiàng)目文件，然后選擇 Add Existing Item...（添加現(xiàn)有項(xiàng)目）。

選擇某個(gè) WMV 文件并將其添加到項(xiàng)目時(shí)，項(xiàng)目瀏覽器中將顯示該文件，同時(shí)在視圖中添加了一個(gè)媒體元素。

圖 2. 在 XAML 視圖中添加媒體元素

現(xiàn)在即可運(yùn)行您的項(xiàng)目，瀏覽器將啟動(dòng)并播放您的視頻！

通過(guò)編輯 XAML 可以停止自動(dòng)播放視頻。您會(huì)看到 XAML 設(shè)計(jì)器右側(cè)有兩個(gè)選項(xiàng)卡：Design（設(shè)計(jì)）和 XAML。選擇“XAML”選項(xiàng)卡，會(huì)打開(kāi) XAML 編輯器，如圖 3 中所示。使用該編輯器為媒體元素編輯 XAML 文本，添加屬性 AutoPlay=False。

圖 3. 在 XAML 編輯器中編輯 XAML

現(xiàn)在，如果您運(yùn)行該應(yīng)用程序，會(huì)看到 Silverlight 內(nèi)容雖然呈現(xiàn)了視頻的第一幀，但并播放。

在視頻播放器中添加控件

為該應(yīng)用程序添加兩個(gè)文本塊，文本內(nèi)容分別為 Play 和 Stop，名稱分別為 txtPlay 和 txtStop。完成后，XAML 應(yīng)如下所示：

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
>
<MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>
<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>
<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/>
</Canvas>

接下來(lái)，為文本塊在 XAML 中添加事件處理程序聲明。為此，可以使用 MouseLeftButtonDown 屬性聲明單擊鼠標(biāo)的處理程序。在 txtPlay 文本塊中，添加對(duì) DoPlay 的事件處理程序；在 txtStop 文本塊中，添加對(duì) DoStop 的事件處理程序。完成后，XAML 應(yīng)如下所示：

<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136"
Canvas.Top="336" Text="Play" TextWrapping="Wrap"
MouseLeftButtonDown="javascript:DoPlay"/>
<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136"
Canvas.Top="368" Text="Stop" TextWrapping="Wrap"
MouseLeftButtonDown="javascript:DoStop"/>

現(xiàn)在，如果用戶單擊其中一個(gè)文本塊，將觸發(fā)一個(gè)事件，您可通過(guò) JavaScript 功能捕獲并處理該事件。

在 JavaScript 中處理事件

模板創(chuàng)建的 Scene.xaml.js 可用于在 JavaScript 中捕獲并處理用戶事件。由于您在 XAML 內(nèi)指定了 DoPlay 和 DoStop 事件處理程序，因此應(yīng)在此處付諸實(shí)施。相應(yīng)的代碼如下所示：

function DoPlay(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Movie_wmv");
theMedia.Play();
}
function DoStop(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Movie_wmv");
theMedia.Stop();
}

在本例中，將 Silverlight 控件稱為 SilverlightControl，將引用該控件的 JavaScript 變量稱為 theHost。稍后查找媒體元素（在本例中稱為 Movie_wmv）時(shí)，將用到上述名稱。在項(xiàng)目中添加電影時(shí)，為您創(chuàng)建了此媒體元素，該元素的名稱是根據(jù)電影名稱命名的。因此，如果電影的名稱是 Movie.wmv，則此媒體元素就稱為 Movie_wmv。如果使用其他電影，則控件也會(huì)相應(yīng)地采用其他名稱。

該媒體元素有 Play 和 Stop 兩個(gè)方法，分別用于啟動(dòng)或停止媒體播放。

由于存在對(duì)該媒體元素的引用，因而可以調(diào)用上述方法，電影將隨之停止或啟動(dòng)，如圖 4 中所示。

圖 4. 運(yùn)行應(yīng)用程序

至此，您已構(gòu)建了自己的第一個(gè) Silverlight 應(yīng)用程序！有關(guān) Silverlight 的更多資源，請(qǐng)查看新的 Silverlight 開(kāi)發(fā)人員中心和 http://www./。

返回頁(yè)首

了解 Silverlight 調(diào)用

HTML 頁(yè)面會(huì)調(diào)用 Default.html.js 源代碼頁(yè)中的 createSilverlight()。

Sys.Silverlight.createObjectEx({
source: "Scene.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "0.9"
},
events: {
onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
}
});

該調(diào)用將用到許多屬性，其中包括那些用于定義要呈現(xiàn)的 XAML、Silverlight 控件外觀以及 onLoad 和 onError 事件處理程序的屬性。

source:屬性用于定義希望 Silverlight 控件呈現(xiàn)的 XAML。該屬性可以是外部文件（如本例中所示），也可以是包含 XAML 的頁(yè)面上的命名 <script> 標(biāo)記。

在頁(yè)面上添加 Silverlight 控件時(shí)，應(yīng)將該控件添加到命名 <DIV> 內(nèi)。應(yīng)將 parentElement:屬性作為該 <DIV> 的名稱。

控件的 ID 由 id:屬性指定。

控件的物理屬性（如高度、寬度和版本）是由加載到 properties:屬性中的數(shù)組設(shè)定的。要查看全部屬性，請(qǐng)參閱 Silverlight SDK 文檔。

返回頁(yè)首

結(jié)束語(yǔ)

本白皮書(shū)中高度概述了 Microsoft Silverlight，并介紹了 Silverlight 對(duì)下一代 Web 應(yīng)用程序開(kāi)發(fā)堆棧的適用情況。您已經(jīng)看到，XAML 就像一個(gè)凝聚體，將設(shè)計(jì)人員的規(guī)范、開(kāi)發(fā)人員的工具和面向用戶的交付三者結(jié)合在了一起。您大體了解了 Expression Blend，并學(xué)習(xí)了如何用它來(lái)為網(wǎng)頁(yè)定義 UI，以及如何使用 JavaScript 對(duì)它們進(jìn)行編程。

您通過(guò)本文所了解的內(nèi)容只觸及到 Silverlight 功能的皮毛。這項(xiàng)技術(shù)中蘊(yùn)含著諸多功能，您現(xiàn)在就可以使用這項(xiàng)技術(shù)開(kāi)始構(gòu)建下一個(gè) Web。這會(huì)是一個(gè)有趣的旅程，快來(lái)體驗(yàn)吧！