10. Windows Phone 8 Development with Cordova

Cordova provides good support for the Windows platform, supporting Windows desktop, Windows Phone 7, and Windows Phone 8. In this chapter, I show you how to use the Microsoft development tools to build and test Cordova applications for Windows Phone 8. The developer tools for Windows Phone are free and pretty easy to use; I found that for the different platforms highlighted in the book, developing for Windows Phone 8 was the easiest.

You can use the Windows Phone SDK version 8 for Windows Phone 8 and Windows Phone 7.5 development. The Windows 8 SDK requires a 64-bit version of Windows 8 Professional and at least 4 GB of RAM; I wouldn’t try to do Windows Phone development in a virtual machine (VM). Older versions of the SDK can be used for Windows Phone 7.5 and 7.1 applications; you’ll be able to run those development tools on a Windows 7 or Windows 8 system, and they don’t have a 64-bit requirement.

Next, you must follow some administrative steps to be able to deploy Windows Phone applications into the Windows Phone Store or onto a physical device. To help you get started with the process, take a look at “How to deploy and run a Windows Phone app” on Microsoft’s website at http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402565(v=vs.105).aspx.

First, you need to create a Microsoft Account. Accounts are free and can be obtained at https://signup.live.com. Next, you need to register as a member of the Windows Phone Dev Center at https://dev.windowsphone.com/join. Joining the program isn’t free, but it doesn’t cost that much. With your registration, you get the ability to deploy your applications to a physical device and into the Windows App Store.

First, you need to power on the device and connect it to your Windows 8 desktop via a USB cable. Since each registered device has to have a unique name, open Windows Explorer on your desktop system and change the name of the device to something you know is unique, perhaps using your initials in the device name.

In Windows 8, bring up the All Apps view and, under Windows Phone 8 SDK, open t Windows Phone Developer Registration. You will see a screen similar to the one shown in Figure 10.1.

Figure 10.1 Windows Phone Developer Registration: Locked Device

In this example, my Windows Phone device is locked, so I have to unlock the device and click the Retry button to allow it to connect to the device. After you unlock your device, you should see a screen similar to the one shown in Figure 10.2.

Figure 10.2 Windows Phone Developer Registration: Connected Device

When you click the Register button, you are prompted to log in with your Microsoft account. Once you are logged in, you are taken to a screen similar to the one shown in Figure 10.3.

Figure 10.3 Windows Phone Developer Registration Completed

At this point, the device is registered with Microsoft and can be used to test your Cordova applications.

cordova platform add wp8

This command downloads a Windows Phone 8 project and extracts it to the project’s platformswp8 folder. Make whatever changes you want to make to the web application’s content in the Cordova project’s www folder, then issue the following command:

cordova prepare wp8

The CLI copies the web content over into the platforms/wp8/www folder. You can see an example of the files that are created in Figure 10.4.

Figure 10.4 Cordova Windows Phone 8 Platform Folder

Notice from the figure that the Visual Studio project is a Visual C# project (hello_cordova.csproj). Even though the default project type for Windows Phone 8 is a hybrid project, for Cordova applications it’s a C# project. Because of this, developers of Cordova applications cannot leverage the web application debugging capabilities of Visual Studio; instead, they must use the console object and weinre (described in Chapter 6) to debug their Cordova applications for Windows Phone 8. There is also a third-party remote JavaScript debugger called Aardwolf (http://lexandera.com/aardwolf), which may prove useful. I’ve not tested it, but it looks like it’s one solution for debugging Cordova applications on Windows Phone.

Now that you have created a Cordova project for Windows Phone 8, open Visual Studio 2012 Express for Windows Phone. When the development environment opens, it displays a screen similar to the one shown in Figure 10.5.

Figure 10.5 Visual Studio Express 2012 for Windows Phone

To open the Cordova project, click the Open Project link shown on the left of Figure 10.5, or open the File menu and select Open Project. Visual Studio displays the Open Project dialog shown in Figure 10.6. Navigate to the project folder, shown in Figure 10.4, and open the Microsoft Visual Studio Solution file, as shown in Figure 10.6.

Figure 10.6 Visual Studio: Open Project Dialog

When the project opens, the Solution Explorer will show you all of the files in the project, as shown in Figure 10.7. From here you can open the different web content files generated by the CLI; keep in mind, though, that the files shown here are copied from the Cordova project’s www folder. Any changes you make to the web application content here must be copied back to the Cordova project’s www folder before they can be applied to other platform projects.

Figure 10.7 Cordova Application Project Open in Visual Studio

To test applications in Visual Studio, use the options highlighted at the top of Figure 10.7. Click the green play symbol to run the application. The drop-down list to the right of the Play icon allows you to select the emulator or a physical device where the application will run.

To run the application on a physical device, make sure the device is powered on, unlocked, and connected to the development system using a USB cable. When running on an emulator, the emulator window will open, start the emulated OS, and run the application, as shown in Figure 10.8. The emulator looks and works like a regular device. You can swipe, click, and work with the application just as you would on a physical device.

Figure 10.8 Windows Phone 8 Emulator

The icons to the right of the figure provide developers with some additional control over the emulator. You can change the orientation of the device, expand the size of the emulated device, or change the zoom level. The double brackets (>>) icon at the bottom of the list is used to open an Additional Tools window, which provides some additional capabilities for manipulating the emulator.

The Accelerometer pane of the Additional Tools window is shown in Figure 10.9; it allows you to manipulate the orientation of the emulator along three axes. You can hold the primary mouse button down over the orange dot in the middle of the device image and move it around to position the emulated device. You can also select preset orientations or play back recorded orientation changes. This is a simple way to test mobile applications that leverage the accelerometer.

Figure 10.9 Emulator Additional Tools: Accelerometer

Figure 10.10 shows the Location pane; from here you can manipulate the emulator’s location. You can search for a specific location or address and push it into the emulated device’s GPS coordinates. You can also play back recorded trips.

Figure 10.10 Emulator Additional Tools: Location

When writing documentation for your application, you can easily grab device screenshots using options in the Screenshot pane.