Screen Orientation-Aware Mobile Applications

New VGA Pocket PC devices have been on the market for just a few months, but they have already become popular worldwide. Using Windows Mobile 2003 Second Edition, it is possible to use one of their great features—the ability to work in the double resolution VGA environment. Windows Mobile SE also has native support for portrait as well as landscape mode. These features are the new big challenge for developers of mobile applications.

Developer tools such as MS Visual Studio .NET provide a convenient environment suitable for mobile application development using Compact Framework. A disadvantage is that individual forms of such applications must be designed for a specific display resolution.

In this article I would like to show an alternative way of creating universal forms, which allow form design to be completely separated from their functionality, thanks to XML Templates. This way, a form can be designed for several different display resolutions or platforms.

Forms containing multiple controls

Designing mobile forms in Visual Studio .NET is quite easy. At the beginning we create a new Smart Device Application project, targeting the Pocket PC platform. The project by default creates a new Windows Form named Form1. Now we can open Form1 in the Visual Studio designer and by the drag-and-drop method place required controls on it.

In my sample I create a simple Contact Info Form, containing contact information such as Company, Name, E-mail, Address, etc, while using controls of type TextBox, ComboBox, and CheckBox, to allow data editing.

Form1 is designed to fit the portrait mode. (Fig. 1) But if I wanted to use the same Contact Info Form in the landscape mode, I would have to move and resize almost all of the controls within the form. In order to effectively use the small space of the mobile form I have to create a new Windows Form named Form2 (Fig.2). Then I set its size to 320x240 to fit the landscape mode and likewise change the layout of its controls.

Fig. 1: Form1 is designed in portrait mode.

Fig. 2: Form2 is designed in landscape mode.

At first, this solution seems to be perfect. Problems occur when you want to add some code to the form. For example, if you wanted to handle Validating and Validated Events for the Customer Email TextBox (to allow input of correct e-mail addresses only), you would need to add the following code to the form:

Private Sub txtEmail_Validating(ByVal sender As Object, _

	ByVal e As System.ComponentModel.CancelEventArgs) _

		Handles txtEmail.Validating

	If txtEmail.Text.IndexOf("@") = -1 Then

	' Cancel the event and select the text to be corrected by the user.

	e.Cancel = True

	txtEmail.Select(0, txtEmail.Text.Length)

	' Set the BackColor of the Email textBox to the Red. 

	txtEmail.BackColor = Color.Red

	End If

End Sub

	Private Sub txtEmail_Validated(ByVal sender As Object, _

		ByVal e As System.EventArgs) Handles txtEmail.Validated

	' If all conditions have been met, Reset the BackColor.

	txtEmail.BackColor = Color.White

End Sub