blob: 39cf43d7a69602399966ad8da0d1f060f033a449 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta name="description" content=" ">
<title>
Windows Phone 7 Platform Guide - Apache Cordova
</title>
<link rel="SHORTCUT ICON" href="/favicon.ico"/>
<link rel="canonical" href="https://cordova.apache.org/docs/en/3.1.0/guide/platforms/wp7/">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css">
<!-- Fonts -->
<!-- For attribution information, see www/attributions.html -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var disqus_developer = 1; // this would set it to developer mode
</script>
<!-- JS -->
<script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
<script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.apache.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
<header>
<a class="scroll-point pt-top" name="top"></a>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav_bar_center">
<ul class="nav navbar-nav">
<li class="active">
<a href="/docs/en/latest/">Documentation</a>
</li>
<li >
<a href="/plugins">Plugins</a>
</li>
<li >
<a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a>
</li>
<li >
<a href="/contribute">Contribute</a>
</li>
<li >
<a href="/contribute/team.html">Team</a>
</li>
<li>
<a href="/#getstarted">Get Started</a>
</li>
<li>
<form class="navbar-form navbar-right" id="header-search-form" role="search">
<div class="input-group">
</div>
</form>
</li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div id="_fixed_navbar_spacer" style="padding-top:50px"></div>
</header>
<div class="docs">
<!-- Table of Contents -->
<div class="hidden-xs hidden-sm site-toc-container">
<ul class="site-toc">
<li>
<a class="" href="/docs/en/3.1.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/overview/index.html">
Overview
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/cli/index.html">
The Command-line Interface
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/platforms/index.html">
Platform Guides
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/config_ref/index.html">
The config.xml File
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/hybrid/webviews/index.html">
Embedding WebViews
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/hybrid/plugins/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/appdev/privacy/index.html">
Privacy Guide
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/appdev/whitelist/index.html">
Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/accelerometer/accelerometer.html">
Accelerometer
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/camera/camera.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/media/capture/capture.html">
Capture
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/compass/compass.html">
Compass
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/connection/connection.html">
Connection
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/contacts/contacts.html">
Contacts
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/device/device.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/file/file.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/geolocation/geolocation.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/globalization/globalization.html">
Globalization
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/inappbrowser/inappbrowser.html">
InAppBrowser
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/media/media.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/notification/notification.html">
Notification
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/splashscreen/splashscreen.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/storage/storage.html">
Storage
</a>
</li>
</ul>
</div>
<!-- Page content -->
<div class="page-content-container">
<div class="page-content">
<div class="content-header">
<!-- ToC Dropdown (for XS and SM sizes only) -->
<div class="toc-dropdown dropdown visible-xs-block visible-sm-block">
<button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Table of Contents
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="" href="/docs/en/3.1.0/">
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/overview/index.html">
Overview
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/cli/index.html">
The Command-line Interface
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/platforms/index.html">
Platform Guides
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/config_ref/index.html">
The config.xml File
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/hybrid/webviews/index.html">
Embedding WebViews
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/hybrid/plugins/index.html">
Plugin Development Guide
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/appdev/privacy/index.html">
Privacy Guide
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/guide/appdev/whitelist/index.html">
Whitelist Guide
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/accelerometer/accelerometer.html">
Accelerometer
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/camera/camera.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/media/capture/capture.html">
Capture
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/compass/compass.html">
Compass
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/connection/connection.html">
Connection
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/contacts/contacts.html">
Contacts
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/device/device.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/file/file.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/geolocation/geolocation.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/globalization/globalization.html">
Globalization
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/inappbrowser/inappbrowser.html">
InAppBrowser
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/media/media.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/notification/notification.html">
Notification
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/splashscreen/splashscreen.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/3.1.0/cordova/storage/storage.html">
Storage
</a>
</li>
</ul>
</div>
<a class="edit" href="https://github.com/apache/cordova-docs/tree/master/www/docs/en/3.1.0/guide/platforms/wp7/index.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a>
<!-- Version dropdown -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
3.1.0
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="versionDropdown">
<!-- List versions available in this language -->
<li>
<a href="/docs/en/dev/" class="missing-page">
dev
</a>
</li>
<li>
<a href="/docs/en/latest/" class="missing-page">
12.x
(Latest)
</a>
</li>
<li>
<a href="/docs/en/11.x/" class="missing-page">
11.x
</a>
</li>
<li>
<a href="/docs/en/10.x/" class="missing-page">
10.x
</a>
</li>
<li>
<a href="/docs/en/9.x/" class="missing-page">
9.x
</a>
</li>
<li>
<a href="/docs/en/8.x/" class="missing-page">
8.x
</a>
</li>
<li>
<a href="/docs/en/7.x/" class="missing-page">
7.x
</a>
</li>
<li>
<a href="/docs/en/6.x/" class="missing-page">
6.x
</a>
</li>
<li>
<a href="/docs/en/5.4.0/" class="missing-page">
5.4.0
</a>
</li>
<li>
<a href="/docs/en/5.1.1/" class="missing-page">
5.1.1
</a>
</li>
<li>
<a href="/docs/en/5.0.0/" class="missing-page">
5.0.0
</a>
</li>
<li>
<a href="/docs/en/4.0.0/" class="missing-page">
4.0.0
</a>
</li>
<li>
<a href="/docs/en/3.6.0/" class="missing-page">
3.6.0
</a>
</li>
<li>
<a href="/docs/en/3.5.0/" class="missing-page">
3.5.0
</a>
</li>
<li>
<a href="/docs/en/3.4.0/" class="missing-page">
3.4.0
</a>
</li>
<li>
<a href="/docs/en/3.3.0/" class="missing-page">
3.3.0
</a>
</li>
<li>
<a href="/docs/en/3.2.0/" class="missing-page">
3.2.0
</a>
</li>
<li>
<a href="/docs/en/3.1.0/" class="missing-page">
<span class="selected">
3.1.0
</span>
</a>
</li>
<li>
<a href="/docs/en/3.0.0/" class="missing-page">
3.0.0
</a>
</li>
<li>
<a href="/docs/en/2.9.0/" class="missing-page">
2.9.0
</a>
</li>
<li>
<a href="/docs/en/2.8.0/" class="missing-page">
2.8.0
</a>
</li>
<li>
<a href="/docs/en/2.7.0/" class="missing-page">
2.7.0
</a>
</li>
<li>
<a href="/docs/en/2.6.0/" class="missing-page">
2.6.0
</a>
</li>
<li>
<a href="/docs/en/2.5.0/" class="missing-page">
2.5.0
</a>
</li>
<li>
<a href="/docs/en/2.4.0/" class="missing-page">
2.4.0
</a>
</li>
<li>
<a href="/docs/en/2.3.0/" class="missing-page">
2.3.0
</a>
</li>
<li>
<a href="/docs/en/2.2.0/" class="missing-page">
2.2.0
</a>
</li>
<li>
<a href="/docs/en/2.1.0/" class="missing-page">
2.1.0
</a>
</li>
<li>
<a href="/docs/en/2.0.0/" class="missing-page">
2.0.0
</a>
</li>
<li>
<a href="/docs/en/1.9.0/" class="missing-page">
1.9.0
</a>
</li>
<li>
<a href="/docs/en/1.8.1/" class="missing-page">
1.8.1
</a>
</li>
<li>
<a href="/docs/en/1.8.0/" class="missing-page">
1.8.0
</a>
</li>
<li>
<a href="/docs/en/1.7.0/" class="missing-page">
1.7.0
</a>
</li>
<li>
<a href="/docs/en/1.6.1/" class="missing-page">
1.6.1
</a>
</li>
<li>
<a href="/docs/en/1.6.0/" class="missing-page">
1.6.0
</a>
</li>
<li>
<a href="/docs/en/1.5.0/" class="missing-page">
1.5.0
</a>
</li>
</ul>
</div>
</div>
<!-- Show warnings for special versions -->
<!-- dev warning -->
<!-- outdated warning -->
<div class="alert docs-alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
This version of the documentation is outdated!
<a href="/docs/en/latest/">
Click here for the latest released version.
</a>
</div>
<!-- plugin version warning -->
<div id="page-toc-source">
<h1>Windows Phone 7 Platform Guide</h1>
<p>This guide shows how to set up your SDK development environment to
deploy Cordova apps for Windows Phone 7 devices. Apps also run on
Windows Phone 8 devices using the same APIs, but version 7 lacks some
of IE10&#39;s advanced features available on Windows Phone 8. Windows
Phone 8 apps do <em>not</em> run on Windows Phone 7 devices.</p>
<p>See the following for more detailed platform-specific information that
applies to both versions:</p>
<ul>
<li><a href="../wp8/upgrading.html">Upgrading Windows Phone</a></li>
<li><a href="../wp8/plugin.html">Windows Phone Plugins</a></li>
<li><a href="../wp8/tools.html">Windows Phone Command-line Tools</a></li>
</ul>
<p>The command-line tools above refer to versions prior to Cordova 3.0.
See <a href="../../cli/index.html">The Command-line Interface</a> for information about the
current interface.</p>
<h2>1. System Requirements</h2>
<ul>
<li>Operating System:
<ul>
<li>Windows 7 or Windows 8 (Pro) or Windows Vista with SP2
<ul>
<li>The 64-bit version (x64) of Windows is required for the SDK.</li>
<li>The Pro version is recommended for running a device emulator.</li>
</ul>
</li>
</ul>
</li>
<li>Register and pay for a <a href="http://dev.windowsphone.com/en-us/publish">Windows Phone Dev Center</a> account if you want to install your app on a real device or submit it to Market Place.</li>
</ul>
<p><strong>NOTE:</strong> Running the SDK in Virtual Machine might present some challenges. You can read this blog post that gives insight on the solutions to develop for <a href="http://aka.ms/BuildaWP8apponaMac">Windows Phone on a Mac</a>.</p>
<h2>2. Install SDK + Cordova</h2>
<ul>
<li>
<p>Download and install the <a href="http://www.microsoft.com/download/en/details.aspx?displaylang=en&amp;id=27570">Windows Phone SDK</a></p>
</li>
<li>
<p>Download and extract the latest copy of <a href="http://phonegap.com/download">Cordova</a>. You will be working in the <code>lib\windows-phone-8\wp7</code> subdirectory, <code>lib\windows-phone-8\wp8</code> contains the Windwos Phone 8 version of Cordova.</p>
</li>
<li>
<p>Copy the <code>CordovaWP7_x_x_x.zip</code> file to the <code>\My Documents\Visual Studio 2012\Templates\ProjectTemplates\</code> directory.</p>
</li>
</ul>
<h2>2.1. Building the template</h2>
<p><strong>NOTE:</strong> this step may not be required. If the lib\windows-phone directory already contains a file CordovaWP7_x_x_x.zip then you may skip this step.</p>
<p>In order to simplify the development process, Cordova comes with a script to build Visual Studio templates. This allows for rapid creation of Cordova applications inside Visual Studio. This template can be modified if needed and the below steps indicate how to proceed if you want to generate the template.</p>
<h3>Run the batch file to create and install the templates.</h3>
<ul>
<li>
<p>The root of the repo contains a file createTemplates.bat. Double clicking this file will generate 2 .zip files. (CordovaWP7_x_x_x.zip + CordovaWP8_x_x_x.zip where 3.1.0 is the current version number) To easily use these files in Visual Studio, copy them to
&quot;My Documents\Visual Studio 2012\Templates\ProjectTemplates" You will then be able to create new Apache Cordova Windows Phone apps from the Visual Studio File-&gt;New Project menu.</p>
</li>
<li>
<p>If you run the batch file from the command line, you can also call with a parameter to install automatically</p>
</li>
</ul>
<p>Run the script :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&gt;createTemplates.bat -install
</code></pre></div></div>
<h2>3. Set up New Project</h2>
<ul>
<li>
<p>Open Visual Studio Express for Windows Phone and choose <strong>New Project</strong>.</p>
</li>
<li>
<p>Select <strong>CordovaWP7</strong>. (The version number is displayed in the template description.)</p>
</li>
<li>
<p>Give the project a name, and select <strong>OK</strong>.</p>
</li>
</ul>
<h2>4. Review the project structure</h2>
<ul>
<li>
<p>The <code>www</code> directory contains your Cordova <code>html/js/css</code> and any other resources included in your app.</p>
</li>
<li>
<p>Any content that you add here needs to be a part of the Visual Studio project, and it must be set as content.</p>
</li>
<li>
<p>Note: This screen capture was from the wp8 cordova-2.3.0 download, your listing will vary based on the actual version installed.</p>
</li>
</ul>
<p><img src="/static/img/guide/platforms/wp8/projectStructure.png" alt="" /></p>
<h2>6. Build your project for the device</h2>
<p>In order to test your application on a device, the device must be registered. Click <a href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402565(v=vs.105).aspx">here</a> to read documentation on deploying and testing on your Windows Phone 7.</p>
<ul>
<li>
<p>Make sure your phone is connected, and the screen is unlocked.</p>
</li>
<li>
<p>In Visual Studio, select &#39;<a href="../../../cordova/device/device.html">Device</a>&#39; from the top drop-down menu.</p>
</li>
<li>
<p>Press the green <strong>play</strong> button next to the main drop-down menu to start debugging, or type <strong>F5</strong>.</p>
</li>
</ul>
<p><img src="/static/img/guide/platforms/wp7/wpd.png" alt="" /></p>
<h2>Done!</h2>
</div>
</div>
<div class="row">
<div class="blue-divider"></div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<h1>More Resources</h1>
<div class="row">
<div class="col-sm-4">
<h2>General</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a>
</li>
<li>
<a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/licenses">License</a>
</li>
<li>
<a href="/artwork">Artwork</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<h2>Development</h2>
<ul class="nav">
<li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&amp;q=cordova-">Source Code</a></li>
<li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li>
<li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li>
<li><a href="/contact">Mailing List</a></li>
<li><a href="/contribute/nightly_builds.html">Nightly builds</a></li>
</ul>
</div>
<div class="col-sm-4">
<h2>Apache Software Foundation</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://www.apache.org/">About ASF</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/events/current-event">Events</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/security/">Security</a>
</li>
<li>
<a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<h1>Contribute</h1>
<p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p>
<p>Report bugs, improve the docs, or contribute to the code.</p>
<a href="/contribute" class="btn btn-lg btn-primary">
Learn More
</a>
<p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p>
</div>
</div>
<p class="copyright_text">
Copyright &copy; 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/>
Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation.
<br/>
<p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p>
</p>
</div>
</footer>
</div>
</div>
</div>
<script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script>
<script defer type="text/javascript" src="/static/js/docs.js"></script>
<script defer type="text/javascript" src="/static/js/index.js"></script>
<script defer type="text/javascript" src="/static/js/twitter.js"></script>
</body>
</html>