安靜的等待

          茹呲綄鎂
          posts - 51, comments - 9, trackbacks - 0, articles - 0
            BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          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。

          .

          圖 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è)媒體元素。

          .

          圖 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。

          .

          圖 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 中所示。

          .

          圖 4. 運(yùn)行應(yīng)用程序


          評(píng)論

          # re: Silverlight 入門  回復(fù)  更多評(píng)論   

          2011-07-25 14:47 by 石淼
          我想學(xué)習(xí)

          # re: Silverlight 入門[未登錄]  回復(fù)  更多評(píng)論   

          2012-08-03 13:55 by 1
          1

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 岳阳市| 山丹县| 双江| 连平县| 含山县| 城固县| 江口县| 青神县| 泰安市| 鸡泽县| 青川县| 镇平县| 上高县| 永春县| 新源县| 鹰潭市| 习水县| 陆河县| 稷山县| 景洪市| 嘉鱼县| 化德县| 南召县| 兴业县| 如东县| 怀集县| 肥乡县| 四子王旗| 偃师市| 泾源县| 湾仔区| 张掖市| 山东| 古交市| 沙湾县| 古蔺县| 青州市| 历史| 沈阳市| 岳普湖县| 湛江市|