Support Mobile Devices in ASP.NET (Advances Topics)

In the last article, I explained the basics of supporting mobile devices in ASP.NET. After reading that article, I hope you would have grasp the basics of writing mobile pages and using mobile controls for developing mobile specific web sites.

After reading this article, the reader must be having knowledge of:

How to customize pages by device type.
How to support CSS (Cascaded Style Sheets) in mobile pages.
How you can make user friendly mobile sites.

How to customize mobile pages by Device Type

We discussed in the last article that ASP.NET renders customized output for different browsers. However, if you are including complex web controls like Calendar or you are involving graphics in your pages, you have to build some special logic since many mobile devices do not support all the features. It is an easy process to detect exact capabilities of a mobile device by using MobileCapabilities class. This class is enriched with number of properties. Using these properties, we can get such capabilities of devices as screen dimensions, JavaScript & VBScript support. Some of these properties are:

ScreenCharactersHeight	Specifies the screen's height of mobile device (in characters)
ScreenCharactersWidth	Specifies the screen's width of mobile device
JavaScript	True value of this property specifies the device supports JavaScript.
SupportCSS	Whether the device supports Cascading style sheets
HasBackButton	True when the device has Ã¢â‚¬~back' button.
CanSendEmail	True if the device can send email.
IsColor	False value specify that the device does not support color
Cookies	Whether the device supports Cookies.

In traditional ASP.NET pages, the same role is played by BrowserCapabilities class. Request.Browser is an object of this class and can be used in the following way:

HttpBrowserCapabilities bc = Request.Broswer;
Response.Write (Ã¢â‚¬oName of your browser is:Ã¢â‚¬? + bc.Browser);

Using this knowledge, Can you guess how to use Request.Broswer in mobile pages? Code bellow shows its use.

<% Page Inherits="System.Web.UI.MobileControls.MobilePage" Language ="C#" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<%@ Import Namespace ="System.ComponentModel" %>
<script runat ="sever">
protected void Page_Load ( Object Sender, EventArgs e )
{
  if (! IsPostBack)
  {
    PropertyDescriptorCollection p = TypeDescriptor.GetProperties(Request.Browser);
    Capabilities.DataSource = p;
    Capabilities.DataBind();
  }
}
protected void PropertyStatus (Object Sender, ListCommandEventArgs e)
{
  String property_name = e.ListItem.Text;
  PName.Text = property_name;
  PValue.Text = DataBinder.Eval (Request.Broswer, property_name, "{0}");
  ActiveForm = Form2;
}
</script>
<mobile:Form runat = "server" Paginate = "True">
    <mobile:List runat = "server" id = "Capabilities" DataTextField ="Name" OnItemCommand = "PropertyStatus" />
</mobile:Form>
<mobile:Form runat ="server" id ="Form2">
    <mobile:Label runat ="server" id ="PName"/>
    <mobile:Label runat = "server" id = "PValue"/>
</mobile:Form>

TypeDescriptor object is used to collect complete list of properties by using GetProperties method. In this case, all properties returned by the Request.Browser are collected by this object and assigned to "p". The List would display all the properties which Request.Browser returns. This is done by binding this list to "p". The PropertyDescriptorCollection contains a property Name to access the name of each target object's properties. To bind the list control to "p", DataTextField property has been named as Name.

In short, Request.Browser enlists many properties of the device which is stored in the object of PropertyDescriptorCollection. To bind this object with the list control, you have to name the DataTextField property of control as Name.

Listing above is useful when you want to analyze many capabilities of device. If you want to check a capability such as VBScript support, the HasCapability of Request.Browser can be used in the following way:

if (Request.Browser.HasCapability ("VBScript", "false"))
{
// Do not render VB Script functions then. Use some alternative
}

There is another method which relies on defining device filters in web.config file and later using this file. I assume the method described above suffices developers need for checking device capabilities.

Using Cascading Style sheets in mobile pages

By using StyleSheet Control and mobile web control attributes, custom styles can be applied easily in ASP.NET. Below are some mobile web controls:

Font-Size	Specifies the size of font to be displayed
Font-Name	Specifies the name of font to be displayed like Verdana, Arial etc
BackColor	Color of background
StyleReference	would be explained in next code listing

The StyleSheetControl contains many style sets. Each set can specify the Foreground color, name, size etc of the text. When in a form, StyleReference is assigned a particular style set; this means the text in that form would be displayed using the defined font specifications in Style set. To experience a concrete example, see code listing bellow:

<% Page Inherits="System.Web.UI.MobileControls.MobilePage" Language = "C#" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly = "System.Web.Mobile" %>
<mobile:StyleSheet runat ="server">
  <Style name ="style1" Font-Name ="Arial" BackColor ="Grey" Font-Size ="Large" />
  <Style name ="style2" Font-Name = "Arial" BackColor ="Grey" ForeColor ="red" />
</mobile:StyleSheet >
<mobile:Form runat ="server" StyleReference ="style1" >
  <mobile:TextView StyleReference ="style2" >
  Try this code on two different emulators
  </mobile:TextView>
</mobile:Form>

This is not encouraging to know that many mobile devices do not support CSS. We would wait for advancement in features that common mobiles have. As I said before, ASP.NET offers many powerful features to develop mobile pages. However, Mobiles are generally lacking features like Graphics, JavaScript, Cookies, CSS support etc.

Developing User Friendly Mobile Pages:

In any system, be its software or else; usability of the system is key. Increasing the usability of your product should be a main design consideration.

First thing is, you should understand the ViewState control. By enabling the ViewState property, values of other controls are preserved and displayed when the same page is rendered again. For example, if you have enabled ViewState for all controls in user registration page, all the values of controls (e.g. value for User name text field, Gender's check box) would be preserved if the page shows some input error (like user name already taken) and is rendered again. All the values that you have entered before would be there in their respective fields. All the values of controls are stored in one hidden field which is for ViewState and is named as _VIEWSTATE. It would be something like:

The value is encrypted value of all controls. Now, I discuss mobile pages in specific The problem is, mobile devices transmit information at very slow rate. Using ViewState this way would slow down performance of your mobile pages significantly. ASP.NET mobile handles this issue by storing View State in Session. But the problem is, ASP.NET session uses cookies and many mobile devices do not support cookies. One possible solution is the use of HiddenVariables collection of Form class. This collection can be stored to keep information about the users. The information can be stored and retrieved in the same way as we deal with Session object. That is,

Session ["ValidUser"] = true;

An example is:

Form.HiddenVariables ["Username"] = Name1.Text;
String uname = (String) Form.HiddenVariables ["Username"];

In short, Use HiddenVariables collection of Form class instead of ViewState in session.

There are many things which are common across diversity of mobiles. Every mobile device contains a Back button and scroller to scroll through the contents of the page. Alphanumeric input is difficult in almost all mobile devices. User friendly sites can be made using knowledge of common features.

Developing a website with multiple small pages rather than one lengthy page is good option. Users would not mind pressing Back button to select and access other link but scrolling down to browse through a page seems a hectic task. So, divide your homepage in logical divisions.

Some mobile devices do not render graphics. Try avoiding the graphics which are essential for understanding the page. Text-Only mobile phones would skip graphics.

One emphasis that I made previously about the power of ASP.NET in developing mobile pages is not always true. In real world scenario, there are mobiles carrying different capabilities. There are mobiles which do not support JavaScript, Cookies etc while ASP.NET offers different features to make use of them. Similarly, you can create mobile pages that can use different technologies like ADO.NET, XML, Web services etc.

Summary

It is an easy process to detect exact capabilities of a mobile device by using MobileCapabilities class.
Request.Browser enlists all capabilities that a mobile can have.
CSS may not be supported across all mobiles.
ASP.NET supports CSS using Mobile Web Controls and StyleSheet Control.
Use HiddenVariables collection of Form class instead of ViewState in session.
Developing a website with multiple small pages rather than one lengthy page is good option.
Try avoiding the graphics which are essential for understanding the page
Newest informations and best practices you can find on ASP.NET Mobile web site.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback |