ASP.NET 2.0移動開發之裝置篩選條件的應用

asp.net 　　在前面的文章中我曾經介紹過DeviceSpecific/Choice構造和裝置篩選條件，那時我們還是在ASP.NET 移動頁面的HTML視圖下或網站程式的Web.Config檔案中通過手動編碼來定義裝置篩選條件和DeviceSpecific/Choice構造。但是，如果你使用的是Visual Studio 2005的話，我們可以直接採用一種便捷的、可視化的方式去定義DeviceSpecific/Choice構造和裝置篩選條件，避免了在程式中採用手動編碼這樣繁雜的實現過程，而且因為開發人員沒有直接的鍵入代碼，也就不容易出現代碼的拼字和語法錯誤。

　　提示：在Visual Studio 2005工具箱的"移動Web表單"選項卡中包含一個名為DeviceSpecific的控制項，你可以拖拽此控制項到一個Form控制項或Panel控制項中。而後你將這個頁面切換到HTML視圖時，你會發現對應的Form控制項或Panel控制項中將包含DeviceSpecific/Choice的構造文法。有一點需要注意的是，你不能想當然地認為拖拽一個DeviceSpecific控制項到其他的ASP.NET行動控制項中也會實現上述的DeviceSpecific/Choice構造。只有當你定義一個屬性重寫或為清單控制項定義一個模板化選項時，才會自動地在這些控制項裡添加一個DeviceSpecific/Choice構造。DeviceSpecific控制項僅適用於在Form控制項和Panel控制項中以一種可視化的方式定義模板化選項。

　　 建立和應用裝置篩選條件

　　在ASP.NET移動頁面上選中一個控制項後，在屬性視窗的"裝置特定"欄中可以看到(AppliedDeviceFilters)項，我們可以點擊其右側空白處的省略符號按鈕，這時會彈出"已應用的裝置篩選條件"對話方塊。原本該對話方塊的首要目的是編輯完控制項的屬性後，為這種狀態下的控制項應用裝置篩選條件，但是它也可以讓你定義新的裝置篩選條件。並且這些定義好的裝置篩選條件可以應用於整個網站程式和所有的控制項中，ASP.NET會自動將這些新定義的裝置篩選條件儲存在網站程式的Web.Config檔案中。

　　在上圖"可用的裝置篩選條件"下拉式清單中，列舉出了當前正在編輯屬性的控制項所有可用的裝置篩選條件。該對話方塊的下方列表中，顯示了當前正在編輯屬性的控制項已應用的裝置篩選條件。 如果你要建立一個裝置篩選條件的話，可以點擊對話方塊上的"編輯"按鈕。這時會彈出"裝置篩選條件編輯器"，如圖所示：

　　在該對話方塊中，你將可以在右側的"裝置篩選條件"列表中看到當前網站程式中已存在的裝置篩選條件。當你在上述的"裝置篩選條件"列表中任選一個類型為"相等比較"的裝置篩選條件，該裝置篩選條件對應的屬性就會在"比較"下拉式清單方塊和"參數"文字框中顯現出來。

　　所有添加一個"相等比較"的裝置篩選條件，你按照如下的步驟即可實現：

　　1. 點擊"裝置篩選條件編輯器"對話方塊上的"建立裝置篩選條件"按鈕。

　　2. 為這個建立的裝置篩選條件鍵入一個合適的名稱。

　　3. 該裝置篩選條件的"類型"選擇"相等比較"。

　　4. 在"比較"下拉式清單方塊中，鍵入或選擇要與對話方塊中"參數"文字框中的值進行比較的MobileCapabilities類中的某個屬性。

　　5. 在"參數"文字框中輸入參數值，當一個MobileCapabilities對象對應的屬性值和該參數相等時就將返回"true"值。

　　提示：就拿上圖來說是一個名為isWML11的裝置篩選條件，在這裡我們選擇要比較的屬性是PreferredRenderingType，也就是說如果該裝置篩選條件的PreferredRenderingType屬性對應的值等於下面"參數"文字框的值"wml11"，那麼該裝置篩選條件就返回一個true值。

　　建立一個類型為"鑒別委託"的裝置篩選條件的過程和上面相等比較裝置篩選條件的建立過程是類似的，惟一的不同就是鑒別委託的裝置篩選條件不是在"比較"下拉式清單方塊和"參數"文字框鍵入或選擇相應的內容，取而代之的是你需要在"類型"文字框輸入包含自訂委託的類名和.DLL程式集名，而在"方法"文字框輸入的是實際的委託方法名。

　　

　　在上一篇文章《裝置篩選條件的定義及實現》描述了一個名為UseLargeGIF委託方法，如果你需要使用該方法來鑒別一幅圖片是不是大型GIF圖片的話，你需要在類型文字框中輸入"MyEvaluators.CustomEvals,MyEvaluators"，而在"方法"處輸入"UseLargeGif"。當你為網站程式定義好了所有的裝置篩選條件後，你可以將它們應用到任何一個希望實現屬性重寫的控制項中。所有你新定義的裝置篩選條件都會在"裝置篩選條件編輯器"下拉式清單中顯現出來。

　　為控制項應用裝置篩選條件

　　在"已應用的裝置篩選條件"對話方塊中，選擇將要給一個控制項應用的裝置篩選條件，並點擊"添加到列表"按鈕將這個可用的裝置篩選條件添加到"已應用的裝置篩選條件"列表框中。而後你還可以點擊該對話方塊上的上下箭頭來調整這些裝置篩選條件的位置。名為(Default)的裝置篩選條件是預設的選擇，所有它返回的總是true值。因此，(Default)裝置篩選條件的次序必須位於所有裝置篩選條件的下方(也就是"已應用的裝置篩選條件"列表框的最底端位置)。具體的情形如下圖所示：

　　

　　該圖顯示的是為一個label控制項應用四個裝置篩選條件，相應地你應該知道這種情形下由Visual Studio 2005自動產生的DeviceSpecific/Choice構造代碼如下：

＜mobile:Form id="Form1" runat="server"＞ ＜mobile:Label ID="Label1" Runat="server"＞ ＜DeviceSpecific＞ ＜Choice Filter="isPocketIE" /＞ ＜Choice Filter="isHTML32" /＞ ＜Choice Filter="isCHTML10" /＞ ＜Choice /＞ ＜/DeviceSpecific＞ ＜/mobile:Label＞ ＜/mobile:Form＞

　　也就是說四個裝置篩選條件的次序也就是DeviceSpecific/Choice構造中的＜Choice＞元素的相應次序。

　　 屬性重寫詳解

＜DeviceSpecific＞ 和＜Choice＞元素

　　所有繼承自System.Web.UI.MobileControl的ASP.NET行動服務器控制項，在其代碼聲明中都可以包含一個＜DeviceSpecific＞元素。我在前面提及過，一個＜DeviceSpecific＞元素可以包含任意個＜Choice＞元素。一般來說，＜Choice＞元素的文法如下：

＜Choice Filter="filterName" xmlns="urlToSchema" ＜!-屬性重寫選項--!＞ ＞ ＜!-模板化選項--!＞ ＜/Choice＞

　　下表是＜Choice＞常用的一些屬性和子項目。

屬性/子項目	說明
Filter	對照前面的＜Choice＞元素的文法，FilterName必須為一個可用的、在網站Web.Config檔案＜deviceFilters＞節點處定義的裝置篩選條件的名稱。注意，裝置篩選條件的名稱是大小寫敏感的，isHTML32和ishtml32是兩個不同是裝置篩選條件。如果你在＜Choice＞元素中沒有定義Filter屬性，那麼在＜Choice＞元素就將成為預設的選擇，為此＜Choice/＞在裝置篩選條件列表中的排列位置是最後的。
Property overrides	你可用在DeviceSpecific/Choice構造中為控制項的屬性設定值。也就是說你可以在每個＜Choice＞元素中為控制項對應不同的裝置篩選條件設定不同的屬性值。例如我們在前面的樣本中設定了四個裝置篩選條件(其中一個是預設的)，如果你在＜Choice＞元素中為每個裝置篩選條件都設定了不同的label控制項的Text屬性。那麼當某個裝置篩選條件返回true值的話，那麼在該裝置篩選條件對應Text屬性文本值就會重寫其他裝置篩選條件中的Texe屬性文本值。
xmlns	該屬性一般是不用開發人員來指定的，Visual Studio 2005會自動檢測模板中使用的是什麼標記語言，而後Visual Studio 2005就會將該屬性插入到相應的＜Choice＞元素中。所以網站無需直接對該屬性進行操作，你也沒有必要為該屬性賦值。
Template elements	使用這個屬性指定一些模板化的控制項－例如Form、Panel、List和ObjectList控制項，它允許頁面在呈現時將你定義的內容整合到這些控制項中。

　　你可以在＜DeviceSpecific＞元素中使用一個不指定Filter屬性的＜Choice＞元素， 這就是我上面所說的預設的＜Choice＞元素。你也可以不定義這樣一個預設的＜Choice＞元素，但是一旦你定義的話，就一定要將該預設的元素放置在整個＜Choice＞元素列表的最末端。這是因為ASP.NET是按順序來鑒別＜Choice＞元素的，當某個特定的裝置請求移動Web頁面時，將會應用第一個返回true的＜Choice＞元素。而預設的＜Choice＞元素總是返回true值，所以放置到整個元素列表最前面的話就將導致其他的＜Choice＞元素失效。

　　列表列舉了使用＜Choice＞元素的不同方法，在本樣本中使用它來進行屬性重寫和定義＜HeaderTemplate＞和＜FooterTemplate＞(這些都是Form控制項中常用的模板)。

＜%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="C#" %＞ ＜%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜mobile:Form runat="server"＞ ＜DeviceSpecific＞ ＜Choice Filter="isHTML32"＞ ＜!-當裝置支援HTML 3.2標記語言時，使用兩個模板構建頁面，且在頁首模板中使用圖片--!＞ ＜HeaderTemplate＞ ＜table width="100%" height="100%" cellspacing="1"＞ ＜tr＞＜td bgcolor="#003366"＞ ＜img src="http://www.webjx.com/htmldata/2006-10-16/sportsextra.gif"＞ ＜/td＞＜/tr＞ ＜tr＞＜td bgcolor="#cccccc" valign="top" height="100%"＞ ＜/HeaderTemplate＞ ＜FooterTemplate＞ ＜/td＞＜/tr＞ ＜tr＞＜td bgcolor="#003366" height="4"＞＜/td＞＜/tr＞ ＜/table＞ ＜/FooterTemplate＞ ＜/Choice＞ ＜Choice＞ ＜!-預設的元素。當裝置不支援HTML 3.2標記語言時，只在頁首模板 中使用SPORTS EXTRA!文本--!＞ ＜HeaderTemplate＞ ＜mobile:Label runat="server" StyleReference="title" Text="SPORTS EXTRA!" /＞ ＜/HeaderTemplate＞ ＜/Choice＞ ＜/DeviceSpecific＞ ＜mobile:Label runat="server" Font-Size="Small" Font-Name="Arial"＞ Welcome to our mobile Sports Extra Web site. Check here for up-to-the minute sports news as it happens! ＜DeviceSpecific＞ ＜Choice Filter="isWML11" Text="Welcome to LIVE results!"/＞ ＜!-當裝置支援WML 1.1標記語言時，Label控制項的Text屬性值為"Welcome to LIVE results!"--!＞ ＜Choice Filter="isCHTML10" ForeColor="Red" Text="Welcome to LIVE results!"＞ ＜!-當裝置支援的是CHTML 1.0標記語言時，Label控制項的Text屬性值依然為 "Welcome to LIVE results!"，但是字型的顏色是紅色--!＞ ＜/Choice＞ ＜/DeviceSpecific＞ ＜/mobile:Label＞ ＜/mobile:Form＞

　　下面是網站程式的Web.Config檔案中定義的裝置篩選條件：

＜configuration＞ ＜system.web＞ ＜deviceFilters＞ ＜filter name="isHTML32" compare="PreferredRenderingType" argument="html32" /＞ ＜filter name="isWML11" compare="PreferredRenderingType" argument="wml11" /＞ ＜filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10" /＞ ＜/deviceFilters＞ ＜/system.web＞ ＜/configuration＞

　　Form控制項中包含一個＜DeviceSpecific＞元素，如果用戶端裝置支援HTML 3.2，那麼就會在Form控制項中插入一個HeaderTemplate(頁首模板)和一個FooterTemplate(頁尾模板)，並且這兩個模板中的HTML標記合起來就使得該頁面形成一個表格版面配置。在這個表格中我們使用了＜img＞HTML標籤將一幅圖片填充到表格的第一行。

　　對位於Form控制項中的DeviceSpecific/Choice構造的第二個＜Choice＞元素，並不存在Filter屬性，所以它就是預設的＜Choice＞元素。如果對當前的請求isHTML32裝置篩選條件返回的是false值，那麼程式將使用僅包含一個Label控制項的＜HeaderTemplate＞來呈現頁面。

　　除此之外，Form控制項中還包含了一個使用DeviceSpecific/Choice構造的Label控制項，而使用DeviceSpecific/Choice構造的主要目的就是屬性重寫。Label控制項預設狀態下的文本值為一段長的字串"Welcome to our mobile Sports Extra Web site. Check here for up-to-the minute sports news as it happens!"。然而，在一些小螢幕的裝置來說，例如支援WML 1.1，CHTML 1.0標記語言的裝置(也就是說對isWML11、isCHTML10裝置篩選條件來說返回true)，上述的字串將縮短為"Welcome to LIVE results!"。而且在i-mode的裝置(就是支援CHTML 1.0的裝置)上，Text屬性和ForeColor屬性均被重寫。

　　下面兩圖分別是上述程式在Pocket Internet Explorer和openwave模擬程式中的實際顯示效果。從圖可以看出，在Pocket Internet Explorer中，頁面的布局是採用表格的形式，而且因為Pocket Internet Explorer支援HTML 3.2標記語言，所以DeviceSpecific/Choice構造的第一個＜Choice＞元素返回true值，為此會使用＜HeaderTemplate＞和＜FooterTemplate＞兩個模板，並且label控制項顯示的是長字串文本。

　　

　　使用屬性重寫為自訂特定裝置的呈現

　　屬性重寫是一種在DeviceSpecific/Choice構造中為不同的用戶端裝置設定不同的控制項屬性值的方法，也就是說可以根據不同的裝置進行不同的呈現。

　　每個ASP.NET行動控制項都可以包含一個DeviceSpecific/Choice構造。在＜DeviceSpecific＞元素中的每個＜Choice＞元素依次進行鑒別，而第一個鑒別為true的＜Choice＞元素將應用到包含該構造的控制項上。在上一篇文章《裝置篩選條件的定義及實現》中，我曾經舉了一個使用屬性重寫的具體的執行個體，就是使用image控制項為特定的行動裝置呈現該裝置支援格式的圖片，代碼如下：

＜mobile:Image runat="server" id="myImages" AlternateText="Northwind Corp."＞ ＜DeviceSpecific＞ ＜Choice Filter="isHTML32" ImageUrl="Northwindlogo.gif"/＞ ＜Choice Filter="isWML11" ImageUrl="Northwindlogo.wbmp"/＞ ＜/DeviceSpecific＞ ＜/mobile:Image＞

　　當用戶端裝置請求包含該控制項的頁面時，ASP.NET會自動使用該裝置對應的MobileCapabilities對象來解析＜Choice＞元素。如果isHTML32返回true的話，那麼image控制項就將使用Northwindlogo.gif進行呈現。如果isWML11返回true，就使用Northwindlogo.wbmp圖片。如果上述的兩個裝置篩選條件均不為true 的話，那麼ImageUrl屬性就處於未定義狀態，也就是說將使用image控制項的AlternateText屬性值"Northwind Corp."文本進行替代。

　　提示：在image控制項中使用的兩個裝置篩選條件均已經在Web.Config檔案中進行了定義，如果你的網站程式還沒有Web.Config檔案的話，可以在"方案總管"中通過右鍵菜單的"添加新項"－"移動Web設定檔"方式手動進行添加。

　　在上面的樣本中示範了DeviceSpecific/Choice構造的基本用法：如果特定的裝置篩選條件為true的話，將對包含該構造的控制項進行屬性重寫。屬性重寫主要可以用來實現：

　　1. 使用不同的圖片檔案：當一個用戶端裝置支援不同的圖片格式，你可以採用屬性重寫實現選擇何種圖片進行呈現。

　　2. 因為裝置顯示屏大小而對字串進行調整：你可以在一些大螢幕的裝置上使用長字串，而在小螢幕的裝置使用縮減的字串。

　　3. 支援多語言的程式：你可以根據用戶端裝置使用的慣用語言，為控制項的Text屬性設定以該語言對應的文本。

　　4. 為特定裝置自訂樣式屬性：當用戶端裝置在呈現控制項時，ASP.NET會根據該裝置支援的特性使用不同的字型或顏色。除此之外，你還可以為特定的裝置使用不同的樣式屬性。 在下一篇文章中將會介如何使用DeviceSpecific/Choice構造和樣板化控制項，為用戶端裝置使用特定的標記語言。

　　在Visual Studio 2005中採用可視化的方式定義屬性重寫

　　Visual Studio 2005提供了一種可視化的方式來定義和應用裝置篩選條件，屬性重寫也不例外。當你想為某個控制項應用屬性重寫時必須首先為該控制項應用一個裝置篩選條件。給控制項應用裝置篩選條件我在前面已經介紹過了，為了你鞏固前面的知識，這裡就將實現屬性重寫的整個過程均列舉出來：

　　1. 通過"檔案"－"建立網站"－"ASP.NET網站"建立一個網站。

　　2. 刪除"Default.aspx"檔案，在"方案總管"中通過右鍵菜單的"添加新項"－"移動Web表單"命令添加一個ASP.NET 移動頁面。

　　3. 依然在"方案總管"中通過右鍵菜單的"添加新項"，通過"移動Web設定檔"為網站添加一個已包含若干個裝置篩選條件的Web.Config檔案。

　　4. 拖拽一個Label控制項中Form控制項中，選中Label控制項，並在屬性視窗的(AppliedDeviceFilters)項處點擊右側的省略符號按鈕。
　　
　　5. 在彈出的"已應用的裝置篩選條件"對話方塊中，通過選擇"可用的裝置篩選條件"下拉式清單方塊的各項將你想添加的裝置篩選條件通過"添加到列表"按鈕逐個添加到"已應用的裝置篩選條件"列表中，最後點擊"確定"按鈕，這樣就為該控制項應用了裝置篩選條件。下圖是我在該樣本中添加的4個裝置篩選條件。

　　6. 選中Label控制項，在屬性視窗的(Property Overrides)項右側點擊省略符號按鈕，這時會彈出"屬性重寫"對話方塊。

　　

　　7. 我們可通過"已應用的裝置篩選條件"下拉式清單來查看該控制項當前已應用的裝置篩選條件，現在我們就先選擇isPocketIE("")為該裝置篩選條件設定屬性重寫，在本例中我們僅對該控制項的Text屬性進行重寫，為此我們可用在Text屬性處填寫"使用isPocketIE裝置篩選條件進行屬性重寫"。各個裝置篩選條件的Text屬性設定如下：

　　

　　

　　
　　
　　8. 為Label控制項設定好各個裝置篩選條件的屬性重寫後，當用戶端裝置請求該頁面時，如果瀏覽器是Pocket Internet Explorer的話，Label控制項上將顯示"使用isPocketIE裝置篩選條件進行屬性重寫"文本。如果是支援html 3.2標記語言的瀏覽器，Label控制項上顯示的是"使用isHTML32裝置篩選條件進行屬性重寫"。

　　該頁面最終的代碼如下：

＜mobile:Form id="Form1" runat="server"＞ ＜mobile:Label ID="Label1" Runat="server"＞ ＜DeviceSpecific＞ ＜Choice Filter="isPocketIE" Text="使用isPocketIE裝置篩選條件進行屬性重寫" /＞ ＜Choice Filter="isHTML32" Text="使用isHTML32裝置篩選條件進行屬性重寫" /＞ ＜Choice Filter="isCHTML10" Text="使用isCHTML10裝置篩選條件進行屬性重寫" /＞ ＜Choice Text="使用預設的裝置篩選條件進行屬性重寫" /＞ ＜/DeviceSpecific＞ ＜/mobile:Label＞ ＜/mobile:Form＞