CODEWITHSUNDEEP
cordovadurandalandroidmimosa
Okky
Okky

Reputation: 10466

Create an android app using durandal

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

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?

Upvotes: 1

Views: 911

Answers (2)

Ramesh Prasad
Ramesh Prasad

Reputation: 1

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();
    }
};

Upvotes: 0

Obi
Obi

Reputation: 3089

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.

Upvotes: 1

Related Questions