Silverlight Expression[转]
生活随笔
收集整理的這篇文章主要介紹了
Silverlight Expression[转]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
*這篇文章基于 Silverlight 的預發布版。文中包含的所有信息均有變更可能。
本文討論:
Microsoft 戰略中下一代 Web 開發工具的一個關鍵組件,就是名為 Microsoft? Silverlight? 的新技術,原代號為“WPF/E”。Silverlight 將 Windows? Presentation Foundation 體驗帶到 Web 中,提供豐富又令人陶醉的內容,與包括 ASP.NET AJAX 在內的其他 Web 開發環境實現無縫連接。 為了與 Web 社區盡可能地融合,Silverlight 需要在多個流行的操作系統和最常見的瀏覽器中成功運行。其結果是,最初發行的版本支持在 Mac OS X 上運行的 Firefox 和 Safari 瀏覽器,以及在 Windows 上運行的 Firefox 和 Internet Explorer?。隨著產品的發展,會支持更多的操作系統和瀏覽器。除這些功能外,Silverlight 也是完全獨立的,不需要依靠其他產品,比如它不需要 Windows Media? Player 進行視頻播放,也不需要 Microsoft .NET Framework 3.0 進行 XAML 分析。 本文既是對 Silverlight 體系結構的高度概述,又可讓您通過構建幾個 Silverlight 應用程序獲得親身體驗,這一切從一個基本的“Hello World”應用程序開始。之后我將引導您構建簡單的媒體播放器。您還將知道作為客戶端技術的 Silverlight,如何融入更大的、面向服務器的環境,包括在運行 PHP 或 Java 的服務器上應用的能力。
Silverlight 簡介
從核心上說,Silverlight 是呈現 XAML 的瀏覽器插件,以可編寫腳本的方式,向瀏覽器提供其內部的文檔對象模型 (DOM) 和事件模型。因此,設計人員可以將含有圖形、動畫、時間線的 XAML 文檔整合在一起,以便開發人員將它們關聯到頁面代碼,實現其功能。由于 XAML 基于 XML,定義下載至客戶端的 UI 是基于文本的,因此對搜索引擎和防火墻都很友好。此外,XAML 可以由服務器應用程序在運行時組裝和發出,因此不僅提供了豐富的圖形體驗,而且是高度可自定義和動態的。 圖?1 是對簡單 Silverlight 應用程序的分析,它使用靜態的 XAML 文件定義其 UI 和處理事件的 JavaScript。瀏覽器會實例化插件,并且作為處理過程的一部分,加載 XAML 文件。文件內部的事件(例如單擊按鈕)將由瀏覽器捕獲并通過 JavaScript 處理。由于 Silverlight 內容的 DOM 已公開,JavaScript 代碼也可以動態地更新 Silverlight 內容,改變已呈現內容的狀態。
圖 1?示例應用程序 圖?2 顯示了支持 Silverlight 應用程序的體系結構。主編程接口是 JavaScript DOM API。它允許對 Silverlight XAML 內部觸發的事件作出反應(比如內容加載完成或動畫結束時)。也可以調用方法操作表示層(比如啟動動畫或暫停視頻播放)。在它下方是 XAML 分析引擎。分析器創建內存中的 XAML DOM 供表示核心使用,該核心負責處理 XAML 定義的圖形和動畫呈現。此外,運行時間包含了播放 WMV、WMA 和 MP3 多媒體內容所需的 Codec。
圖 2?Silverlight 體系結構 最后,運行庫包含了管理呈現過程的表示核心。此顯示運行時間內置于支持多種風格 Windows 和 Mac OS X 的瀏覽器插件中,使用之前討論的任意瀏覽器。最終產生了一個可以插入瀏覽器并通過 JavaScript 編寫腳本的獨立圖形和媒體呈現引擎。
XAML 概述
XAML 是一種基于 XML 語言,可用于定義圖形資源、用戶界面、行為、動畫等。微軟將它作為在 Windows Presentation Foundation 中使用的標記語言推出。Windows Presentation Foundation 是一種面向桌面的技術,屬于 .NET Framework 3.0 的一部分,旨在幫助協調設計人員和開發人員在創建應用程序時的工作。 一直以來,設計人員使用一套工具和資源創建應用程序,而開發人員則使用自己的另一套工具。工具集的不匹配可能對最終的應用程序產生負面影響。微軟推出新的 Expression 工具套件,主要是 Microsoft Expression? Design 和 Microsoft Expression Blend,讓專業設計人員可以分別將圖形項目和用戶界面放在一起,將最終結果表述為 XAML,以便開發人員用此構建應用程序。 首次發布的 Silverlight 所使用的 XAML 不同于 Windows Presentation Foundation 使用的 XAML,前者是可用于桌面的完整 XAML 的面向 Web 子集。因此,如果您熟悉 Windows Presentation Foundation XAML,您可能會注意到缺失一些東西,比如 <Window> 標記、頁面資源、數據綁定和豐富控件模型。 在 XAML 中,元素是用 XML 標記定義的。每個 Silverlight 文檔的根級別都是 Canvas 標記,它定義繪制 UI 元素的空間。該 Canvas 應包含 Silverlight 需要的 XML 命名空間聲明。 <Canvas xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”></Canvas> 一個 Canvas 可以有一或多個子項,子 Canvases 又可以創建它們自己的子項。Canvas 子項有相對于其父項的位置,而不是對根 Canvas。下面的示例中,一個 Canvas 包含一個矩形 (Rectangle),該矩形放在距其父項左上角 25 像素的位置。 <Canvas Width=”250” Height=”200”> <Rectangle Canvas.Top=”25” Canvas.Left=”25” Width=”200” Height=”150” Fill=”Black” /></Canvas>
XAML 內部
Silverlight XAML 支持多種形狀,能夠合成復雜的對象。支持的基本圖形包括矩形、橢圓、線條、多邊形、復合線和路徑。它們大多數都是不解自明的。復合線允許定義一系列相連的線段。路徑允許定義一個通過 Canvas 的非線性路徑(如同涂鴉)。 畫筆決定如何在屏幕上繪制對象。用 Fill 繪制內容,用 Stroke 繪制輪廓。畫筆分純色畫筆、漸變畫筆和圖像畫筆幾種。純色畫筆通過 fill 屬性(如前例使用的 Fill="Black")的固定色、或使用 SolidColorBrush 作為附加屬性實現(如下所示): <Rectangle Canvas.Top=”25” Canvas.Left=”25” Width=”200” Height=”150”> <Rectangle.Fill> <SolidColorBrush Color=”Black” /> </Rectangle.Fill> <Rectangle> 顏色可以通過名稱(支持 141 種命名的顏色)或十六進位 RGB 定義。 漸變畫筆通過在規范化空間中定義漸變域和若干漸變停留來實現。舉例來說,假設在灰色陰影中,需要一個線形漸變,從右至左,從黑變白。指定漸變停留 0(規范化線的開端)為黑色、漸變停留 1(規范化線的結束)為白色。Silverlight 就將為您繪制這個漸變。漸變也可以在二維空間中用規范化矩形定義空間來繪制(0,0 為左上,1,1 為右下)。要定義一個二維的填充矩形,左上為紅色,右下為黑色,中間是流暢的漸變,使用 XAML 如下: <Rectangle Width=”200” Height=”150” > <Rectangle.Fill> <LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”> <LinearGradientBrush.GradientStops> <GradientStop Color=”Red” Offset=”0” /> <GradientStop Color=”Black” Offset=”1” /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill></Rectangle> 用 ImageBrushes 也可以繪制對象,圖像將被適當地剪切或拉伸。因此,例如可以指定使用 ImageBrush 填充橢圓,使用的 XAML 如下: <Ellipse Width=”200” Height=”75” > <Ellipse.Fill> <ImageBrush ImageSource=”http://.../logo.jpg” /> </Ellipse.Fill></Ellipse> 在 XAML 中,文本可以用 TextBlock 標記呈現。這樣您可以控制文本的各個方面,如內容、字體、字號、折行等等。以下是一些示例: <TextBlock>Hello</TextBlock> <TextBlock FontSize=”18”>Hello</TextBlock> <TextBlock FontFamily=”Courier New”>Hello</TextBlock> <TextBlock TextWrapping=”Wrap” Width=”100”> Hello there, how are you? </TextBlock> 此外,Silverlight 支持用于實現文本輸入的鍵盤事件。在根元素上可以定義鍵盤事件(KeyDown 或 KeyUp),并使用事件參數獲知按下的是哪個鍵。
轉換、媒體和動畫
XAML 允許在對象上定義多種轉換。RotationTransform 以定義的角度旋轉元素,ScaleTransform 可以用來拉伸或縮小對象,SkewTransform 使其在定義的方向上扭曲定義的量,TranslateTransform 根據定義的矢量移動對象,MatrixTransform 則結合了以上所有轉換。 轉換可以分組,這樣,通過將轉換定義為組的一部分,可以將多個轉換置于對象之上。圖?3 就是一個很好的示例。在此情況下,Canvas 中有 3 個橢圓。由于轉換在 Canvas 層次中定義,因此每個橢圓都將被旋轉和縮放。 使用 MediaElement 標記控制音頻和視頻內容。此標記具有源屬性,指向即將播放的媒體。使用此標記定義的對象提供了許多控制媒體播放的方法和事件。在文章稍后部分中,您將看到用 XAML 構建的簡單媒體播放器示例,其中 JavaScript 實現了播放、暫停、停止等用戶交互。定義 MediaElement 非常簡單: <Canvas xmlns=”...” xmlns:x=”...”> <MediaElement Source=”xbox.wmv” /> </Canvas> 在 XAML 中實現動畫的方式是定義屬性應該如何根據時間線逐漸發生變化。動畫定義包含在 Storyboard 中。動畫有各種不同的類型,包括變化數字屬性的 DoubleAnimation、變化顏色和畫筆的 ColorAnimation、變化二維值的 PointAnimation。這些動畫可以是線性的,也可以是基于關鍵幀的。在線性動畫中,動畫沿著定義的時間線發生流暢的變化?;陉P鍵幀的動畫可在離散的值之間移動。 圖?4 顯示了一個隨時間改變圓形寬度的簡單動畫示例。AutoReverse 屬性設為 True,指示引擎繼續動畫,在進行過程中逆轉,使得圓形從寬到窄再到寬,而不是重復從寬到窄的轉換。
簡單的 Silverlight 應用程序
在 Visual Studio 2005 中,您可以使用 Silverlight 應用程序模板(Silverlight SDK 下載的一部分),輕松構建 Silverlight 應用程序。本文中我使用了 Visual Web Developer? Express 應用程序,可以從 MSDN? 下載。 本示例是個簡單的媒體播放器,播放 WMV 視頻內容。它使用 Channel 9 視頻(channel9.msdn.com),但您可以更改為播放您喜歡的任何視頻。XAML 十分簡單,在圖?5 中可以完整地看到。為簡單起見,TextBlock 元素用于“Play”(播放)、“Stop”(停止)和“Pause”(暫停)按鈕。 MediaElement 標記用于定義視頻。它的名稱是 mPlayer,其像素設為 640×400。“Source”標記指向一個微軟網站提供下載的 WMV 視頻。 接下來是三個 TextBlock 元素,用于定義“Play”(播放)、“Stop”(停止)和“Pause”(暫停)按鈕。這些按鈕垂直排列在畫布左上方。注意 Canvas.Left 尚未設置,默認為 0。這些 TextBlock 元素定義了單擊 (MouseLeftButtonDown) 時引發的 JavaScript 事件處理程序。在它們上面按下鼠標按鈕時,Silverlight 將事件傳送至瀏覽器,由 JavaScript 捕獲和處理。 現在讓我們組合成一個應用程序:它使用此 XAML,并使用 Visual Web Developer Express 實現 JavaScript 事件處理程序。要使它工作,需要一個 silverlight.js 文件,該文件可以從 Silverlight SDK 下載中得到,也可以在 MSDN 示例下載網站的任意 Silverlight 示例中得到。 使用 Visual Web Developer Express,創建新的 Web 站點。在該站點中創建名為 \js 的文件夾,在其中添加 silverlight.js 文件。右鍵單擊 \js 文件夾并選擇“Add New Item”(添加新項)。在新建文件對話框中選擇 JScript 文件,并將其稱為 eventhandlers.js。 然后,右鍵單擊 Solution Explorer 中的項目,單擊“Add New Item”(添加新項),創建一個新的 XML 文件,名為 videoplayer.xaml。用圖?5 列出的 XAML 填充。 最后,在項目中添加一個新的 HTML 頁面,命名為 Default.htm。編輯 HTML 頁面,使其加載 JavaScript 庫,并用它們創建一個 Silverlight 播放器實例以呈現 XAML 內容。圖?6 顯示了 Default.htm 的完整源代碼。 頁面頂端的腳本標記可導入 JavaScript 庫、silverlight.js 和 eventhandlers.js。silverlight.js 庫管理 Silverlight 插件的下載和實例化。它有瀏覽器和 OS 抽象,所以您毋須擔心;您只需利用 Sys.Silverlight.createObjectEx 函數實現新的 Silverlight 控件。Silverlight 插件本身應該位于分配了 ID 的 DIV 塊內部。在這種情況下,包含插件的 DIV 稱為 AgControl1Host。實例化 Silverlight 內容時會用到此 ID。 Silverlight 插件的實例化方式是創建新的 Silverlight 控件實例,傳入大量參數以構造它。有關這些參數的詳細信息,請參見 Silverlight SDK。 最后一步是實現 JavaScript 函數,該函數處理單擊“Play”(播放)、“Stop”(停止)和“Pause”(暫停)按鈕時觸發的事件。這些代碼應放入 eventhandlers.js。 function PlayVideo(sender,args){ var mPlayer = sender.findName(“mPlayer”); mPlayer.Play();}function PauseVideo(sender,args){ var mPlayer = sender.findName(“mPlayer”); mPlayer.Pause();} function StopVideo(sender,args){ var mPlayer = sender.findName(“mPlayer”); mPlayer.Stop();} 在 XAML 中,Stop TextBlock 將 MouseLeftButtonDown 屬性定義為指向 JavaScript:StopVideo。通過創建接受 sender 和 args 參數的同名 JavaScript 函數實現此函數。使用 Silverlight 中的 findName 函數,可以在 DOM 內找到與已命名參數匹配的元素。因此,要停止正在播放的視頻,可以使用 findName API 來查找 MediaElement。在 XAML 中,該元素稱為 mPlayer。findName API 將返回該對象的引用,可以將其載入 JavaScript var。現在有了引用之后,您可以簡單地調用它的 Stop 方法以停止視頻播放。播放和暫停功能與之相似。 就是這樣!簡單的視頻播放器能立即與 Silverlight 組合在一起。運行應用程序,可以看到類似于圖?7 所示的結果。
圖 7?簡單的視頻播放器 (單擊該圖像獲得較小視圖)
圖 7?簡單的視頻播放器 (單擊該圖像獲得較大視圖) 當然如果希望硬編碼視頻 URI 到 XAML 里也是可以的,但這不是最可行的方式。讓我們看一下將其從靜態 HTML 頁面更改為活動 Web 窗體,以將視頻作為參數接受。 第一步,從 XAML 中刪除對媒體文件的引用。更改 XAML 中的 MediaElement,刪除 Source 屬性。完成后應該如下所示: <MediaElement x:Name=”mPlayer” Width=”640” Height=”400”/> 然后,在應用程序中創建一個名為 VideoPlayer.aspx 的新 Web 窗體 (ASPX)。此窗體應實體化一個源于 videoplayer.xaml 的 Silverlight 控件,如圖?6 所示。此外,它應包含以下 JavaScript 代碼: <script type=”text/javascript”> function root_Loaded(sender,args) { var mPlayer = sender.findName(“mPlayer”); mPlayer.Source = “<% Response.Write(Request.Params[“VideoURI”]); %>”; mPlayer.Play();}</script> XAML 含有一個事件聲明,加載 Canvas 時引發該事件。這是由 JavaScript 中的 root_Loaded 事件處理程序捕獲的。該函數利用 ASP.NET 將 VideoURI 從服務器上的 HTTP 請求中提取出來,用 VideoURI 填入 JavaScript 函數,從而設置視頻源。頁面執行時,視頻(VideoURI 參數指定)將由 Silverlight 呈現。請注意,這個一個非常簡單的示例,沒有任何錯誤處理或過濾,如果您希望自己的應用程序有此類功能,則需要進行添加。 注意,在使用如下 URI 調用此頁面時: http://localhost/MSDN1/VideoPlayer.aspx?videouri=xbox.wmv ASP.NET 將產生一個包含 JavaScript 塊的頁面,如下所示: <script type=”text/javascript”> function root_Loaded(sender,args) { var mPlayer = sender.findName(“mPlayer”); mPlayer.Source = “xbox.wmv”; mPlayer.Play(); } </script> 之后此 JavaScript 將 xbox.wmv 文件載入 MediaElement,Silverlight 將播放視頻。以上說明使用服務器端活動頁面(ASPX、PHP 或 Java)可以通過增加靈活性,大大改善 Silverlight 最終用戶體驗。
Silverlight 服務器應用程序
如果說把 Silverlight 只看作一種在瀏覽器中嵌入豐富內容的客戶端技術,并不十分公平。這些豐富的功能已經可以通過使用封閉插件獲得,如 Java Applets、ActiveX? 控件或 Flash 應用程序。相比較而言,由于用戶界面是以基于文本的 XAML 定義,而且通過使用 JavaScript 達到可編程性,因此 Silverlight 是一種開放的技術。它允許開發人員輕易地構建與后端服務器交互的應用程序。 以天氣預報應用程序為例。如果想在客戶端創建天氣預報應用程序,可以構建一個使用 Web 服務的 Java 小程序、ActiveX 控件或 Flash 應用程序,將其部署入客戶端。然而,這增加了客戶端和服務器通信的需要。如果數據源是付費訂閱服務,該怎么辦?應用程序部署人員必須驗證所有數據服務訪問者的許可證,這將占用構建域特定業務邏輯的時間。 然而,如果應用程序可以在服務器端組裝,并且所有數據傳回客戶端,問題就迎刃而解了。使用 Expression Blend 這樣的工具,應用程序用戶界面的模板可以組裝和表達為 XAML。開發人員在運行時就可以收集相關數據并將其插入模板,將最終的 XAML 返回至客戶端并呈現。客戶端不需要任何邏輯或連接(當然啟動時與服務器的初始連接除外),部署和管理客戶端也因此會相對容易。
構建天氣預報應用程序
這一部分將介紹如何構建簡單的 XAML 文件以實現天氣預報應用程序(請參見圖?8)。完成后的天氣預報應用程序,將為特定的郵政編碼呈現三日的氣溫預報。該郵政編碼作為瀏覽器內地址的參數傳送至應用程序。它還會呈現天氣的圖形表現形式、正確的日期、郵政編碼所在地名稱,以及天氣數據的動畫。天氣預報應用程序的所有 XAML 清單都可以在《MSDN 雜志》網站中找到。
圖 8?Silverlight 天氣預報應用程序 (單擊該圖像獲得較小視圖)
圖 8?Silverlight 天氣預報應用程序 (單擊該圖像獲得較大視圖) 文檔頂端是打開的 Canvas 標記。這是個基本容器,在上面可以繪制對象。Canvas 不只限于一個,而且用 Canvas 組合相關元素是有用的。因此,舉例來說,每一天可以包括圖解、最高氣溫、最低氣溫和各種標簽,所有這些都收集到一個 XAML 模板中。圖?9 是某天的示例。在這種情況下,Canvas 包含了許多 TextBlocks 和 Image 控件。此 canvas 的給定名稱為 cnv2,置于屏幕中,不透明度為 0(意味著最初不可見)。它的高度、寬度、左邊界和上邊界設置使其處于屏幕上特定的位置。 TextBlock 用于在 Silverlight 中呈現文本。這里有許多 TextBlock,有的用作硬編碼標簽,比如存儲在名為 lblDegHigh2 和 lblDegLow2 的 TextBlock 中的“°F”標簽。在 x:Name 屬性中可以找到名稱。 名為 lblDate2、lblHigh2 和 lblLow2 的 TextBlock 包含占位符信息—目前它們都硬編碼為特定的數據和溫度,但您的 ASP.NET 代碼將用指定郵政編碼的實時日期和溫度覆蓋它們。
定義淡入動畫
Canvas 節點支持觸發器,觸發響應事件的操作。在這種情況下,Canvas.Triggers 被設置為在頁面加載(如下所示)時觸發: <Canvas.Triggers> <EventTrigger RoutedEvent=”FrameworkElement.Loaded”> <BeginStoryboard>... 這樣,當頁面加載時,觸發器觸發,動畫 Storyboard 啟動。動畫 Storyboard 定義動畫行為。以下是用在 Canvas (包括特定日期天氣的文本占位符和圖形)上的動畫,名為 cnv1: <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00” Storyboard.TargetName=”cnv1” Storyboard.TargetProperty=”(UIElement.Opacity)”> <SplineDoubleKeyFrame KeyTime=”00:00:00” Value=”0”/> <SplineDoubleKeyFrame KeyTime=”00:00:01” Value=”1”/> </DoubleAnimationUsingKeyFrames> 動畫類型為 DoubleAnimationUsingKeyFrames。您將在 0 至 1 之間修正 Canvas 及其子項的不透明度(由 UIElement.Opacity 定義),使其在一段時間內淡入。該時間由與動畫相關聯的關鍵幀決定。 當 XAML 呈現時,Storyboard 將啟動,使第一個元素在呈現開始(0 秒時)至 1 秒之后由不透明度 0 淡入至不透明度 1。觀察 XAML 您就會發現,其他的 Canvas 將在 1 至 2 秒之間以及 2 至 3 秒之間分別淡入,產生一種逐漸出現的效果。 XAML 是一種有效的 XML,因此元素可以由其屬性命名,并通過該名稱找到它們。因此,舉例來說,第一天的高溫圖形占位符元素將如下所示: <TextBlock x:Name=”lblHigh1” Width=”67” Height=”59” Canvas.Left=”112” Canvas.Top=”30” FontFamily=”Tahoma” FontSize=”48” FontWeight=”Bold” Foreground=”#FFF64F12” Text=”27” TextWrapping=”Wrap”/> 此 TextBlock 被命名為 lblHigh1。服務(您將在下一步看到)使用 XMLDocument 加載模板 XAML,找到此名稱的節點,利用如下所示的 C# 代碼改變其文本屬性: string xpath = “//d:TextBlock[@x:Name=’lblHigh1’]”; xNode = xmlDoc.SelectSingleNode(xpath, mng); string high = myResults[n - 1].MaxTemperatureF; xNode.Attributes[“Text”].Value = high;
創建 XAML 服務
當您在網頁上使用 Silverlight 時,控件采用的參數之一是 XAML 呈現的位置。在這種情況下,XAML 是動態的,根據請求天氣的郵政編碼而變化。因此,您將創建一個 Web 應用程序,產生并返回 XAML,而呈現它的頁面將指向此頁面。這是構建此 Silverlight 應用程序的第一步。 使用 Visual Studio ? 創建新的 Web 項目。添加一個包含 silverlight.js 的 \js 目錄,方法與您處理前面的視頻播放器相同。為項目添加新的 Web 引用,引用如下定義的 Web 服務: http://www.webservicex.net/WeatherForecast.asmx?WSDL 將服務命名為 weatherservice。為項目添加新的 Web 窗體并稱之為 Web Form XAMLSource.aspx。選擇“添加代碼”作為一個獨立頁面選項。確保代碼頁頂端有如下一套 using 指令: using System;using System.Data;using System.Configuration; using System.Collections;using System.Web;using System.Web.Security; using System.Web.UI;using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls; using System.Xml;using System.Xml.XPath; 在本節的余下部分,您將為 XAMLSource.aspx 上的 Page_Load 事件處理程序添加代碼。首先,將名為 Scene.xaml 的模板加載到一個 XMLDocument 對象: XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(Server.MapPath(“Scene.xaml”)); 然后,設置讀取參數。您將使用查詢字符串參數(指定了要求的郵政編碼)來調用頁面: http://server/XamlSource.aspx?ZIP=<something> 要檢索參數,可使用以下代碼: string strZip = “98052”;if (Request.Params[“ZIP”] != null) strZip = Request.Params[“ZIP”]; 這將啟動本地保存參數化郵編的字符串,并且當它未作為 HTTP 請求的一部分傳入時,設置其默認值。下一步,創建對處理天氣信息的 Web 服務的調用: weatherservice.WeatherForecast myWeather = new weatherservice.WeatherForecast(); weatherservice.WeatherForecasts myForecast = myWeather.GetWeatherByZipCode(strZip); weatherservice.WeatherData[] myResults = myForecast.Details; 此代碼創建了一個 Web 服務代理(當添加服務的 WSDL 的引用時,由 Visual Studio 為您創建)的實例,稱為 myWeather。Web 服務在 WeatherForecasts 數據結構內返回數據,因此通過調用服務中的 GetWeatherByZipCode 方法(并對其傳遞一個字符串)創建此數據結構的一個實例(稱為 myForecast)。預報對象的 Details 成員是一個 WeatherData 類型的數組,因此 myResults 變量被設置為其實例。 下一步是初始化 XMLDocument 以便用 XPath 進行搜索。由于 XML 使用 XAML 架構作為部分元素的命名空間(用 x 做前綴,例如 x:Name),您將需要為頁面上的所有元素(包括沒有前綴的元素)定義命名空間。例如,您不能搜索與 XPath //TextBlock 匹配的節點,但您可以指定默認的命名空間采用一個新的前綴(此情形下使用 d 表示虛擬),然后搜索使用這個前綴的默認節點,即 //d:TextBlock。代碼如下: NameTable myn = new NameTable(); XmlNamespaceManager mng = new XmlNamespaceManager(new NameTable()); mng.AddNamespace(“d”, “http://schemas.microsoft.com/winfx/2006/xaml/presentation”); mng.AddNamespace(“x”, “http://schemas.microsoft.com/winfx/2006/xaml”); 現在您已可以使用 XPath,接下來您可以找到包含城市名稱的節點,以及將其 Text 屬性更改為該郵政編碼所標識的服務所在的城市名稱。 XmlNode xNode = xmlDoc.SelectSingleNode( “//d:TextBlock[@x:Name=’lblTownName’]”, mng); xNode.Attributes[“Text”].Value = myForecast.PlaceName + “,” + myForecast.StateCode; 類似地,您可以在其后的三天里循環,找到包含所需位置的占位符節點,并得到其值,把正確的值置于 XML 中,代碼如圖?10 所示。 現在您使用模板和正確的數據完整填充了您的 XML 文檔,最后一步是將其返回給調用方。要完成這一步,需要設置 MIME 類型,將 XMLDocument 對象的內容直接寫入響應流,按如下所示: Response.ContentType = “text/xml”;Response.Write(xmlDoc.InnerXml); 下一步,刪除 Visual Studio 在 ASPX 頁面中給您的占位符 HTML。刪除 ASPX 文件中第一行之外的所有內容。完成后應該如以下代碼所示: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”XamlSource.aspx.cs” Inherits=”_Default” %> 最后一步是在解決方案中添加一個新的 XML 文件,稱為 Scene.xaml。在早先代碼中曾提及此文件。得到完整的天氣 XAML,并將其粘貼至此文件。現在就可以執行頁面了,在瀏覽器中應該能看到 XAMLSource.aspx 頁面返回的 XAML。
將 XAML 傳送至 Silverlight 前端
前面幾步構建了模板 XAML,然后構建了使用該 XAML 的 Web 窗體,使用 Web 服務,將 Web 服務調用的結果放入 XAML 中正確的位置。下一步是提供包含 Silverlight 控件的頁面,并使其指向此 XAML 服務。 打開前幾部分使用的站點,添加一個新的 Web 窗體,稱為 Default.aspx。在 Default.aspx 中修改 HTML 代碼,如圖?11 所示。 重要部分在于調用 Silverlight.createObjectEx,在此靜態的 videoplayer.xaml 已經由對 XAML 源應用程序的調用取代,在調用中傳遞 Default.aspx 頁面為郵政編碼接收的參數: “WeatherSite/XamlSource.aspx?ZIP=<% if (Request.Params[“ZIP”] == null) Response.Write(“98052”); else Response.Write(Request.Params[“ZIP”]);%>” 此操作將請求參數放入頁面,并將其附加到一個 URL,后者會調用最后一步創建的 XamlSource 頁面。隨后將對 XamlSource 進行調用,傳遞郵政編碼,獲得由 Silverlight 呈現的 XAML 文件。Default.aspx?ZIP=90210 的運行結果見圖?8。
摘要
本文深入介紹了 Silverlight。您也看到一些應用程序,它們不僅僅是鸚鵡學舌式地說“Hello, World”,而是展示了諸如如何用 XAML 構造用戶界面,如何與 JavaScript 關聯進行交互,如何從單純的客戶端模式轉為基于服務器的模式,從而讓應用程序更具靈活性。這種方法讓您了解到如何創建簡單的視頻播放器,能接受視頻流的 URI 并回放,在博客等環境下使用非常理想。 此外,通過天氣監視器(有非常簡單的客戶端分布模型)的形式,您學會了如何構建可感知數據的應用程序。只需要讓 Silverlight 組件調用服務器,獲得正確的 XAML 并呈現它,從而形成豐富的瘦客戶端。 雖然 ASP.NET 和微軟堆棧為構建這樣的 Web 應用程序提供了高效率的平臺,本文的下載部分也包含了此應用程序的 Java 版本。此版本提供了與 ASP.NET 版本同樣的功能,即使用 Web 服務獲取數據,然后將 XAML 加載到 XML Document DOM 中。它隨后找出模板數據的適當節點,在將完成的 XAML 寫出成為 URI 之前,將他們的值替換為來自 Web 服務的值。隨即構造 JSP(未列出),引用此 servlet 的 URL 以使用 Silverlight 呈現 XAML。 Silverlight 的 Web 之路才剛剛開始。憑借 XAML 呈現引擎的豐富性,以及使用標準 Web 開發技術的靈活性,Silverlight 非常值得添加到您的開發人員工具箱里。有關詳細信息,請關注 MSDN Silverlight 開發人員中心。
?
本文討論:
| 本文使用了以下技術: Silverlight, XAML, JavaScript |
Microsoft 戰略中下一代 Web 開發工具的一個關鍵組件,就是名為 Microsoft? Silverlight? 的新技術,原代號為“WPF/E”。Silverlight 將 Windows? Presentation Foundation 體驗帶到 Web 中,提供豐富又令人陶醉的內容,與包括 ASP.NET AJAX 在內的其他 Web 開發環境實現無縫連接。 為了與 Web 社區盡可能地融合,Silverlight 需要在多個流行的操作系統和最常見的瀏覽器中成功運行。其結果是,最初發行的版本支持在 Mac OS X 上運行的 Firefox 和 Safari 瀏覽器,以及在 Windows 上運行的 Firefox 和 Internet Explorer?。隨著產品的發展,會支持更多的操作系統和瀏覽器。除這些功能外,Silverlight 也是完全獨立的,不需要依靠其他產品,比如它不需要 Windows Media? Player 進行視頻播放,也不需要 Microsoft .NET Framework 3.0 進行 XAML 分析。 本文既是對 Silverlight 體系結構的高度概述,又可讓您通過構建幾個 Silverlight 應用程序獲得親身體驗,這一切從一個基本的“Hello World”應用程序開始。之后我將引導您構建簡單的媒體播放器。您還將知道作為客戶端技術的 Silverlight,如何融入更大的、面向服務器的環境,包括在運行 PHP 或 Java 的服務器上應用的能力。
Silverlight 簡介
從核心上說,Silverlight 是呈現 XAML 的瀏覽器插件,以可編寫腳本的方式,向瀏覽器提供其內部的文檔對象模型 (DOM) 和事件模型。因此,設計人員可以將含有圖形、動畫、時間線的 XAML 文檔整合在一起,以便開發人員將它們關聯到頁面代碼,實現其功能。由于 XAML 基于 XML,定義下載至客戶端的 UI 是基于文本的,因此對搜索引擎和防火墻都很友好。此外,XAML 可以由服務器應用程序在運行時組裝和發出,因此不僅提供了豐富的圖形體驗,而且是高度可自定義和動態的。 圖?1 是對簡單 Silverlight 應用程序的分析,它使用靜態的 XAML 文件定義其 UI 和處理事件的 JavaScript。瀏覽器會實例化插件,并且作為處理過程的一部分,加載 XAML 文件。文件內部的事件(例如單擊按鈕)將由瀏覽器捕獲并通過 JavaScript 處理。由于 Silverlight 內容的 DOM 已公開,JavaScript 代碼也可以動態地更新 Silverlight 內容,改變已呈現內容的狀態。
圖 1?示例應用程序 圖?2 顯示了支持 Silverlight 應用程序的體系結構。主編程接口是 JavaScript DOM API。它允許對 Silverlight XAML 內部觸發的事件作出反應(比如內容加載完成或動畫結束時)。也可以調用方法操作表示層(比如啟動動畫或暫停視頻播放)。在它下方是 XAML 分析引擎。分析器創建內存中的 XAML DOM 供表示核心使用,該核心負責處理 XAML 定義的圖形和動畫呈現。此外,運行時間包含了播放 WMV、WMA 和 MP3 多媒體內容所需的 Codec。
圖 2?Silverlight 體系結構 最后,運行庫包含了管理呈現過程的表示核心。此顯示運行時間內置于支持多種風格 Windows 和 Mac OS X 的瀏覽器插件中,使用之前討論的任意瀏覽器。最終產生了一個可以插入瀏覽器并通過 JavaScript 編寫腳本的獨立圖形和媒體呈現引擎。
XAML 概述
XAML 是一種基于 XML 語言,可用于定義圖形資源、用戶界面、行為、動畫等。微軟將它作為在 Windows Presentation Foundation 中使用的標記語言推出。Windows Presentation Foundation 是一種面向桌面的技術,屬于 .NET Framework 3.0 的一部分,旨在幫助協調設計人員和開發人員在創建應用程序時的工作。 一直以來,設計人員使用一套工具和資源創建應用程序,而開發人員則使用自己的另一套工具。工具集的不匹配可能對最終的應用程序產生負面影響。微軟推出新的 Expression 工具套件,主要是 Microsoft Expression? Design 和 Microsoft Expression Blend,讓專業設計人員可以分別將圖形項目和用戶界面放在一起,將最終結果表述為 XAML,以便開發人員用此構建應用程序。 首次發布的 Silverlight 所使用的 XAML 不同于 Windows Presentation Foundation 使用的 XAML,前者是可用于桌面的完整 XAML 的面向 Web 子集。因此,如果您熟悉 Windows Presentation Foundation XAML,您可能會注意到缺失一些東西,比如 <Window> 標記、頁面資源、數據綁定和豐富控件模型。 在 XAML 中,元素是用 XML 標記定義的。每個 Silverlight 文檔的根級別都是 Canvas 標記,它定義繪制 UI 元素的空間。該 Canvas 應包含 Silverlight 需要的 XML 命名空間聲明。 <Canvas xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”></Canvas> 一個 Canvas 可以有一或多個子項,子 Canvases 又可以創建它們自己的子項。Canvas 子項有相對于其父項的位置,而不是對根 Canvas。下面的示例中,一個 Canvas 包含一個矩形 (Rectangle),該矩形放在距其父項左上角 25 像素的位置。 <Canvas Width=”250” Height=”200”> <Rectangle Canvas.Top=”25” Canvas.Left=”25” Width=”200” Height=”150” Fill=”Black” /></Canvas>
XAML 內部
Silverlight XAML 支持多種形狀,能夠合成復雜的對象。支持的基本圖形包括矩形、橢圓、線條、多邊形、復合線和路徑。它們大多數都是不解自明的。復合線允許定義一系列相連的線段。路徑允許定義一個通過 Canvas 的非線性路徑(如同涂鴉)。 畫筆決定如何在屏幕上繪制對象。用 Fill 繪制內容,用 Stroke 繪制輪廓。畫筆分純色畫筆、漸變畫筆和圖像畫筆幾種。純色畫筆通過 fill 屬性(如前例使用的 Fill="Black")的固定色、或使用 SolidColorBrush 作為附加屬性實現(如下所示): <Rectangle Canvas.Top=”25” Canvas.Left=”25” Width=”200” Height=”150”> <Rectangle.Fill> <SolidColorBrush Color=”Black” /> </Rectangle.Fill> <Rectangle> 顏色可以通過名稱(支持 141 種命名的顏色)或十六進位 RGB 定義。 漸變畫筆通過在規范化空間中定義漸變域和若干漸變停留來實現。舉例來說,假設在灰色陰影中,需要一個線形漸變,從右至左,從黑變白。指定漸變停留 0(規范化線的開端)為黑色、漸變停留 1(規范化線的結束)為白色。Silverlight 就將為您繪制這個漸變。漸變也可以在二維空間中用規范化矩形定義空間來繪制(0,0 為左上,1,1 為右下)。要定義一個二維的填充矩形,左上為紅色,右下為黑色,中間是流暢的漸變,使用 XAML 如下: <Rectangle Width=”200” Height=”150” > <Rectangle.Fill> <LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”> <LinearGradientBrush.GradientStops> <GradientStop Color=”Red” Offset=”0” /> <GradientStop Color=”Black” Offset=”1” /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill></Rectangle> 用 ImageBrushes 也可以繪制對象,圖像將被適當地剪切或拉伸。因此,例如可以指定使用 ImageBrush 填充橢圓,使用的 XAML 如下: <Ellipse Width=”200” Height=”75” > <Ellipse.Fill> <ImageBrush ImageSource=”http://.../logo.jpg” /> </Ellipse.Fill></Ellipse> 在 XAML 中,文本可以用 TextBlock 標記呈現。這樣您可以控制文本的各個方面,如內容、字體、字號、折行等等。以下是一些示例: <TextBlock>Hello</TextBlock> <TextBlock FontSize=”18”>Hello</TextBlock> <TextBlock FontFamily=”Courier New”>Hello</TextBlock> <TextBlock TextWrapping=”Wrap” Width=”100”> Hello there, how are you? </TextBlock> 此外,Silverlight 支持用于實現文本輸入的鍵盤事件。在根元素上可以定義鍵盤事件(KeyDown 或 KeyUp),并使用事件參數獲知按下的是哪個鍵。
轉換、媒體和動畫
XAML 允許在對象上定義多種轉換。RotationTransform 以定義的角度旋轉元素,ScaleTransform 可以用來拉伸或縮小對象,SkewTransform 使其在定義的方向上扭曲定義的量,TranslateTransform 根據定義的矢量移動對象,MatrixTransform 則結合了以上所有轉換。 轉換可以分組,這樣,通過將轉換定義為組的一部分,可以將多個轉換置于對象之上。圖?3 就是一個很好的示例。在此情況下,Canvas 中有 3 個橢圓。由于轉換在 Canvas 層次中定義,因此每個橢圓都將被旋轉和縮放。 使用 MediaElement 標記控制音頻和視頻內容。此標記具有源屬性,指向即將播放的媒體。使用此標記定義的對象提供了許多控制媒體播放的方法和事件。在文章稍后部分中,您將看到用 XAML 構建的簡單媒體播放器示例,其中 JavaScript 實現了播放、暫停、停止等用戶交互。定義 MediaElement 非常簡單: <Canvas xmlns=”...” xmlns:x=”...”> <MediaElement Source=”xbox.wmv” /> </Canvas> 在 XAML 中實現動畫的方式是定義屬性應該如何根據時間線逐漸發生變化。動畫定義包含在 Storyboard 中。動畫有各種不同的類型,包括變化數字屬性的 DoubleAnimation、變化顏色和畫筆的 ColorAnimation、變化二維值的 PointAnimation。這些動畫可以是線性的,也可以是基于關鍵幀的。在線性動畫中,動畫沿著定義的時間線發生流暢的變化?;陉P鍵幀的動畫可在離散的值之間移動。 圖?4 顯示了一個隨時間改變圓形寬度的簡單動畫示例。AutoReverse 屬性設為 True,指示引擎繼續動畫,在進行過程中逆轉,使得圓形從寬到窄再到寬,而不是重復從寬到窄的轉換。
簡單的 Silverlight 應用程序
在 Visual Studio 2005 中,您可以使用 Silverlight 應用程序模板(Silverlight SDK 下載的一部分),輕松構建 Silverlight 應用程序。本文中我使用了 Visual Web Developer? Express 應用程序,可以從 MSDN? 下載。 本示例是個簡單的媒體播放器,播放 WMV 視頻內容。它使用 Channel 9 視頻(channel9.msdn.com),但您可以更改為播放您喜歡的任何視頻。XAML 十分簡單,在圖?5 中可以完整地看到。為簡單起見,TextBlock 元素用于“Play”(播放)、“Stop”(停止)和“Pause”(暫停)按鈕。 MediaElement 標記用于定義視頻。它的名稱是 mPlayer,其像素設為 640×400。“Source”標記指向一個微軟網站提供下載的 WMV 視頻。 接下來是三個 TextBlock 元素,用于定義“Play”(播放)、“Stop”(停止)和“Pause”(暫停)按鈕。這些按鈕垂直排列在畫布左上方。注意 Canvas.Left 尚未設置,默認為 0。這些 TextBlock 元素定義了單擊 (MouseLeftButtonDown) 時引發的 JavaScript 事件處理程序。在它們上面按下鼠標按鈕時,Silverlight 將事件傳送至瀏覽器,由 JavaScript 捕獲和處理。 現在讓我們組合成一個應用程序:它使用此 XAML,并使用 Visual Web Developer Express 實現 JavaScript 事件處理程序。要使它工作,需要一個 silverlight.js 文件,該文件可以從 Silverlight SDK 下載中得到,也可以在 MSDN 示例下載網站的任意 Silverlight 示例中得到。 使用 Visual Web Developer Express,創建新的 Web 站點。在該站點中創建名為 \js 的文件夾,在其中添加 silverlight.js 文件。右鍵單擊 \js 文件夾并選擇“Add New Item”(添加新項)。在新建文件對話框中選擇 JScript 文件,并將其稱為 eventhandlers.js。 然后,右鍵單擊 Solution Explorer 中的項目,單擊“Add New Item”(添加新項),創建一個新的 XML 文件,名為 videoplayer.xaml。用圖?5 列出的 XAML 填充。 最后,在項目中添加一個新的 HTML 頁面,命名為 Default.htm。編輯 HTML 頁面,使其加載 JavaScript 庫,并用它們創建一個 Silverlight 播放器實例以呈現 XAML 內容。圖?6 顯示了 Default.htm 的完整源代碼。 頁面頂端的腳本標記可導入 JavaScript 庫、silverlight.js 和 eventhandlers.js。silverlight.js 庫管理 Silverlight 插件的下載和實例化。它有瀏覽器和 OS 抽象,所以您毋須擔心;您只需利用 Sys.Silverlight.createObjectEx 函數實現新的 Silverlight 控件。Silverlight 插件本身應該位于分配了 ID 的 DIV 塊內部。在這種情況下,包含插件的 DIV 稱為 AgControl1Host。實例化 Silverlight 內容時會用到此 ID。 Silverlight 插件的實例化方式是創建新的 Silverlight 控件實例,傳入大量參數以構造它。有關這些參數的詳細信息,請參見 Silverlight SDK。 最后一步是實現 JavaScript 函數,該函數處理單擊“Play”(播放)、“Stop”(停止)和“Pause”(暫停)按鈕時觸發的事件。這些代碼應放入 eventhandlers.js。 function PlayVideo(sender,args){ var mPlayer = sender.findName(“mPlayer”); mPlayer.Play();}function PauseVideo(sender,args){ var mPlayer = sender.findName(“mPlayer”); mPlayer.Pause();} function StopVideo(sender,args){ var mPlayer = sender.findName(“mPlayer”); mPlayer.Stop();} 在 XAML 中,Stop TextBlock 將 MouseLeftButtonDown 屬性定義為指向 JavaScript:StopVideo。通過創建接受 sender 和 args 參數的同名 JavaScript 函數實現此函數。使用 Silverlight 中的 findName 函數,可以在 DOM 內找到與已命名參數匹配的元素。因此,要停止正在播放的視頻,可以使用 findName API 來查找 MediaElement。在 XAML 中,該元素稱為 mPlayer。findName API 將返回該對象的引用,可以將其載入 JavaScript var。現在有了引用之后,您可以簡單地調用它的 Stop 方法以停止視頻播放。播放和暫停功能與之相似。 就是這樣!簡單的視頻播放器能立即與 Silverlight 組合在一起。運行應用程序,可以看到類似于圖?7 所示的結果。
圖 7?簡單的視頻播放器 (單擊該圖像獲得較小視圖)
圖 7?簡單的視頻播放器 (單擊該圖像獲得較大視圖) 當然如果希望硬編碼視頻 URI 到 XAML 里也是可以的,但這不是最可行的方式。讓我們看一下將其從靜態 HTML 頁面更改為活動 Web 窗體,以將視頻作為參數接受。 第一步,從 XAML 中刪除對媒體文件的引用。更改 XAML 中的 MediaElement,刪除 Source 屬性。完成后應該如下所示: <MediaElement x:Name=”mPlayer” Width=”640” Height=”400”/> 然后,在應用程序中創建一個名為 VideoPlayer.aspx 的新 Web 窗體 (ASPX)。此窗體應實體化一個源于 videoplayer.xaml 的 Silverlight 控件,如圖?6 所示。此外,它應包含以下 JavaScript 代碼: <script type=”text/javascript”> function root_Loaded(sender,args) { var mPlayer = sender.findName(“mPlayer”); mPlayer.Source = “<% Response.Write(Request.Params[“VideoURI”]); %>”; mPlayer.Play();}</script> XAML 含有一個事件聲明,加載 Canvas 時引發該事件。這是由 JavaScript 中的 root_Loaded 事件處理程序捕獲的。該函數利用 ASP.NET 將 VideoURI 從服務器上的 HTTP 請求中提取出來,用 VideoURI 填入 JavaScript 函數,從而設置視頻源。頁面執行時,視頻(VideoURI 參數指定)將由 Silverlight 呈現。請注意,這個一個非常簡單的示例,沒有任何錯誤處理或過濾,如果您希望自己的應用程序有此類功能,則需要進行添加。 注意,在使用如下 URI 調用此頁面時: http://localhost/MSDN1/VideoPlayer.aspx?videouri=xbox.wmv ASP.NET 將產生一個包含 JavaScript 塊的頁面,如下所示: <script type=”text/javascript”> function root_Loaded(sender,args) { var mPlayer = sender.findName(“mPlayer”); mPlayer.Source = “xbox.wmv”; mPlayer.Play(); } </script> 之后此 JavaScript 將 xbox.wmv 文件載入 MediaElement,Silverlight 將播放視頻。以上說明使用服務器端活動頁面(ASPX、PHP 或 Java)可以通過增加靈活性,大大改善 Silverlight 最終用戶體驗。
Silverlight 服務器應用程序
如果說把 Silverlight 只看作一種在瀏覽器中嵌入豐富內容的客戶端技術,并不十分公平。這些豐富的功能已經可以通過使用封閉插件獲得,如 Java Applets、ActiveX? 控件或 Flash 應用程序。相比較而言,由于用戶界面是以基于文本的 XAML 定義,而且通過使用 JavaScript 達到可編程性,因此 Silverlight 是一種開放的技術。它允許開發人員輕易地構建與后端服務器交互的應用程序。 以天氣預報應用程序為例。如果想在客戶端創建天氣預報應用程序,可以構建一個使用 Web 服務的 Java 小程序、ActiveX 控件或 Flash 應用程序,將其部署入客戶端。然而,這增加了客戶端和服務器通信的需要。如果數據源是付費訂閱服務,該怎么辦?應用程序部署人員必須驗證所有數據服務訪問者的許可證,這將占用構建域特定業務邏輯的時間。 然而,如果應用程序可以在服務器端組裝,并且所有數據傳回客戶端,問題就迎刃而解了。使用 Expression Blend 這樣的工具,應用程序用戶界面的模板可以組裝和表達為 XAML。開發人員在運行時就可以收集相關數據并將其插入模板,將最終的 XAML 返回至客戶端并呈現。客戶端不需要任何邏輯或連接(當然啟動時與服務器的初始連接除外),部署和管理客戶端也因此會相對容易。
構建天氣預報應用程序
這一部分將介紹如何構建簡單的 XAML 文件以實現天氣預報應用程序(請參見圖?8)。完成后的天氣預報應用程序,將為特定的郵政編碼呈現三日的氣溫預報。該郵政編碼作為瀏覽器內地址的參數傳送至應用程序。它還會呈現天氣的圖形表現形式、正確的日期、郵政編碼所在地名稱,以及天氣數據的動畫。天氣預報應用程序的所有 XAML 清單都可以在《MSDN 雜志》網站中找到。
圖 8?Silverlight 天氣預報應用程序 (單擊該圖像獲得較小視圖)
圖 8?Silverlight 天氣預報應用程序 (單擊該圖像獲得較大視圖) 文檔頂端是打開的 Canvas 標記。這是個基本容器,在上面可以繪制對象。Canvas 不只限于一個,而且用 Canvas 組合相關元素是有用的。因此,舉例來說,每一天可以包括圖解、最高氣溫、最低氣溫和各種標簽,所有這些都收集到一個 XAML 模板中。圖?9 是某天的示例。在這種情況下,Canvas 包含了許多 TextBlocks 和 Image 控件。此 canvas 的給定名稱為 cnv2,置于屏幕中,不透明度為 0(意味著最初不可見)。它的高度、寬度、左邊界和上邊界設置使其處于屏幕上特定的位置。 TextBlock 用于在 Silverlight 中呈現文本。這里有許多 TextBlock,有的用作硬編碼標簽,比如存儲在名為 lblDegHigh2 和 lblDegLow2 的 TextBlock 中的“°F”標簽。在 x:Name 屬性中可以找到名稱。 名為 lblDate2、lblHigh2 和 lblLow2 的 TextBlock 包含占位符信息—目前它們都硬編碼為特定的數據和溫度,但您的 ASP.NET 代碼將用指定郵政編碼的實時日期和溫度覆蓋它們。
定義淡入動畫
Canvas 節點支持觸發器,觸發響應事件的操作。在這種情況下,Canvas.Triggers 被設置為在頁面加載(如下所示)時觸發: <Canvas.Triggers> <EventTrigger RoutedEvent=”FrameworkElement.Loaded”> <BeginStoryboard>... 這樣,當頁面加載時,觸發器觸發,動畫 Storyboard 啟動。動畫 Storyboard 定義動畫行為。以下是用在 Canvas (包括特定日期天氣的文本占位符和圖形)上的動畫,名為 cnv1: <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00” Storyboard.TargetName=”cnv1” Storyboard.TargetProperty=”(UIElement.Opacity)”> <SplineDoubleKeyFrame KeyTime=”00:00:00” Value=”0”/> <SplineDoubleKeyFrame KeyTime=”00:00:01” Value=”1”/> </DoubleAnimationUsingKeyFrames> 動畫類型為 DoubleAnimationUsingKeyFrames。您將在 0 至 1 之間修正 Canvas 及其子項的不透明度(由 UIElement.Opacity 定義),使其在一段時間內淡入。該時間由與動畫相關聯的關鍵幀決定。 當 XAML 呈現時,Storyboard 將啟動,使第一個元素在呈現開始(0 秒時)至 1 秒之后由不透明度 0 淡入至不透明度 1。觀察 XAML 您就會發現,其他的 Canvas 將在 1 至 2 秒之間以及 2 至 3 秒之間分別淡入,產生一種逐漸出現的效果。 XAML 是一種有效的 XML,因此元素可以由其屬性命名,并通過該名稱找到它們。因此,舉例來說,第一天的高溫圖形占位符元素將如下所示: <TextBlock x:Name=”lblHigh1” Width=”67” Height=”59” Canvas.Left=”112” Canvas.Top=”30” FontFamily=”Tahoma” FontSize=”48” FontWeight=”Bold” Foreground=”#FFF64F12” Text=”27” TextWrapping=”Wrap”/> 此 TextBlock 被命名為 lblHigh1。服務(您將在下一步看到)使用 XMLDocument 加載模板 XAML,找到此名稱的節點,利用如下所示的 C# 代碼改變其文本屬性: string xpath = “//d:TextBlock[@x:Name=’lblHigh1’]”; xNode = xmlDoc.SelectSingleNode(xpath, mng); string high = myResults[n - 1].MaxTemperatureF; xNode.Attributes[“Text”].Value = high;
創建 XAML 服務
當您在網頁上使用 Silverlight 時,控件采用的參數之一是 XAML 呈現的位置。在這種情況下,XAML 是動態的,根據請求天氣的郵政編碼而變化。因此,您將創建一個 Web 應用程序,產生并返回 XAML,而呈現它的頁面將指向此頁面。這是構建此 Silverlight 應用程序的第一步。 使用 Visual Studio ? 創建新的 Web 項目。添加一個包含 silverlight.js 的 \js 目錄,方法與您處理前面的視頻播放器相同。為項目添加新的 Web 引用,引用如下定義的 Web 服務: http://www.webservicex.net/WeatherForecast.asmx?WSDL 將服務命名為 weatherservice。為項目添加新的 Web 窗體并稱之為 Web Form XAMLSource.aspx。選擇“添加代碼”作為一個獨立頁面選項。確保代碼頁頂端有如下一套 using 指令: using System;using System.Data;using System.Configuration; using System.Collections;using System.Web;using System.Web.Security; using System.Web.UI;using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls; using System.Xml;using System.Xml.XPath; 在本節的余下部分,您將為 XAMLSource.aspx 上的 Page_Load 事件處理程序添加代碼。首先,將名為 Scene.xaml 的模板加載到一個 XMLDocument 對象: XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(Server.MapPath(“Scene.xaml”)); 然后,設置讀取參數。您將使用查詢字符串參數(指定了要求的郵政編碼)來調用頁面: http://server/XamlSource.aspx?ZIP=<something> 要檢索參數,可使用以下代碼: string strZip = “98052”;if (Request.Params[“ZIP”] != null) strZip = Request.Params[“ZIP”]; 這將啟動本地保存參數化郵編的字符串,并且當它未作為 HTTP 請求的一部分傳入時,設置其默認值。下一步,創建對處理天氣信息的 Web 服務的調用: weatherservice.WeatherForecast myWeather = new weatherservice.WeatherForecast(); weatherservice.WeatherForecasts myForecast = myWeather.GetWeatherByZipCode(strZip); weatherservice.WeatherData[] myResults = myForecast.Details; 此代碼創建了一個 Web 服務代理(當添加服務的 WSDL 的引用時,由 Visual Studio 為您創建)的實例,稱為 myWeather。Web 服務在 WeatherForecasts 數據結構內返回數據,因此通過調用服務中的 GetWeatherByZipCode 方法(并對其傳遞一個字符串)創建此數據結構的一個實例(稱為 myForecast)。預報對象的 Details 成員是一個 WeatherData 類型的數組,因此 myResults 變量被設置為其實例。 下一步是初始化 XMLDocument 以便用 XPath 進行搜索。由于 XML 使用 XAML 架構作為部分元素的命名空間(用 x 做前綴,例如 x:Name),您將需要為頁面上的所有元素(包括沒有前綴的元素)定義命名空間。例如,您不能搜索與 XPath //TextBlock 匹配的節點,但您可以指定默認的命名空間采用一個新的前綴(此情形下使用 d 表示虛擬),然后搜索使用這個前綴的默認節點,即 //d:TextBlock。代碼如下: NameTable myn = new NameTable(); XmlNamespaceManager mng = new XmlNamespaceManager(new NameTable()); mng.AddNamespace(“d”, “http://schemas.microsoft.com/winfx/2006/xaml/presentation”); mng.AddNamespace(“x”, “http://schemas.microsoft.com/winfx/2006/xaml”); 現在您已可以使用 XPath,接下來您可以找到包含城市名稱的節點,以及將其 Text 屬性更改為該郵政編碼所標識的服務所在的城市名稱。 XmlNode xNode = xmlDoc.SelectSingleNode( “//d:TextBlock[@x:Name=’lblTownName’]”, mng); xNode.Attributes[“Text”].Value = myForecast.PlaceName + “,” + myForecast.StateCode; 類似地,您可以在其后的三天里循環,找到包含所需位置的占位符節點,并得到其值,把正確的值置于 XML 中,代碼如圖?10 所示。 現在您使用模板和正確的數據完整填充了您的 XML 文檔,最后一步是將其返回給調用方。要完成這一步,需要設置 MIME 類型,將 XMLDocument 對象的內容直接寫入響應流,按如下所示: Response.ContentType = “text/xml”;Response.Write(xmlDoc.InnerXml); 下一步,刪除 Visual Studio 在 ASPX 頁面中給您的占位符 HTML。刪除 ASPX 文件中第一行之外的所有內容。完成后應該如以下代碼所示: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”XamlSource.aspx.cs” Inherits=”_Default” %> 最后一步是在解決方案中添加一個新的 XML 文件,稱為 Scene.xaml。在早先代碼中曾提及此文件。得到完整的天氣 XAML,并將其粘貼至此文件。現在就可以執行頁面了,在瀏覽器中應該能看到 XAMLSource.aspx 頁面返回的 XAML。
將 XAML 傳送至 Silverlight 前端
前面幾步構建了模板 XAML,然后構建了使用該 XAML 的 Web 窗體,使用 Web 服務,將 Web 服務調用的結果放入 XAML 中正確的位置。下一步是提供包含 Silverlight 控件的頁面,并使其指向此 XAML 服務。 打開前幾部分使用的站點,添加一個新的 Web 窗體,稱為 Default.aspx。在 Default.aspx 中修改 HTML 代碼,如圖?11 所示。 重要部分在于調用 Silverlight.createObjectEx,在此靜態的 videoplayer.xaml 已經由對 XAML 源應用程序的調用取代,在調用中傳遞 Default.aspx 頁面為郵政編碼接收的參數: “WeatherSite/XamlSource.aspx?ZIP=<% if (Request.Params[“ZIP”] == null) Response.Write(“98052”); else Response.Write(Request.Params[“ZIP”]);%>” 此操作將請求參數放入頁面,并將其附加到一個 URL,后者會調用最后一步創建的 XamlSource 頁面。隨后將對 XamlSource 進行調用,傳遞郵政編碼,獲得由 Silverlight 呈現的 XAML 文件。Default.aspx?ZIP=90210 的運行結果見圖?8。
摘要
本文深入介紹了 Silverlight。您也看到一些應用程序,它們不僅僅是鸚鵡學舌式地說“Hello, World”,而是展示了諸如如何用 XAML 構造用戶界面,如何與 JavaScript 關聯進行交互,如何從單純的客戶端模式轉為基于服務器的模式,從而讓應用程序更具靈活性。這種方法讓您了解到如何創建簡單的視頻播放器,能接受視頻流的 URI 并回放,在博客等環境下使用非常理想。 此外,通過天氣監視器(有非常簡單的客戶端分布模型)的形式,您學會了如何構建可感知數據的應用程序。只需要讓 Silverlight 組件調用服務器,獲得正確的 XAML 并呈現它,從而形成豐富的瘦客戶端。 雖然 ASP.NET 和微軟堆棧為構建這樣的 Web 應用程序提供了高效率的平臺,本文的下載部分也包含了此應用程序的 Java 版本。此版本提供了與 ASP.NET 版本同樣的功能,即使用 Web 服務獲取數據,然后將 XAML 加載到 XML Document DOM 中。它隨后找出模板數據的適當節點,在將完成的 XAML 寫出成為 URI 之前,將他們的值替換為來自 Web 服務的值。隨即構造 JSP(未列出),引用此 servlet 的 URL 以使用 Silverlight 呈現 XAML。 Silverlight 的 Web 之路才剛剛開始。憑借 XAML 呈現引擎的豐富性,以及使用標準 Web 開發技術的靈活性,Silverlight 非常值得添加到您的開發人員工具箱里。有關詳細信息,請關注 MSDN Silverlight 開發人員中心。
?
| NEW: Explore the sample code online! - or - 代碼下載位置: Silverlight2007_06.exe (300KB) |
轉載于:https://www.cnblogs.com/RuiLei/archive/2007/08/05/843952.html
總結
以上是生活随笔為你收集整理的Silverlight Expression[转]的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: web报表开发技术专题八:总结
- 下一篇: nc命令小材大用