You have learned about various controls that can be used in a mobile Web application. You can now use this knowledge to create the mobile Web forms required for a MobileTimeRetriever application.

Creating the Interface for the Mobile Web Forms

The MobileTimeRetriever application contains two forms, frmOptions and frmResult. Figure 32-16 shows the interface of the frmOptions form.

FIGURE 32-16 The interface of the frmOptions form

As you can see, the frmOptions form contains three Label controls, one Command control, and one SelectionList control. To add these controls to the form, drag the controls from the mobile Web forms control toolbox to the form and change the following properties of the controls.

Label1

ID: lblCurrentTime

Text: The current time in New York is:

Font:

Bold: True

752 Project 6 CREATING A MOBILE APPLICATION

Label2

ID: lblCurTime

Text: Label

Label3

ID: lblRegion

Text: Select a new location below:

Font:

Bold: True

Command1

ID: cmdFindTime

Text: Find Time

SelectionList

ID: lstLocations

Items: The items to be added in the SelectionList control are displayed

in Table 32-1.

Table 32-1 Items to Be Added to the SelectionList Control

In the General tab of the lstLocations Properties dialog box, change the following properties:

Select Type: DropDown

Rows: 4

After creating the interface for the frmOptions form, create the interface for the frmResult form. Figure 32-17 shows the interface for the frmResult form.

FIGURE 32-17 The frmResult form

The frmResult form contains three Label controls and one Command control. Change the following properties of the controls:

Label1

ID: lblSelLoc

Text: You selected:

754 Project 6 CREATING A MOBILE APPLICATION

Label2

ID: lblTime

Text: Time:

Font:

Bold: True

Label3

ID: lblOrgLoc

Text: (as of EST)

Command1

ID: cmdBack

Text: Back

After creating the interface, add code to the controls in the MobileTimeRetriever application.

Adding Code to the MobileTimeRetriever Application

Once you have added the controls to the form,Visual Studio .NET automatically creates the declaration statements for the controls. However, to make the controls functional, you need to add code to the Click events of the Command controls.

Adding Code to the cmdFindTime Command Control

When a user selects the location from a lstLocations SelectionList control and clicks on the cmdFindTime Command control, the application displays the current time in the selected location. To do this, add the following code to the Click event of the cmdFindTime Command control.

private void cmdFindTime_Click(object sender, System.EventArgs e)

{

DateTime currentTime= DateTime.Now; TimeSpan timeDiff=new TimeSpan(0,0,0); switch (lstLocations.Selection.Value)

{

case “1”:

timeDiff=new TimeSpan(5,0,0); break;

case “2”:

timeDiff=new TimeSpan(8,0,0); break;

case “3”:

timeDiff=new TimeSpan(12,0,0); break;

case “4”:

timeDiff=new TimeSpan(13,0,0); break;

case “5”:

timeDiff=new TimeSpan(15,0,0); break;

}

DateTime newTime=currentTime.Add(timeDiff); lblSelLoc.Text=”You selected: “ + lstLocations.Selection.Text;

lblTime.Text=”Time at the selected location:” + Convert.ToString(newTime); lblOrgLoc.Text=”(as of “ + DateTime.Now + “ EST)”;

ActiveForm=frmResult;

}

The previous code creates a variable, currentTime, of the struct DateTime in the System namespace. It then uses the Now property of the struct DateTime to retrieve the current date and time on the computer. The value returned by the Now property is stored in the currentTime variable. The code then creates an instance, timeDiff, of the TimeSpan struct in the System namespace. The TimeSpan struct is used to represent a time interval. Next, a switch case is used to trap the value selected by the user in the SelectionList control. To do this, the Value property of the MobileListItem class is used.

Then, the instance of the TimeSpan struct is used to find the time for different locations. The difference between the time in New York and the selected city is passed as a parameter to timeDiff. For example, the difference between the time in New York and London is five hours.Therefore, this time difference in hours is passed as a parameter to the default constructor of timeDiff. Similarly, the time

756 Project 6 CREATING A MOBILE APPLICATION

difference between other cities is passed to timeDiff for different cases of the switch statement.

The code then creates another variable of the DateTime struct, newTime. Then, the Add() method of the DateTime class is used to add the value stored in timeDiff to the value stored in the currentTime variable. The result is then stored in the newTime variable, which is then converted to a string and displayed in the lblTime Label control. The location selected by the user is displayed in the lblSelLoc Label control. The time at the original location, New York, is displayed in the lblOrgLoc Label control. Finally, the code makes the frmResult form active. Figure 32-18 shows the frmOptions form at run time.

FIGURE 32-18 The frmOptions form at run time

When the user clicks on the Find Time button, the frmResult form becomes active. Figure 32-19 shows the frmResult form at run time.

FIGURE 32-19 The frmResult form at run time

To return to the frmOptions form from the frmResult form, the user needs to click on the Back button. The following section discusses how to add code to the Back button.

Adding Code to the cmdBack Command Control

When a user clicks on the Back button, the frmOptions form becomes active. To do this, add the following code to the Click event of the cmdBack Command control.

private void cmdBack_Click(object sender, System.EventArgs e)

{

ActiveForm=frmOptions;

}

The preceding code uses the ActiveForm property to set the frmOptions form as active. The entire code of the application is as shown below.

using System;

using System.Collections;

using System.ComponentModel;

{

case “1”:

timeDiff=new TimeSpan(5,0,0); break;

case “2”:

timeDiff=new TimeSpan(8,0,0); break;

case “3”:

timeDiff=new TimeSpan(12,0,0); break;

case “4”:

timeDiff=new TimeSpan(13,0,0); break;

case “5”:

timeDiff=new TimeSpan(15,0,0); break;

}

DateTime newTime=currentTime.Add(timeDiff); lblSelLoc.Text=”You selected: “ + lstLocations.Selection.Text;

lblTime.Text=”Time at the selected location:” + Convert.ToString(newTime); lblOrgLoc.Text=”(as of “ + DateTime.Now + “ EST)”;

ActiveForm=frmResult;

}

private void cmdBack_Click(object sender, System.EventArgs e)

{

ActiveForm=frmOptions;

}

}

}

In Figures 32-18 and 32-19, you saw the forms in Internet Explorer. To have an idea of the look of the forms in a mobile device, you can view the output of the application in a WAP device emulator. To view the output of the application in an emulator, you need to install the emulator and the WAP gateway. After installing the emulator and the gateway, you need to perform the following steps to view the output in the emulator:

1. On the View menu, point to the Mobile Explorer Browser option.

760Project 6 CREATING A MOBILE APPLICATION

2.In the displayed list, select the Show Browser option.

3.Type the URL address of the mobile Web page in the Address box of the emulator and then press the Enter key.

The output is shown in the emulator. Figure 32-20 shows the frmOptions form in an emulator.

FIGURE 32-20 The frmOptions form in an emulator

Figure 32-21 shows the frmResult form in the emulator.