Control Device-Specific Rendering

You can control the appearance of your mobile controls by using the DeviceSpecific class. Within it you can set multiple Filters, by which you intend the filtering. As we reviewed in the post before, ASP.NET comes with a predefined dictionary of mobile capabilities (as well as browser capabilities). These capabilities are listed in your machine.config file, and you can extend them in the web.config of your application. We’ve also learned to implement a custom filter.

What needs to be told is that there are two different type of device filters. The first one is based on a method, and has the following signature:

<filter name=”isIE” type=”Namespace.Class, Assembly” method=”methodName”/>

Where methodName is a name of a static method returning a Boolean value and taking a MobileCapabilities and a string argument. The other type of filter is based on comparsion, and defined like this:

<filter name=”isHTML32” compare=”PreferredRenderingType” argument=”html32”/>

It simply compares the MobileCapabilities object specified in the compare attribute with the value of the argument attribute. You should note that the names given to device filters are case-sensitive. Therefore isHTML32 and IsHTML32 are two different device filters.

After you’ve defined your custom device filters, you’d probably like to use them. They have the following benefits:

  • Override properties of controls (such as displaying different images for different devices.
  • Using different rendering styles for different mobile devices.
  • Using templates for richer rendering on devices such as the Pocket PC.
  • To use them, consider the following syntax:

    <mobile:Label Runat=”server” ID=”Label1”>
        <DeviceSpecific>
            <Choice Filter=”isIE” Font-Family=”Arial”/>
            <Choice Filter=”isHTML32” Font-Family=”Times New Roman”/>
        </DeviceSpecific>
    </mobile:Label>

    As you can see, a tag named DeviceSpecific can be nested within a mobile control. This DeviceSpecific tag (which is a class with the same name) can host multiple Choice tags. These filters will be evaluated at runtime, and ASP.NET will choose the first matching one. If no matches found, the default value will be used, for example:

    <mobile:Image Runat=”server” ID=”Logo”>
        <DeviceSpecific>
            <Choice Filter=”IsHtml” ImageUrl=”Logo.gif”/>
            <Choice Filter=”IsWbmp” ImageUrl=”Logo.bmp”/>
            <Choice ImageUrl=”Logo.jpg”/>
        </DeviceSpecific>
    </mobile:Image>

    If the requesting device is an HTML-enabled device, we will see the gif image. If it’s a WBMP device, we’ll see the bmp, else we see the jpg. It is very important that the value specified in the Filter attribute must match with a deviceFilter’s name in the web.config.

    When you are working with template controls, you can do even more! Within a Choice section, you can define a template for the current control, such as the mobile:List control.

    Further Readings

    Device-Specific Rendering
    ASP.NET Device Filtering Overview
    deviceFilters element

    Advertisements

    Tags: , ,

    2 responses to “Control Device-Specific Rendering”

    1. Nemesis says :

      I’m looking forward to getting more information about this topic, don’t worry about negative opinions.

    2. highvoltz says :

      It is useful to try everything in practice anyway and I like that here it’s always possible to find something new. 🙂

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out /  Change )

    Google photo

    You are commenting using your Google account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s

    %d bloggers like this: