top
Loading...
ASP.NET2.0移動開發之設備篩選器的應用
在前面的文章中我曾經介紹過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="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>
作者:http://www.zhujiangroad.com
來源:http://www.zhujiangroad.com
北斗有巢氏 有巢氏北斗