發(fā)布日期： 2006-12-26 | 更新日期： 2007-05-08
Laurence Moroney
Microsoft Corporation
適用于：
•
Microsoft Silverlight（以前的代號為“WPF/E”）
•
Microsoft Expression Blend
摘要：本白皮書(shū)對 Silverlight 進(jìn)行了高度概述，介紹了 Silverlight 對下一代 Web 應用程序開(kāi)發(fā)堆棧的適用性。
本頁(yè)內容
什么是 Silverlight？Web 開(kāi)發(fā)的演變：轉向 Web.Next構建一個(gè)簡(jiǎn)單的 Silverlight 應用程序創(chuàng )建供視頻播放器使用的 UI了解 Silverlight 調用結束語(yǔ)什么是 Silverlight？
Silverlight 是一種新的 Web 呈現技術(shù)，能在各種平臺上運行。借助該技術(shù)，您將擁有內容豐富、視覺(jué)效果絢麗的交互式體驗，而且，無(wú)論是在瀏覽器內、在多個(gè)設備上還是在桌面操作系統（如 Apple Macintosh）中，您都可以獲得這種體驗。Microsoft .NET Framework 3.0（Windows 編程基礎結構）中的呈現技術(shù) XAML（可擴展應用程序標記語(yǔ)言）遵循 WPF (Windows Presentation Foundation)，它是 Silverlight 呈現功能的基礎。
本白皮書(shū)將逐步引導您了解 Silverlight 的基本情況，以及如何使用 Microsoft 的眾多工具（包括 Microsoft Expression Blend、Microsoft Visual Studio 2005 和 XAML）來(lái)構建內容豐富的圖形站點(diǎn)。首先，讓我們了解一下 Silverlight 發(fā)展歷程的相關(guān)背景信息，以及它在開(kāi)發(fā)領(lǐng)域所處的位置。
返回頁(yè)首Web 開(kāi)發(fā)的演變：轉向 Web.Next
CERN 的 Tim Berners-Lee 發(fā)明現代 Web 時(shí)，初衷是將其作為允許在基于網(wǎng)絡(luò )的系統上存儲和鏈接靜態(tài)文檔的系統。之后的數年間，隨著(zhù)創(chuàng )新的發(fā)展和成熟，“活動(dòng)”文檔自然而然地成為了現代 Web 發(fā)展的新階段，這些文檔在收到訪(fǎng)問(wèn)請求時(shí)即會(huì )生成，文檔中包含特定于時(shí)間或用戶(hù)的信息。CGI 之類(lèi)的技術(shù)成為了這一階段的實(shí)現基礎。隨著(zhù)時(shí)間的推移，在 Web 上生成文檔的功能變得極為重要，技術(shù)上的發(fā)展也歷經(jīng) CGI、Java、ASP，到達 ASP.NET 階段。
在使開(kāi)發(fā)人員擁有采用服務(wù)器開(kāi)發(fā)模式并使用 Visual Studio 系列產(chǎn)品中的同類(lèi)最佳工具快速開(kāi)發(fā)高質(zhì)量 Web 應用程序的能力這一方面，ASP.NET 樹(shù)立了一個(gè)里程碑。
事實(shí)證明，用戶(hù)體驗是 Web 應用程序中的一大障礙，在這方面，技術(shù)上的限制使 Web 應用程序無(wú)法提供與使用本地數據的客戶(hù)端應用程序同樣豐富的用戶(hù)體驗。
XMLHttpRequest 對象（2000 年由 Microsoft 作為 Internet Explorer 5 的一部分發(fā)布）成為了異步 JavaScript 和 XML (AJAX) 技術(shù)的基礎，該技術(shù)使 Web 應用程序能夠更加動(dòng)態(tài)地響應用戶(hù)輸入，因為采用該技術(shù)時(shí)只會(huì )刷新網(wǎng)頁(yè)的一小部分，并不需要重新加載所有內容?；?AJAX 構建的創(chuàng )新型解決方案（如 Windows Live Local 映射）使 Web 應用程序更進(jìn)一步，已經(jīng)能夠提供與客戶(hù)端類(lèi)似的用戶(hù)體驗。
Silverlight 是應用程序開(kāi)發(fā)人員和設計人員可以向其客戶(hù)呈現潛在用戶(hù)體驗豐富性的下一個(gè)發(fā)展階段。為了實(shí)現此目的，它允許設計人員展現其創(chuàng )造力并以能夠直接對 Web 產(chǎn)生影響的格式保存其工作。過(guò)去，設計人員會(huì )使用提供了豐富輸出功能的工具來(lái)設計網(wǎng)站和用戶(hù)體驗，但在這些設計的實(shí)現能力方面，開(kāi)發(fā)人員會(huì )受到 Web 平臺的限制。在 Silverlight 模型中，設計人員可以構建所需的用戶(hù)體驗，并將其表示為 XAML。隨后，開(kāi)發(fā)人員可以使用 Silverlight 運行時(shí)直接將該 XAML 合并到網(wǎng)頁(yè)中。因此，兩者的合作可以比以往任何時(shí)候都更加緊密，從而提供豐富的客戶(hù)端用戶(hù)體驗。
由于 XAML 屬于 XML，因此它是基于文本的，能夠為這些豐富的內容提供與防火墻兼容的、易于檢查的說(shuō)明。盡管其他技術(shù)（如 Java 小程序、ActiveX 和 Flash）可用來(lái)部署比 DHTML/CSS/JavaScript 更豐富的內容，但它們都會(huì )向瀏覽器發(fā)送二進(jìn)制內容。這就導致難以進(jìn)行安全性審核，更不用說(shuō)還有更新上的困難，因為進(jìn)行任何更改后都必須重新安裝整個(gè)應用程序，而這并不是友好的用戶(hù)體驗，并且可能導致頁(yè)面停滯。如果使用 Silverlight，則需要更改豐富的內容時(shí)，服務(wù)器端會(huì )生成新的 XAML 文件。用戶(hù)下次瀏覽到該頁(yè)面時(shí)，會(huì )下載該 XAML 并更新體驗，而不需要進(jìn)行任何重新安裝。
Silverlight 的核心是瀏覽器增強模塊，其作用是呈現 XAML 并在瀏覽器界面上繪制生成的圖形。它的下載體積較?。ú坏?2 MB），可以在用戶(hù)點(diǎn)擊包含 Silverlight 內容的站點(diǎn)時(shí)進(jìn)行安裝。該模塊向 JavaScript 開(kāi)發(fā)人員公開(kāi) XAML 頁(yè)面的底層框架，以便實(shí)現頁(yè)面級的內容交互，這樣，開(kāi)發(fā)人員就可以進(jìn)行自己的工作，例如編寫(xiě)事件處理程序或使用 JavaScript 代碼來(lái)處理 XAML 頁(yè)面內容。
不過(guò)，理論方面的探討已經(jīng)夠多的了！我們還是通過(guò)實(shí)踐來(lái)看一看我們的第一個(gè) Silverlight 項目。
返回頁(yè)首構建一個(gè)簡(jiǎn)單的 Silverlight 應用程序
我們先來(lái)看一看 Microsoft Expression Blend，使用該工具創(chuàng )建一個(gè) XAML 格式的非常簡(jiǎn)單的應用程序，以供 Silverlight 使用。要在 Blend 中創(chuàng )建 Silverlight 應用程序，請選擇 File（文件）->New project（新建項目），此時(shí)會(huì )打開(kāi)“New Project”（新建項目）對話(huà)框。請參見(jiàn)圖 1。
圖 1. 使用 Expression Blend 創(chuàng )建新的 Silverlight 項目
選擇 OK（確定），即會(huì )創(chuàng )建一個(gè)新項目。該項目將包含一個(gè)默認 HTML 頁(yè)面、該頁(yè)面的一些 JavaScript 源代碼、一篇 XAML 文檔和該 XAML 文檔的 JavaScript 源代碼及 Silverlight.js。
Silverlight.js 包含用于下載和實(shí)例化 Silverlight 控件的代碼。它作為 Silverlight SDK 的一部分提供給用戶(hù)。
Default.html 是標準的 HTML 網(wǎng)頁(yè)。該網(wǎng)頁(yè)包含三個(gè) JavaScript 腳本引用，分別指向 Silverlight.js、Default.html.js（其中包含特定于應用程序的用于安裝 Silverlight 的代碼）和 Scene.xaml.js（其中包含在 XAML 中定義的應用程序事件的事件處理程序）。
它被設計為一個(gè)獨立的頁(yè)面 (default.html)，與實(shí)例化邏輯 (default.html.js)、設計 (Scene.xaml) 和事件代碼 (Scene.xaml.js) 分開(kāi)。不過(guò)，理論方面的探討已經(jīng)夠多了，現在我們開(kāi)始開(kāi)發(fā)一個(gè)簡(jiǎn)單的應用程序。
返回頁(yè)首創(chuàng )建供視頻播放器使用的 UI
在項目中添加視頻文件。為此，請右鍵單擊屏幕右上方 Project Files（項目文件）窗口中的項目文件，然后選擇 Add Existing Item...（添加現有項目）。
選擇某個(gè) WMV 文件并將其添加到項目時(shí)，項目瀏覽器中將顯示該文件，同時(shí)在視圖中添加了一個(gè)媒體元素。
圖 2. 在 XAML 視圖中添加媒體元素
現在即可運行您的項目，瀏覽器將啟動(dòng)并播放您的視頻！
通過(guò)編輯 XAML 可以停止自動(dòng)播放視頻。您會(huì )看到 XAML 設計器右側有兩個(gè)選項卡：Design（設計）和 XAML。選擇“XAML”選項卡，會(huì )打開(kāi) XAML 編輯器，如圖 3 中所示。使用該編輯器為媒體元素編輯 XAML 文本，添加屬性 AutoPlay=False。
圖 3. 在 XAML 編輯器中編輯 XAML
現在，如果您運行該應用程序，會(huì )看到 Silverlight 內容雖然呈現了視頻的第一幀，但并播放。
在視頻播放器中添加控件
為該應用程序添加兩個(gè)文本塊，文本內容分別為 Play 和 Stop，名稱(chēng)分別為 txtPlay 和 txtStop。完成后，XAML 應如下所示：
<Canvasxmlns="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 屬性聲明單擊鼠標的處理程序。在 txtPlay 文本塊中，添加對 DoPlay 的事件處理程序；在 txtStop 文本塊中，添加對 DoStop 的事件處理程序。完成后，XAML 應如下所示：
<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"/>
現在，如果用戶(hù)單擊其中一個(gè)文本塊，將觸發(fā)一個(gè)事件，您可通過(guò) JavaScript 功能捕獲并處理該事件。
在 JavaScript 中處理事件
模板創(chuàng )建的 Scene.xaml.js 可用于在 JavaScript 中捕獲并處理用戶(hù)事件。由于您在 XAML 內指定了 DoPlay 和 DoStop 事件處理程序，因此應在此處付諸實(shí)施。相應的代碼如下所示：
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 控件稱(chēng)為 SilverlightControl，將引用該控件的 JavaScript 變量稱(chēng)為 theHost。稍后查找媒體元素（在本例中稱(chēng)為 Movie_wmv）時(shí)，將用到上述名稱(chēng)。在項目中添加電影時(shí)，為您創(chuàng )建了此媒體元素，該元素的名稱(chēng)是根據電影名稱(chēng)命名的。因此，如果電影的名稱(chēng)是 Movie.wmv，則此媒體元素就稱(chēng)為 Movie_wmv。如果使用其他電影，則控件也會(huì )相應地采用其他名稱(chēng)。
該媒體元素有 Play 和 Stop 兩個(gè)方法，分別用于啟動(dòng)或停止媒體播放。
由于存在對該媒體元素的引用，因而可以調用上述方法，電影將隨之停止或啟動(dòng)，如圖 4 中所示。
圖 4. 運行應用程序
至此，您已構建了自己的第一個(gè) Silverlight 應用程序！有關(guān) Silverlight 的更多資源，請查看新的
Silverlight 開(kāi)發(fā)人員中心和
http://www.silverlight.net/。
返回頁(yè)首了解 Silverlight 調用
HTML 頁(yè)面會(huì )調用 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)}});
該調用將用到許多屬性，其中包括那些用于定義要呈現的 XAML、Silverlight 控件外觀(guān)以及 onLoad 和 onError 事件處理程序的屬性。
source:屬性用于定義希望 Silverlight 控件呈現的 XAML。該屬性可以是外部文件（如本例中所示），也可以是包含 XAML 的頁(yè)面上的命名 <script> 標記。
在頁(yè)面上添加 Silverlight 控件時(shí)，應將該控件添加到命名 <DIV> 內。應將 parentElement:屬性作為該 <DIV> 的名稱(chēng)。
控件的 ID 由 id:屬性指定。
控件的物理屬性（如高度、寬度和版本）是由加載到 properties:屬性中的數組設定的。要查看全部屬性，請參閱
Silverlight SDK 文檔。
返回頁(yè)首結束語(yǔ)
本白皮書(shū)中高度概述了 Microsoft Silverlight，并介紹了 Silverlight 對下一代 Web 應用程序開(kāi)發(fā)堆棧的適用情況。您已經(jīng)看到，XAML 就像一個(gè)凝聚體，將設計人員的規范、開(kāi)發(fā)人員的工具和面向用戶(hù)的交付三者結合在了一起。您大體了解了 Expression Blend，并學(xué)習了如何用它來(lái)為網(wǎng)頁(yè)定義 UI，以及如何使用 JavaScript 對它們進(jìn)行編程。
您通過(guò)本文所了解的內容只觸及到 Silverlight 功能的皮毛。這項技術(shù)中蘊含著(zhù)諸多功能，您現在就可以使用這項技術(shù)開(kāi)始構建下一個(gè) Web。這會(huì )是一個(gè)有趣的旅程，快來(lái)體驗吧！
