|  Register
Instructions

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.

<form id="Form1" runat="server">
    <mob:Image ID="Image1" runat="server" ImageUrl="http://demos.51degrees.mobi/images/256x256_wizard.png">
    </mob:Image>
</form>


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.

Tutorials
NumberSorted By Number In Ascending OrderTutorialSummary
1InstallationInstall 51Degrees - .Net Mobile Framework and confirm the installation is successful.
2EmulatorsConfigure IIS to work with mobile device emulators improving development productivity.
3Hello WorldAdd a mobile label control to a mobile page and understand major differences compared to standard ASP.NET.
4Mobile ProfileUse a simple database to gain additional insight into the mobile device performance, optimise view state and persist data.
5Clever ImagesOptimise images to consume the bare minimum amount of data for the display on the requesting mobile device without compromising image quality.
6Entering TextMake it easier for your users to enter text by remembering previous values and providing common options.
7DatesCaptures dates quickly and easily using all the capabilities of the requesting mobile device.
8LocationFind out where the requesting mobile device is or get location information from users.
9MapsDisplay maps from Google or Bing, move around and show multiple markers.
10Data Lists and PagersDisplay lists of items and page between them.
11Styling Mobile ControlsStyle mobile web applications using different common characteristics of mobile devices such as screen size or input method.
12DeploymentDeploy the Framework onto a production server and configure IIS and SQL.
Download
Free Perfecto Mobile Trial

Sometimes software emulators just aren't good enough to ensure a great user experience. Consider iPhones. No official emulator is available, and whilst MobiOne does a good job it's not the same as the real thing.

We've used emulators and real phones to test our products. We've also spent 100s of man hours testing our products with Perfecto Mobile. Real mobile phones and testing tools are made available via your web browser and can be accessed by the minute. Like you we just can't afford to buy all the mobile phones needed to create great mobile applications and Perfecto Mobile provided the answer we were happy with.

To find out more about the reasons why you should consider using real mobile devices and not just simulators read this white paper.

We'd really like you to give Perfecto Mobile a free trial today so that you can experience the benefits. Click this link or use the Promotion Code 51Degrees to sign up for a free 2 hour trial now.