ASP.NET Tutorial

ASP.NET Mobile Controls

Mobile devices can be clients for Web pages. These devices including Web-enabled cell phones, pagers, and personal digital assistants (PDAs). They establish wireless connections to Web servers to open pages designed to deliver a more restricted collection of information owing to the restricted amount of real estate available on their screens.

Web pages targeted to mobile devices need to take into account the capacities and capabilities of the devices. Cell phones have small screens limited to a small number of text characters per line and a small number of lines per page. PDAs have larger display screens but can display far less information than a typical Web page. At the same time, devices vary in the page description languages they recognize. For instance, the Wireless Application Protocol (WAP) was developed as an alternative to HTML for designing pages targeted to mobile devices. Some devices use older versions of HTML, some use XHTML (eXtensible HyperText Markup Language), and still others use cHTML (compact HyperText Markup Language). The developer is faced with a plethora of options in selecting a development environment specific to targeted devices.

Fortunately, the ASP.NET mobile controls hide most of these decisions from the developer. These controls are extensions to ASP.NET designed to help build mobile Web applications without having to write different code for different devices. A single Web page is adapted for rendering on a variety of mobile devices.

Mobile Web Forms

Web pages for mobile devices are contained inside a special mobile <form> tag that encloses mobile equivalents to most of the ASP.NET server controls. The following example shows a simple Web page that displays a text message through a mobile <label> control.

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

<mobile:Form runat="server">

  <mobile:Label runat="server" Text="Mobile page display"/>

</mobile:Form>

When this page is accessed by a Web-enabled cell phone, it is displayed as follows.

At the same time, if the page is accessed by a PDA such as Pocket PC, the message is displayed on that device as well, without having to change code.

It is not necessary to create different Web pages for different devices. The ASP.NET mobile controls are rendered for compatibility with the particular device that opens the page.

It is noteworthy that this same Web page can also be accessed in a standard browser as shown below. This capability makes it convenient to develop mobile applications since they can be tested in a browser without needing access to particular devices.

Device Emulators

Although mobile applications can be developed and tested in a browser, various device emulators are available to view pages on particular devices. These emulators are displayed on the desktop and work very similar to the actual devices they emulate, saving from having to purchase actual mobile devices in order to test applications. A popular cell phone emulator is available from http://developer.Openwave.com. When activated, it opens in a small window on the desktop using a selection of "skins" to resemble different manufactured devices, three of which are shown below. A similar emulator is available from http://forum.nokia.com for the Nokia 7110 phone. URL addresses can be entered for the emulators to test local and remote Web pages.

Emulators are available from Microsoft for the SmartPhone and Pocket PC. However, these emulators only work within the Visual Studio API. When coding mobile Web pages with a text editor or HTML editor, you are forced to use a browser to visualize PDA pages, remembering the smaller screen size that limits the amount of information displayed.

All Pocket PC devices have a total screen resolution of 240 × 320 pixels. However, the Pocket PC and Pocket Internet Explorer user interfaces occupy some of this space to display a System title bar at the top of the screen, the Internet Explorer menu bar at the bottom of the screen, and the Internet Explorer address bar (whose display is user controlled). Vertical and/or horizontal scroll bars are displayed when necessary. Therefore, to avoid appearance of a horizontal scroll bar, target a display 229 pixels wide. For full-window display without scroll bars, your page should be no larger than 240 x 270 pixels.

All Pocket PC devices include at least the Tahoma (variable-width) and Courier (fixed-width) fonts. All other font faces are converted to one of these fonts if the page font has not been installed on the device.

Creating a Pocket PC Display Page

You can get a good sense of how Web pages display on a PDA device by creating a page that uses an <iframe> tag sized to the dimensions of a PDA screen. In the following example this tag overlays a graphic of a generic PDA device. An asp:TextBox and an asp:Button control also overlay the graphic for entry of a URL for a mobile Web page. When the button is clicked, a script assigns the entered URL as the src attribute of the iframe, thereby displaying the page. If you click the "Go" button below, an example mobile page from this tutorial site is displayed.

The above display is produced with the following code which can be saved as a .aspx page for running the "emulator" in a separate window. The graphic can be downloaded and saved from the above image.

<SCRIPT runat="server">
Dim TheURL As String = ""

Sub GetURL (Src As Object, Args As EventArgs)
  If Not URL.Text = "http://" Then
    TheURL = URL.Text
    Page.DataBind()
  End If
End Sub

</SCRIPT>

<html>
<head>
  <title>Pocket PC Emulator</title>
</head>
<body>
<form runat="server">

<asp:Panel runat="server"
style="position:relative; width:380px; height:550px">
  <asp:Image ImageURL="PocketPCGraphic.gif" runat="server"
    style="position:absolute; z-index:-1"/>
  <asp:TextBox id="URL" runat="server" Text="http://"
    style="position:absolute; top:102px; left:66px; width:223px;
    border:solid 1; font-size:8pt"/>
  <asp:Button Text="Go" OnClick="GetURL" runat="server"
    style="position:absolute; top:101px; left:291px; width:25px; height:20px;
    font-size:8pt"/>
  <iframe src="<%# TheURL %>" runat="server" 
    frameborder="0" marginwidth="1" style="position:absolute; top:122px; 
    left:66px; width:248px; height:271px; border:solid 1 px"></iframe>
</asp:Panel>

</form>
</body>
</html>

Notice that all tags have a positioning style property to precisely overlay the server controls at exact positions on top of the graphic. Notice also that the <iframe> tag, for which there is no ASP.NET equivalent, is converted into a script-accessible HTML control by adding runat="server" to the tag.