Alright, seriously, PhoneGap is supposed to be easy, ‘yadda yadda yadda’.

Agreed, after my first PhoneGap experience, creating a little Google OAuth integration is fairly easy. Then you want to store the token to the local file system, so you obviously need to make sure Cordova is available, by adding an event handler for the ‘deviceready’-event. The interesting parts are the bindEvents and onDeviceReady functions.

Somewhere, your index.html calls app.initialize() in a script-tag, eventually at the end of the html, right before your body closing tag. getToken() is a function defined further down in my code.

Code is fairly easy, in your JS-file, that you use for your index.html, you have

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener("deviceready", this.onDeviceReady);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        getToken();
        this.receivedEvent('deviceready');

    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);

    }
};

 

Now I wanted to test this in Chrome with the Ripple plugin. The JS debugger always stopped at the document.addEventListener() method, but never called the handler.

What did do the trick though makes me go mad  with Ripple.

I already was calling ripple with this URL:

http://localhost?enableripple=cordova-2.7.0-Nexus4

telling it thus what cordova version I’m using, etc.

But Ripple doesn’t know version 2.7.0, which makes it default to 1.0.0 in the UI, but your URL stays the same and you don’t even notice.

To fix that, you have to set the Platform Version in the Platforms section on the left hand side of the emulator interface:

Set Cordova Version

And then, surprise surprise, the event handler is magically called.

You will also notice that your URL now points to:

http://localhost?enableripple=cordova-2.0.0-Nexus4

I don’t even want to mention the amount of hours I’ve spent googling this, trying all kinds of solutions, seeing other people go mad on Stack Overflow and what not. And I only figured this out by pure chance and coincidence, as I was just completely running out of ideas, after trying all sorts of different code, different Cordova versions, etc. etc. etc.


 
About iriphon

About iriphon

"Mobile Dev Blog" probably isn't the most accurate description of what iriphon.com is supposed to represent. I am still working on that, be patient with me :-) Basically anything that has to do with the mobile world can be a topic for iriphon, whether it refers to app store search optimization, design tips and tricks, reports on platform market shares, news from the mobile world or typical coding tutorial posts, I will try to cover everything. Even fun facts! The interesting part about all of this is that, as I am a female engineer, I'd like to support the initiative of more women channeling their studies towards a technical career. So, you might find posts on how it feels to be a woman in a male company, on figures showing how many girls are studying computer science in college and anything else you can think of. Stay tuned! :-)
About Irina

About Irina

Hi, my name's Irina and I'm happy to welcome you on my blog! I'm an enthusiast about the mobile world, working with native development for iOS and Android, web development as well as UI Design and UX. I currently live in the lovely city of Munich, enjoying the Bavarian lifestyle and working for Swedish IT consultancy Netlight. It's all about a variety of topics and for a wide range of well-known companies in the Munich area, doing frontend as well as backend development, mobile development, UI design, UX, using cutting-edge technologies and sketching, wireframing and prototyping. I also love graphic design and beautiful user interfaces. Before I used to work as a senior mobile developer for iOS and Android at NEXT Munich GmbH. The App Agency developing apps for a variety of customers. Already during my master-level studies in the field of Media Informatics at the LMU Munich I started specializing on mobile development but also on the "soft" side of an app: UI design, usability and information visualization. Furthermore I studied at the Università di Roma Tor Vergata, doing my bachelor thesis with JavaME on user-friendly coupling of mobile phones to public displays. At the CDTM I learned about business and product aspects during my degree in Technology Management and was able to create a great network of interesting and talented people. It was also through the CDTM that I got to design, implement and evaluate my very first iPhone app for the Munich-based fashion startup STYLIGHT. For a while I had the privilege of living in the sunshine state Queensland, more precisely in Brisbane, Australia, working on my master thesis with the Queensland University of Technology - an iPhone App for the Brisbane City Council, meant to encourage citizens to participate at shaping their city.