FirefoxOS icons and Ionicframework

    I came around a few difficulties when adding icons to a FirefoxOS app made with Ionicframework, so here is a few hints :

    • first : guidelines, written nicely by Mozillians : https://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/
    • you will have to drop the icons (at least a 60x60 one for the launcher and a 128x128 one) in a www/resources/firefoxos/icon folder
    • forget about using ionic resources icon -i it won't work here. This command crop, resize, do anything needed on graphic assets. I think a nice addition to Ionicframework might be doing the same thing but for FirefoxOS. Anyway you can support my feature request here : https://github.com/driftyco/ionic/issues/3943
    • add several lines like to your web/config.xml (add one line per icon) :

    <platform name="firefoxos">
        <icon src="/resources/firefoxos/icon/icon-16.png" width="16" height="16"/>
    </platform>

    •  use ionic build firefoxos and the build process will produce a nice manifest.webapp file for you in platforms/firefoxos/www/

    Print Email

    Avoid flickering view title with Ionicframework and Android

    For several days I was facing a strange behavior when navigating in my app, especially on Android devices and simulator (I think transitions are different with iOS).

    Basically I have a header with always the same string in it (app title) and a subheader with a set of 3 tabs. When I was navigating from one tab to another it was like the app was reloading the view title : the feeling was really sluggish...

    On each tabs I had a :

    <ion-view view-title="Title">
      <ion-nav-buttons side="right">
        <button menu-toggle="right" class="button button-icon icon white-icon ion-android-more-vertical" ng-click="openPopover($event)">
        </button>
      </ion-nav-buttons>

    To get rid of this flickering/reloading behavior, I deleted those lines in each tabs.

    Then in the index.html, inside the ion-nav-bar directive I added :

    <ion-nav-back-button></ion-nav-back-button>
          <ion-nav-title>Title</ion-nav-title>
          <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon white-icon ion-android-more-vertical" ng-click="openPopover($event)">
            </button>
          </ion-nav-buttons>

    Don't forget to add some controllers to deal with events such as the ng-click here.

    No more flickering.

     

    Print Email

    How to install ionicframework on osX

    Even if installing ionicframework should be mostly straightforward, sometimes it is not and there is mandatory steps to follow :

    You should now be able to serve, emulate and run Ionic apps.

    Print Email

    Confirmation popup with Ionic

    Sometimes you have to display a confrmation message to your users right after an action, such as saving, deleting, sending something or maybe something was wrong. I needed to implement this behaviour on a Ionic-based app I am working on.

    So I wrote this service :

    You can simply use it anywhere in your code (don't forget to dependency-inject the "common" service in your controllers/services) with something like :

    common.backDrop('Saved !');

    Here is a codepen : http://codepen.io/lennycartier/pen/qdBBVL

    Print Email