C# ПІДРУЧНИКИ / c# / Hungry Minds - ASP.NET Bible VB.NET & C#

Figure 18-13: Selecting road bike

Figure 18-14: Viewing your first page of text

Figure 18-15: Viewing your next page of text

Making phone calls

Because most mobile devices are cell phones, this chapter would not be complete without discussing how to make phone calls from your mobile application. MIT handles this easily, by making the control <mobile:PhoneCall> available to us.

The <mobile:PhoneCall> tag is an easy-to-use tag that presents the user with an option to place a call. If the device does not support phone calls, such as a Pocket PC, then the user can be provided with an optional link. The following code shows how to create a mobile form to make a phone call:

[phonecall.aspx]

<mobile:Form id="Form1" runat="server">

<mobile:PhoneCall PhoneNumber="636-555-1213"

AlternateUrl="details.aspx?id=0" AlternateFormat="{0}">Home

</mobile:PhoneCall>

<br>

<mobile:PhoneCall PhoneNumber="619-555-1214"

AlternateUrl="details.aspx?id=1" AlternateFormat="{0}">Kirk

Physh</mobile:PhoneCall>

<br>

<mobile:PhoneCall PhoneNumber="812-555-1215"

AlternateUrl="details.aspx?id=2" AlternateFormat="{0}">Lee

Sifu</mobile:PhoneCall>

<br>

<mobile:PhoneCall PhoneNumber="812-555-1216"

AlternateUrl="details.aspx?id=3" AlternateFormat="{0}">Shellie

Sommers</mobile:PhoneCall>

</mobile:Form>

In the preceding code, we are taking advantage various attributes of the

<mobile:PhoneCall> tag:

§PhoneNumber is the phone number we want the cell phone to dial when the user picks that selection.

§AlternateUrl is the link that devices that are not phone call–enabled present to the user.

§AlternateFormat is the way the string will be displayed to the user, when using a device that is not phone call-enabled.

Collecting User Data

Up until this point, we've mainly been reading about how to present data to users. We've covered links, lists, bulleted lists, pagination, and dealing with phone numbers. But what about when we want to collect information from users? The remainder of this chapter deals with various input controls, from selection lists, to textboxes, to passwords, to data validation.

Selection lists

A selection list is very similar to a regular mobile control list. However, selection lists have the additional functionality of being a radio button list, drop-down list, list box, or a multiple selection list box. All of this functionality is available to the user simply by setting the SelectType property of the <mobile:SelectionList> tag. The following shows how to use the SelectionList, when the Type property is set to MultiSelectListBox:

[listselect.aspx]

<mobile:Form id="Form1" runat="server">

<mobile:Label id="Label1" runat="server">

Select a Bike Style</mobile:Label>

<mobile:SelectionList id="SelectList1"

Runat="server" SelectType="MultiSelectListBox">

<Item Text="Road Bike" Value="Road"></Item>

<Item Text="Mountain Bike" Value="Mountain"></Item>

</mobile:SelectionList>

<mobile:Command id="Command1" onclick=

"Command1_Click" Runat="server">Go</mobile:Command>

</mobile:Form>

<mobile:Form id="Form2" runat="server">

You Selected

<mobile:Label id="lblResults" Runat="server"></mobile:Label> bike(s).

</mobile:Form>

In this code, we are presenting the user with the option to select more than one bike. In this instance, we are using the MultiSelectListBox. Again, because MIT can detect what type of device is requesting the content, it will provide a different user experience.

Figures 18-16 and 18-17 show how this page looks, both on the Pocket PC emulator and on the Openwave emulator.

Figure 18-16: Listselect.aspx on the Pocket PC emulator

Figure 18-17: Listselect.aspx on the Openwave emulator

The code running behind these mobile forms is simple. We simply loop through each of the items in the SelectionList. If we find that an item was selected, we increment the counter for the number of items selected. The following shows this code in VB.NET and C#.

VB.NET:

[listselect.aspx.vb]

Public Sub Command1_Click(ByVal sender As System.Object, ByVal

e As System.EventArgs) Handles Command1.Click

Dim count As Integer = 0

Dim item As MobileListItem

For Each item In SelectList1.Items

If item.Selected Then

count = count + 1

End If

Next

lblResults.Text = count.ToString()

ActiveForm = Form2

End Sub

C#:

[listselect.aspx.cs]

protected void Command1_Click(object

sender, System.EventArgs e)

{

int count =0;

foreach( MobileListItem item in

SelectList1.Items)

{

if ( item.Selected)

{

count++;

}

}

lblResults.Text = count.ToString();

ActiveForm = Form2;

}

Mobile TextBoxes

Entering text on a cell phone is one of the hardest challenges you may encounter. When building user interfac es for mobile devices, you have to remember that the user doesn't always have a full keyboard to use. Not only that, but the user may not even have keys available for certain symbols. For example, entering a ^ or a ~ isn't always available, and when it is, you may have to go through a cryptic set of keys to find these characters. The bottom line is that, if possible, you should always use or present lists as an option to the user, and only ask for typed input when needed. When you do need the user to actually enter text (for example, a name, address, credit card, or pin number), the <mobile:TextBox> handles this easily.

In the following code, we have an example to ask the user for their name. Once the user enters their name, they click the <mobile:Command> object. We take their name and write it out to Form2.

[textbox.aspx]

<mobile:Form id="Form1" runat="server">

<B>Enter Your Name:</B>

<mobile:TextBox id="txtName" Runat=

"server"></mobile:TextBox>

<mobile:Command id="cmdGo" Runat=

"server">Go</mobile:Command>

</mobile:Form>

<mobile:Form ID="Form2" Runat="server">

Hi

<mobile:Label id="lblName" Runat="server"></mobile:Label>

How are you doing today?

</mobile:Form>

Figure 18-19: A TextBox on a Pocket PC

Using passwords or numbers

In some instances, we need to allow the user to enter a pin number or a password. MIT understands that, more often than usual, you may only want the user to enter numbers, and that any passwords must be masked. Setting the Password property of the <mobile:TextBox> tag to true will mask the input, while setting the Numeric property to true will allow only numbers to be entered. We need to specify which property, in this case the password and numeric properties, we are talking about.

Note The Numeric property only works on devices that support a numeric mode. Cell phones will automatically place the keypad in numeric mode when they recognize the numeric properties. Browsers, however, do not.

The following displays our code to set a TextBox to password mode:

[password.aspx]

<mobile:Form id="Form1" runat="server">

<B>Enter Your Password or Pin Number:</B>

<mobile:TextBox id="txtPassword" Password=

"True" Runat="server"></mobile:TextBox>

<mobile:Command id="cmdGo" Runat="server">

Go</mobile:Command>

</mobile:Form>

<mobile:Form ID="Form2" Runat="server">

<mobile:Label id="lblResult" Runat="server">

</mobile:Label>

</mobile:Form>

Validating input

Some of the most powerful features of ASP.NET are the validation controls. MIT also has its own set of validation controls; however, these validation controls are much more limited, due in part to the limitations of the mobile devi ces we are sending content to. In fact, validation controls can only validate <mobile:TextBox> and <mobile: SelectionList> controls.

Validation controls themselves come in four different flavors:

§RangeValidator: Validates that another control's value falls within a certain range.

§RegularExpressionValiator: Validates another control's value against a regular expression.

§RequiredFieldValidator: Makes sure the user enters a value for a control.

§ValidationSummary: Displays a summary of all validation errors that occur on a form. When using the ValidationSummary control, usually a

separate form is built to display all the errors.

In the following code, we require a user to enter their name in our textbox. We do this by setting the ControlToValidate property to "txtName", which is the name of our TextBox. If the user doesn't enter a value, we obviously want to write out an error message. The error message we chose to show is "Please Enter Your Name" and is specified with the ErrorMessage property.

[validate.aspx]

<mobile:Form id="Form1" runat="server">

<B>Enter Your Name:</B>

<mobile:TextBox id="txtName" Runat="server"></mobile:TextBox>

<mobile:Command id="cmdGo" Runat="server">Go</mobile:Command>

<mobile:RequiredFieldValidator id=

"RequiredFieldValidator1" runat="server" ErrorMessage="Please Enter Your Name"

Display="Dynamic" ControlToValidate="txtName"></mobile:RequiredFieldValidator>

</mobile:Form>

<mobile:Form ID="Form2" Runat="server">

Hi

<mobile:Label id="lblName" Runat="server"></mobile:Label>

How are you doing today?

</mobile:Form>

Summary

We've looked at various controls and aspects of designing mobile applications. We've looked at the simple labels and then moved on to simple lists. We've looked at decorating those by making the lists bulleted or numeric. We've also looked at other ways of presenting data to users, from pagination to selection lists. Finally, we've accepted data via the TextBox, and looked at ways of validating user input.

Developing applications for the mobile Web is a tedious process that requires a lot of forethought. We must take into account various limitations such as screen size, low bandwidth, low power, and, last but not least, the vast array of mobile devices that may be using our Web site. The Mobile Internet Toolkit (MIT) takes all of these considerations into account and provides a tool that works wonders. At the time of this writing, MIT supports over 50 different mobile devices, with many more being added. What would have taken us weeks to develop has been cut down to days or even hours.