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>
<!-- WML 1.1 Specific Content -->
</ContentTemplate>
</Choice>
<Choice Filter="isHTML32">
<ContentTemplate>
<!-- HTML 3.2 Specific Content -->
</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 <deviceFilters> 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: