Home
    Shop
    Advertise
    Write For Us
    Affiliate
    Newsletter
    Contact

How to make ASP.NET Applications that support mobile devices

Mobile Devices such as cell phones with web access and Personal Digital Assistants (PDA's) are becoming more common. The infrastructure that supports "Wireless web " is becoming larger and more reliable with the advent of time. There is clear indication that mobile users would keep on growing at tremendous rate.

 

In this scenario, there are good opportunities for developing web pages special to these mobile devices, so that they can make a good use of technology. However, this idea is not liked by many developers. The main reason being the cost of adding extra pages to their web site. Especially, if we look at cellular phones, they use a different standard called "Wireless Markup Language " (WML) for consuming web pages. And we know that developing WML pages would take extra effort on developer's side and hence more cost.

So, what's different that ASP.NET offers to Internet applications for Mobile Devices? By using ASP.NET Mobile Software Development kit (Mobile SDK), a developer can create web pages with the same norms and constructs that are required for building any traditional page.

This article is aimed to explore some dimensions of ASP.NET Mobile SDK. At the end of this lesson, a reader should have the idea of:

  1. How Mobile devices differ in their capabilities in real time scenario.

  2. How to write ASP.NET mobile pages that can be used by mobile devices.

  3. Using different ASP.NET Mobile Controls

Variance across different mobile devices

There is inherent difficulty while we deal with mobile devices. They have limitations and constraints. Some of them can use JavaScript and many of them do not. Some of them can display HTML pages but most cell phones can not. They have to rely on WML standard for accessing web. So, making a website that supports all of these devices is difficult.

When you study their limitations in details, you would come to know that designing PDA accessible websites is relatively easy. Because:

1. PDA's can render HTML pages and display many existing websites without problems.
2. Many of them support JavaScript.
3. Many of them support cookies and Image files.
4. However, their main limitation is smaller screen than normal PC's have. On the contrast, dealing with cellular phones is not very easy. Reasons being:
5. Many cell phones can't render HTML pages.
6. There are some high-end cellular phones which can render HTML but they can support only a limited subset of HTML standard.
7. Many of them do not support JavaScript, Cookies or Image files.

What is WML & XML?

Generally, cell phones can consume WML files only. WML is Wireless Markup Language which is based on XML (eXtensible Markup Language). XML in contrast to HTML supports user defined tags. It supports a natural way of representing data. XML files have schema associated with them which tells the structure in which these files are made up of. Do not worry if you don't know XML in detail. However, you are encouraged to take a look at it ( www.w3schools.com ).

The code below shows a sample WML page.

 

<? xml version= "1.0 ">
<! DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN "
"http://www.wapforum.org/DTD/wm1_1.1.xml ">
  < wml >
  < card >
    <p class="ArticleText">Welcome to ASP.NET mobile device programming</p>
  </card>
</wml>

 

The first line is the standard XML header which is present in all WML pages.

The next two lines specify the schema for this WML file. These three lines are integral in every WML page. Every WML page consists of <wml> tags. WML files are made up of cards each which can embed different html tags inside. In Listing 1.1, output is generated under one tag only.

Rendering: ASP.NET renders WML files automatically (so you do not have to write WML files explicitly). It detects the nature of caller; cellular phone or PDA. Since PDA can not render WML pages, ASP.NET handles such problems by controlling rendering of pages itself.

Emulator Programs: You can test the pages you develop in standard web browser, but it would not give a realistic picture of what you have developed. To resolve this problem, some emulators have been developed. They simulate a cell phone or PDA on desktop of your PC so that it can be treated as virtual mobile device. You should use emulators to test the web pages you design for mobile devices.

Two emulators have been developed by Microsoft. One is for Cellular phones and the other one is for PDA's. Download them and install them before testing your pages (This would be the most time consuming task in your learning).

Creating ASP.NET Mobile Web pages

Now, we discuss the main theme of this article. How you can create mobile web pages (generally called web forms in ASP.NET environment). The code below displays a simple message for any mobile device. Note that ASP.NET Mobile library classes have to be included in every mobile web page. These classes define mobile web controls.

 

<% Page Inherits= "System.Web.UI.MobileControls.MobilePage " Language= "C# "%>
<%@ Register TagPrefix= "mobile " Namespace= "System.Web.UI.MobileControls " Assembly= "System.Web.Mobile " %>

<mobile: Form runat= "server ">
<mobile: TextView runat= "server ">Welcome
</mobile: Form>

 

The first two lines include MobilePage class, which contains definitions of stock mobile classes. The next four lines specify namespace, which defines the mobile controls. All you have to do is include Lines 1-6 in every mobile web page that you design. The TextView displays simple Text messages. Each mobile web form corresponds to single page displayed on mobile device. You can keep one form per page. But a better way is to use multiple forms per web page. To display the other forms, you have to append the second form's ID property to the URL using the # character. There are two benefits of using multiple forms per page.

  1. Overall, you would need a smaller no. of files.

  2. All related screens can be placed in one file as the code below will show.

 

<% Page Inherits= "System.Web.UI.MobileControls.MobilePage " Language= "C# " %>
<%@ Register TagPrefix= "mobile " Namespace= "System.Web.UI.MobileControls " Assembly= "System.Web.Mobile " %>

<mobile: Form runat= "server " id= "form1 ">
<mobile: TextView runat= "server " >
</mobile: TextView>
<mobile: Link runat= "server " NavigateURL= "#form2 "> Check what experts say</mobile: Link>
</mobile: Form>

<mobile: Form runat= "server " id= "form2 ">
<mobile: TextView runat= "server " >Great technology!!!</mobile: TextView >
</mobile: Form>

 

In the code above, the first form (form1) is linked to the second form (form2) by using NavigateURL property and by appending form2's id to the link preceded by #. Whenever you connect two different forms on a same page, this is standard procedure. You can also set the ActiveForm property of the page to achieve the same goal.

ASP.NET Mobile Web Controls

Mobile Programming involves many controls that are used to deal with the input/output data and presenting it. Some of these controls are the same you normally use in traditional ASP.NET programming. I am giving a short list of mobile controls along with their description.

TextView

Description: Used to display simple text messages on the screen.

Example: See its use in Listing 1.2 & 1.3

Label

Description: Displays strings on the screen. Its value can be set dynamically.

Example:

if (age<21)

MyLabel.text = " Under 21 "

List

Description: It is used to display a bulleted list of items which users can select. When the user selects an item, an ItemCommandEvent is sent which can be handled programmatically.

Example: See the coming example (Listing 1.4).

SelectionList

Description: It displays a list of items and it can also be populated with the server code.

ObjectList

Description: To display the user defined items, this control is used. Complex list items can be handled using this control.

Input Controls:

There are some controls for getting input from the user. These include a button (which appears as a link of cell phones), TextBox (which allows user to enter alphanumeric values), and a link.

Validation Controls:

All Validation Controls that we see in traditional ASP.NET pages can be used in mobile programming as well. These include RangeValidator (validates the range of values), CompareValidator (compares certain input fields), RegularExpressionValidator (Can be used to restrict user to specific format input), CustomValidator (defined by programmer) and SummaryValidator (Takes results of all their validation controls and let the programmer format these results).

Call Control:

This is interesting control which can make phone calls from your cell phone and PDA's. To enable this, set the PhoneNumber property to the number that the device should dial when the control is selected.

Other Controls:

There are some other controls like Calendar, AdRotator and Image Controls which may not be supported by some mobile devices. However, there are alternates available to do these tasks.

 

<% Page Inherits= "System.Web.UI.MobileControls.MobilePage " Language= "C# " %>
<%@ Register TagPrefix= "mobile " Namespace= "System.Web.UI.MobileControls " Assembly= "System.Web.Mobile " %>

<script runat= "server ">
private class weekday
{
  private String Comments;
  private String name;
  public weekday (String comm., String name)
  {
    this.Comments=comm.;
    this.name=name;
  }

  public String comments
 {
    get {return this.Comments;
  }

  public String name
  {
    get {return this.name;
  }
}

protected ArrayList weekendArray;
protected int index;
protected void Page_Load (Object Sender, EventArgs e)
{
  weekendArray= new ArrayList ();
  weekendArray.Add (new weekend ( "Had to Back on Monday ", "Monday "));
  weekendArray.Add (new weekend ( "Oh Programmers life is ... ", "Tuesday "));
  weekendArray.Add (new weekend ( "Weekend is few days way ", "Wednesday "));
  weekendArray.Add ( new weekend( " Should do shopping for Weekend trip ", "Thursday " ));
  weekendArray.Add ( new weekend( " Thank God ... Bye bye Boss ... ", "Friday " ));
  weekendArray.Add (new weekend( " Looooong Weekend !!! " , "Saturday " ));
  weekendArray.Add ( new weekend( " Had everyday been Sunday ... ", "Sunday " ));
  index= DateTime.Now.MilliSeconds % 7;
  
  protected void GiveComments (Object Sender, ListCommandEventArgs e)
 {
    weekend w = (weekend) weekendArray [index];
    if ( e.ListItem.Value == " CommentDays ")
      {
        Day.Text = p.comments;
        ActiveForm= "Day1 ";
       }
       if ( e.ListItem.Value == " DontDisplay " )
      {
        Name.Text = p.name;
        ActiveForm = "Name1 ";
       }
  }
}
</script>
<mobile :Form runat= "server " >
  < mobile :List OnItemCommand = "GiveComments ">
    <Item Text= "Select Day to see comments " Value= " CommentDays " / >
    <Item Text= "Display any name of days " Value = " DontDisplay " />
  </ mobile :List >
</mobile: Form>

<mobile :Form id= "Day1 " runat= "server " >
  < mobile :label runat= "server " id=Day>
</mobile: Form>
<mobile :Form id= "Name1 " runat= "server " >
  < mobile :label runat= "server " id=Name>
</mobile: Form>

 

In the above code sample, the user would be given two options: Display the comments about a particular day Or Display the name of the Day. You can see the role of ActiveForm here. From the list menu, we would go its event handler that we have defined as GiveComments. This example should be enough for you to do almost all tasks associated with user interaction.

Lastly, the final property I am going to elaborate is Pagination . Since the mobile devices have small screens and data to be displayed can be more than the screen size, you can use Pagination property to break the long message into smaller messages. This way a user can read smaller messages by tapping a button at the bottom of the screen or tapping the Select button to show the next part of message. Pagination is achieved by setting Pagination property to true as in:

  <mobile: Form runat= "server " Paginate= "True ">
 

Summary:

  • By using ASP.NET Mobile Software Development kit (Mobile SDK), a developer can create web pages with the same constructs that are required for building any traditional page.
  • Capabilities across different mobile devices differ in terms of HTML rendering, JavaScript & Cookies support. PDA has most of the capabilities and designing PDA accessible websites is relatively easy.
  • WML (Wireless Markup Language) is based on XML (eXtensible Markup Language)
  • ASP.NET controls rendering of pages itself
  • Emulator programs help programmer in testing output of mobile pages.
  • ASP.NET Mobile library classes have to be included in every mobile web page
  • You can use mobile Controls for Input, Validation, and Display of Data & User Interaction with the data.
  • Pagination property breaks long message into small message to be displayed on mobile devices' screen.

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


comments powered by Disqus