淺析Silverlight應(yīng)用程序由Expression創(chuàng)立過程
微軟的Silverlight應(yīng)用程序現(xiàn)在已經(jīng)可以在Expression Blend下創(chuàng)立了，這不僅簡化了程序人員的工作，也讓大家分工更加明確。
Microsoft Expression Blend 作為一款功能齊全的專業(yè)設(shè)計工具，可用來針對 Windows Presentation Foundation (WPF) 和 Microsoft Silverlight 應(yīng)用程序制作精美復(fù)雜的用戶界面。Expression Blend 可讓設(shè)計人員集中精力從事創(chuàng)作，而讓開發(fā)人員集中精力從事編程工作。通過構(gòu)建一個簡單的Silverlight 3 應(yīng)用程序，我們可以大體了解 Expression Blend，并學(xué)習(xí)如何用它來為網(wǎng)頁定義 UI，以及如何使用 JavaScript 對它們進行編程。
首先我們使用 Microsoft Expression Blend 3創(chuàng)建一個 XAML 格式的非常簡單的應(yīng)用程序，以供 Silverlight 使用。
圖1 Expression Blend 3
使用 Expression Blend 創(chuàng)建新的 Silverlight 項目
在 Blend 中創(chuàng)建 Silverlight 應(yīng)用程序，選擇 File(文件)->New project(新建項目)，此時會打開“New Project”(新建項目)對話框，選擇 OK(確定)，即會創(chuàng)建一個新項目。
圖2 新建項目
該項目將包含一個默認 HTML 頁面、該頁面的一些 JavaScript 源代碼、一篇 XAML 文檔和該 XAML 文檔的 JavaScript 源代碼及 Silverlight.js。Silverlight.js 包含用于下載和實例化 Silverlight 控件的代碼。它作為 Silverlight SDK 的一部分提供給用戶。Default.html 是標準的 HTML 網(wǎng)頁。該網(wǎng)頁包含三個 JavaScript 腳本引用，分別指向 Silverlight.js、Default.html.js(其中包含特定于應(yīng)用程序的用于安裝 Silverlight 的代碼)和 Scene.xaml.js(其中包含在 XAML 中定義的應(yīng)用程序事件的事件處理程序)。它被設(shè)計為一個獨立的頁面 (default.html)，與實例化邏輯 (default.html.js)、設(shè)計 (Scene.xaml) 和事件代碼 (Scene.xaml.js) 分開。不過，理論方面的探討已經(jīng)夠多了，現(xiàn)在我們開始開發(fā)一個簡單的應(yīng)用程序。
創(chuàng)建供視頻播放器使用的 UI
在項目中添加視頻文件。右鍵單擊屏幕右上方 Project Files(項目文件)窗口中的項目文件，然后選擇 Add Existing Item...(添加現(xiàn)有項目)。選擇某個 WMV 文件并將其添加到項目時，項目瀏覽器中將顯示該文件，同時在視圖中添加了一個媒體元素。現(xiàn)在即可運行您的項目，瀏覽器將啟動并播放您的視頻!通過編輯 XAML 可以停止自動播放視頻。您會看到 XAML 設(shè)計器右側(cè)有兩個選項卡：Design(設(shè)計)和 XAML。選擇“XAML”選項卡，會打開 XAML 編輯器。使用該編輯器為媒體元素編輯 XAML 文本，添加屬性 AutoPlay=False。現(xiàn)在，如果您運行該應(yīng)用程序，會看到 Silverlight 內(nèi)容雖然呈現(xiàn)了視頻的第一幀，但并不播放。
在視頻播放器中添加控件
為該應(yīng)用程序添加兩個文本塊，文本內(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 屬性聲明單擊鼠標的處理程序。在 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)在，如果用戶單擊其中一個文本塊，將觸發(fā)一個事件，您可通過 JavaScript 功能捕獲并處理該事件。
在 JavaScript 中處理事件
模板創(chuàng)建的 Scene.xaml.js 可用于在 JavaScript 中捕獲并處理用戶事件。由于您在 XAML 內(nèi)指定了 DoPlay 和 DoStop 事件處理程序，因此應(yīng)在此處付諸實施。相應(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)時，將用到上述名稱。在項目中添加電影時，為您創(chuàng)建了此媒體元素，該元素的名稱是根據(jù)電影名稱命名的。因此，如果電影的名稱是 Movie.wmv，則此媒體元素就稱為 Movie_wmv。如果使用其他電影，則控件也會相應(yīng)地采用其他名稱。該媒體元素有 Play 和 Stop 兩個方法，分別用于啟動或停止媒體播放。
由于存在對該媒體元素的引用，因而可以調(diào)用上述方法，電影將隨之停止或啟動。
至此，您已構(gòu)建了自己的第一個 Silverlight 應(yīng)用程序!
圖3 網(wǎng)頁播放視頻
了解 Silverlight 調(diào)用
HTML 頁面會調(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 的頁面上的命名
【編輯推薦】
