Learn to start developing for the PocketPC and other mobile devices using Visual Studio .NET 2003.
The objective of this short hands-on tutorial (lab) is to show you how simple it is to start developing for the PocketPC and other mobile devices using Visual Studio .NET 2003. No mobile development experience or mobile devices are needed!
Start up Visual Studio .NET 2003. Create a new project by selecting File | New | Project.... Select the Visual C# Projects node and then, on the right, select Smart Device Application as shown in Figure 1.
Creating a new mobile application
I've named my sample MyMobileApp and have saved it in the default location. You can name your mobile applications anything you like. For this lab, however, you should use MyMobileApp.
Selecting OK on the dialog will actually start a Wizard. You will be greeted with a dialog as shown in Figure 2.
The Smart Device Application Wizard
This dialog allows you to select whether you are creating an application for the PocketPC or for Windows CE. You also can select the type of application. For this lab, you will target a Pocket PC and build a Windows Application.
You also will see that this dialog lists the devices that you have installed on you machine. As you can see, I have a Pocket PC device as well as the emulator. If you don't have a device, you will still be able to build an application with the emulator—which is what you will do for this lab.
Select Pocket PC and Windows Application. Click the OK button. Visual Studio .NET 2003 will chug and churn and create the standard project for you as shown in Figure 3.
The default Smart Windows Form application
As you can see in Figure 3, the basic PocketPC form looks like a normal Windows Form application. From a development perspective, it is pretty much the same. The only difference is that there are some controls and commands that you cannot use. Additionally, you'll see that a menu item is already provided on your workspace.
Building the Form Application
I have a standard, simple application I build as my "hello world" application when I use a new IDE, platform, or programming language. This is a simple application that includes a button, a text box, and a label. Clicking the button copies the text from the text box and appends it to the label. While this is not a practical application, it contains the basics of building a standard forms-based application.
Start by changing some of the properties for your application. Click on the form to display the form properties. Change the name to MyMobileAppForm. Change the text to "My Mobile App".
Just as you would in a normal Windows form application, add a Label, TextBox, and Button to your form. For this lab, you can leave the default names for the textbox and label. Rename the button by changing the Text property to "Do It". Your form should now look something like Figure 4 (note that the entire IDE is not shown).
Figure 4: Your application form
Now that you've designed your form, you need to add the code. This is again done just as you would in a standard application. Double-click on the button to add code to its click event. You will be placed in the Form1.cs file in the button1_Click method. Add the code shown in bold to this method:
private void button1_Click(object sender, System.EventArgs e)
label1.Text = textBox1.Text + "\n" + label1.Text;
textBox1.Text = "";
You'll see that this code is pretty simple. The first line places the current text in the textbox to the beginning of the label. A new line is used to separate the new text.
The next line is added to clear out the text in the textbox. You should note that when you enter these lines, you will see that the Intellisense helps you. All of the Intellisense features are available for building mobile applications just as they are in your standard applications. This line simply clears the textbox.
Go ahead and compile your application your application by pressing F5 or by selecting Start from the Debug menu. Note that if you get any errors, you should make sure your code is entered correctly. Additionally, I found that Form1 in the Main method was not always renamed when the form property was renamed. As such, you may need to change it to MyMobileAppForm.
If you don't get errors, the form will compile and deploy. You will see a message in the Build window such as this:
------ Deploy started: Project: MyMobileApp,
Configuration: Debug Pocket PC ------
After a few seconds (or minutes, depending on your machine), a pop-up will be displayed as shown in Figure 5.
Figure 5: The Deploy dialog
This dialog allows you to select from the valid devices connected to your machine for deployment. If you have a device, you can install to it provided it is connected to the machine. If not, you will still have the Pocket PC 2002 Emulator that you can deploy onto.
Select the Emulator and click the Deploy button. Again, your system will chug and churn as the emulator is loaded along with your application. When the emulator firsts loads, it will look like a standard PocketPC display. You should continue to wait while your application is loaded. Once loaded, your emulator should look like Figure 6.
Figure 6: Your Mobile Application running!
As you can see, the emulator looks—and will operate—like a real PocketPC device. You can enter text into the text box and click the Do It button. As you will see, the text is added to the label. All should work as expected. Figure 7 shows the emulator with a few lines of text entered.
Figure 7: Entered text in the mobile app!
Go ahead and close the mobile emulator window. When you do this, you may be prompted to save the emulator state or to close it. If you save the state, when you rerun your application from Visual Studio .NET 2003, it will start up quicker.
Adding a PocketPC Menu to Your Application
Before concluding this lab, you will do one more thing. You will add a PocketPC menu to your application. Go back to the IDE and make sure the Design tab for your form is displayed. As was shown in Figure 3, there is a mainMenu1 item included with your application by default.
When you right-click on the mainMenu1 item, you will see that your form changes in the design area. You now have an area with Type Here text. You can enter your menu item by clicking on the text and typing. When you click to enter the text, you will see that additional menu options are displayed beside and above the one you are entering. Enter "Do It" into the main box. In Figure 8, you can see this text added.
Figure 8: Adding a menu
To add code to the Do It menu item, double-click on it. This will bring up your code window with the menuItem1_Click method. For this example, you should add the following line of code to this method:
This will call the same code used by your Do It button on the form.
You can now recompile and run your application. You should see the same application you saw before with the addition of a Do It menu in the bar at the bottom, as shown in Figure 9. When you click Do It in the menu, you will see that it works just like clicking the button—which is exactly what you coded!
If you get a deployment error, you should check to see that you are not currently running the previous version of the application in the emulator. This can happen if you saved the emulator state instead of closing it. Simply close the running application in the emulator by clicking the Close button (the X in the top right). You then can restart your new application.
Figure 9: The running application with a menu item
As you can see, developing a PocketPC or Windows CE application is very much the same as building other applications. You do have restrictions based on the device, such as a smaller screen and some controls and functions that simply don't make sense on the smaller device, but otherwise, if you've been developing in Visual Studio .NET, you already have all the knowledge you need. This article was not comprehensive; however, you'll find that as you expand on what you did in this article, most things work just as they do for standard (non-mobile) applications.
In Visual Studio 2005, Microsoft has made additional enhancements to mobile development. Instead of seeing the plain box you see in the development environment (as shown in Figure 3), you actually see something that looks more like the emulator. This makes it easier to see how your application works in the context of the device. In fact, different devices will have different 'skins' shown in Visual Studio.
# # #