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.
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.
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.
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.
