The MobileTimeRetriever application opens in the design view. Visual Studio
.NET creates a number of default files for the mobile Web application, as displayed in the Solution Explorer window. The MobileWebForm1.aspx file is selected by default. In addition to the default files, Visual Studio .NET creates a blank mobile Web form, Form1, in the design view. Figure 32-6 shows the default files and the mobile Web form.
FIGURE 32-6The default files and a blank mobile Web form for the MobileTimeRetriever application
The following section discusses the mobile Web form in detail.
The Mobile Web Form
A mobile Web application contains a mobile Web form by default. However, you can add multiple mobile Web forms to the application. All the mobile Web forms that you add to your application appear on a single mobile Web form page in the design view. However, at run time, only one mobile Web form appears to a user at a time. The mobile Web form has an extension .aspx and appears as a control in the mobile Web forms toolbox. When you install the Mobile Internet Toolkit on your computer, the mobile Web forms toolbox is added to the toolbox of Visual Studio .NET. Figure 32-7 shows the mobile Web forms toolbox.
738 Project 6 CREATING A MOBILE APPLICATION
Y
L
F
M
A
FIGURE 32-7The mobile Web forms toolbox
T
As you can see in FigureE32-7, the mobile Web forms toolbox contains several other mobile Web controls in addition to the mobile Web form control. You can
add these mobile Web controls to the mobile Web form that you create. You can add the mobile Web controls to either a Form control or a Panel control. However, you cannot directly add the controls to the mobile Web forms page. The Form or Panel control acts as a container to store and display the mobile Web forms controls that need to be displayed in a mobile Web forms page. You wil l learn more about various mobile Web forms controls later in this chapter.
TIP
You can add as many mobile Web controls as you want to a Form or Panel control. However, to increase the usability of a mobile Web form, it is advisable that you add the minimum possible controls to a mobile Web form. You can add any number of mobile Web forms to a mobile Web form page.
Team-Fly®
BASICS OF MOBILE APPLICATIONS
Chapter 32
739
In addition to the mobile Web forms control, a mobile Web form also contains the content from a Web site. You can display the content of the site in the controls on a mobile Web page. When a user sends a request for a Web page, the content of the Web page is displayed to the user in the format that is supported by the mobile device on a mobile Web form. While displaying data of a site on a mobile device, the mobile Web form page automatically identifies the type of the mobile device and converts the content of the site to the format that can be displayed on the device.Therefore, a mobile Web form acts as an interface that presents the content of a Web page to a user of a mobile device. In addition,a mobile Web page helps hide the code of the Web page from the user by displaying only the content of the Web page to the user.
A mobile Web form is similar to an ASP.NET Web form page. In addition, the process of creating a mobile Web form application is similar to the process of creating an ASP.NET Web form application. In this project, I will discuss how to create a mobile Web form application that can be accessed from a mobile phone.
After discussing mobile Web forms, which are the building blocks of a mobile Web application,in detail, this section will continue with creating a simple mobile Web application, MobileTimeRetriever. The MobileTimeRetriever application is a simple mobile Web application that displays the current time in the city of New York and allows the user to select a city from a list and find the current time in the selected city. The steps to create a mobile Web application are the same as the steps to create a Windows application that you did in the last two projects:
1.Create the interface for the application.
2.Write the code for the application.
However, before creating any mobile Web application, it is essential that you design the mobile Web forms in the application. The following section discusses the design of the MobileTimeRetriever application.
The Design of the MobileTimeRetriever Application
Designing the application before its actual creation is all the more essential in the case of a mobile Web application. This is because of the smaller screen size of a
740 Project 6 CREATING A MOBILE APPLICATION
mobile device.The content of a site in a mobile device is not shown as a single or multiple page Web site. Instead, the entire content of the site is displayed in the form of smaller but logical chunks of data presented in a linear manner. These chunks of data are displayed in the controls on a mobile Web form.
When the data in the controls needs to be displayed, these controls are broken down into smaller units called screens by the Mobile Internet Toolkit. The size of the screen is determined by the type of device on which you need to deploy the mobile application. However, while designing a mobile application, you need not worry about the different screen sizes of various mobile devices. The Mobile Internet Toolkit allows you to create applications once for various mobile devices. The code then adapts to the various form factors, such as the screen size, bandwidth, and memory of the accessing client device.
As discussed earlier, the mobile Web forms toolbox contains several tools that you can use to create a mobile application. In addition, the Mobile Internet Toolkit allows you to create custom Web forms tools for your application. In the following sections, I will discuss about the standard controls available. You can then use these standard controls to design a MobileTimeRetriever application.
The Form Control
I have already discussed Form controls.A Form control is a container used to store and display other mobile Web forms controls. At run time, a single form is displayed at a time. However, you can access multiple forms on a mobile Web page by using the same URL address of the Web page. To add a form to your mobile Web forms page, drag the Form control from the mobile Web forms toolbox to the mobile Web forms page.
The Panel Control
The Panel control is similar to a Form control in that it can be used to logically group related controls. However, unlike a Form control, you cannot place a Panel control directly on the Web forms page. A Panel control needs to be included in a Form control or another Panel control. Alternatively, you cannot nest a Form control within a Panel control. If you try to include a Form control within a Panel control, an error is generated, as shown in Figure 32-8.
BASICS OF MOBILE APPLICATIONS
Chapter 32
741
FIGURE 32-8The error displayed on including a Form cont rol within a Panel control
In addition to organizing controls in a Panel control, you can use a Panel control to set the properties of all the controls within the same Panel control.
The MobilePage Control
In addition to the Form and Panel controls, Visual Studio .NET provides you with another control called the MobilePage control, which groups related controls. The MobilePage control acts as a container for all other containers in a mobile Web application. This implies that the MobilePage control is the outermost container in a mobile Web application and has an associated URL address. The MobilePage control has a class associated with it called the MobilePage class. It is the base class for all the controls in a mobile Web application and stores the information about the style and other properties that are common to the controls in a MobilePage control. Figure 32-9 shows a MobilePage control.
742 Project 6 CREATING A MOBILE APPLICATION
FIGURE 32-9The MobilePage control
NOTE
The MobilePage control is not packaged as a control in the mobile Web forms controls toolbox.Visual Studio .NET automatically creates a MobilePage control for your application. You can add one or more Form controls to the MobilePage control. In addition, the MobilePage control may contain a StyleSheet control.
The Label Control
A mobile Web form Label control is similar to a Windows forms Label control. A Label control is used to display any text in mobile application. You can add text to a Label control either by setting the Text property of the Label control or by programmatically changing the text of the Label control. To add a Label control to your form, drag the Label control from the mobile Web forms toolbox to the Form or Panel control.
BASICS OF MOBILE APPLICATIONS
Chapter 32
743
TIP
You can have multiple controls in different mobile Web forms. However, you should not give the same name to the controls in different Web forms for the same mobile Web application. You can specify a name for a control by using the ID property of the control.
The TextBox Control
A TextBox control is another control that allows you to display text. You can use a TextBox control to allow users to input text, which is then stored in the Text property of the control.Unlike the TextBox control in a Windows application, the TextBox control in a mobile application is used to display single-line text. To display text in multiple lines, you use a TextView control.
The TextView Control
A TextView control is used to display text in a mobile application, similar to a TextBox control. However, a TextView control is used to display multiple lines of text. You can use the Text property of the TextView control to specify the text to be displayed in a TextView control. The Text property of the TextView control accepts HTML tags to specify the formatting of the text in the TextView control. Figure 32-10 shows a TextView control in a mobile Web form.
FIGURE 32-10The TextView control in a mobile Web form
744 Project 6 CREATING A MOBILE APPLICATION
To display the text as it appears in Figure 32-10, add the following text to the Text property of the control.
A TextView control is used to display text in a mobile application. <br>
You can display text in multiple lines in a TextView control.
The Link Control
A Link control is a text-based control that creates a text hyperlink. You can use this hyperlink to connect to another form or another mobile Web page. You can specify the name of the form or the URL of the page in the NavigateURL property of the control.
The PhoneCall Control
A PhoneCall control is another text-based control that is used to store a phone number to be called. When a PhoneCall control is accessed from a mobile device, such as a cellular phone, the PhoneCall control dials the number specified in the control.
The List Control
A List control is used to display a list of items in a mobile device. A user can select any item from the List control. To add items to a List control, use the Items property of the control. You can also associate the List control to a data source to display a list of items from a data source. Perform the following steps to display a list of items in a List control.
1.Drag a List control from the mobile Web forms toolbox to a mobile Web form.
2.Select the List control to make it active.
3.In the Properties window of the list control, change the ID property of the control to lstCountry.
If the Properties window is not visible, press the F4 key or select the Properties Window option on the View menu.
4.Click on the ellipsis button of the Items property to add items to the List control.
BASICS OF MOBILE APPLICATIONS
Chapter 32
745
The lstCountry Properties dialog box is displayed. To associate the List control to a data source, select the General tab. However, you can add items to the List control in the Items tab of the lstCountry Properties dialog box. The Items tab is displayed by default.
5. Click on the Create New Item button to add a new item.
A new item is added to the list. To change the text of the new item that is added, you can specify the text in the area that shows Text.
6.Type the name of the first item as Australia.
7.Repeat Steps 5 and 6 to add more items to the List control.
You can add Belgium, China, Germany, India, Japan, France, United King-
dom, and United States. You can move an item in the list by using the Up or Down Arrow keys in the lstCountry Properties dialog box. Figure 32-11 shows the lstCountry Properties dialog box.
Visual Studio .NET allows you to create list items as hyperlinks. To do so, check the Render list items as hyperlinks check box.
8. Click on the OK button to close the lstCountry Properties dialog box.
FIGURE 32-11The lstCountry Properties dialog box
The items are added to the lstCountry list control.
746 Project 6 CREATING A MOBILE APPLICATION
The SelectionList Control
A SelectionList control is similar to a List control because it can be used to display a list of items. However, you can use a SelectionList control to provide users with a choice of options in the form of a drop-down list, radio buttons, check boxes, and combo boxes. A user can select one or more options from a SelectionList control. When a user selects an item from the list, the selected item is not automatically posted to the server. To do this, the user needs to explicitly click on the Command control. You will learn about the Command control later in this chapter.
To display the list of countries as you did in the previous section, you can also use a SelectionList control instead of a List control.To add items to the SelectionList control, use the Items property of the control. The procedure for adding items to a SelectionList control is the same as that of adding items to a List control. Figure 32-12 shows the items added to a SelectionList control and a List control.
FIGURE 32-12The items added to a SelectionList control and a List cont rol
The ObjectList Control
An ObjectList control is also used to display a list of items in a mobile application. However, the list of items in an ObjectList control includes the list of data objects. To display a list of data objects in an ObjectList control, you need to bind the ObjectList control to a data source. You can do this by using the DataSource property of the control.
BASICS OF MOBILE APPLICATIONS
Chapter 32
747
The Command Control
A Command control is similar to a Button control that is used to post user input to a server. For example, when a user types data in a text box and selects an option from the SelectionList control, the user needs to click the Command button to post this data on the server.
The Image Control
An Image control is used to display an image in a mobile application. An image control allows you to specify an image in multiple formats, depending on the type of device on which the image needs to be displayed. A file format defined for a type of a device may not be displayed on another type of device.
The Calendar Control
A Calendar control is used to add a calendar to the mobile Web form page. A user can select a date, month, and year in the Calendar control. You can change the properties of a Calendar control to change the look of the control. Figure 32-13 shows a Calendar control with a date selected.
FIGURE 32-13The Calendar control with a date selected
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
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-15The ValidationSummary control with an e rror message displayed
