workshop 15: ionic framework

Front End Workshops

XIV. Ionic Framework

Enrique Oriol Bermú[email protected]

“Ionic is the beautiful,

open source front-end SDK

for developing hybrid mobile apps

with web technologies.”

Content

● About Ionic

● Cordova

● Ionic Install

● Ionic CLI

● CSS Components

● Javascript

● Sass integration

About Ionic

HTML5 mobile app development framework

for building Hybrid apps -> Cordova / Phonegap

Native-styled mobile UI elements (iOS, Android) through CSS3

(optional) core functionality through AngularJS

About Ionic

Adapted CSS

based on

platform

What is a hybrid app?

Website running

in a browser shell

inside an app with access

to the native platform layer.

Cordova

Behind webview wrappers

What is Cordova

● Mobile development framework

● Provide API bindings to access device’s sensors, data…

● Open Source (vs Adobe PhoneGap)

● Build app wrappers for each mobile platform

● Distributable to app stores

Cordova Components

Config.xml

● app info

● config parameters

Cordova App

● Native WebView

● Web page -> index.html

Cordova Components

Plugins

● interface between Cordova and

native components

● Allows invoke native code from JS

● Plugins to standard device APIs

● Third party plugins

● How to build a plugin

http://cordova.apache.org/plugins/

http://cordova.apache.org/plugins/

https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html

https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html

Cordova Components

Cordova CLI

● Create new projects

● Add / remove platforms

● Build for any platform

● Run on real devices

● Run on emulators

● Search for plugins

● Install / Remove plugins

Ionic Install

The Entry Point

Ionic Install

1. Install Cordova

$ npm install -g cordovaCompatibility with iOS 7+, Android 4.1+ and Windows 10

(officially)

FirefoxOS in roadmap

2. Install Ionic

$ npm install -g ionic

Avoid installing cordova and ionic with sudo.

Problems? use NVM for node

https://www.npmjs.com/package/nvm

Ionic CLI

Keeping things simple

Ionic provides its own CLI

extends cordova CLI

Ionic CLI

Ionic CLI

Configure platforms

$ ionic platform add ios

$ ionic platform add android

Build app from template

$ ionic platform rm ios

$ ionic platform rm android

$ ionic start myProject blank

$ ionic start myProject tabs

$ ionic start myProject sidemenu

Commands

Ionic CLI

Build the app

$ ionic build android

Run on device

$ ionic run android

Launch on emulator

$ ionic emulate android

Run dev server

$ ionic serve

Run dev Android & iOS side-by-side

$ ionic serve --lab

Add / remove plugins

$ ionic plugin add plugin-name

$ ionic plugin rm plugin-name

Commands

Ionic CLI

State Save (package.json)

$ ionic state save

State Restore

$ ionic state restore

State Reset

$ ionic state reset

change browser (Android Crosswalk)

$ ionic browser list

$ ionic browser add crosswalk

Update library

$ ionic lib update

Package app$ ionic package debug android

$ ionic package release android

Commands

CSS components

Mobile oriented CSS framework

Defined as Sass variables

Easily customizable

Already used along ionic CSS styles

Colors

Ionic CSS componentshttp://ionicframework.com/docs/api/


http://ionicons.com/Icons

<i class="icon ion-star"></i>

http://ionicons.com/

http://ionicons.com/

<div class="bar bar-header bar-positive">

<button class="button button-icon icon ion-navicon"></button>

<h1 class="title">Header</h1>

<button class="button button-clear">Edit</button>

</div>

<div class="bar bar-subheader">

<h2 class="title">Sub Header</h2>

</div>

<div class="bar bar-footer bar-balanced">

<div class="title">Footer</div>

</div>

bar-header, bar-subheader, bar-footer


<button class="button">Default</button>

<button class="button button-block button-calm">Block Button</button>

<button class="button button-full button-energized">Full Width Block Button</button>

<button class="button button-outline button-assertive">Outlined Button</button>

<button class="button button-clear button-royal">Clear Button</button>

<button class="button icon-left ion-star button-dark">Favs</button>

<button class="button icon ion-gear-a button-clear button-dark"></button>

buttons


<div class="list">

<div class="item item-divider">Simple items</div>

<div class="item">Item 1</div>

<div class="item item-divider">Items with image</div>

<div class="item item-avatar">

<img src="ionic.png">

<h2>Ionic Framework</h2> <p>HTML5 hybrid mobile app framework</p>

</div>

<div class="item item-thumbnail-left">

<img src="ionic.png">

<h2>Ionic Framework</h2> <p>HTML5 hybrid mobile app framework</p>

</div>

</div>

lists


<div class="tabs-striped tabs-color-assertive">

<div class="tabs">

<a class="tab-item active" href="#">

<i class="icon ion-home"></i>

</a>

<a class="tab-item" href="#">

<i class="icon ion-star"></i>

</a>

<a class="tab-item" href="#">

<i class="icon ion-gear-a"></i>

Settings

</a>

</div>

</div>

tabs

and more...


Card styles form styles inputs

Javascript

AngularJS Extensions

ionic.bundle.js

Includes:

● angular.js

● angular-animate.js

● angular-sanitize.js

● angular-ui-router.js

● ionic angularJS elements

Ionic Javascript

ion-content directive: content area with custom Scroll View

Ionic AngularJS elementshttp://ionicframework.com/docs/api/

<ion-content

[delegate-handle="str"] [direction="str"]

[locking="bool"] [padding="bool"]

[scroll="bool"] [overflow-scroll="bool"]

[scrollbar-x="bool"] [scrollbar-y="bool"]

[start-x="string"] [start-y="string"]

[on-scroll="expr"] [on-scroll-complete="expr"]

[has-bouncing="bool"] [scroll-event-interval="int"]>

...

</ion-content>

<ion-content ng-controller="MyController">

<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"> </ion-refresher>

<ion-list> <ion-item ng-repeat="item in items"> </ion-item> </ion-list>

</ion-content>

ion-refresher: adds pull-to-refresh to a scrollView


angular.module('testApp', ['ionic'])

.controller('MyController', function($scope, $http) {

$scope.items = [1,2,3];

$scope.doRefresh = function() {

$http.get('/new-items')

.success(function(newItems) {

$scope.items = newItems;

})

.finally(function() {

// Stop the ion-refresher from spinning

$scope.$broadcast('scroll.refreshComplete');

});

};

});

http://codepen.io/-kaik-/pen/RaPdxv

$ionicScrollDelegate service

● $getByHandle(handle)

● resize()

● scrollTop([anim])

● scrollBottom([anim])

● scrollTo(left, top, [anim])

● scrollBy(left, top, [anim])

● zoomTo(level, [anim], [origL], [origT])

● zoomBy(factor, [anim], [origL], [origT])

● getScrollPosition()

● anchorScroll([anim]):@id window.location.hash

● freezeScroll([freeze]) / freezeAllScrolls([freeze])

● getScrollView()

ion-scroll


<ion-scroll

[delegate-handle="str"] [direction="str"]

[locking="bool"] [paging="bool"]

[on-refresh="expr"] [on-scroll="expr"]

[scrollbar-x="bool"] [scrollbar-y="bool"]

[has-bouncing="bool"] [zooming="bool"]

[min-zoom="int"] [max-zoom="int"]

>

<div>Content to scroll</div>

</ion-scroll>

http://codepen.io/ionic/pen/mwFuh

<ion-header-bar align-title="left">

<div class="buttons">



</div>

<h1 class="title">Title!</h1>




</div>

</ion-header-bar>

ion-header-bar


API

● align-title: left/right/center

● no-tap-scroll: by default it scrolls

content to the top when clicked

<ion-footer-bar align-title="left">




</div>

<h1 class="title">Title!</h1>




</div>

</ion-footer-bar>

ion-footer-bar


API

● align-title: left/right/center

http://codepen.io/-kaik-/pen/PNqLVo

related directives

ion-item

ion-delete-button

ion-reorder-button

ion-option-button

<ion-list>

<ion-item ng-repeat="item in items">

Hello, {{item}}!

</ion-item>

</ion-list>

ion-list


API

● delegate-handle

● type: list-inset / card

● show-delete

● show-reorder

● can-swipe

http://codepen.io/ionic/pen/JsHjf

function MyCtrl($scope, $ionicListDelegate) {

$scope.showDeleteBtns = function() {

$ionicListDelegate.showDelete(true);

};

}

<button ng-click="showDeleteBtns()"></button>

<ion-list delegate-handle="testList"> <ion-item ng-repeat="i in items"> Item {{i}} <ion-delete-button>Rm</ion-delete-button> </ion-item> </ion-list>

$ionicListDelegate


API

● showReorder(bool)

● showDelete(bool)

● canSwipeItems(bool)

● closeOptionButtons()


Basics

● data must be array● NO one-time binding (::)

<ion-content>

<ion-item collection-repeat="item in

items">

{{item}}

</ion-item>

</ion-content>

collection-repeat


API

● collection-repeat

● item-width: in px or %

● item-height: in px or %

● item-render-buffer

● force-refresh-images

http://codepen.io/ionic/pen/5515d4efd9d66f780e96787387f41664

angular.module('LoadingApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicLoading) {

$scope.show = function() {

$ionicLoading.show({

template: 'Loading...'

});

};

$scope.hide = function(){

$ionicLoading.hide();

};

});

$ionicLoading service


API

● show({opts})

○ template○ templateUrl○ scope○ noBackdrop○ hideOnStateChange○ delay○ duration

● hide()

http://codepen.io/-kaik-/pen/vGOwrW

<ion-side-menus delegate-handle="myMenu">



<ion-side-menu side="left">

</ion-side-menu>

<ion-side-menu-content>



</ion-side-menu-content>



<ion-side-menu side="right">

</ion-side-menu>

</ion-side-menus>

ionSideMenus


$ionicSideMenuDelegate service


● toogleLeft([open])

● toogleRight([open])

● getOpenRatio()

● isOpen()

● isOpenLeft()

● isOpenRight()

● canDragContent([can])

● edgeDragThreshold(value): #pixels, true(25px), 0

http://codepen.io/-kaik-/pen/JXYWrx

<ion-tabs class="tabs-positive tabs-icon-top"

delegate-handle="myTabs">

<ion-tab title="Home" icon-on="icon1" icon-off="

icon1-off" badge="5" on-select="sel()" on-deselect="

desel()" hidden="bool" disabled="bool">



</ion-tab>

<ion-tab title="About" icon="icon2">



</ion-tab>

</ion-tabs>

ionTabs


$ionicTabsDelegate service


● select(index)

● selectedIndex()

● showBar(show)

ionNavViews


Usage

var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider) {

$stateProvider

.state('index', {

url: '/',

template: '<ion-view view-title="My Page">

...my home content...

</ion-view>'

})

.state('about', {

url: '/about',

templateUrl: 'about.html'//this template should use ion-view

});

});



<ion-nav-view></ion-nav-view>

ion-views are cached by default

http://codepen.io/ionic/pen/odqCz

.controller(function($scope, $ionicActionSheet) {

$scope.show = function() {

// Show the action sheet

var hideSheet = $ionicActionSheet.show({

buttons: [

{ text: '<b>Share</b> This' },

],

cancelText: 'Cancel',

cancel: function() {},

buttonClicked: function(index) {return true;}

});

};

});

$ionicActionSheet


show(options)

● buttons: [{text:””}]

● titleText: str

● cancelText: str

● destructiveText: str

● cancel: f()

● buttonClicked: f() return true to close ASheet

● destructiveButtonClicked: f() true to close

● cancelOnStateChange: f() cancel when navigate

● cssClass: str custom CSS class name

http://codepen.io/-kaik-/pen/bppYOZ

<ion-slides options="options" slider="data.slider">

<ion-slide-page>

<div class="box blue"><h1>BLUE</h1></div>

</ion-slide-page>

<ion-slide-page>

<div class="box yellow"><h1>YELLOW</h1></div>

</ion-slide-page>

</ion-slides>

ion-slides (Swiper)


How to use it

$scope.options = {

loop: false,

effect: fade,

speed: 500,

}

$scope.data = {};

$scope.$watch('data.slider', function(nv, ov) {

$scope.slider = $scope.data.slider;

})

http://codepen.io/-kaik-/pen/ONNzWe

Sass integration

because designers also Need love

What is this doing

1. Install Gulp and gulp-sass

2. remove old CSS files from index.html

3. add Sass generated CSS files to index.html

4. add Sass to gulp startup tasks, so ionic serve command watch for Sass changes.

$ ionic setup sass

setup Sass

Sass integration

./scss/ionic.app.scss

where do you write your Sass

workshop 15: ionic framework

Software