Creating Cross-Device-Compatible Mobile Pages

One of the most difficult challenges that a developer faces when designing HTML pages is the problem of browser compatibility. A page that works well with Internet Explorer 7.0 on a PC will not necessarily work well with Netscape Navigator 3.0 on the Macintosh.

Well, HTML designers have it easy. If you really want a tough challenge, try creating pages that are cross-device compatible rather than simply cross-browser and platform compatible. Making a page that looks good on a cell phone and on a full browser is a real challenge.

In this section, you'll learn about some of the features of mobile controls that you can exploit to detect the capabilities of different mobile devices. You can use these features to construct mobile pages that are cross-device compatible.

Detecting Mobile Capabilities

When you install the mobile controls, your server's system machine.config file is also automatically modified. Additional entries are added to the <browserCaps> section, which describes the capabilities of various mobile devices. If you are curious , go ahead and open the machine.web file to look at these definitions (you can open the file with Notepad).

NOTE

The config.web file is discussed in detail in Chapter 15, "Creating ASP.NET Applications."

These entries in the machine.config file are used by the MobileCapabilities class. For example, the page in Listing 7.24 displays a number of features of the current device by displaying properties from the MobileCapabilities class.

Listing 7.24 MobileCapabilities.aspx

 <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %> <Script Runat="Server"> Sub Page_Load   Dim caps AS system.Web.Mobile.MobileCapabilities   caps = Request.Browser   lblBrowser.Text = caps.Browser   lblType.Text = caps.Type   lblPreferredRenderingType.Text = caps.PreferredRenderingType   lblScreenCharactersWidth.Text = caps.ScreenCharactersWidth   lblScreenCharactersHeight.Text = caps.ScreenCharactersHeight End Sub </Script> <Mobile:Form runat="Server"> <b>Browser:</b> <Mobile:Label   id="lblBrowser"   Runat="Server"/> <br/> <b>Type:</b> <Mobile:Label   id="lblType"   Runat="Server"/> <br/> <b>PreferredRenderingType:</b> <Mobile:Label   id="lblPreferredRenderingType"   Runat="Server"/> <br/> <b>ScreenCharactersWidth:</b> <Mobile:Label   id="lblScreenCharactersWidth"   Runat="Server"/> <br/> <b>ScreenCharactersHeight:</b> <Mobile:Label   id="lblScreenCharactersHeight"   Runat="Server"/> </Mobile:Form> 

The C# version of this code can be found on the CD-ROM.

The page in Listing 7.24 displays five properties of the current device: Browser , Type , PreferredRenderingType , ScreenCharactersWidth , and ScreenCharactersHeight . The properties are retrieved by retrieving an instance of the MobileCapabilities class from the Browser class. Each property is displayed by assigning the value of each property to a Mobile Label control (see Figure 7.17).

Figure 7.17. Displaying device capabilities. Image courtesy Openwave Systems Inc.

The Browser property returns the type of browser used by the device ”for example, IE or Phone.com . The Type property returns the general type of the device ” IE5 or Pocket Internet Explorer , for example. The PreferredRenderingType property returns the MIME type of the rendering language of the device. Examples are html32 and wml11 . Finally, the ScreenCharactersWidth and ScreenCharactersHeight properties return the number of characters that a device can display horizontally and vertically.

You can retrieve many more device properties than those returned in Listing 7.24. For example, you can use the IsColor property to detect whether a device is capable of displaying color or the CanInitiateVoiceCall property to detect whether the device can place phone calls. For a complete list of properties supported by the MobileCapabilities class, consult the .NET Framework SDK documentation (look up Device Capatibilities Table in the index).

Choosing Devices with DeviceSpecific

The MobileCapabilities class can be used to display different content for different devices. You can use the properties from the MobileCapabilities class with a special element named the <DeviceSpecific> element.

The <DeviceSpecific> element works (very roughly ) like a Visual Basic Select Case statement. The <DeviceSpecific> element can contain multiple <Choice> elements that match different device criteria. When a <Choice> element is matched, its content is returned.

Earlier in this chapter, in the section titled "Displaying Images," you saw how the <DeviceSpecific> element can be used with the Image control to display different image files, depending on the nature of the device that requests the page. You can also use <DeviceSpecific> with other controls, such as the List and ObjectList controls.

For example, the page in Listing 7.25 displays different content to HTML and WML devices. If the device is an HTML-compatible device, special formatting is applied to the List control's header and footer. Furthermore, each list item is formatted in the List control's ItemTemplate .

Listing 7.25 DeviceSpecific.aspx

 <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %> <Script Runat="Server"> Sub Page_Load()   Dim colMovies As New ArrayList()   colMovies.Add( "Star Wars" )   colMovies.Add( "Gone with the Wind" )   colMovies.Add( "Citizen Kane" )   lstMovies.DataSource = colMovies   lstMovies.DataBind() End Sub Sub List_ItemCommand( s As object, e As ListCommandEventArgs )   lblMovie.Text = e.ListItem.Text   ActiveForm = form2 End Sub </Script> <Mobile:Form runat="server" id="form1"> <Mobile:List   ID="lstMovies"   OnItemCommand="List_ItemCommand"   Runat="Server"> <DeviceSpecific> <Choice Filter="IsHTML32">   <HeaderTemplate>   <h2>Welcome to the Movie Reservation System!</h2>   </HeaderTemplate>   <ItemTemplate>   <p>   <asp:Button    Text='<%# Container.ToString() %>'    Runat="Server" />   </ItemTemplate>   <FooterTemplate>   <p>   <small>All Contents &copy; copyright 2002 by the Company</small>   </FooterTemplate> </Choice> </DeviceSpecific> </Mobile:List> </Mobile:Form> <Mobile:Form runat="server" id="form2"> <b>You selected:</b> <br/> <Mobile:Label  ID="lblMovie"  Runat="Server"/> </Mobile:Form> 

The C# version of this code can be found on the CD-ROM.

When the page in Listing 7.25 is displayed in an HTML 3.2 “compatible browser, the special formatting in HeaderTemplate and FooterTemplate is displayed. For example, the ItemTemplate shows a Button control for each list item. You should also notice that all the templates use HTML tags that are not WML compatible (see Figure 7.18).

Figure 7.18. Using templates with Internet Explorer 6.0.

When the page in Listing 7.25 is displayed in a WML-compatible browser, all the templates are ignored. The List control is displayed with its default formatting.

Using Form Template Sets

As you saw in the previous section, the <DeviceSpecific> element can be used with Image , List , and ObjectList controls. You can also use the <DeviceSpecific> element with a Mobile Form control.

The Mobile Form control has both a HeaderTemplate and a FooterTemplate . You can create multiple HeaderTemplates and FooterTemplates and place them within different <Choice> elements. By creating multiple templates, you can display different content for different devices.

The page in Listing 7.26 demonstrates how to create three sets of templates. The first set of templates will render on WML-compatible devices, the second set on HTML 3.2 “compatible devices, and the final set will render on other devices.

Listing 7.26 FormTemplates.aspx

 <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %> <Mobile:Form runat="Server"> <DeviceSpecific> <Choice Filter="IsWML">   <HeaderTemplate>     <b>Welcome to this Web site!</b>     <br/>   </HeaderTemplate>   <FooterTemplate>     <small>All Content Copyrighted 2001</small>   </FooterTemplate> </Choice> <Choice Filter="IsHTML32">   <HeaderTemplate>     <table width="100%" bgcolor="yellow">     <tr>       <td>       Welcome to this Web site!       </td>     </tr>     </table>   </HeaderTemplate>   <FooterTemplate>     <hr>     <small>All Content Copyrighted &copy; 2001</small>   </FooterTemplate> </Choice> <Choice>   <HeaderTemplate>     <b>Welcome to this Web site!</b>     <br/>   </HeaderTemplate> </Choice> </DeviceSpecific> <Mobile:Label   Runat="Server">   Here is the main body of the page. </Mobile:Label> </Mobile:Form> 

The C# version of this code can be found on the CD-ROM.