Andy Sjostrom
06-02-2004, 07:30 PM
<img src="http://www.pocketpcthoughts.com/images/web/2003/sjostrom-may04-crossapp-new-0.jpg" /> <br /><br />I once promised to take a look at the cross platform development tools from AppForge. Here we go!<br /><br />It is not difficult to get started with mobile application development with today’s development tools. In fact, there are very powerful yet simple to use tools that enable developers to quite easily develop cross platform applications (ie: applications that work on more than one platform and type of device) very quickly. In this article we will take a look at how to design and develop a simple application for all major device types including Windows Powered Pocket PCs, Palms, Nokia Series 60 and Sony Ericsson P800/P900. This tutorial is helpful both because application development is so much fun and because you would like to try your luck on the fast growing mobile applications market. It is just a matter of a few clicks on Handango.com to set your own developer profile and start selling your application to users – across the globe!<br /><br />This article applies to:<br /><br />• Microsoft Windows Mobile based Pocket PC – or<br />• Palm – or<br />• Nokia Series 60 – or<br />• Sony Ericsson P800/P900<br />• AppForge Crossfire<br />• Microsoft Visual Studio .NET 2003<br /><br />My platform of choice is Windows Mobile Pocket PCs and Smartphones and my development environment of choice is Visual Studio .NET 2003 and .NET Compact Framework. <br /><br /><b>Summary</b><br />This article shows how to leverage the use of Visual Studio .NET 2003 skills to target both Windows Mobile platforms as well as other mobile device platforms. Sometimes, cross platform just is a requirement and it is great that I can still use Visual Studio .NET when that is the case!<br /><br />Read on for the entire article.<br /><!><br /> <PAGEBREAK> <br /><span><b>The Tools</b></span><br />The tools we will use in this tutorial are the following:<br /><br /><b>Microsoft Visual Studio .NET 2003</b><br />A powerful development environment from Microsoft. This tool enables you to design and develop .NET Compact Framework applications for Windows Powered Pocket PCs and Smartphones out-of-the-box. However, in this tutorial we will explore how to use this tool in a cross platform project.<br /><br /><b>AppForge Crossfire</b><br />AppForge is a company that is very successful in enabling developers to develop cross platform applications. Their latest product, Crossfire, integrates with the Microsoft Visual Studio .NET 2003 development environment. Developer can use Visual Basic .NET to target different types of platforms. This is possible through AppForge’s own runtime engine called Booster. From an overview perspective, Booster sits between the operating system and your application. Therefore, your application does not need to know which operating system it runs. You can read more on <a href="www.appforge.com">www.appforge.com</a>. <PAGEBREAK> <br /><br /><span><b>My Mobile List for Pocket PC</b></span><br />Let’s take a look at this tutorial’s demonstration application: “My Mobile List”. We’ll begin our journey on the Pocket PC platform. As you can see in Figure 1, the user can enter text into the text box and add the text to a list box. The user can clear the entire list or clear it item-by-item.<br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/fig01.JPG" /> <br /><i>Figure 1: First class user interface!</i><br /><br />I wouldn’t say this application would qualify as the most feature rich application, but it does look nice! Or maybe not…! Let’s take a look at how to develop the application.<br /><br /><span><b>Step-by-Step Development</b></span><br />Follow these steps to get started:<br /><br />1. Start Visual Studio .NET 2003.<br />2. Start a New project.<br />3. Choose Crossfire Application.<br /><br /> <img src="http://www.pocketpcthoughts.com/images/web/2003/sjostrom-may04-crossapp-new-02.jpg" /> <br /><i>Figure 2: New Crossfire Application.</i><br /><br />4. Choose the appropriate target platform. This time we will choose “Pocket PC/Windows Mobile”.<br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/fig03.JPG" /><br /><i>Figure 3: Choose target platform.</i><br /><br />The development environment will now provide an empty form with the right height and width based on the chosen platform.<br /><br />5. Change form’s Text property to “My Mobile List”.<br /><br />6. Add the following controls to the form: one text box, two buttons and a list box.<br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/sjostrom-may04-crossapp-new-04.jpg" /> <br /><i>Figure 4: Add text box, buttons and a list box.</i><br /><br />6. Set the Name property of the:<br />a) text box to: txtInput<br />b) “Add text” button to: btnAdd<br />c) list box to: lstText<br />d) “Clear all” button to: btnClearAll<br />e) “Clear selected” button to: btnClearSelected<br /><br />7. Double-click the “Add text” button. You are now taken to the place where all the action takes place! Add the following code to the button’s click event:<br /><br />Me.lstText.AddItem(Me.txtInput.Text)<br />Me.txtInput.Text = ""<br />The figure following shows what the code should look like including the lines of code associated with the click events of the “Clear all” and “Clear selected” buttons.<br /><br /> <img src="http://www.pocketpcthoughts.com/images/web/2003/sjostrom-may04-crossapp-new-05.jpg" /><br /><i>Figure 5: Behind the Scenes.</i><br /><br />We are now all set! That's it! In essence, our application requires only four lines of code. You can now test the application by simply clicking the “Start” button in the development environment. The application is loaded into an emulation environment that runs on your PC and can emulate all of the mentioned platforms. This means that you don’t necessarily have to have devices running all target platforms. However, if you intend to do more serious work you will eventually have to test your code on a real device. The following figure illustrates the demonstration application running in a real Pocket PC vs. running in the emulation environment.<br /><br /> <img src="http://www.pocketpcthoughts.com/images/web/2003/sjostrom-may04-crossapp-new-06.jpg" /><br /><i>Figure 6: The Real Thing vs. the Emulator.</i><br /><br />We will now move the application to other platforms!<br /> <PAGEBREAK> <br /><span><b>My Mobile List for Palm, Nokia Series 60 and Sony Ericsson P800/P900</b></span><br />Follow these steps to make “My Mobile List” a true cross platform application!<br /><br />1. Create a new project in Visual Studio .NET 2003.<br /><br />2. Choose to target the Palm platform.<br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/fig07.JPG" /><br /><i>Figure 7: Choose Palm OS (160x160).</i><br /><br />The new project and new form is created, again with the right size relative the chosen target platform.<br /><br />3. Copy the controls from the Pocket PC project and paste them into the new Palm project. Since the Pocket PC and Palm platforms are different in resolution you will have to move the controls around a bit to make it all fit.<br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/sjostrom-may04-crossapp-new-08.jpg" /> <br /><i>Figure 8: Designing the Palm user interface.</i><br /><br />4. Copy and paste the code behind the controls.<br /><br />5. Start the application!<br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/fig09.JPG" /><br /><i>Figure 9: My Mobile List in the Palm emulator.</i><br /><br />Let’s move on and see how “My Mobile List” looks in Nokia Series 60 and Sony Ericsson P800/P900. The process of making these versions is identical to how the Palm version was made. Just follow the same steps but choose Nokia Series 60 and Sony Ericsson P800/P900 instead.<br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/fig10.JPG" /><br /><i>Figure 10: My Mobile List in the Nokia Series 60 emulator.</i><br /><br /><img src="http://www.pocketpcthoughts.com/images/web/2003/fig11.JPG" /><br /><i>Figure 11: My Mobile List in the Sony Ericsson P800/P900 emulator.</i><br /><br /><span><b>Conclusion</b></span><br />Four lines of code makes one application run on four different platforms! I realize that the application isn’t the prettiest or feature rich and that I have cut some corners in regards to design guidelines which vary from platform to platform. But I do hope that this brief tutorial inspires you to dust off your programming skills and get busy writing some cool mobile applications. Good luck!