Summary: Mobile DeviceSpecific rendering is achieved by the use of 3 things:

The use of DeviceSpecific/Choice statements within any mobile: tag with filter attributes  pointing back to either filter methods on the same page with a signature of bool(MobileCapabilities, string), or config file defined filters (Comparison or Evaluation syntax)  The DeviceSpecific Declarative Tag: The DeviceSpecific declarative tag is accepted within any mobile: tag...(admittedly, I haven't use Reflector to see how this atypical parsing is achieved). To get a grip on how it works, think of it as a declarative Switch/Case syntax, that uses the Filter attribute to name the filter to use -- which was previously set up in the web.config file.

Remarks:

You don't need to prepend it with mobile: You use the Filter attribute to refer back to named Filters already defined in the config file. You can set more than one property at a time. Notice how below, the first Choice is setting two properties (Font-Italic and Text). mobile:Form ID="Form1" Runat="server"> mobile:Label ID="Label1" Runat="server"> DeviceSpecific> Choice Filter="IsMobile" Font-Italic="True" Text="On a Mobile!"/> Choice Filter="IsIE" Font-Name="Arial Black" Font-Size="Large" Text="In IE..."/> DeviceSpecific> mobile:Label> mobile:Form>

Or more complex:

mobile:Panel ID="Panel1" runat="server"> mobile:DeviceSpecific ID="DeviceSpecificControl" Runat="server"> Choice Filter="isWML11"> ContentTemplate> ContentTemplate> Choice> Choice Filter="isHTML32"> ContentTemplate> ContentTemplate> Choice> mobile:DeviceSpecific> mobile:Panel>

You might want to remember this example as well...just might come up on a test someday:

mobile:Image runat=server ImageURL="bw.gif"> DeviceSpecific> Choice Filter="canDoColor" ImageURL="colorImg.gif" AlternateText="This device cannot display the image." /> Choice Filter="isWML11" ImageURL="myImage.wbmp" /> Choice ImageURL="bwImage.gif" /> DeviceSpecific> mobile:Image>

 

The Filter Attribute of the DeviceSpecific tag: The point is...that the Filter attribute is used to to define the test used to choose between the different Choices.

The Filter attribute value must be either:

the name of a method on the page or associated *.ascx file, or the name of a valid device filter defined in the element of the Web.config file.  

Filter Methods on the Page: If you decide to provide a method in the page directly, it must fit the expected signature:

//using System.Web.Mobile; public bool isColor(MobileCapabilities capabilities, string optionalArgument) { return capabilities.IsColor; }

 

Filters Defined in the Config File: Alternatively (and preferable to defining methods in the page as it allows a more centralized management of filters) you can define the filter in the config file.

The filter definition can be either for a Comparison Based Filter, or an Evaluation Based Filter.

An example of a Comparison Based Filter, with a syntax of filter name="capability" compare="capabilityName" argument="argument"/> ,would be the following, which compares  the MobileCapabilities.Browser property against the value 'true':

configuration> system.web> deviceFilters> filter name="canDoColor" compare="IsColor" argument="true"/> deviceFilters> system.web> configuration>

An example of a Evaluation Based Filter, with a syntax of filter name="capability" type="className" method="methodName"/>, would be something like:

configuration> system.web> deviceFilters> filter name="canDoColor" type="MyMobileTests" method="IsColor"/> deviceFilters> system.web> configuration>

 

Config File Filters: The following are examples you can use to get started:

deviceFilters> filter name="isWML11" compare="PreferredRenderingType" argument="wml11" /> filter name="isHTML32" compare="PreferredRenderingType" argument="html32" /> filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10" /> filter name="isMyPalm" compare="Browser" argument="MyPalm" /> filter name="isPocketIE" compare="Browser" argument="Pocket IE" /> filter name="isJPhone" compare="Type" argument="J-Phone" /> filter name="isEricssonR380" compare="Type" argument="Ericsson R380" /> filter name="isNokia7110" compare="Type" argument="Nokia 7110" /> filter name="supportsColor" compare="IsColor" argument="true" /> filter name="supportsCookies" compare="Cookies" argument="true" /> filter name="supportsJavaScript" compare="Javascript" argument="true" /> filter name="supportsVoiceCalls" compare="CanInitiateVoiceCall" argument="true" /> deviceFilters>



Links:

http://msdn.microsoft.com/en-us/library/hkx121s4.aspx http://www.dotnetforce.com/Content.aspx?t=a&n=244 http://blogs.msdn.com/gurbir/archive/2006/07/26/Gurbir-Singh-Sethi.aspx

...

Read More »