|  Register
Instructions

Objectives

  • Retrieve the average approximate bandwidth between the requesting mobile device and the server and redirect low bandwidth scenarios to different pages.
  • Persist data between multiple sessions without writing custom database code.
  • Remember previous control settings without using cookies.
  • Understand the MobileProfile.

Prerequisites

Step 1 - Bandwidth & Response Time

Mobile web applications are particularly sensitive to available bandwidth performing unacceptably slowly in some situations. That's why we've gone to so much effort to reduce the size of pages created from ASP.NET Web Forms. Sometimes it's useful to know the bandwidth available between your server and the requesting mobile device. 51Degrees.mobi - .Net Mobile Framework's MobileProfile object's Bandwidth property provides the average round trip bandwidth expressed in kilobits per second (kbs). The following code uses the Bandwidth property to redirect the request to an appropriate page.

protected void Page_Load(object sender, EventArgs e)
{
    // If the connection is too slow to provide any sensible
    // pages and redirect the browser to a polite message asking
    // them to come back late.
    if (MobileProfile.Bandwidth < 14)
        Response.Redirect("~/TooSlow.aspx");
 
    // If the connection is slow direct the request to home page
    // designed for low bandwidth situations.
    else if (MobileProfile.Bandwidth < 64)
        Response.Redirect("~/LightWeight/Default.aspx");
 
    // Continue as we're in a high bandwidth scenario.
}

We believe it's better to be polite and let users know the web site know they're not getting the experience intended than allowing users to continue to struggle and have a negative view of the mobile web application. Until mobile operators provide guaranteed quality of service for mobile device data connections there's not much more that can be done.

In addition to the bandwidth property Mobile Profile also provides the
ResponseTime property which returns the average response time in milliseconds for pages over the past 5 minutes. This can be used to determine in real time the response times being experienced by an individual user irrespective of the amount of data involved.

Both
Bandwidth and ResponseTime require at least one page request cycle to be fully completed before they return a value other than zero. They will return zero values for mobile devices that do not support JavaScript or where there is insufficient historic performance data available to provide a valid value. 51Degrees.mobi integrates these performance monitoring feature into standard page processing and does not waste valuable data resources obtaining these values.

Step 2 - Persisting Data

Traditional ASP.NET Web Forms applications enable objects to be stored in the Session between requests. Mobile web applications will often have different usage characteristics with users "dipping" in and out over an extended period of time. In these situations Session storage limitations may become too restrictive. Cookies consume bandwidth as they're continually sent from mobile device to server even if they're not used. To provide the persistence characteristics of cookies, the ease of use and bandwidth friendly benefits of session 51Degrees.mobi - .Net Mobile Framework enables data to be persisted in the MobileProfile.

The following code stores the last date and time the application received a request from the mobile device in the Mobile Profile. If the value is present when the page is subsequently requested a label is added to the page to display the previous value.

protected void Page_Load(object sender, EventArgs e)
{
    // Get the last accessed time from the mobile profile if it exists.
    string lastAccessedTime = MobileProfile["LastAccessedTime"] as string;
     
    // If the last accessed time exists then add a label to the page indicating
    // the last time the mobile device requested a page from the application.
    if (lastAccessedTime != null)
    {
        Label label = new Label();
        label.Text = String.Format("Last Accessed Time: '{0}'", lastAccessedTime);
        Page.Controls.Add(label);
    }
     
    // Store the last accessed time for future reference.
    MobileProfile["LastAccessedTime"] = DateTime.UtcNow.ToString();
}

The MobileProfile will persist data over a longer period of time than the Session. Data will not be flushed if the mobile device's browser is closed, the web site changed or the device restarted.

Step 3 - Remember Previous Choices

Many controls have been enhanced to remember previous choices if values are not explicitly provided by the developer. Add the following ASP.NET code to the web page and execute in Internet Explorer.

<mob:RadioButtonList runat="server" ID="RadioButtonListTicketType">
    <asp:ListItem Text="One Way" Value="1" Enabled="true" />
    <asp:ListItem Text="Return" Value="2" Enabled="true" />
</mob:RadioButtonList>
<mob:Button runat="server" Text="Submit" />

Choose one of the options and then press the submit button. Close Internet Explorer and then restart the application. Notice that the selected radio button will be the value chosen previously. No new properties have been used to provide this functionality which now becomes the default behaviour. Any control that can store a selected value will now exhibit this behaviour including check boxes, radio buttons and text boxes.

An additional property called ProfileDataKey can be used to share the persisted value between multiple instances of the same control type. Modify the previous code by adding a second radio button list and adding the ProfileDataKey set to a shared value. You should have at least two pages with code similar to the following.

<mob:RadioButtonList runat="server" ID="RadioButtonListTicketType1" ProfileDataKey="TicketType">
    <asp:ListItem Text="One Way" Value="1" Enabled="true" />
    <asp:ListItem Text="Return" Value="2" Enabled="true" />
</mob:RadioButtonList>
<hr />

Every page these radio buttons are on will share the same value. Open a page in Internet Explorer. Notice how no radio buttons are selected. Chose a radio button from list, and then move to another page with the radio buttons. Notice how they correspond. Change the choice again and reopen the original page and the radio buttons will change again. Now close Internet Explorer and restart the application. Notice all the radio button lists have defaulted to the previously selected value. ProfileDataKey can be handy way of synchronising default values between controls capturing the same data but displayed on different web pages.

Conclusion

MobileProfile is a powerful and simple to use storage mechanism to radically improve a mobile web applications usability. Choices that would requiring many presses of a joystick, or taps of a finger, can be remembered avoiding the need to re-enter the information. Data can temporarily be persisted over multiple pages supporting scenario's where a large amount of data is captured over a number of smaller pages. For example; data needed to complete an e-commerce transaction. Finally new value adding information such as Bandwidth is exposed for use in new mobile only scenarios.

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.
Partners
51Degrees.mobi Limited is a Silver Microsoft Partner GSMA Smarter Apps Guideline
Awards
Mobile Monday London MWC Award DTG IBC Award IBC 2013 Exhibitors Innovate UK Exhibitor Award Mobile Entertainment Awards 2013 Finalist
Social