Silverlight 入門
Posted on 2007-08-29 16:54 ricki 閱讀(702) 評(píng)論(2) 編輯 收藏 所屬分類: Microsoft Expression Blend&Silverlight什么是 Silverlight?
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)域所處的位置。
構(gòu)建一個(gè)簡(jiǎn)單的 Silverlight 應(yīng)用程序
我們先來看一看 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ì)打開“New Project”(新建項(xiàng)目)對(duì)話框。請(qǐng)參見圖 1。
.gif)
圖 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) 分開。不過,理論方面的探討已經(jīng)夠多了,現(xiàn)在我們開始開發(fā)一個(gè)簡(jiǎn)單的應(yīng)用程序。
創(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è)媒體元素。
.gif)
圖 2. 在 XAML 視圖中添加媒體元素
現(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。
.gif)
圖 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>
接下來,為文本塊在 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è)事件,您可通過 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 中所示。
.gif)
圖 4. 運(yùn)行應(yīng)用程序