http://nibblestutorials.net/


Silverlight 是一種新的 Web 呈現(xiàn)技術(shù)，能在各種平臺(tái)上運(yùn)行。借助該技術(shù)，您將擁有內(nèi)容豐富、視覺效果絢麗的交互式體驗(yàn)，而且，無論是在瀏覽器內(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)記語言）遵循 WPF (Windows Presentation Foundation)，它是 Silverlight 呈現(xiàn)功能的基礎(chǔ)。

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

Web 開發(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ā)展的新階段，這些文檔在收到訪問請求時(shí)即會(huì)生成，文檔中包含特定于時(shí)間或用戶的信息。CGI 之類的技術(shù)成為了這一階段的實(shí)現(xiàn)基礎(chǔ)。隨著時(shí)間的推移，在 Web 上生成文檔的功能變得極為重要，技術(shù)上的發(fā)展也歷經(jīng) CGI、Java、ASP，到達(dá) ASP.NET 階段。

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

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

XMLHttpRequest 對象（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)頁的一小部分，并不需要重新加載所有內(nèi)容。基于 AJAX 構(gòu)建的創(chuàng)新型解決方案（如 Windows Live Local 映射）使 Web 應(yīng)用程序更進(jìn)一步，已經(jīng)能夠提供與客戶端類似的用戶體驗(yàn)。

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

由于 XAML 屬于 XML，因此它是基于文本的，能夠?yàn)檫@些豐富的內(nèi)容提供與防火墻兼容的、易于檢查的說明。盡管其他技術(shù)（如 Java 小程序、ActiveX 和 Flash）可用來部署比 DHTML/CSS/JavaScript 更豐富的內(nèi)容，但它們都會(huì)向?yàn)g覽器發(fā)送二進(jìn)制內(nèi)容。這就導(dǎo)致難以進(jìn)行安全性審核，更不用說還有更新上的困難，因?yàn)檫M(jìn)行任何更改后都必須重新安裝整個(gè)應(yīng)用程序，而這并不是友好的用戶體驗(yàn)，并且可能導(dǎo)致頁面停滯。如果使用 Silverlight，則需要更改豐富的內(nèi)容時(shí)，服務(wù)器端會(huì)生成新的 XAML 文件。用戶下次瀏覽到該頁面時(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 開發(fā)人員公開 XAML 頁面的底層框架，以便實(shí)現(xiàn)頁面級的內(nèi)容交互，這樣，開發(fā)人員就可以進(jìn)行自己的工作，例如編寫事件處理程序或使用 JavaScript 代碼來處理 XAML 頁面內(nèi)容。

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

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

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

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

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

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

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

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

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

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

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

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

現(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>

接下來，為文本塊在 XAML 中添加事件處理程序聲明。為此，可以使用 MouseLeftButtonDown 屬性聲明單擊鼠標(biāo)的處理程序。在 txtPlay 文本塊中，添加對 DoPlay 的事件處理程序；在 txtStop 文本塊中，添加對 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è)事件，您可通過 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)或停止媒體播放。

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

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

了解 Silverlight 調(diào)用

HTML 頁面會(huì)調(diào)用 Default.html.js 源代碼頁中的 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 的頁面上的命名 <script> 標(biāo)記。

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

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

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

結(jié)束語

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

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