The growing sophistication of developer tools, coupled with the gradual and long overdue convergence of mobile technologies, gives coders a dizzying array of platform options. But when faced with a choice between desktop and PDA, why choose? Do both at the same time.

Where "porting" is a wholesale rewrite from one platform to another, today's tools give you the ability to "extend" your code across multiple platforms. By leveraging a single code base, you can double or triple your market and revenue.

But how? There's the question.

To demonstrate the concept of extending code, we've put together a fairly simple walkthrough of a slide puzzle extended to run on the desktop and on a Pocket PC PDA. Using Visual Studio .NET 2003, you'll see how we created a single Visual Basic .NET code base, and then incorporated it into two different builds.

The purpose of this walkthrough is to introduce some of the design considerations you need to keep in mind when coding for multiple platforms at once. With a little pre-planning, you can easily leverage your hard work. Later, when you want to extend to the Smartphone, or even an ASP.NET web application, you can apply the same techniques.

Requirements
Though most of this code can be used in previous versions of Visual Studio, this walkthrough assumes you are using Visual Studio .NET 2003. The Integrated Development Environment (IDE) includes a Pocket PC 2002 Emulator.

Preparation
Before I even start up that IDE, I always take the time to spec out a feature list. When coding for multiple platforms, this becomes more important. As covered in my earlier article, "Extending JAVA Apps Across Multiple Devices", you have several key decisions to make.

1. Are your platforms connected?
If your target platforms are able to access the Internet, consider taking advantage of Web Services and/or ASP.NET Mobile Controls. This is especially true if you're working with live or frequently updated data. For the purposes of this walkthrough, I'm creating standalone applications.

2. What core features should be on all platforms?
Obviously, your application will have a core set of definitive features, which you should be able to implement on all targeted platforms. In this case, that would be the puzzle itself, including puzzle tiles and options for starting, solving, or exiting the game. Because mobile devices have vastly different display areas, I've also chosen to include a simple puzzle-resizer to take advantage of whatever real estate the game has available.

3. Which features would be most appropriate to each platform?
The smaller the device, the fewer bells and whistles. This means cutting out menu options or even entire menus. But here's the fun thing about starting with the Pocket PC: Generally speaking, the applications you create for a PocketPC will also run on the desktop. Extending to the desktop becomes a matter of simply adding desktop-specific features.

So my recommended approach is to start with core functionality and scale up. Start with the handheld. Then add only those truly necessary components that take advantage of the more powerful platforms. This gives your users more options in choosing the best tool for their needs.

Getting started
In VS.NET, though you can build to either the .NET Framework or the .NET Compact Framework (.NET CF), you can't build to both in the same Solution. So, since .NET CF is essentially a subset of .NET Framework, I'll begin with the Pocket PC version. Because I know if I can make it there, I'll make it anywhere.

• File -> New -> Project.
• Under Project Type, choose "Visual Basic Projects."
• Under Templates, choose "Smart Device Application."
• Let's call this one "SlidePuzzler."
• In the Smart Device Application Wizard, target the "Pocket PC" (Windows Application).

• In the Solution Explorer, right-click "Form1.vb" and choose Properties. Change that file name to "SlidePuzzle.vb."
• Likewise, click on the form and change the form name itself to "SlidePuzzle" and the text to "Slide Puzzle."
• Also remember, as I often don't, to right-click the Project, select Properties, and change Startup Object to the new form name.
• Below the form, you'll see a MainMenu1 object. Select it and change the name (under Properties) to "PuzzleMenu."
• At the bottom of the form itself (you may need to scroll down), you'll see the menu text. We could create all this in the code, but it's easier to just build the menu here. To keep it simple, create one menu option: "Menu", with three sub-options: "New", "Solve", and "Exit."
• Name the menu options (using Properties): "MainMenu", "MenuNew", "MenuSolve", and "MenuExit", respectively.
• Throw a panel on the form and call it "PuzzleBox". The dimensions don't really matter as they'll be resized in the code, but try to cover the whole form.
• Below are two graphics you can use. "Testgrid.gif" lays out a 4-by-4 grid with tiles that measure 50 by 50 pixels, for a total size of 200 by 200 pixels. This is handy if you want to restrain the dimensions of the puzzle by eliminating the resizing portion and adding constants. "Gaia.jpg" gives you something a little nicer to work with and is sized to be just larger than the dimensions of the PDA emulator. Save one or both to your project directory, then add Gaia.jpg to the project.
• Under the Properties for the gaia.jpg graphic, change Build Action to "Embedded Resource." This packages it with the executable rather than as a separate file.

At this point, the form and the project itself are both ready. Let's code.

Building the tile class
When extending applications, in order to leverage the most code, try to shunt as much of the operational code from the UI to other classes. Optimally, form code will only contain what is distinct to your different platforms. As you know, this type of elegant streamlining is an art unto itself. Over time, you'll no doubt find new ways to delineate functionality to get the most mileage out of extensible code.

As your most basic component, the Tile class comes first. This, of course, represents the little square that you're sliding all over the puzzle. To start, add class to your project by right-clicking the project and selecting Add -> Add Class. Name the class Tile.vb.

Since the Tile will be used as a form control held by the "PuzzleBox" panel, add the following code just under the class declaration:

Inherits System.Windows.Forms.Control

Next come the various member declarations.

	Private m_PuzzlePicture As Image
	Private m_DisplayRect As Rectangle
	Public CurrentLoc As Integer

» next |  download | 787.04 KB | Intel Software Network resource center