Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

C# ПІДРУЧНИКИ / c# / Premier Press - C# Professional Projects

.pdf
Скачиваний:
475
Добавлен:
12.02.2016
Размер:
14.7 Mб
Скачать

748 Project 6 CREATING A MOBILE APPLICATION

The StyleSheet Control

A StyleSheet control is used to store the styles applied to the controls in a mobile Web form page. The StyleSheet control consists of a number of style elements that can be accessed by the name of the element specified in the Name property of the style element. A StyleSheet is associated with a mobile Web form page and, therefore, needs to be placed directly on the mobile Web form page. To specify the style elements in a StyleSheet control, perform the following steps:

1. Drag the StyleSheet control to the mobile Web form page.

 

 

 

F

2. Right-click on the control to add the style elements.

 

The StyleSheet1 Styles Editor dialogYbox is displayed.

 

 

 

M

3. To add a style to the StyleSheetLcontrol, select the style from the Style

 

Types: list box and click on the > button.

 

 

E

The style element is added to the StyleSheet control. Figure 32-14 shows the

 

T

 

StyleSheet1 Styles

ditor dialog box with the PagerStyle1 style element added

to it.

 

A

FIGURE 32-14 The StyleSheet1 Styles Editor dialog box

Team-Fly®

BASICS OF MOBILE APPLICATIONS

Chapter 32

 

749

 

 

 

 

 

 

The Validation Controls

In addition to the previously discussed controls, the mobile Web forms controls also include some validation controls, such as RequiredFieldValidator, RegularExpressionValidator, CompareValidator, RangeValidator, and CustomValidator. The following sections discuss the validation controls in a mobile Web page.

The RequiredFieldValidator Control

A RequiredFieldValidator control is used to ensure that a user enters a value in the associated control. If the control has a default value, the RequiredFieldValidator control checks whether the value entered by the user is different from its initial value. You can associate a control to the RequiredFieldValidator control by using the ControlToValidate property of the RequiredFieldValidator control.

The RegularExpressionValidator Control

If you need to validate the value of a control entered by a user against an expression, you can associate the control to the RegularExpressionValidator control. To do this, you specify the name of the control in the ControlToValidate property of the RegularExpressionValidator control. You can specify the expression to which the value is matched by selecting an expression from the Regular Expression Editor dialog box. You can also create a custom expression in the Regular Expression Editor dialog box. To access the Regular Expression Editor dialog box, click on the ellipsis button of the ValidationExpression property.

The CompareValidator Control

A CompareValidator control is used to compare the values in two controls. You can specify criteria for the values that need to be compared. In addition, you need to specify the control in order to associate it with the CompareValidator control. You can do this by specifying a control in the ControlToCompare property of the CompareValidator control.

The RangeValidator Control

A RangeValidator control is used to validate that the value of an associated control lies within the range that you specify. You can specify the range by setting the value of the MaximumValue and MinimumValue properties of the RangeValidator control.

750 Project 6 CREATING A MOBILE APPLICATION

The CustomValidator Control

A CustomValidator control allows you to write custom code to validate the value specified in a control. You can specify an error message to be displayed when the value entered in the control is incorrect. To display an error message, change the ErrorMessage property of the control.

You have seen the validation controls that you can use in a mobile Web application. However, to display the error message when an error occurs, you need to include a ValidationSummary control.

The ValidationSummary Control

A ValidationSummary control is used to display the summary of the errors that occurred when the values entered in the controls are validated by the validation controls.The ValidationSummary control displays the list of error messages as you specify in the ErrorMessage property of the validation controls. To display the errors that occur while validating a form, you need to associate the ValidationSummary control with a form. To do this, you specify the name of the form in the FormToValidate property of the control. In addition, you can change the font of the error message that is displayed in the ValidationSummary control by changing the Font property of the control. Figure 32-15 shows a ValidationSummary control with an error message displayed.

FIGURE 32-15 The ValidationSummary control with an e rror message displayed

BASICS OF MOBILE APPLICATIONS

Chapter 32

751

 

 

 

 

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

ItemText

Value

Selected

London

1

Checked

Moscow

2

Unchecked

Bangkok

3

Unchecked

Singapore

4

Unchecked

Sydney

5

Unchecked

 

 

 

BASICS OF MOBILE APPLICATIONS

Chapter 32

753

 

 

 

 

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)

BASICS OF MOBILE APPLICATIONS

Chapter 32

755

 

 

 

 

{

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.

BASICS OF MOBILE APPLICATIONS

Chapter 32

757

 

 

 

 

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;