Mobile Controls - Device Specific Rendering

by the3factory 3/17/2008 10:45:00 PM

Recently, I got a chance to do some analysis on the ASP.NET 2.0 Mobile Controls. I was doing some R&D on the rendering behavior of the mobile controls, trying to generate a similar user interface with the same page for WML as well as HTML specific devices. For example: I designed a page called AddExpense.aspx that displays two textboxes and a dropdown list box. This page allows the users to add the expense details including expense date, expense amount and the expense type.

The following is the output of the AddExpense.aspx page on the HTML as well as WML specific device emulators. The user interface generated by this page is quite different on both the devices, as shown below:


*HTML Specific Device*		*WML Specific Device*

I had some idea that WML specific devices have some limitations in terms of custom rendering support. Actually, WML i.e. Wireless Markup Language has a support for limited elements only as compared to HMTL that has very rich support. So, one thing is obvious that getting a similar user interface for both devices is something next to impossible.

In fact, the best design would be to provide best possible useable screens for both the devices without putting in much design effort. Obviously, its makes sense to leverage the power of rich HTML rendering for HTML specific devices and to provide a better useable interface for WML specific devices. So, it means that the container page should be aware of the underlying device to which it will be rendering the content. Therefore, there has to be some mechanism to provide the capabilities of the underlying device to the container page.

The .NET Framework 2.0 provides an in-built type, called DeviceCapability. In fact, all ASP.NET 2.0 mobile controls use this in-built DeviceCapability feature to detect the underlying device and render the device-specific content. For example, the mobile control SelectionList uses this feature to render differently i.e. as dropdown list in HTML specific devices and as radio button collection in WML specific devices. The DeviceCapability type is similar to the BrowserCapability type that exposes the capabilities of the underlying browser to the Web Controls and Web Pages, thus allowing them to render the browser-specific content.

Therefore, the DeviceCapability feature can be leveraged to control the rendering behavior based upon the underlying devices. The NET Framework 2.0 also provides the device specific filters that can be used to filter content for specific devices. The following html code demonstrates the use of the isWML11 and isHTML32 built-in filters to control the rendering output.

<mobile:Panel ID="Panel1" runat="server">

<mobile:DeviceSpecific ID="DeviceSpecificControl" Runat="server">

</ContentTemplate>

</Choice>

</ContentTemplate>

</Choice>

</mobile:DeviceSpecific>

</mobile:Panel>

Similarly, we can use the other filters like isNokia7110 for a specific device and filters like supportsCookies, supportsJavaScript, etc to render related content. There are around 18 filters that are by default provided by the .NET 2.0 Framework. You can even write your own custom filters. Before using any filter it must be defined in the Web.Config file under the system.web section as shown below:

</deviceFilters>

Let’s go back to the example of AddExpense.aspx page. Now, with the knowledge of DeviceCapability support, let us modify the AddExpense.aspx page to render content that can:
• Leverage the power of rich HTML elements for HTML specific devices.
• Provide a better usability for WML specific devices.

Since, WML specific devices have limited width, it is recommended to render each mobile control in a separate line, thus providing better readability and enhanced usability. For HTML specific devices, assume that the controls will be rendered in a table with a proper heading and a border.

So, in order to accomplish the above requirement, we will use the DeviceCapability filters isWML11 and isHTML32 and will render the related content in their corresponding ContentTemplate. The ContentTemplate for isWML11 filter will render the line breaks whereas the ContentTemplate for isHTML32 filter will render the table tags. The following code snippet demonstrates the use of both the filters to accomplish the desired rendering behavior:

<mobile:Panel ID="Panel1" runat="server">

<mobile:DeviceSpecific ID="device1" Runat="server">

<tr><td colspan="2">ADD EXPENSE</td></tr>

</ContentTemplate>

</Choice>

</mobile:DeviceSpecific>

</mobile:Panel>

<mobile:Label id="lblDate" runat="server" Text="Date"></mobile:Label>

<mobile:Panel ID="Panel2" runat="server">

<mobile:DeviceSpecific ID="DeviceSpecific1" Runat="server">

</td><td width="50%">

</ContentTemplate>

</Choice>

</ContentTemplate>

</Choice>

</mobile:DeviceSpecific>

</mobile:Panel>

<mobile:TextBox ID="txtDate" Runat="server" Size="7"></mobile:TextBox>

<mobile:Panel ID="Panel3" runat="server">

<mobile:DeviceSpecific ID="DeviceSpecific2" Runat="server">

</td></tr>

</ContentTemplate>

</Choice>

</ContentTemplate>

</Choice>

</mobile:DeviceSpecific>

</mobile:Panel>

Similarly, the complete content can be rendered as demonstrated above. The following is the output of the AddExpense.aspx page on the HTML as well as WML specific device emulators after applying the device specific filters. The user interface generated for both the devices are quite impressive and provide better usability.