Before We Begin...
I think it is fair to say that almost everyone today in the modern societies have a mobile phone. Motorola's CEO was recently quoted as saying that every second 25 mobile phones are sold while four babies are born. If you do the math you will probably come to the conclusion that it won't be long before everyone has one or more mobile phones. To back that up over one billion phones shipped last year and an expected four billion mobile subscribers by 2010 (and only 6.8 billion on the planet).
On a side note the large volume of mobile phones create a waste issue. The components that have made up mobile phones to date are toxic. While there are recycling firms and innovative programs, as a consumer I'm not sure that the message is not getting through to the public at large as of yet.
With society becomes more connected resulting in the sharing of ideas and information at a much quicker pace. The communications revolution connects us in the same way the Internet has or the first land-line telephones did many years ago.
Shipping along with mobile phones is a mobile web browser. While it presents a number of new challenges, the concept of being able to bring snippets of what we have experienced with the desktop-based Internet to the palm of your hand opens up the potential for all kinds of new possibilities such as:
- Connecting with like minded individuals either in proximity or globally
- Access to information anywhere, any time
- Broadcasting experiences and events from anypoint
- Increased sense of security through connectivity no matter where you are
- ... and much more.
Before we dig into the how to with ASP.NET it is important to step back and look at the mobile web eco-system that currently exists and the challenges and design considerations:
- Inconsistent markup implementation - Wireless Markup Language (WML), cHTML, HTML 4, XHTML Basic, XHTML Mobile Profile (MP) are the more popular implementations that exist in the world. XHTML MP is expected to be the dominant long term player and is supported by most phones today. Along with that Wireless Application Protocol (WAP) CSS, a subset of CSS2, has now appeared on the scene.
- Form factor and functionality differences - With each new model the specfications continue to vary. With no sign of standardization we need to consider a large number of factors like screen dimensions, color depth, audio/video, storage, rights management, streaming support, and more.
- Number of devices - Regardless of targeting a global or regional area with your application, the chances are that thousands of different devices are in use in the area. Testing against the physical devices is the best way, but that is quite resource intensive.There are services who will do it for you and strategies for engaging users. Browser manufacturers provide emulators which is a more cost-effective approach. If you don't have time or don't care there are also web-based emulators which we'll talk about later.
From my observations it seems the one thing the mobile industry has been able to do right is come together on the network stack.Wireless Application Protocol (WAP) is the stack which delivers the content.The first release focused on a translating proxy which would convert the web into WML. With the advent of WAP 2.0 it looks like the role of WAP is the network and a standard proxy for the content.
When it comes to mobile web applications built using ASP.NET there are a few items to note for those who are used to developing desktop web applications:
When I had originally thought about mobile web development I was thinking that I could create a single XHTML file and transform it to using XSLT or fluid layouts. The more I think about it though the fundamental thinking of dealing with small form factor devices has to center on task-oriented applications rather than rich multi-function interfaces.
And you thought the desktop browser war was bad. :) Through out the series I'll highlight these issues in more detail. With the issues aside let's take a look at building our first mobile web application. To start we will leverage the classic Hello World example.
Building Your First Mobile Web Application
Before you open Visual Studio,download the Mobile Web Application Project and Item Template collection. It is an adaptation of Omar Khan's mobile project item collection to deliver a project template in addition to the item templates. Run the Visual Studio Installer (VSI) package and install the VB and/or C# templates. Once that is done:
- Open Visual Studio 2005, from the File menu choose New, Project, and from the Templates list select ASP.NET Mobile Web Application.
- Setup the project Name and Location to your preferences and click OK to create the project.
- From the Toolbox grab a Label control and drag it onto the design surface (if you are in design view) or between the mobile Form tags (if you are in source view).
- With the new label selected in the Properties windowselect the Text property and change it to Hello Mobile World!
To test our application we'll need a device emulator to help us. Here are a few of the notable emulators:
There are also a number of other emulators to note:
We'll use the out-of-the-box Windows Mobile 2003 Smartphone emulatorto start with.In future posts we will use some of the other notable emulators.
Before we start the debugging process you will need to have the Virtual Machine Network Driver installed and bound to your network adapter. You will also need to configure ActiveSync / Windows Mobile Device Center to support DMA transport. The emulator's browser will be a standalone device on the network.As such we will not be able to take advantage of the ASP.NET Development Server as it only allows local host connectivity. Before we continue we will need to setup our project to run off a local IIS installation. If you are running Windows Vista and developing as a normal user (like a good developer should), unfortunately, you will re-launch Visual Studio with administrative privileges at this point.
- From the Tools menu select Options.
- In the Options dialog select Device Tools, Devices, highlight the Smartphone 2003 SE Emulator, and click the Properties button.
- In the Smartphone 2003 SE Emulator Properties dialog ensure Transport is set to DMA Transportand click the Emulator Options button.
- In the Emulator Properties dialog under the Network tab select Enable NE2000 PCMCIA network adapter and choose your network adapter from the list.
- Click OK until you return to the main Visual Studiowindow.
- From the Project menu select <project name> Properties.
- In the Web tab select Use IIS Web Server.
- NOTE: If you are running Windows Vista and IIS7 you may need to open IIS Manager and create the virtual directory / application manually. This is out of scope for this article at this time.
- From the Debug menu select Start Without Debugging.
- From the Tools menu select Connect to Device.
- In the Devices list select the Smartphone 2003 SE Emulator and select Connect.
- NOTE: When the emulator starts up you may need to configure a proxyto connect from Work to The Internet network.
- When the emulator starts up click the Start button and select Internet Explorer.
- Click the Menu button and select Address Bar.
- Type in your web application's address (e.g. http://<machinename>/HelloMobileWorld) and click Go.
If all goes well you should see your web application. Congratulations, you have just build and tested your first ASP.NET mobile web application!
Attached to this post is the this week's project along with the mobile web application project template. Stay tuned for more next week as we talk about events, input and data binding! Maybe we'll even take a crack at a Commerce Server-driven mobile site near the end of the series. And if you haven't already, sign up for the Toronto Code Camp - it's going to be another fantastic year.
(Did I get a detail wrong? Mobile is a complex arena which isn't as well documented as the desktop web. Please comment on the content for corrections/additions.)