• Home

Another good example for $ionicPlatform.ready usage

I was working with geolocation on iOS/Android with Ionic+Cordova+AngularJS stack and once again I came accross a really good example of $ionicPlatform.ready usage.

For the moment I will just give you a gist of my controller file, but I wil soon release a sample git repo for you to try.

In a few words if you bind some fields in a view, refreshed with the help of a button and if you do not use the $ionicPlatform.ready function you will have to click twice. The first time the plugin will load, the next time it will fire. Raymond Camden did a good job explaining this race condition there (even my solution is controller located the explanation is fully relevant).

Print Email

Ionic framework and deviceready

As I was working on a mobile app, I came around on a - not so - strange problem, that may occurs very often when you are working with device plugins. As you may know the cordova/PhoneGap platform can use some devices features such as camera, microphone and so on... It can access some "software" features via the same plugin system. For example if you want to drop a line to the console or retrieve contacts from the contact list you should add a dedicated plugin (cordova|phonegap|ionic plugin add ....). Fine.

Ionic Framework provides us a nice $ionicPlatform.ready(function() {...}); in the default app.js. But if you want to use a plugin at the very begining of you app and as this function launches when the document.ready() event fires, your plugin will not be ready for use and will not be available for your functions in your view/controller.

You can find a good explanation about this problem on : http://java.dzone.com/articles/ionic-and-cordovas-deviceready

I was able to find a "workaround" this (can't call it a workaround since it is so simple, a "trick" is more appropriate) by adding a

$ionicPlatform.ready(function()  { /* add stuff here, even calls to a function defined in this block */ )};

Here is two controllers, the first one will need an action once the document.ready() event fires (such as a ng-click="findContact();" directive) the second one will be launched at the first loading :

The whole github repo for this trick is here : https://github.com/lennycartier/ionic-contactlist

Print Email

ContactFindOptions is not defined (and probably some others too)

Everyone starting to develop on mobile devices with API level frameworks such as Cordova or Phonegap will receive this error message one day. This one could freeze your learning curve for a while. So here is a few steps to get rid of it :

  • check for plugins installation. For this particular error we need the org.cordova.apache.contacts plugin to be installed via cordova plugin add org.apache.cordova.contacts
  • check for permissions : all Cordova/Phonegap plugins have extensive help pages where permission "issues" are described. I am usually having a look to https://github.com/apache?query=cordova which are more readable than details plugin entries on http://plugins.cordova.io/#/
  • never forget to make api calls when your device is ready. You can prepare calls in functions, but only use these functions when the device calls can be done.
<script type="text/javascript">    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    function onDeviceReady() {
        var options = new ContactFindOptions();
        options.filter = "";    
        options.multiple = true;
        var filter = ["displayName", "addresses"];
        navigator.contacts.find(filter, onSuccess, onError, options);
    }
    function onSuccess(contacts) {
        for (var i=0; i<contacts.length; i++) {
            alert(contacts[i].displayName);
        }
    };
    function onError(contactError) {
        alert('onError!');
    };
 </script>

The execution can be made with a <body onload="onLoad()">

Print Email

Build virtualbox VM headless

Here is some simple commands to build and run a headless virtualbox image

VBoxManage createvm --name trusty14041 --ostype Ubuntu_64
VBoxManage createhd --filename trusty14041 --size 8092
VBoxManage registervm /home/lenny/VirtualBox\ VMs/trusty14041/trusty14041.vbox
VBoxManage modifyvm trusty14041 --memory 512
VBoxManage storagectl trusty14041 --name IDE --add ide --controller PIIX4 --bootable on
VBoxManage storagectl trusty14041 --name SATA --add sata --controller IntelAhci --bootable on
VBoxManage storageattach trusty14041 --storagectl SATA --port 0 --device 0 --type hdd --medium trusty14041.vdi
VBoxManage modifyvm trusty14041 --vram 128
VBoxManage modifyvm trusty14041 --nic1 nat --nictype1 82540EM --cableconnected1 on
VBoxManage storageattach trusty14041 --storagectl IDE --port 0 --device 0 --type dvddrive --medium ../tmp/ubuntu-14.04.1-server-amd64.iso
VBoxManage modifyvm trusty14041 --vrde on --vrdeport 5012 --vrdeaddress 192.168.1.2
VBoxHeadless --startvm trusty14041 rdesktop -a 16 -N 192.168.1.2:4000

Then fire up a RDP client such as Cord (http://cord.sourceforge.net) and do a quick connect on 192.168.1.2:4000

vboxheadless-cord

Notes :

I am almost sure you will need to add a little bit of hard drive space. Use "VBoxManage modifyvm" to do it.

Print Email