Stay Ahead of the Curve

Add mobile accessibility to an existing Web site with the MMIT.

asp:cover story

LANGUAGES: VB

TECHNOLOGIES: Mobile Applications | Mobile Internet Toolkit

 

Stay Ahead of the Curve

Add mobile accessibility to an existing Web site with the MMIT.

 

By Bill Block

 

A deadline is quickly approaching. Your project manager walks over and asks, "How much effort would it take to add XYZ to the Web site?" If you're like most developers, you've heard such a question dozens of times. And, like most developers, you're likely to answer with an estimate that is either much less time (because of developer machismo) or much more time (because of developer experience) than the actual time such a change would take. Armed with a little knowledge about the technology and some implementation examples, you can reduce the gap between the estimated effort and the actual effort greatly.

 

In this article, I'll show you how to add mobile capabilities to your existing Web site. For the sake of the article, I'll focus on a fictitious retail store's existing Web site, the Acme Retail Store (ARS) Gift Registry site. The changes you'll make to this site likely will be similar to changes you'd make to your own. Figure 1 shows the current Web site, developed as a series of ASP pages using VBScript and JavaScript along with a series of COM components written in Visual Basic 6. In the first phase of ARS' go-mobile initiative, company officials want to allow consumers to browse existing gift registries using a mobile device. The company has plans to purchase tablet-based devices for the retail store, but company officials also would like to make the system available to consumers who have their own personal devices.

 


Figure 1. This diagram depicts the fictitious ARS' existing Gift Registry Web site as well as the new Web pages that will be added to expand the functionality to include mobile devices.

 

Take the First Step

To many developers, the thought of starting a Web site for mobile devices sounds ominous. Fortunately, the Microsoft Mobile Internet Toolkit (MMIT) gives development teams the ability to add this functionality to the existing Web site quickly and easily. Development begins in the same place it does for most Web projects - the home page. In the example, ARS has an existing gift registry home page (see Figure 2). Company officials want to continue using the existing home page's URL for all browsers (PC and mobile devices). To use it, ARS needs to install the .NET Framework (including ASP.NET) and the Mobile Internet Controls Runtime (part of the MMIT) on a Web server running Microsoft's Internet Information Server (IIS).

 


Figure 2. The existing Web site allows users to search for gift registry information by entering a name and clicking on the Search button. When users click on the Search button, the ASP page calls a COM component that performs a database query and returns results to the browser.

 

After setting up the Web server, developers can begin working on Default.aspx, the new home page for all browser types. The new page has one purpose: to redirect users either to the existing home page (for PC-based browsers) or to the new home page (for mobile devices). Start by opening the existing Web site under VS .NET, adding the new home page by selecting Add Web Form from the Project menu, and selecting the Mobile Web Form template.

 

Next, add logic to the Page_Load event in the form's code-behind to perform the redirect based on which type of browser is requesting the page:

 

Private Sub Page_Load(ByVal sender As System.Object, _

 ByVal e As System.EventArgs) Handles MyBase.Load

  If Not (Page.IsPostBack) Then

    If (Device.IsMobileDevice) Then

      RedirectToMobilePage("MobileDefault.aspx")

    Else

      Response.Redirect("default.asp")

    End If

  End If

End Sub

 

The Device.IsMobileDevice method allows you to determine whether the calling browser is a mobile device or a PC-based browser. The Device class is part of the System.Web.Mobile.MobileCapabilities namespace and allows you to query various aspects of the caller's device, including style options, pagination ability, screen size, and device-specific functionality. Also, because a standard Response.Redirect method is being used to redirect PC-based browsers to the existing home page, you could use any Web page on any Web server.

 

Once you set up your home page, you can begin adding content to your mobile site. One of the best things about the MMIT and VS .NET is you can develop mobile solutions on top of existing Web sites through the IDE. Although you could develop the two sites independently, placing them in a single Web site allows for easy design and development as you'll see later.

 

The mobile home page, MobileDefault.aspx, will display a search screen similar to the one shown in Figure 2 to allow the user to enter a bride or groom's name and retrieve a list of products for which they have registered. Begin by laying out the form in the IDE, using some of the mobile Web Form controls included in the MMIT. Because you will be working with a small amount of screen space on most mobile devices, you should begin development with only the core user-interface elements and add content, where appropriate, later in the development cycle (see Figure 3). Besides adding the basic visual elements, set the Action property of the mobile Web Form to MobileDefault.aspx. The HTML in Figure 4 shows the completed form.

 


Figure 3. As with ASP.NET Web Forms, the designer allows developers to lay out user-interface elements quickly and easily.

 

<%@ Page Language="vb" AutoEventWireup="false"

Codebehind="MobileDefault.aspx.vb"

Inherits="GiftRegistry.MobileDefault" %>

<%@ Register TagPrefix="mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile, Version=1.0.3300.0,

Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %>

Xmlns:mobile="http://schemas.microsoft.com/Mobile/WebForm">

  

   StyleReference="Body">

    

    StyleReference="HeaderBody" runat="server">

      

      BreakAfter="False">

      

      

    

    

      

      Please enter either the bride or groom's name:

      

    

    

      

      First Name

      

      

    

    

      

      Last Name

      

      

    

    

    runat="server">Search

  

  

  StyleReference="Body">

    

    

    

    

  

Figure 4. Here is the mobile version of the gift registry search page. Like ASP.NET controls that have the prefix "asp," all mobile Internet controls have the prefix "mobile." The @Register header directive tells the run time where to find the namespace and assembly that map to the mobile prefix.

 

You'll also notice in Figure 4 that I grouped the label and text-box pairs in tags. Besides logical grouping of items, panels allow you to define the style for all controls contained within them. You also should use panels when building a page that can include pagination. Items grouped inside of a panel inform the run time that those visual elements should be grouped together on one page.

 

Leverage Existing Technologies

After laying out the basic form, you need to add some functionality to your new mobile Web Form. Because ARS has an existing Web site with the same search capabilities, you'll reuse a COM component written in Visual Basic 6.0 within your mobile application. First, add a reference to the COM component by right-clicking on the References folder in the project and selecting the Add Reference... option. Next, select the COM tab, scroll down until you find the ARS Gift Registry Search component, select it, and click on OK. As with standard ASP.NET references to COM objects, adding the reference will cause VS .NET to create a managed wrapper object to allow interoperability between the COM object and the mobile application. Because the existing component also returns ADO Recordset objects, a reference to the ADODB library is included.

 

Once you have a reference to the object, you can begin coding against it. Use the BrowseByName method of the existing COM GiftRegistrySearch component to retrieve a list of products for which a person has registered (see Figure 5). Double-click on the mobile form's Search button to be taken to the code-behind for the button. After you have the results of your query, loop through the results and display them on a second form, SearchResults. Notice that after you retrieve the results, you swap the current form with the SearchResults form by using the ActiveForm property of the System.Web.UI.MobileControls.Form class. Using multiple forms on a single mobile Web Form is generally a good practice when sharing similar pieces of data because both forms can leverage the page state. You should avoid placing all mobile Web Forms on a single page for your entire application, however, because that might cause performance to suffer.

 

Private Sub btnSearch_Click(ByVal sender As _

 System.Object, ByVal e As System.EventArgs) _

 Handles btnSearch.Click

  Dim ARSGiftRegistrySearch As _

   ARSGiftRegistry.GiftRegistrySearchClass

  Dim ResultsRecordset As ADODB.RecordsetClass

  Dim LoopCounter As Integer

 

  ARSGiftRegistrySearch = New _

   ARSGiftRegistry.GiftRegistrySearchClass()

 

  'Call the existing COM component to return

  'gift registry product info

  ResultsRecordset = ARSGiftRegistrySearch.BrowseByName _

    (Me.txtFirstName.Text, Me.txtLastName.Text)

 

  ActiveForm = SearchResults

 

  If Not (ResultsRecordset.BOF And ResultsRecordset.EOF) _

   Then

    ResultsRecordset.MoveFirst()

 

    'Loop through results and display them in a list box

    For LoopCounter = 0 To ResultsRecordset.RecordCount-1

      Dim NewListValue As String

      NewListValue = ResultsRecordset("ProductID").Value _

      & " - " & ResultsRecordset("Name").Value() & " (" & _

      ResultsRecordset("Price").Value() & ")"

 

      lstResults.Items.Add(NewListValue)

      ResultsRecordset.MoveNext()

    Next

  Else

    'No results found during search, display message

    lblResultMessage.Text = "No results found."

  End If

End Sub

Figure 5. Leverage existing components within mobile Web Forms. Developers familiar with ASP and ASP.NET technologies should feel right at home with MMIT. Reusing existing components and data sources works the same when you're working with a Web Form or a mobile Web Form.

 

At this point, the mobile gift registry search functionality is ready to be executed and unit-tested. However, you could continue to build in additional functionality by using both existing and new technologies. When building mobile Web Forms, you can use XML Web Services, COM components, other .NET components, and all other back-end services you are using today in your ASP and ASP.NET applications.

 

Maintain the Look and Feel

Now that you've added some real functionality to the mobile site, it's time to do some look-and-feel updates to bring your mobile site in line with the style and design of your existing Web site. Like Web Forms, mobile Web Forms allow you to define customized style sheets, so you can reuse style elements throughout your site. For your mobile site, you'll add a style sheet and repeat some of the colors and fonts used in your existing site to keep a consistent look and feel.

 

First, drag and drop a StyleSheet control onto the designer window for the MobileDefault.aspx page. One point concerning mobile style sheets: They pertain only to one mobile Web Form, not to the entire Web project. You can link to an external style sheet, but I would recommend avoiding this practice because standard Cascading Style Sheets (CSS) styles might not be rendered properly for certain devices. Once the style sheet is on the mobile Web Form, right-click on it and select Edit Styles.... A dialog box such as the one in Figure 6 appears and allows you to set the font, alignment, and colors. Once you change the colors to match the existing ARS styles, you can go back to MobileDefault.aspx and set each form's StyleReference property to your new style. If you're not a fan of designer editing, you still can edit styles using the HTML view. The underlying HTML for the style you define would look like this:

 

  

   BackColor="#B0C989" Name="Body">

 


Figure 6. The StyleSheet mobile Internet control includes a style editor that helps you define font and color combinations for mobile styles. Like CSS classes, the editor's defined mobile styles can be referred to, by name, from multiple controls.

 

At this point, you might be wondering what would happen if the mobile device your customers are using doesn't support a back color of #B0C989. The Mobile Internet Controls Runtime is intelligent enough to render content specific to the device making the request. In most cases, the run time will select the best match for the style and layout of the form.

 

You can, however, be proactive in your development and tell the run time how to do certain actions based on the capabilities of the device. To illustrate this, add the Acme Retail Store Gift Registry banner to the top of your search screen. On devices that support images and have a large enough screen, you can display both an image and the text header. For all others, you can display only a text header.

 

First, drop a Panel control onto your form and place an Image control and a Label control within the panel. Next, rename the Label control lblHeader and rename the Image control imgHeader. From within the Solution Explorer window, right-click on the MobileDefault.aspx page and select View Code. Add the code from Figure 7 to the page's Page_Load event. By adding conditional device logic to the Page_Load event, you can have greater control over how your mobile application is displayed to the user.

 

Private Sub Page_Load(ByVal sender As System.Object, _

 ByVal e As System.EventArgs) Handles MyBase.Load

  If (Device.IsColor) And (Device.ScreenCharactersWidth > _

   50) Then

    ' Display color image and full text banner

    Me.imgHeader.ImageUrl = "img\plate_small.jpg"

    Me.imgHeader.Visible = True

 

    Me.lblHeader.Text = "Acme Retail Store Gift Registry"

  Else

    ' Display a shortened, text-only banner

    Me.imgHeader.Visible = False

 

    Me.lblHeader.Text = "ARS Gift Registry"

  End If

End Sub

Figure 7. The easiest way to do device-specific rendering is to use the System.Web.Mobile.MobileCapabilities.Device class to check various device properties, then perform logic based on those properties.

 

Once you've added your formatting and header information, your first release of the mobile gift registry application is code-complete (see Figure 8). You could add many things to the application before production release, such as error handling and security, but the core functionality of the application is ready to go.

 


Figure 8. The new mobile page allows users of mobile devices, such as Internet-enabled phones, to access the same search capabilities the existing Web site offers. Using the MMIT device capabilities, developers can determine dynamically what content to display based on the device type.

 

Expanding the Scope

Although the scenario I've used is complete, you should consider several additional things as you add mobile functionality to your Web site. As I mentioned, error handling and security are obvious items to address before a production release. Fortunately, most ASP.NET developers will be comfortable with the MMIT error-handling and security model - it is the same as ASP.NET, from a code perspective. You can use validation controls to perform text-entry validations, and administrators can manage security settings using the web.config file and IIS security settings as they would with an ASP.NET application.

 

Also, be careful using cookies when building a mobile Web application. Some devices do not support cookies, so you need to consider this as you design and implement portions of your application. Without cookies, for example, the ASP.NET engine would look for forms-based authentication credentials in the query string. Unfortunately, this requires you to write code to persist the ticket in the query string for devices that have this limitation.

 

Another area to focus on is the use of redirects within your applications. Most devices can deal with all forms of redirects, but some devices do not handle relative redirects properly. I recommend dealing with this issue by coding all redirects as root-relative redirects. For example, if a file is two directories up in the folder hierarchy from the page you're redirecting from, you should use a root-relative path of /content/secured/file.aspx instead of a relative path of ../../file.aspx.

 

As the availability of mobile-device technology and high-speed wireless networks increases, consumer demand for mobile-based content and features also will increase. As a result, more and more businesses will be looking to push their products and information to consumers through reliable, mobile Web applications. The MMIT offers developers a great opportunity to get ahead of the curve. With the MMIT, you can begin to leverage existing technologies and Web site infrastructures to build robust systems that integrate well with the look and feel of existing systems.

 

For more information about this topic, see http://msdn.microsoft.com/vstudio/device/mitdefault.asp.

 

The files referenced in this article are available for download.

 

Bill Block is a consultant at Clarity Consulting Inc. (http://www.claritycon.com), a Chicago-based IT consulting firm and Microsoft Gold Certified Partner. In addition to designing and developing scalable Web-based solutions, Bill has written articles for several technical publications. E-mail Bill at mailto:[email protected].

 

Tell us what you think! Please send any comments about this article to [email protected]. Please include the article title and author.

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish