Create an android app using durandal

Question

I just started with durandal yesterday to try-out android app development. This is my first try in app development also.

I was going through docs using mimosa, and it didn't workout as expected.

Steps covered

Downloaded starter-kit from durandal.
execute mimosa build -mo and got main-built.js.
Copied all files from assets to the phonegap sample project.
Included path to main-built.js in index.html of phonegap project.

What all changes I have to make in index.html

currently it looks like

<html>
    <head>
        <meta 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, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneGap</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/main-built.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

What all changes I need to do to make the starter-kit of durandal as an android app?

Great question.. The Durandaljs documentation on this is very minimal :( want to build using Weyland to get this puppy running on Phonegap too! Any progress on this? — EeKay, Nov 27 '13 at 15:29
I copied the sample from http://durandaljs.com/version/latest/HTML%20Samples.zip and copied this files to the phonegap sample and included all js that i copied, then i followed steps in durandal site and the sample app started working. But got stuck at scenario where ajax call is used — Okky, Nov 29 '13 at 05:22

score 1 · Answer 1 · answered Dec 31 '13 at 10:47

I have done a few apps with Durandal/Phonegap for both android and ios, I have walked this same road on my own and it wasn't funny, but I digress. First app.initialize() in your index.html is a NO-NO. Definitely not the way to go here. What you wan to do is keep your index looking how durandal likes it - empty of all javascript!. The exception is phonegap.js, you will need to reference that directly in your index.html. I haven't quite successfully figured out loading and initializing cordova asynchronously but there are some resources out there.

All the magic happens as you would expect in your main.js, you would obviously do this before you build with mimosa or weyland. See below

define(['durandal/system', 'durandal/app', 'durandal/viewLocator'],

function (system, app, viewLocator) {

    document.addEventListener('deviceready', function(){ setTimeout(onDeviceReady, 500); }, false);

    function onDeviceReady(){
    app.title = 'My App';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });


    app.start().then(function () {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        app.setRoot('viewmodels/shell', 'entrance');
    });
   };
});

I setTimeout for 1/2 second to wait for cordova to do it's business before calling the function, I had a few inconsistent issues otherwise. Rewrite your main.js as an AMD module and inject it into shell. You can then call app.initialize from activate or compositionComplete in shell.js.

GOTCHA #1

You may inadvertently come to another issue while working on the android platform which made me nearly rip my hair out for many days. When you do links in your views, you might be tempted to do <a href="#somewhere">Go Somewhere</a> Android doesn't like this and it just spews loads of gibberish in logcat. You would be better off doing this <a data-bind="click:goSomewhere">Go Somewhere</a> and then defining a function on your model which uses the router.navigate.

I hope this helps you out.

score 0 · Answer 2 · answered Jul 24 '17 at 04:46

Just solved the TTS problem as:

app.speakText = function (textToSpeak) {
    if (window.cordova) {
        var deferred = $.Deferred();
        window.TTS.speak({
            text: textToSpeak,
            locale: 'en-US',
            rate: 0.75
        }, function () {
            deferred.resolve(true);
        }, function (reason) {
        });
        return deferred.promise();
    }
};

Create an android app using durandal

2 Answers2