8. Configuring a Windows Phone Development Environment for PhoneGap
Windows Phone is the most recent addition to the list of supported device platforms for PhoneGap; support for Windows Phone was added to the PhoneGap 1.1 release. Setting up a development environment for Windows Phone is similar to the iOS development setup; all you need to install is the standard development environment and the default PhoneGap installation files, and you’re ready to go.
The Windows Phone development tools and device simulators are supported only on Microsoft Windows. You will need a Windows PC or a Macintosh computer running Windows or a Windows virtual machine in order to develop PhoneGap applications for Windows Phone.
Installing the Windows Phone Development Tools
The Microsoft Windows Phone SDK 7.1 provides the complete suite of tools you need to build mobile applications for the Windows Phone OS. Point Microsoft Internet Explorer to http://create.msdn.com and follow the prompts to download the SDK.
NoteThe Windows Phone SDK has some hefty system requirements; be sure that the development system you have selected for Windows Phone development meets or exceeds the minimum requirements.
The Windows Phone Emulator will run only on current hardware with hardware graphics acceleration, so if you have an older machine, you should probably plan on a video card upgrade. When you try to test PhoneGap applications on a system that isn’t supported by the emulator, the PhoneGap application won’t even display any content on the emulator screen when it launches.
The SDK installer you downloaded won’t take very long to download and consists of a simple application that pulls down the full SDK components as needed during installation. The SDK consists of Microsoft Visual Studio 2010 Express for Windows Phone, Windows Phone Emulator, and several other tools that aren’t related to PhoneGap development. There’s a lot of stuff included, so be sure to allocate a lot of time for the installation. Launch the downloaded file and follow the prompts to install the SDK. At the conclusion of the SDK installation, you will be prompted to launch the Visual Studio; go ahead and do that, if only to confirm that the installation completed successfully.
Once you’ve verified that Visual Studio installed correctly, close Visual Studio, and then install PhoneGap using the instructions provided in Appendix A. With the PhoneGap files installed into Visual Studio, your system is ready for PhoneGap development.
Creating a Windows Phone PhoneGap Project
To create a new PhoneGap project for Windows Phone, open Visual Studio; then open the File menu and select New Project. In the dialog that appears, select the Visual C# category in the navigator on the left side of the dialog. Select the GapAppStarter option, provide a name and destination for the application, and click the OK button, as shown in Figure 8-1.
Figure 8-1 Visual Studio New Project dialog
Visual Studio will create a new PhoneGap project folder with a default index.html and style sheet and open the IDE window. In the Solution Explorer shown on the right side of Figure 8-2, expand the www folder, then double-click the index.html file to open the file in the editor.
Figure 8-2 Visual Studio PhoneGap project window
To add new content to the application, simply add additional files to the Solution Explorer either directly from within the IDE or manually from the file system (by adding the files to the project’s folder on the hard drive). When new content is added to the folder, you must refresh the project’s file manifest included in the project. To do this, in the Visual Studio Solution Explorer for the project, right-click the GapSourceDictionary.tt item and select Run Custom Tool; then follow the prompts to execute the process. This will update the contents of the GapSourceDictionary.xml file included with the project, which instructs the packager on which content files to include with the packaged application.
One of the things the default sample application for Windows Phone does is add some additional code to the project to enable a console log function, as shown in bold in the following listing. As mentioned in Chapter 2, PhoneGap leverages the console functions enabled by the WebKit rendering engine. On Windows Phone, Microsoft is using its own rendering engine, so the WebKit features won’t be available to the program. This code makes logging capabilities available within any PhoneGap application.
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld3</title>
<meta name="viewport" content="width=320;
user-scalable=no" />
<meta http-equiv="Content-type"
content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="master.css" type="text/css"
media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript">
// provide our own console if it does not exist
if(typeof window.console == "undefined") {
window.console =
{log:function(str){window.external.Notify(str);}};
}
// output any errors to console log, created above.
window.onerror=function(e) {
console.log("window.onerror ::" + JSON.stringify(e));
};
console.log("Installed console ! ");
</script>
<script type="text/javascript" charset="utf-8"
src="phonegap-1.1.0.js"></script>
<script type="text/javascript">
function bodyLoad() {
document.addEventListener("deviceready",
onDeviceReady, false);
}
function onDeviceReady() {
//Get the appInfo DOM element
var element = document.getElementById('appInfo'),
//replace it with specific information about the device
//running the application
element.innerHTML = 'PhoneGap (version ' +
device.phonegap + ')<br />' + device.platform + ' ' +
device.name + ' (version ' + device.version + ').';
}
</script>
</head>
<body onLoad="bodyLoad();">
<h1>HelloWorld3</h1>
<p>This is a PhoneGap application that makes calls to the
PhoneGap APIs.</p>
<p id="appInfo">Waiting for PhoneGap Initialization to
complete</p>
</body>
</html>
Testing Windows Phone PhoneGap Applications
Visual Studio supports testing applications on the Windows Phone emulator and on physical Windows Phone devices. When testing applications from within Visual Studio, the execution target for the application is controlled by the option selected in the toolbar drop-down highlighted on the right side of Figure 8-3.
Figure 8-3 Visual Studio toolbar
To test the application, open the Debug menu and select Start Debugging, press the F5 key, or click the green triangle to the left of the target device drop-down field shown in Figure 8-3. Visual Studio will do the following:
1. Build the application.
2. (Optionally) Launch the emulator if selected as the target and not already running.
3. Deploy the application to the selected target.
4. Launch the application on the emulator.
Using the modified version of the HelloWorld3 sample application from Chapter 2, the default emulator will display a screen similar to the one shown in Figure 8-4.
Figure 8-4 Windows Phone emulator