To work with a Cordova application on Windows Phone 8, you must first create Cordova project using the steps outlined in “Creating a Cordova Project” in Chapter 4, “Using the Cordova
Command-Line Interface.” Once you have the application created, in a terminal window navigate to the project folder and issue the following command:
cordova platform add wp8
This command downloads a Windows Phone 8 project and extracts it to the project’s platforms\wp8\ 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.
FFiigguurree 1100..44 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
ptg11524036 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.
FFiigguurree 1100..55 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.
ptg11524036
FFiigguurree 1100..66 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.
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.
ptg11524036
FFiigguurree 1100..77 Cordova Application Project Open in Visual Studio
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.
ptg11524036
FFiigguurree 1100..88 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.
ptg11524036
FFiigguurree 1100..99 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.
ptg11524036
FFiigguurree 1100..1100 Emulator Additional Tools: Location
When writing documentation for your application, you can easily grab device screenshots using options in the Screenshot pane.
W
Wrraapp--UUpp
In this chapter, I showed you how to use the free developer tools from Microsoft to test your Cordova applications for Windows Phone 8. Due to the implementation of Cordova framework on Windows Phone 8, you can’t leverage the debugging tools available through Visual Studio, but the tools still provide a great way to perform initial testing of a Cordova application.
ptg11524036