Cordova problems with windows phone 8

Question

I am having 2 issues that I can't seem to find a working solution for while using cordova in visual studio 2013. In the config.xml I specified that the orientation should be in portrait mode with this code:

<preference name="Orientation" value="portrait" />

When I run the app on android it obeys this preference just fine and the app does not rotate nor use landscape mode. However on windows phone 8 it still rotates to landscape mode ignoring the setting.

The other issue is that I can't get navigation to work correctly under windows phone 8. My javascript file has this code:

(function () {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);
        document.addEventListener("backbutton", onBackKeyDown, false);
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };

    function onBackKeyDown() {
        history.go(-1);
        navigator.app.backHistory();
    };

})();

Again it runs perfectly on Android, however on windows phone 8 the backbutton event does not seem to be called at all. Nothing I put in the function seems to run. So it seems to be ignoring the listener or not using it.

Any ideas on how to get this code working correctly for windows phone 8 using cordova?

Answer 1

On the orientation issue: it appears that Cordova is dropping the config.xml orientation setting when it creates the Visual Studio project. In the package.phone.appxmanifest file (for WP 8.1) you want this inside the <Application> section:

<m3:InitialRotationPreference>
    <m3:Rotation Preference="portrait" />
</m3:InitialRotationPreference>

and in package.windows80.appxmanifest it would be this:

<InitialRotationPreference>
    <Rotation Preference="portrait" />
</InitialRotationPreference>

You can also set it programmatically when you initialize your app, and this is the way I do it since then I don't have to go and edit the appxmanifest whenever I remove/add the Windows platform.

Windows 8.1 (Javascript):

if (typeof MSApp !== "undefined") {
    Windows.Graphics.Display.DisplayInformation.autoRotationPreferences =
        Windows.Graphics.Display.DisplayOrientations.portrait;
}

Windows Phone 8 (C#):

Windows.Graphics.Display.DisplayProperties.AutoRotationPreferences = 
    Windows.Graphics.Display.DisplayOrientations.Portrait;

Answer 2

I have found a way to get the back button to work with cordova and wp8.1. This requires the use of the WinJS framework.

In the ondeviceready function use this code:

if (device.platform == "windows") {
    // Get the back button working in WP8.1
    WinJS.Application.onbackclick = function () {
        onBackKeyDown();
        return true; // This line is important, without it the app closes.
    }
}
else {
    document.addEventListener("backbutton", onBackKeyDown, false);
}

Then make an onBackKeyDown function to handle the call:

function onBackKeyDown() {
    // Back key pressed, do something here
};