|  Register
Instructions

Objectives

  • Enable the textbox to remember previously entered values.
  • Add static and variable preconfigured common options to a textbox. 
  • Different behaviour on mobile devices that do not support javascript.

Prerequisites

Step 1 - Text Box List

Entering text is one of the most awkward activities to perform on a mobile deivce. The keyboard at best is too small, at worst only contains 10 usable keys. We therefore strongly recommend a mobile web application minimises the use of textboxes. However we recognise there are some situations when there is just no other substitute. We've enhanced the text box control so that it can provided common values and previous entries in the form of a selectable drop down list.

Start by creating a new web mobile form and paste the following code between the form elements of the page.

<mob:Label ID="Label1" runat="server">Title:</mob:Label>
<mob:TextBox ID="TextBox1" runat="server" MaxItems="6"  >
    <Items>
        <mob:TextBoxItem Text="Mr" />
        <mob:TextBoxItem Text="Mrs" />
        <mob:TextBoxItem Text="Miss" />
        <mob:TextBoxItem Text="Ms" />
    </Items>
</mob:TextBox>
<mob:Button ID="Button1" runat="server" Text="Submit" />

Now open the page in Internet Explorer and select the textbox. You should find the 4 preconfigured words "Me", "Mrs", "Miss" and "Ms" appear underneath similar to the following screen shot.



These four preconfigured words can be selected using the mouse and will appear in the textbox saving the need to type them in.

Enter the text "Lord" and press Submit. When the page has refreshed enter the text "Lady" and press Submit again. When the textbox is next selected you will notice that the previously entered item "Lord" is now displayed for selection alongside the preconfigure values similar to the following screen shot.



The number of items available for selection is controlled using the new MaxItems property of the TextBox control. Setting the value to zero will disable this feature.

Step 2 - Multiple Devices

If you have not done so already alter the project so that it is running via IIS and can be accessed from a devices other than the localhost. Tutorial 3 provides details of how to do this.

Open the Android emulator, or another modern emulator of your choice, and enter the URL to the web form created in Step 1. You should find a screen similar to the following will be displayed.



The GUI is very similar to the one provided via a desktop browser. Notice the "Lord" and "Lady" values entered in Step 1 are not displayed. This because previously entered text is persisted in the Mobile Profile and will not be shared across profiles.

TextBox is just one of many controls that rely on JavaScript being present to operate as expected. Unfortunately not all mobile devices provides a consistent and reliable implementation of JavaScript. This is particularly true of mobile devices manufactured before 2010. For this reason the TextBox control, along with all other 51Degrees.mobi - .Net Mobile Framework controls, provides a fall back implementation that operates on such phones.

If you have not done so already install an emulator for an older phone such as Nokia S40 edition 5 or below, or OpenWave. See our emulators page for a list of options. Opening the same page on a Nokia S40 edition 5 emualtor will display the following result.



Notice the presence of a little Blue icon to the right of the text box. As the device does not implement Javascript to a sufficiently high standard this icon has been added to enable the user to expand or collapse the list of selectable items.

Step 3 - Adding Items Dynamically

Remove the Items element added during Step 1 from the page source. Paste the following code into the forms base class.

protected void Page_Load(object sender, EventArgs e)
{
    DateTime month = DateTime.Now;
    for (int i = 0; i < TextBox1.MaxItems; i++)
    {
        TextBox1.Items.Add(new TextBoxItem(
            System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(month.Month), i));
        month = month.AddMonths(1);
    }
}

This revised code adds the next X month names into the Items collection of the TextBox. The number of month names added is dependent on the MaxItems property of the TextBox1 control. When the page is next displayed and the textbox receives focus the new months will be available for selection. See the following screen shot.



You many observe not all the months will be available because previously entered values from Step 1 and 2 will be present. The Priority property of the TextBoxItem class determines the importance of the item. If more items are present in the Items collection than the MaxItems property allows for only the highest priority items are displayed. This prevents too long a list of items being presented to the user. The lower the Priority property value the lower the importance of the item.

Conclusion

It's unlikely a production mobile web application would capture a month using a textbox. However some textbox's within the application are often capturing very similar values. Consider the entry of country, state, airport or railway station name. A simple query of the database could return the top 5 entered items and these could be used to pre-populate the text box items collection. Think how much more likely a user is to complete a transaction if as many barriers as possible have been removed.
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