Objectives

• Install mobile device emulators.
• Add a 51Degrees.mobi Image control to a mobile web page.
• Configure IIS and the web.config for use with 51Degrees.mobi.
• Access the mobile web page using a desktop browser and the mobile device emulator.

Prerequisites

• Complete Installation Tutorial.
• Internet Information Server 7 with Application Development feature ASP.NET. The following screen taken from Windows 7 shows the features that should be selected.

Step 1 - Configure an Emulator

In order to develop any mobile web application a method of viewing the page as it would appear on a real mobile device is essential. We therefore suggest you configure your development environment with one or more mobile device emulators. See this page for details of ones we've used.

Throughout these tutorials we've used the Android emulator as it's both stable and runs the same object code found on real Android devices. Be wary of emulators that do not use the same object code as the real mobile device, they often produce misleading results.

Occasionally we've also used a Nokia S40 5th edition emulator to show how a mobile web application displays on a feature phone with a small screen size.

Before continuing it is important to ensure you have an emulator installed and that it is starting correctly. Instructions for achieving this are usually found with the emulator or SDK documentation. The following image shows the start up screen from the Android emulator providing confirmation it is installed and working correctly.

The following screen shows the Nokia Series 40 5th Edition emulator. Use the File and Open URL menu to provide the URL of the page you'd like to open.

Note: development productivity may be improved further by connecting the development environment to the internet enabling access from real mobile devices. This is a subject beyond the scope of these tutorials.

Step 2 - First Page

Follow the instructions in the Installation Tutorial to create a mobile web application. Open the Default.aspx in design mode and drag a 51Degrees.mobi image control from the toolbox onto the page. Set the ImageURL property of the image control to http://demos.51degrees.mobi/images/256x256_wizard.png. You should see the following ASP source code between the form elements.

Now run the mobile web application and view the page in Internet Explorer. You should see a browser window similar to the following appear.

Step 3 - Configure IIS

When a mobile web application is created the project will be configured to use the Development [Web] Server provided with Visual Studio. This web server can only be accessed using a web browser running on the local machine and is not accessible from another other browser.

In order to view web pages in the Android emulator, or any virtual machine based emulator that has a logically separate network connection, IIS must be used so that the web server can be accessed using the external IP address of the host machine. Use the project properties Web tab shown below to set IIS as the web server.

Select the "Use Local IIS Web Server" radio button and leave the suggested Project Url unaltered. Press the Create Virtual Directory button to ensure the URL is available in IIS.

Further changes are needed to IIS to provide access to a database used by 51Degrees.mobi to persist information usually held within the page view state. The database is called MobileProfile.mdf and stored in the App_Data folder of the mobile web application. The worker process used by IIS must have full access to this file. The easiest way to provide sufficient access, assuming the project was created in the Visual Studio project folder, is to set the worker process identity to Network Service.

Open IIS Manager and select the DefaultAppPool from the Application Pools list. The following screen shows the default list.

Right click the DefaultAppPool and choose Advanced Settings. The following dialogue will appear and the ellipses next to the Identity field under Process Model can be used to change the identity to NetworkService and set Load User Profile property to true which is required for SQL EXPRESS to work in user instance mode. It is recommended to use 'Integrated' for 'Managed Pipeline Mode'. The framework version is up to developer preference.

One further change is required before running the mobile web application. Comment out the following lines from the web.config as IIS will throw an error if they are present. All the code must be commented, httpHandlers and httpModules sections are not allowed at all in IIS 7 integrated mode.

<httpHandlers>
<add verb="GET" path="I.axd" type="FiftyOne.Framework.Mobile.Includes.IncludesHandler, FiftyOne.Framework" validate="false"/>
<add verb="GET" path="P.axd" type="FiftyOne.Framework.Image.ImageHandler, FiftyOne.Framework" validate="false"/>
</httpHandlers>
<httpModules>
<add name="Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/>
<add name="ProfileManager" type="FiftyOne.Framework.Mobile.Profile.ProfileModule, FiftyOne.Framework"/>
</httpModules>

Note: You will need to uncomment these lines if you wish to debug using the Visual Studio development web server in the future.

Step 4 - View in an Emulator

Finally you will need to know the external IP Address of your development machine as Localhost will not be usable from an emulator that is running as a virtual device. Use the ipconfig command from the command line, or another method, to obtain this value.

Change localhost from the Project Url entered in step 3 to the IP address of the development machine. For example; on a machine with the IP address 192.168.2.14 the Project URL http://localhost/MobileWebApplication1 will become http://192.168.2.124/MobileWebApplication1. Enter this URL into the emulator. Using an Android emulator a screen similar to the following should be displayed.

Conclusion

Most of the concepts in Step 3 relate to configuring IIS 7 for use with user instance databases and access from external devices rather than specific mobile development. These subjects are widely documented on MSDN and other web sites. If difficulties are experienced a quick search using your favourite search engine may yield a quick resolution.

You've now created your first page, added a mobile image control, configured your development environment, and accessed the page using a mobile emulator.