7 Comments

Here's a short tutorial on how to make Durandal, PhoneGap and Windows Phone 8 work together:

Download and install PhoneGap’s Visual Studio 2012 template

Start by downloading PhoneGap. At the time of writing this, the latest version is 2.7.0. From inside the zip, copy CordovaWP8_2_7_0.zip(in folder lib/windows-phone-8)to Documents/Visual Studio 2012/Templates/ProjectTemplates:

image

Create a new Windows Phone 8 app using the template

Next step is to create the actual Windows Phone 8 app. For that, use the new Cordova-template:

image

Clone the Durandal and add it to the app

Next step is to get Durandal. After cloning the project, copy App, Content and Scriptsfolders into the app’s www-folder:

image

Now we just need to modify the PhoneGap’s Index.html so that it uses Durandal.

Create the Index.html for Durandal

Open the index.html and replace the content with this:

<!DOCTYPE html>
<html>
<head>
    <title>Durandal</title>

    <link rel="apple-touch-startup-image" href="Content/images/ios-startup-image-landscape.png" media="(orientation:landscape)" />
    <link rel="apple-touch-startup-image" href="Content/images/ios-startup-image-portrait.png" media="(orientation:portrait)" />
    <link rel="apple-touch-icon" href="Content/images/icon.png" />

    <!--Durandal does not require Bootstrap or Font Awesome. 
            They are used to make the samples look nice.-->
    <link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="Content/bootstrap-responsive.min.css" type="text/css" />
    <link rel="stylesheet" href="Content/font-awesome.min.css" type="text/css" />

    <!--The css in this file makes the modal dialogs work right.-->
    <link rel="stylesheet" href="Content/durandal.css" type="text/css" />

    <!--Css specific to the samples.-->
    <link rel="stylesheet" href="Content/app.css" type="text/css" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />

    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="cordova-2.7.0.js"></script>
</head>
<body>
    <div id="applicationHost"></div>

    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="Scripts/sammy-0.7.4.js"></script>
    <script type="text/javascript" src="app/durandal/amd/require.js" data-main="app/main"></script>
</body>
</html>

In theory, that should be it. But if you run the app, you’ll notice that everything is not working correctly:

image

The source of problem can be found from Visual Studio’s output window:

image

So it cannot find the shell.html, even though it’s where it should be:

image

“Fix” the PhoneGap

The PhoneGap Visual Studio 2012 template includes the PhoneGap’s source code, which is great. If you now open the Plugins/File.cs and set a breakpoint to readResourceAsText-method, you’ll see what’s causing the problem:

image

PhoneGap tries to read the file from a wrong folder!The folder is missing the www-part.

Now make a little tweak to the code:

                pathToResource = "www/" + pathToResource;
                var resource = Application.GetResourceStream(new Uri(pathToResource, UriKind.Relative));

And then run the app again and here it is! Durandal running in a PhoneGap based Windows Phone app:

image

Source Code

I created a repository for this sample on GitHub. It’s available from here.