Contents


Using Ionic to rapidly develop IBM MobileFirst Platform hybrid applications

Comments

The Ionic Framework

Ionic is a high-performance mobile development framework that contains a host of mobile-optimized components to help you quickly build attractive and easy-to-use mobile applications. It includes behavioural features for mobile-optimised navigation, scrolling, side menus, and keyboard management; CSS modules for forms, buttons, lists, and generic layout; and over 700 icons. Ionic has additional features for creating hybrid applications using the Apache Cordova framework, but they are not covered in this tutorial.

Ionic supports iOS 6+ and Android 4.0+, covering 98% of iOS devices and 90% of Android devices. Using this framework, you can quickly create both simple and complex hybrid applications.

Prerequisites for this tutorial

  • You should have the IBM MobileFirst command-line tools installed. You will use them to create projects, applications, and environments.
  • Alternatively, you can still use IBM MobileFirst Studio. Download Developer Edition of IBM MobileFirst Studio.
  • You should be familiar with the basics of using IBM MobileFirst Platform to create hybrid applications.

Getting started with your Ionic application

Create a new MobileFirst project named names ToolsProject and a hybrid application named AmazingApp. Add an Android environment to the application:

mfp create IonicProject
cd IonicProject
mfp add hybrid AmazingApp
cd apps/AmazingApp

From now on, execute all commands in the IonicProject/apps/AmazingApp directory.

Adding Ionic files to your application

Download the latest version of the Ionic framework from the Ionic website. This tutorial uses Version 1.0.0-beta14. You can download this version directly.

Create a new directory named common/ionic and extract the downloaded .zip file into it. Structure your common directory like this:

common
├── css/
├── images/
├── index.html
├── ionic/
│   ├── css/
│   ├── fonts/
│   ├── js/
│   └── version.json
└── js/

Ionic comes with a bundled version of AngularJS, which provides most of its clever functionality. For general information about the AngularJS framework, see the AngularJS website. For a particularly good AngularJS tutorial, see the Thinkster website.

Augmenting index.html

Edit common/index.html to load Ionic and its dependencies:

<html>
<head>
  <!-- pre-existing <head> content here -->
  <!-- New lines to load Ionic CSS -->
  <link rel="stylesheet" href="ionic/css/ionic.css" />
</head>
<body>
  <!-- pre-existing <body> content here -->
  <!-- New lines to load Ionic JS bundle -->
  <script src="ionic/js/ionic.bundle.js"></script>
</body>
</html>

The Ionic project provides a convenient package named ionic.bundle.js to help you load a basic Ionic environment. It contains:

  • ionic.js
  • ionic-angular.js
  • angular/angular.js
  • angular/angular-animate.js
  • angular/angular-sanitize.js
  • angular-ui/angular-ui-router.js

Instead of loading ionic.bundle.js, you can also load these files individually, which may be easier to manage for complex applications. If you use Bower and wiredep, the individual files will be injected.

Loading Ionic and AngularJS

Now that you've included the Ionic framework and its dependencies in the application, you need to start it up. Because Ionic is a set of extensions to AngularJS, the loading pattern is the same as for AngularJS, which is called bootstrapping AngularJS. However, you need to let the IBM MobileFirst Platform (MFP) complete its own loading sequence before bootstrapping AngularJS, which you can do by instructing MFP to bootstrap AngularJS when it is ready. Edit the js/main.js file and adjust the wlCommonInit() function as follows:

function wlCommonInit() {
  // Pre-existing wlCommonInit() content here
  // New lines to bootstrap AngularJS
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['app-main']);
  });
}

This code tells AngularJS to bootstrap your application using a base module named App. You haven't written your application yet or defined the module app-main, so do that now.

Writing your Ionic application

Because Ionic includes great features for side menus and navigation, you'll create a basic application with three views, and side menu entries to manually switch between those views. Of course, Ionic has many additional functions!

The application will detail a few astronomical objects -- planets and black holes. The data will be static, but if you want to, you can add dynamic features using the AngularJS MVC facilities.

Figure 1. Application home screen
Application home screen
Application home screen
Figure 2. Application side bar
Application side bar
Application side bar

Creating the application module

Every AngularJS application needs an application module. You referred to one named app-main when bootstrapping AngularJS. Create that module now. Create a directory named common/app and a file named common/app/app-main.js, and put this line of code in it:

angular.module('app-main', ['ionic']);

This line defines an app-main module with a single dependency: ionic. Because you've defined app-main as your application module, ionic will be automatically loaded as one of its dependencies. Ensure that it is loaded correctly by adjusting index.html:

<body>
<!-- pre-existing <body> content here -->
<!-- New lines to load Ionic JS bundle -->
<script src="ionic/js/ionic.bundle.js"></script>
<!-- Load the application -->
<script src="app/app-main.js"></script>
</body>

Making the application do something

Give your application some content: Edit index.html and replace Hello MobileFirst with the following code:

<!--application UI goes here-->
<!-- Hello MobileFirst -->
<ion-side-menus>
  <ion-side-menu-content>
    <!-- Ionic places our views here-->
    <!-- Configure the global navigation/title bar -->
    <ion-nav-bar class="bar-dark">
      <!-- Default buttons -->
      <ion-nav-buttons side="primary">
        <!-- "Hamburger" menu -->
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
      <!-- Automatic back button -->
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <!-- Contains our views -->
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <!-- Define our left-hand-side menu -->
    <header class="bar bar-header bar-dark">
      <h1 class="title">Amazing Menu!</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/home" class="item-icon-left">
          <i class="icon ion-ios7-home"></i> Home
        </ion-item>
        <ion-item class="item-divider">
          Amazing Things
        </ion-item>
        <ion-item nav-clear menu-close href="#/planets" class="item-icon-left">
          <i class="icon ion-planet"></i> Planets
        </ion-item>
        <ion-item nav-clear menu-close href="#/blackholes" class="item-icon-left">
          <i class="icon ion-funnel"></i> Black Holes
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

You also need to tweak the MFP default stylesheets so that Ionic will work properly. Edit common/css/main.css and add this rule:

body {
  position: initial;
}

Run the application for the first time:

mfp build
mfp deploy
mfp preview

If you're using MFP Studio, build, deploy, and preview the application. There is no content yet, but you can see that when clicked, the Hamburger button opens the side menu. You can also swipe the menu open and closed. Those buttons are inactive, so add some content.

Adding content to your application

Your global navigation is defined, but you don't have any content yet. Ionic organizes its content in views, and you need to define those views before it knows how to show them. To do so, edit the common/app/app-main.js file and adjust it as follows:

angular.module('app-main', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  // Define our views
  $stateProvider.state('home', {
    url: "/home",
    templateUrl: 'views/home.html'
    // If you wanted some AngularJS controller behaviour...
    // controller: "HomeCtrl as ctrl"
  });
  $stateProvider.state('planets', {
    url: "/planets",
    templateUrl: 'views/planets.html'
  });
  $stateProvider.state('blackholes', {
    url: '/blackholes',
    templateUrl: 'views/blackholes.html'
  });
  // Default view to show
  $urlRouterProvider.otherwise('/home');
});

Here, you have defined three views. One of these (the home view) is specified as the default.

Defining view content

Create a folder named common/views, then a file named common/views/home.html, and then fill it with this content:

<ion-view hide-back-button="true" title="Space!">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/NGC_4414_%28NASA-med%29.jpg">
        </ion-item>
        <ion-item>Full of wonderful things.  Take a look!</ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-icon-right item-icon-left" href="#/planets">
          <i class="icon ion-planet"></i>
          Planets
          <i class="icon ion-ios7-arrow-forward"></i>
        </ion-item>
        <ion-item class="item-icon-right item-icon-left" href="#/blackholes">
          <i class="icon ion-funnel"></i>
          Black Holes
          <i class="icon ion-ios7-arrow-forward"></i>
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

Add a second file, common/views/planets.html:

<ion-view title="Planets">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Jupiter</h2>
          <p>The largest planet in the solar system.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg">
        </ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Saturn</h2>
          <p>The second largest planet in the solar system.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Saturn_PIA06077.jpg">
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

Add a third file, common/views/blackholes.html:

<ion-view title="Black Holes">
  <ion-pane>
    <ion-content overflow-scroll="true">
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Black Hole A</h2>
          <p>Simulated view of a black hole (center) in front of the Large
          Magellanic Cloud.</p>
        </ion-item>
        <ion-item class="item-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/BH_LMC.png">
        </ion-item>
      </div>
      <div class="list card">
        <ion-item class="item-text-wrap">
          <h2>Pictures are hard to find</h2>
          <p>"Well, the thing about a black hole - its main distinguishing
          feature - is it's black. And the thing about space - the colour of
          space, your basic space colour - is black. So how are you supposed
          to see them?" -- Holly, "Red Dwarf"</p>
        </ion-item>
      </div>
    </ion-content>
  </ion-pane>
</ion-view>

Viewing your finished application

Preview your application again:

mfp build
mfp deploy
mfp preview

Download an example MobileFirst Platform project with working code from this article.

Conclusion

In this tutorial, you learned how to use Ionic to quickly create a hybrid application using the IBM MobileFirst Platform.


Downloadable resources


Related topics


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Mobile development, DevOps, Middleware
ArticleID=998617
ArticleTitle=Using Ionic to rapidly develop IBM MobileFirst Platform hybrid applications
publish-date=02252015