Development of .NET Compact Framework Windows Applications for Pocket PCs

Telecommunications Program

Development of .NET Compact Framework Windows Applications for Pocket PCs

Part I: Objective

The goal of this lab is to introduce you to a development of .NET Compact Framework Windows applications for pocket PCs. You will learn about a development of simple .NET Compact Framework applications using Visual Studio .NET 2003 Integrated Development Environment (IDE), basic C# programming language, and running the applications on a packet PC emulator and a pocket PC device. Part II: Equipment List

1. A personal computer 2. A Visual Studio .NET 20033. A Pocket PC 2003 SDK4. Emulators for Pocket PC 2003 Second Edition5. A pocket PC 2003 Second Edition

Part III: Introduction

Student Name: _________________________

Telecommunications Program, SIS, University of Pittsburgh

The .NET Compact Framework is a subset of the full .NET Framework that is designed for building applications for resource-constrained devices, such as Pocket PCs (focused here), set-top boxes and smart mobile phones.

The .NET Compact Framework has two main components: the common language runtime and the .NET Compact Framework class library.

The common language runtime is responsible for managing code at the execution time (similar to a Virtual Machine in JAVA). Code management can take the form of memory management, thread management, security management, code verification and compilation and other system services. The runtime uses just-in-time compiling, which allows you to create application that can target a variety of platforms and not have to worry about recompiling or generating executables that target each specific platform (i.e., operating system and CPU portability).

The .NET Compact Framework class library is a collection of classes that you can use to quickly and easily develop applications that run on resource-constrained devices. It enables you to accomplish a range of common programming tasks, such as user interface design, database access and file I/O. The .NET Compact Framework shares approximately two thirds of the classes in common with the full .NET Framework (for developing application that run on a desktop). The classes and class members are organized hierarchically under the name space. For more information about support for individual classes in the .NET compact Framework, see the .NET Compact Framework software development kit (SDK) documentation.

A .NET Compact Framework application is an application built to use the .NET Compact Framework libraries. (The focus of this lab is on building Windows applications, i.e., an application with a user interface.) To develop .NET Compact Framework applications for Pocket PC, Smart Phones or window CE-based devices, a Microsoft Visual Studio .NET 2003 Integrated Development Environment (IDE) is used. There are two options of programming languages for developing .NET Compact Framework applications: Visual C# (focused here) and Visual Basic.

Part IV: Software Requirement

You may skip this part since these tools and SDKs have already been installed on the lab PC. To develop .NET Compact Framework applications, you need to install tools and SDKs on a PC in the following order. Please also refer to the appendix A of [2].

1. Uninstall all existing tools, SDKs, and emulators before proceeding. You should uninstall the following programs before proceeding with this installation:

eMbedded Visual Tools 3.0 eMbedded Visual C++ 4.0 eMbedded Visual C++ 4.0 Service Pack 2 eMbedded Visual C++ 4.0 Service Pack 3 Visual Studio .NET 2003

(5/17/2023) Development of .NET Compact Framework Windows Applications 1of 15

Telecommunications Program, SIS, University of Pittsburgh

Pocket PC 2003 SDK Pocket PC 2002 SDK Smartphone 2003 SDK Smartphone 2002 SDK Pocket PC 2000 SDK Standard SDK for Windows CE .NET Microsoft ActiveSync

2. Reboot your computer.3. Install Microsoft ActiveSync.4. Install Visual Studio .NET 2003.5. Install the Pocket PC 2003 SDK. SDK for Windows Mobile 2003-based Pocket

PCs6. Install the emulators for Pocket PC 2003 Second Edition. Emulator Images for

Windows Mobile 2003 Second Edition software for Pocket PC

Part V: Your First .Net CF Application

In this part, you will create your first .NET Compact Framework application, a Hello World application, which will display a text “Hello World” in a message box on the screen when a user clicks a menu item, and then run it on a Pocket PC emulator. This part provides an introduction to the development environment, .NET Visual Studio 2003, for developing applications. You will learn to construct a user interface for an application with a menu and menu items. Menu is one of the most commonly used controls in Pocket PC applications. Other controls (e.g., a text box, a button, a combo list, a list box, a radio button and etc.) are discussed in Part VI. A basic concept of event handlers is also introduced in this part

Starting a visual C# .NET project

1. Start the Visual Studio .NET 2003

2. From the Start page of Visual Studio .NET, click the New Project button.

3. A New Project dialog box will be displayed as shown in Figure 1. Select Visual C# Projects folder for Project Types, and Smart Device Application for Templates.

(5/17/2023) Development of .NET Compact Framework Windows Applications 2of 15

Telecommunications Program, SIS, University of Pittsburgh

Figure 1. New Project dialog box

4. Type in a name of your application in the Name filed (the default name provided is SmartDeviceApplication), and then clicks ok.

Smart Device Application Wizard

5. A Smart Device Application Wizard will be displayed, as shown in Figure 2.

Figure 2. The Smart Device Application Wizard

6. Choose Pocket PC as a platform (a platform is a set of .NET Compact Framework programming functionality that is designed for a group of related devices.) and Windows

(5/17/2023) Development of .NET Compact Framework Windows Applications 3of 15

Telecommunications Program, SIS, University of Pittsburgh

Applications (i.e., applications with user interface) as a project type for the application you are creating. Then click ok.

Visual Studio .NET Development Environment

7. Now, you should see a default form (i.e., a page) in the Visual Studio .NET IDE as shown in Figure 3. The form is sized correctly for the Pocket PC platform.

Figure 3. Default Pocket PC Form shown in the Visual Studio .NET IDE

The development environment consists of a series of windows. The center window, which is normally the largest, can be toggled between the Design View of a form, shown in Figure 3, and the Code View of a form, shown in Figure 4 (if the Code View Window is not shown, click ViewCode or press F7). The code in the Code View is automatically generated in response to the change in the Design View. You may also manually modify the code in the Code View Window.

(5/17/2023) Development of .NET Compact Framework Windows Applications 4of 15

Telecommunications Program, SIS, University of Pittsburgh

Figure 4. The Code View window

When Design View is selected, on the left side there is a pop-out window, a

Toolbox window , as shown in Figure 5. The Toolbox is the tool for adding controls (e.g., Button, TextBox, and MainMenu) to a form (i.e., a window page).

Figure 5. The Toolbox window

The right side of the Visual Studio .NET IDE contains Solution Explorer window and Properties window. The Solution Explorer window displays the elements that make

(5/17/2023) Development of .NET Compact Framework Windows Applications 5of 15

Telecommunications Program, SIS, University of Pittsburgh

up the entire solution, such as the source file for each form. The Properties window displays the properties of the currently selected object in the Design View, such as control or form. Figure 6 shows a sample Properties window displaying the properties of a button control.

Figure 6. The Properties window

You can modify the arrangement of these windows to your personal taste by grabbing its title bar and dragging it to a different location. Also, you can return to the default arrangement by using the Tools->Options menu and clicking the Reset Window Layout button.

Creating user interface with controls

8. On the Toolbox on the left, you can see a list of device controls (e.g., Button, TextBox, MainMenu, and CheckBox) that can be used to construct user interface for a Windows application targeting a Pocket PC. In this part we will create only a menu control (Other controls are discussed in Part VI). A MainMenu control, shown below the form (in the icon tray), is automatically included with the form and used for implementing a menu bar on the form. Now, let’s construct a menu bar.

8.1 Click the MainMenu icon in the icon tray. The space for the first menu will be highlighted as shown in Figure 6 (a).

(5/17/2023) Development of .NET Compact Framework Windows Applications 6of 15

Telecommunications Program, SIS, University of Pittsburgh

8.2 Type “Exit” as the name of your first menu in the highlighted area (see the Text property in the properties window changed accordingly)

8.3 Add an additional menu called “My Menu” that will appear to the right of the Exit menu. This is done by typing My Menu in the Type Here Box immediately to the right of the Exit menu, as depicted in Figure 6 (b).

8.4 Add the menu item called Say Hello for the My Menu menu. This can be done by typing Say Hello in the Type Here box immediately above the My Menu menu, as depicted in Figure 6 (c).

(a) (b) (c)

Figure 6. Constructing menus menu items

Adding code to handle the event

9. Coding the Menu Item. After constructing a menu bar, you have to specify an event handler (i.e., a response) for each menu item. Each menu item has a Click procedure that executes when the user clicks on the item. To code the Exit menu, double click on the Exit menu (the Code View will be displayed) and write the following code:

private void menuItem1_Click(object sender, System.EventArgs e){

this.Close();}

This event handler is programmed to close the window page when the user clicks the Exit menu.

Also, double click on the Say Hello menu item, and write the following code to the event handler to display a message box with the text “Hello World” to the user:

(5/17/2023) Development of .NET Compact Framework Windows Applications 7of 15

Telecommunications Program, SIS, University of Pittsburgh

private void menuItem3_Click(object sender, System.EventArgs e){

MessageBox.Show ("Hello World");}

Run and test the application on an emulator

10. Press Ctrl+F5 to run and build the application.

11. A new popup, as shown in Figure 7, will request you to choose the device to target. The Visual Studio .NET offers two methods for testing applications: through an emulator and on a device. Here, choose WWE PPC 2003 SE - SDK Emulator and then click Deploy.

Figure 7.

12. Now, the Pocket PC emulator should load up, and the application would be deployed to the emulator. After the application is launched, it should appear on the emulator as shown in Figure (a)

13. Click My Menu and click Say Hello, you should see the message in a message box on the Pocket PC’s display as shown in Figure (b). Then, close the message box.

(5/17/2023) Development of .NET Compact Framework Windows Applications 8of 15

Telecommunications Program, SIS, University of Pittsburgh

(a) (b)

Figure 8. Testing your first application

14. Click Exit to exit from the application.

15. Turn off the emulator

Part VI: Creating User Interface with Controls

This part focuses on creating appropriate user interface for Pocket PC applications. The user interface for applications is typically a form. The form or page contains sets of controls that display and accept information. One example of control, MainMenu, is introduced in Part V. In this part, you will learn about several controls available in .NET Compact Framework to construct a user interface.

The controls available in .NET Compact Framework for applications targeting Pocket PC are listed in Table 1. Since the .NET Compact Framework is a subset of the full .NET Framework, the included controls have a subset of their desktop counterpart’ s functionality. Due to size and performance considerations, some control properties, methods and events have been omitted from .NET Compact Framework controls. E.g., printing-related controls are not included in the .NET Compact Framework since it has such a limited role in mobile applications.

(5/17/2023) Development of .NET Compact Framework Windows Applications 9of 15

Telecommunications Program, SIS, University of Pittsburgh

Table 1. Controls included in .NET Compact Framework [3]

Button CheckBox ComboBox ContextMenuDataGrid DomainUpDown HscrollBar ImageListInputPanel Label ListBox ListViewMainMenu NumericUpDown OpenFileDialog PanelPictureBox ProgressBar RadioButton SaveFiledialogStatusBar TabControl TextBox TimerToolBar TrackBar TreeView VScrollBar

Designing user interface for pocket PC applications (or any other mobile device applications) is different from that for the desktop counterpart. You should design user interface appropriately for Pocket PC applications. For example, you should always design applications to run as full-screen applications. Users are unable to switch between multiple windows on the small display screen. Also, the controls (such as text boxes or radio buttons) should be spaced sufficiently far apart to allow users to easily view and enter data, and to avoid user error. Moreover, the lack of a keyboard for the Pocket PC makes it difficult for users to enter large volumes of free-text information. You should always use controls, such as check boxes, list boxes and radio buttons, in a Pocket PC application to simplify data entry.

In this part, you will practice creating user interface for a Pocket PC application, which collects information from students, as shown in Figure 9. The application consists of one form and six controls: TextBox, Label, RadioButton, ComboBox, listbox and Button control for which you will write an event handler to display a message box with input information.

(5/17/2023) Development of .NET Compact Framework Windows Applications 10of 15

Telecommunications Program, SIS, University of Pittsburgh

Figure 9. Constructing user interface for an application.

1. Continue with the project from Part V.

2. Drag a Label control from the Toolbox onto the form, and then set the Text property in the Properties window to “First Name:”. You may also set the BackColor property to any color that you like.

3. Drag a TextBox control from the Toolbox onto the form, and then clear the Text property (i.e., to erase “textBox1”) and set the Name property to “tbxFirstName”.

4. Drag a Label control from the Toolbox onto the form, and then set the Text property to Last Name:.

5. Drag a TextBox control from the Toolbox onto the form, and then clear the Text property and set the Name property to tbxLastName.

6. Drag a Label control from the Toolbox onto the form, and then set the Text property to Gender:.

7. Drag two RadioButton controls onto the form, and then set the Text properties to Female and Male, and set the Name properties to rbtnFemale and rbtnMale respectively.

8. Drag a Label control from the Toolbox onto the form, and then set the Text property to Program:.

9. Drag a ComboBox control from the Toolbox onto the form, and then set the Name property to cboxProgram.

10. Still in the Properties window of the ComboBox control, click the ellipsis button, , next to the Items property, and then, in the String Collection Editor,

type Information Science, Telecommunications, and Library & Information Science, one on each line respectively, and then click OK.

11. Drag a Label control from the Toolbox onto the form, and then set the Text property to Status:.

12. Drag a ListBox control from the Toolbox onto the form, and then set the Name property to lboxStatus. After that, click the ellipsis button next to the Items property, and then, in the String Collection Editor, type Full-time and Part-time, one on each line respectively, and then click OK.

13. Drag a Button control from the Toolbox onto the form, and set the Text property to Show, and then set the Name property to buttonShow.

(5/17/2023) Development of .NET Compact Framework Windows Applications 11of 15

Telecommunications Program, SIS, University of Pittsburgh

14. Arrange the controls on the form as shown in Figure 9.

15. Double click on the Show Button (the Code View window will be displayed) and write the following code:

private void buttonShow_Click(object sender, System.EventArgs e){

string gender = "Not Specified";string program = "Not Specified";string status = "Not Specified";

if(rbtnFemale.Checked){

gender = "Female";}if(rbtnMale.Checked){

gender = "Male";}

switch(cboxProgram.SelectedIndex){

case 0:program = "Information Science";break;

case 1:program = "Telecommunications";break;

case 2:program = "Library & Information Science";break;

}

switch(lboxStatus.SelectedIndex){

case 0:status = "Full-time";break;

case 1:status = "Part-time";break;

}

MessageBox.Show("First Name: " + tbxFirstName.Text + "\nLast Name: " + tbxLastName.Text + "\nGender: " + gender + "\nProgram: " + program + "\nStatus: " + status);

}

16. Build and run the application by pressing ctrl+F5. Fill out the form and test the Show button to ensure that it works correctly.

17. Turn off the emulator.

(5/17/2023) Development of .NET Compact Framework Windows Applications 12of 15

Telecommunications Program, SIS, University of Pittsburgh

Part VII: Navigating between Windows Forms(this part is adapted from [4])

Unlike previous parts in which the application consists of only one form, in this part you will learn to create a simple application that has multiple forms, and learn about a mechanism to navigate between them. In a multi-form application, one of the forms is the application’s main window, which appears to the user when the application starts running.

In this part, you will create an application, which consists of three forms. The main form of the application is the one from part VI. You will create the other two forms, and implement a mechanism to navigate among three forms.

1. Continue with the project from part VI.

2. On Form1, click on the menu bar so that the Type Here box appears. Type “Form 2” in the Type Here box immediately to the right of the My Menu menu, as illustrated in Figure 10.

3. Drag a Button control from the Toolbox onto the form, as illustrated in Figure 10, and then set the Name property to buttonForm3, and set the Text property to Form 3.

Figure 10. Form 1

4. Add a second form to the project by clicking ProjectAdd Windows Form.

(5/17/2023) Development of .NET Compact Framework Windows Applications 13of 15

Telecommunications Program, SIS, University of Pittsburgh

5. Drag a ListBox control onto the form, as illustrated in Figure 11, and then set the Name property to lbox2. After that, click the ellipsis button next to the Items property, and then, in the String Collection Editor, type Form 1 and Form 3 one on each line respectively, and then click OK.

6. Drag a Button control to the form, as illustrated in Figure 12, and then set the Name property to buttonGo2, and set the Text property to Go.

Figure 12. Form 2

7. Add a third form to the project by clicking ProjectAdd Windows Form.

8. Drag two RadioButton controls to the new form, as illustrated in Figure 13, and then set the Name property to rbtnForm1 and rbtnForm2, and set the Text properties to Form 1 and Form 2 respectively.

9. Drag a Button control to the form, as illustrated in Figure 13, and then set the Name property to buttonGo3, and set the Text property to Go.

(5/17/2023) Development of .NET Compact Framework Windows Applications 14of 15

Telecommunications Program, SIS, University of Pittsburgh

Figure 13. Form 3

Adding Navigation to the forms

10. In the Form1 Design View, double click on the Form 2 menu item and write the following event handler code to provide navigation to Form2.

private void menuItem4_Click(object sender, System.EventArgs e){

Form2 frm2 = new Form2 ();frm2.Show ();

}

11. In the Form1 Design View, double click on the Go button and write the following event handler code to provide navigation to Form3.

private void buttonForm3_Click(object sender, System.EventArgs e){

Form3 frm3 = new Form3 (); frm3.Show ();

}

12. In the Form2 Design View, double click on the Go button and write the following event handler code to provide navigation to the form selected in the ListBox.

private void buttonGo2_Click(object sender, System.EventArgs e){

switch(lbox2.SelectedIndex){

case 0:this.Close ();

(5/17/2023) Development of .NET Compact Framework Windows Applications 15of 15

Telecommunications Program, SIS, University of Pittsburgh

break;case 1:

Form frm3 = new Form3 ();frm3.Show ();this.Close ();break;

}}

16. In the Form3 Design View, double click on the Go button and write the following event handler code to provide navigation to the form specified by the selected radio button.

private void buttonGo3_Click(object sender, System.EventArgs e){

if(rbtnForm1.Checked) {

this.Close(); return;

}if(rbtnForm2.Checked){

Form2 frm2 = new Form2 ();frm2.Show ();this.Close();

}}

18. Build and run the application. Test the navigation between forms to ensure that it works correctly.

19. Turn off the emulator.

Testing the application on the Pocket PC

20. Make sure that the pocket PC device is powered on, and connected to the PC via an USB port. Also, the status of Microsoft Active Sync is “connected”. (assuming that you have already created a partnership between the pocket PC and the PC)

21. Continue with the same project.

22. Build and run the application by pressing ctrl+F5.

23. Choose Pocket PC Device and then click deploy.

24. Now, the application is deployed to the pocket PC device. After the application is launched, it should appear on the device’s display.

25. Test the application to ensure that it works correctly on the pocket PC device.

(5/17/2023) Development of .NET Compact Framework Windows Applications 16of 15

Telecommunications Program, SIS, University of Pittsburgh

Exercises:

1. Develop a .NET Compact Framework application targeting a Pocket PC that can calculate the amount of tip. This application can be used in a situation when you go to the restaurant and need to calculate an amount of tip and a total price after the tip is included. Specifically, a user can enter an original price of a meal (e.g., using a text box) and selects an amount of tip in percentage from an available list: 15%, 18%, 20% and 25%. You can use radio buttons, a list box, or a combo box to implement the list. The application also contains a Calculation button and the other two text boxes for outputs. When the user clicks the Calculation button, the resulted calculations: an amount of tip (i.e., %tip original price) and a total price (i.e., original price + tip), are shown in the output text boxes. Label each control (e.g., each text box and radio button) appropriately. Build and run the application on a Pocket PC emulator. Email your application to GSA.

Hint. First you need to create a user interface for an application. It is recommended that you set the ReadOnly property of the output textboxes to True, so that the text in the text box cannot be changed. Then, you need to create an event handler for the Calculation button. The difficulty is that the input data type from the text box is always a string, therefore you need to convert a string to another data type, such as int or double. This can be done by using a method double.Parse( ). For example, the code below converts the input text from the textBox1 control to a double data type and then stores its value in the double-typed variable - original.

double original;..original = double.Parse(textBox1.Text);

Similarly, in the converse process, to display a value of non-string variable in the text box, you need to convert it to a string. This can be done by using a method ToString ( ).For example, the code below shows how to display the value of the double-typed variable - total, which contains the value of 5, in the textBox1 control.

double total = 5;..textBox1.Text = total.ToString();

Reference:

[1] Paul Yoa, and David Durant, “.NET Compact Framework Programming with C#”, Addison Wesley, 2004.

(5/17/2023) Development of .NET Compact Framework Windows Applications 17of 15

Telecommunications Program, SIS, University of Pittsburgh

[2] Microsoft Corporation, “Introduction to Development Tools for Windows Mobile-based Devices”, Online Availablehttp://msdn.microsoft.com/vstudio/using/building/Mobile/default.aspx?pull=/library/en-us/dnppcgen/html/devtoolsmobileapps.asp[3] Larry Roof, “Getting Started with Visual Studio .NET and the Microsoft .NET Compact Framework”, March 2002, Online Available athttp://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnnetcomp/html/netcfgetstarted.asp[4] --, “2556 Course Sample: Learn to Build Mobile Applications with Visual Studio and the .NET Compact Framework”, Online Available http://www.microsoft.com/downloads/details.aspx?familyid=8fb566e0-3e92-40e8-b5d4-091d05ab8829&displaylang=en

(5/17/2023) Development of .NET Compact Framework Windows Applications 18of 15