Workshop 15: Ionic framework

Front End Workshops
XIV. Ionic Framework
Enrique Oriol Bermúdez
eoriol@naradarobotics.com

“Ionicis 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

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
1. Install Cordova
$ npm install -g cordova
Compatibility 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

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>

<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');
});
};
});

$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>

<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

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

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

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()

<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

<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

.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

<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;
})

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (12)

Semelhante a Workshop 15: Ionic framework

Semelhante a Workshop 15: Ionic framework (20)

Mais de Visual Engineering

Mais de Visual Engineering (18)

Último

Último (20)

Workshop 15: Ionic framework