什麼是 Silverlight？專為在各種平台上執行而建立，是一項全新Web呈現技術

什麼是 Silverlight？

Silverlight 是一項全新 Web 呈現技術，專為在各種平台上執行而建立。它可建立豐富又多采多姿的互動式體驗，而且可以在任何環境上執行：各種瀏覽器內、多種裝置上以及在其他桌上型電腦作業系統 (例如 Apple Macintosh) 上皆可使用。XAML (可延伸應用程式標記語言，eXtensible Application Markup Language) 使用和 Microsoft .NET Framework 3.0 (Windows 程式設計基礎架構) 中的 WPF (Windows Presentation Foundation) 相同的技術，並且也是 Silverlight 呈現功能的根基。

本白皮書將引導您逐步了解 Silverlight 的基礎概念，並教導您使用許多的 Microsoft 工具 (包括 Microsoft Expression Blend、Microsoft Visual Studio 2005 及 XAML) 來建置精彩的圖形化網站。讓我們先從 Silverlight 起源的背景談起，並說明 "WPF/E" 在開發範疇中的定位。

Web 開發過程的演進：進入 Web.Next

Tim Berners-Lee 當初在 CERN 創造出當代 Web 時，主要目的是做為一種可讓靜態文件在網路架構上儲存及連結的系統。幾年後，隨著科技日新月異，下一步出現在要求時產生並包含特定時間或特定使用者資訊的「動態」文件是必然的趨勢。CGI 等技術即實現了這種功能。又經過一段時間後，在 Web 上產生文件的功能蔚為主流，而技術也從 CGI、Java、ASP 演變到 ASP.NET。

ASP.NET 是一項里程碑，奠定了開發人員利用 Visual Studio 系列產品提供的伺服器開發範例和最佳工具，來快速開發優質 Web 應用程式的基礎。

Web 應用程式的一大障礙在於使用者體驗；技術的限制使得 Web 應用程式無法像包含本機資料的用戶端應用程式一樣，提供豐富且多樣化的使用者體驗。

Microsoft 於 2000 年在 Internet Explorer 5 中發行的 XMLHttpRequest 物件，成為非同步 JavaScript 及 XML (Asynchronous JavaScript And XML，AJAX) 技術的基礎，可讓 Web 應用程式針對使用者輸入提供更多動態回應，而且每次只要重新整理網頁的小型組件，無須重新載入完整內容。在 AJAX 上建置的創新解決方案，例如 Windows Live Local 對應，讓 Web 應用程式更進一步提供使用者近似用戶端體驗的能力。

Silverlight 將會是應用程式開發人員與設計人員用來為用戶端提供更優異、更豐富的使用者體驗的最佳工具。因為 "WPF/E" 不但能讓設計人員充分發揮創造力，還可以讓他們將作品儲存為可直接在 Web 上使用的格式。過去，設計人員會使用可提供豐富輸出內容的工具來設計網站和使用者體驗，但開發人員在實現這些設計時，必須受限於 Web 平台的限制。在 Silverlight 模型中，設計人員可以打造自己想要的使用者體驗，並以 XAML 呈現。接下來，開發人員可以使用 Silverlight Runtime，直接將此 XAML 合併到網頁中。如此一來，雙方更能緊密合作來提供豐富的用戶端使用者體驗。

XAML 就是 XML，因為它是以文字為基礎，所以能提供與防火牆相容且容易檢查的豐富內容描述。雖然 Java Applets、ActiveX 和 Flash 等現有技術可以用來部署比 DHTML/CSS/JavaScript 更豐富的內容，但它們傳送至瀏覽器的都是二進位內容。這不僅難以進行安全性稽核，更會造成更新時的困難，因為進行任何變更時都需要重新安裝整個應用程式，這樣不僅無法造成良好的使用者體驗，更會造成頁面停滯。在使用 Silverlight 並且需要對豐富內容進行變更時，會在伺服器端產生新的 XAML 檔案。下次使用者瀏覽此頁面時，則會下載此 XAML 並更新體驗，完全不需要重新安裝。

Silverlight 的核心有一個瀏覽器增強模組，可呈現 XAML 並在瀏覽器介面上繪製產生的圖形。這個可下載程式很小 (2 MB 以內)，可以在使用者點擊包含 Silverlight 內容的網站時安裝。這個模組會向 JavaScript 開發人員公開 XAML 網頁的基底架構，因此能在網頁層級進行內容互動，開發人員也得以撰寫事件處理常式，或使用 JavaScript 程式碼來操作 XAML 網頁等等。

好啦，先不講理論了！我們現在來實地操作，並看一下第一個 Silverlight 專案。

建置簡單的 Silverlight 應用程式

我們先看一下 Microsoft Expression Blend 如何用 XAML 建立非常簡單的 Silverlight 應用程式。若要在 Blend 中建立 Silverlight 應用程式，請選取[File] (檔案) ->[New Project] (新增專案)，[New Project] (新增專案) 對話方塊隨即開啟。
選取 [OK] (確定)，隨即建立新專案。此專案包含預設 HTML 頁面、此頁面的一些 JavaScript 程式碼後置、XAML 文件、此 XAML 文件和 Silverlight.js 的 JavaScript 程式碼後置。
Silverlight.js 包含下載和產生 Silverlight 控制項的程式碼。它是 Silverlight SDK 的一部分。
Default.html 是標準 HTML 網頁。它包含三個 JavaScript 指令碼參照，分別指向 Silverlight.js、Default.html.js (包含產生 Silverlight 的應用程式特定程式碼) 和 Scene.xaml.js (包含 XAML 中所定義之應用程式事件的事件處理常式)。
其目的是將頁面 (default.html) 與執行個體化邏輯 (default.html.js)、設計 (Scene.xaml) 和事件程式碼 (Scene.xaml.js) 分隔開來。理論的部分就先說到這裡！我們現在來開發簡單的應用程式。

建立視訊播放程式的 UI

將視訊檔加入專案。若要執行這項動作，請在畫面右上方 [Project Files] (專案檔) 視窗中，以滑鼠右鍵按一下專案檔，然後選取 [Add Existing Item...] (加入現有項目...).
當您選取 WMV 檔案並將它加入專案時，檔案會出現在專案總管中，Media 元素也會加入場景中。
您現在就可以執行專案，啟動瀏覽器並播放您的視訊！
藉由編輯 XAML，您可以停止視訊的自動播放。XAML 設計工具右邊有兩個索引標籤：[Design] (設計) 和 [XAML]。選取 [XAML] 索引標籤，XAML 編輯器隨即開啟，如 [圖 3] 所示，您可以使用它編輯 XAML 文字，以便在 MediaElement 加入屬性 AutoPlay=False。
現在，如果您執行應用程式，您會看到 Silverlight 內容呈現第一個視訊畫面，但不會播放視訊。

將控制項加入視訊播放程式中

將兩個文字區塊加入應用程式中，分別提供 Play 和 Stop 文字以及 txtPlay 和 txtStop 名稱。完成時，XAML 如下所示：

<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 屬性，宣告滑鼠點選的處理常式。在 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"/>

現在，當使用者按一下其中一個文字區塊時，則會引發可從 JavaScript 函數攔截和處理的事件。

在 JavaScript 中處理事件

範本建立的 Scene.xaml.js 可用於 JavaScript 擷取和處理使用者事件。您在 XAML 中指定 DoPlay 和 DoStop 事件處理常式，因此，應該在此實作這些事件處理常式。執行這項動作的程式碼如下所示：

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，而且名為 theHost 的 JavaScript 變數會參照它。接著使用它尋找 Media 元素，在此例中，其名稱為 Movie_wmv。當您將影片加入專案時，便會建立此媒體元素，其名稱是根據影片名稱而定。因此，如果影片名稱是 Movie.wmv，它的名稱就是 Movie_wmv。如果您使用不同的影片，控制項的名稱也會不同。
媒體元素有 Play 和 Stop 方法，它們可用來啟動或停止媒體播放。
一旦有媒體元素的參照，即可呼叫這些方法來停止或啟動影片。
您已經建置了第一個 Silverlight 應用程式！
如需 Silverlight 的更多資源，請造訪全新的
Silverlight Developer Center 和 http://www.silverlight.net/。

了解 Silverlight 叫用

HTML 頁面會呼叫 createSilverlight()，此控制項出現在程式碼後置頁面 Default.html.js 中。

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 控制項外觀的屬性，以及定義 onLoad 和 onError 事件處理常式的屬性。
source:property 是用來定義您想要 Silverlight 控制項呈現的 XAML。它可以是外部檔案 (如此例) 或 XAML 所在頁面上的具名 <script> 標籤。
當您在頁面上放置 Silverlight 控制項時，它應該放在具名 <DIV> 中，而且用此 <DIV> 名稱填入 parentElement: 屬性。
控制項的識別碼是由 id: property 指定的。
控制項的實體屬性，例如 height、width 和 version，是透過載入 properties: 屬性的陣列而設定。
如需完整的屬性集，請參閱 Silverlight SDK 文件。

結論

本白皮書為您提供 Microsoft Silverlight 的概觀，以及如何將它融入新一代 Web 應用程式的開發堆疊中。您已了解如何使用 XAML 結合設計規格、開發工具及使用者呈現需求。此外還介紹了 Expression Blend，包括如何用它來定義網頁 UI，以及如何使用 JavaScript 來進行程式化。
您在本文中使用 Silverlight 進行的練習只是牛刀小試。此技術還有許多功能可用來建置新一代 Web 應用程式。探索過程樂趣無窮，即刻啟程吧！

（此篇文章為網路轉載，如有冒犯，請來信告知，當即刻移除！）

: 上層分類: 知識庫文章; 在網站動畫設計運用知識文章