Chapter 14.Conclusion

Components You Should Know About

In this final chapter, we will touch upon a few components that we were not able to use within our sample applications and look at where to go next in your journey to learn the Ionic Framework.

Although we touched on a lot of the components in the Ionic Library, there are some additional ones that we wanted to highlight. For a more complete list, seeAppendix C.

Slides

The first component to explore briefly is slides. This component allows you to have a carousel of items. These could be as simple as just images, or as complex as individual pages.The component is actually built in two parts: the container component<ion-slides>and each slide<ion-slide>that is nested within. Here is a very basic sample from the Ionic documentation:

<
ion-slides pager
>
<
ion-slide style="background-color: green"
>
<
h2
>
Slide 1
<
/h2
>
<
/ion-slide
>
<
ion-slide style="background-color: blue"
>
<
h2
>
Slide 2
<
/h2
>
<
/ion-slide
>
<
ion-slide style="background-color: red"
>
<
h2
>
Slide 3
<
/h2
>
<
/ion-slide
>
<
/ion-slides
>

The inline styles are included for demonstration purposes only.

Table 14-1lists the various settings you can apply to your<ion-slides>component.

This component is actually a wrapper for the Swiper component built by iDangero.us. By default, the Ionic team has restricted some of the methods that are directly exposed by their component. If you need to access something that is supported within the iDangero.us source, you will need to use thegetSlider()method for information on getting the Swiper instance and using its methods directly.

If you want to explore using this component with the sample apps, you could introduce it as a container for each city’s weather or as an image gallery for each National Park.

Date-Time

Working with dates and time are not only challenging in code (although_moment.js_certainly helps out in that department) but also from a user interface point of view. Although HTML5 did introduce the input type of datetime-local, the visual display of the use of this component would vary and be difficult to customize. So Ionic introduced<ion-datetime>as a way to solve this issue:

<
ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" 
[(ngModel)]="event.timeStarts"
>
<
/ion-datetime
>

You have control over both the display and picker formats of the date-time (there aremany options). These formats are defined by standard filters. In the preceding sample, the display format will show the hour as 1–12, followed by a colon, then the minutes with a leading zero. While the picker will display the hours as a range from 1–12, the minutes from 00 to 59, and a picker for AM or PM (seeFigure 14-1).

Figure 14-1.Ionic Date-Time picker component

You could introduce this component to set a due date for an item on the To Do application we wrote inChapter 7.

Popover

You may often want to either present some additional information to the user about an item or expose additional controls, but not want to clutter your app’s interface. This is where the Popover component can come in handy. Some common examples of this component in action are changing the sort order of a list or filtering some data. Unlike components that are within the HTML template, this component is dynamically added, much like the Ionic Alert component:

import { Component } from '@angular/core';
import { PopoverController } from 'ionic-angular';
import { MyPopOverPage } from './my-pop-over';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public popoverCtrl: PopoverController) {

  }

  presentPopover(ev) {
    let popover = this.popoverCtrl.create(MyPopOverPage);
    popover.present({
      ev: ev
    });
  }
}

In our HTML, we can have a simple button that we will call thepresentPopoverfunction:

<
button ion-button (click)="presentPopover($event)"
>
<
ion-icon name="more"
>
<
/ion-icon
>
<
/button
>

The actual popover component is (seeFigure 14-2):

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@Component({
  template: `

<
ion-list
>
<
ion-list-header
>
Units
<
/ion-list-header
>
<
button ion-item (click)="close()"
>
Celsius
<
/button
>
<
button ion-item (click)="close()"
>
Fahrenheit
<
/button
>
<
/ion-list
>

  `
})
export class MyPopOverPage {

  constructor(public viewCtrl: ViewController) {}

  close() {
    this.viewCtrl.dismiss();
  }

}

Figure 14-2.Ionic Popover component

One last thing you need to do is to update the_app.module.ts_file with your Popover component. If you forget to do this, your component will not work.

If you wanted to sort your list items, like in the Ionic2Do app, you could use this component to display the sort options to your user. Another example would be making our temperature unit choice via this component.

Reorder List

Another component that we want to highlight is ItemReorder. Built into the standard Ion List component is the ability to allow the user to reorder the list. To enable this function, simply add the attribute reorder to the<ion-list>and set its value totrue. This will expose the reorder controls on the list items.

Ionic will handle the array reordering for you. But if you need to handle the reordering for some reason, you can bind theionItemReorderevent to a custom function:

<
ion-list reorder="true" (ionItemReorder)="reorderItems($event)"
>
<
ion-item *ngFor="let item of items"
>
{{ item }}
<
/ion-item
>
<
/ion-list
>

When this event is emitted, it provides the initial index (from) and the new index value (to) for the item that was just reordered. Here thereorderItemsfunction will write to the console the reorder indexes, do the actual reorder, then write the new array to the console:

reorderItems(indexes) {
  console.log(indexes);  //{from: 0, to: 4}
  this.items = reorderArray(this.items, indexes);
  console.log(this.items);   //the reordeed array.
}

Ionic has included a helper function calledreorderArrayto make life a bit easier than storing indexes and splicing arrays.

DeepLinker

This is one of the newest components/features to Ionic. With Ionic 1, navigation was handled through the use of URLs. Although this posed some challenges with complex apps, it did provide a method to expose deeper sections of your application. With Ionic shifting to a new navigation system, we no longer had a method to easily navigate to a particular screen. This proved to be problematic for a lot of app designers. To solve this issue, Ionic introduced its DeepLinker system.

To utilize this feature, we will need to update the_app.module.ts_file. When we call theIonicModule.forRootmethod, simply pass an object that contains an array of links as the third parameter:

imports: [
  IonicModule.forRoot(MyApp, {}, {
    links: [
      { component: HomePage, name: 'Home', segment: 'home' },
      { component: DetailPage, name: 'Detail', segment: 'detail/:userId' }
    ]
  })
]

If we need to pass some data to the page we are navigating to, we can use the:paramsyntax to do so.

This feature will allow us to launch our app on a specific screen, or if we have deployed our app as a progressive web app, to bookmark it.

Storage

The last feature we want to touch on is Ionic’s built-in storage system. We spent some time exploring Firebase as a cloud storage system, but that might be overkill when you need to save some simple data (like a user’s list of cities they wanted weather for).

Ionic Storage allows you to save key/value pairs and JSON data with little effort. One of the challenges in working with local data storage is the wide range of solutions and their respective shortcomings. Ionic Storage uses a variety of different storage solutions, automatically selecting the proper one for the platform the app is running on.

For example, if you are running on the web, Ionic Storage will first attempt to use IndexedDB to save your data. If that browser does not support IndexedDB, it will try WebSQL to save your data. If that fails, it will use localstorage as its solution. If you deploy your app as a native application, you can install the SQLite plug-in and leverage it.

Using Ionic Storage is fairly straightforward. First, if you plan to use SQLite for your native app, you will need to install the Cordova plug-in:

ionic plugin add cordova-sqlite-storage --save

The package is already included in our node modules, so we only need to declare it in our providers array in our_app.module.ts_file:

import { Storage } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    Storage
  ]
})
export class AppModule {}

Ionic Storage can be used within our application:

import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(storage: Storage) {

     // set a key/value
     storage.set('name', 'Chris');

     // Or to get a key/value pair
     storage.get('name').then((val) =
>
 {
       console.log('Your name is', val);
     })
  }
}

Now that you see how simple using Ionic Storage is, why don’t you upgrade our IonicWeather app to save the cities?

Next Steps

This book has been about providing a good foundation on Ionic, but there might be something that does not make sense to you or perhaps there was an update to the framework or some other part of the toolchain that breaks something. Where should you look for help?

For this, there are several resources you should turn to first. But before you post that question to a forum or Slack channel, take a moment and ask if you have worked through the issue. So often questions like “My screen does not update the data when I pull to refresh!” are posted. But there is so much information not included in the question. What version of Ionic are you using? What environment are you testing on? What have you tried to do to resolve it?

So for that question, we need to see where the issue truly lies. Is the pull to refresh being properly triggered? If it is being called, then was the next function being called? Continue along the code execution chain, checking along the way.

Eventually, this example issue may not have been about the pull to refresh component, but the data provider returning cached data. But you never wound have guessed that from the initial question.

Ionic Forums

One of the first places to look for help is on Ionic’s own forums. This is a great resource to help resolve any issues you might encounter. It is staffed by various Ionic team members and knowledgeable community experts.

Ionic Worldwide Slack Channel

Another great resource for help is theIonic Worldwide Slack channel. It is not as formal as the forums, so it can be useful when you need to ask a question or get an opinion on a solution.

GitHub

The Ionic Framework is open source, so if you do encounter a real issue, you can open an issue on the repo. Or even better, fix the issue and submit a pull request. When you think the issue might be within the framework itself, take the time to look at theGitHub repoto see if it is a known issue, and hopefully a solution—or at least a workaround—will be posted.

Conclusion

This concludes our journey together through this book. We tried to cover many of the various parts of Ionic and its supporting technologies at a reasonable depth in an order that made sense. There is nowhere near enough space or time for this book to cover each and every part of the Ionic Framework, but this should give you a very strong base on which to rapidly build amazing, sleek, and performant hybrid mobile applications. Keep trying new things, and join us in the journey of making Ionic a great framework!

Appendix A.Migrating From Ionic 1

If you have an existing Ionic 1 application, you might be wondering how to migrate your application. Unfortunately, there is no easy solution to do this. So much has evolved in both the Ionic Framework and Angular that it is just not practical. We were faced with the same challenges with several of our applications as well. Here are some guidelines that can help you rebuild your application, based on what we found worked.

Create a New Ionic Application

The cleanest method to migrate your Ionic 1 app is actually to start fresh. With so many improvements and changes, it is just easier to build from scratch. Select the template that best matches your application’s navigation structure and generate a new app using the CLI.

Create Your Page Structure

With your base application in place, the next step we recommend is to lay down the page structure. Think of this step as the framing of the new house, while the previous step was the pouring of the foundation. First, remove any pages that might have been generated by the CLI, then create stub pages for your application. The Ionic CLI makes this very easy with the$ ionic g pagecommand. If you are building a tab-based application, remember the generate command can also assist with that.

Update the Theming

Ionic 1 could use SCSS, if you enabled it. Now this is how your CSS is generated in Ionic 2. The main.scss_file in located in_src/theme/variables.scss, and this is where any global changes to the styling should be applied. One of the other changes in Ionic 2 was each page now has its own_.scss_file that your can use to target specific styling changes you might need to make. Ionic 2 has exposed a lot more variables within the theming framework, so you might find the workaround that you had to do in Ionic 1 may no longer be needed.

Replacing Your Controllers and Views

One of the biggest challenges you might have is rewriting all your controllers and views. The Angular 1$scopeconcept has been replaced with a modern class and component design. You will want to take some time to understand this new architecture before diving into converting your application. Once you have an understanding of it, most everyone agrees it is a cleaner and more intelligent approach. If you have a more traditional class-based programming background, you will find this refreshing. The additional use of TypeScript will also improve your code quality.

Our views—those HTML templates—will need some minor updating as well. Some components are the same as in Ionic 1, while others like cards and buttons have had a few modifications to them. One change to note is the inclusion of the<ion-header>and<ion-navbar>on every page. In Ionic 1, this was globally set and proved difficult to adapt to various designs.

Replace Your Factories/Services

In Ionic 1, shared data and functions were handled through the use of either factories or services. Now, this is handled as a standard ES6/TypeScript class that has the@Injectabledecorator applied to it. With that decorator, Angular will allow this class to be used through dependency injection.

Convert the Application Initialization

The method of initializing our application has also changed in Ionic 2. No longer is there a concept of root run code; rather, this is replaced by a master component. In fact, in Ionic 2 our entire app is made of components. Now we just handle any initialization with our entry component.

Update the Routing

The page routing system in Ionic 1 was based on the UI-router module. While it was an improvement over the default router, it had difficulty with the navigation often found in mobile applications. In Ionic 2, the navigation system follows a more native push/pop style. That long code block that existed in your Ionic 1 app can be ignored. Your navigation system will now be handled screen by screen, instead of globally.

If you still need addressable URLs for your application, look at using the DeepLinking system to assist you. This can be easily defined in the_app.module.ts_file.

Switching to Ionic Native

If you used any Cordova plug-ins in your application, you probably used thengCordovamodule to provide your code with an Angular style method of using them. The Ionic team has replaced this module with Ionic Native. This new library is now based on TypeScript and has support for Promises and Observables as well. The documentation will guide you through the conversion.

Conclusion

This is just the briefest of overviews on the key steps you will need to address when migrating an Ionic 1 application. It is a challenge, but hopefully the benefits will outweigh the costs of doing so. We would recommend finishing this book and becoming comfortable with how Ionic works before migrating your app.

Appendix B.Understanding the Config.xml File

Cordova uses a_config.xml_to control many of its build settings. When you scaffold your Ionic application, a basic_config.xml_file is generated for you. The_config.xml_file follows theW3C widget specification. It allows developers to easily specify metadata about their applications. This appendix will explain the various elements in this file and how you can customize them for your application.

Essential Properties

The widget element is the root element of our_config.xml_file. It supports the following attributes:

ID

The unique identifier for your application. To ensure your ID conforms to all supported platforms, thismust_be reverse-domain name style (e.g.,com.yourcompany.yourapp). Unless you supply an app ID during the use of the Ionic CLI command, it will becom.ionicframework.[app name]+random number_.

version

For best results, use a major/minor/patch style version, with three numbers, such as0.0.1.

versionCode

(Optional) when building for Android, you can set the versionCode by specifying it in yourconfig.xml.

CFBundleVersion

(Optional) when building for iOS, you can set the version for iOS.

packageVersion

(Optional) when building for Windows, you can set the version for Windows.

packageName

(Optional) when building for Windows, you can define the package name.

<
widget id="com.ionicframework.ionic2do146695" version="0.0.1"↵
 xmlns="http://www.w3.org/ns/widgets" ↵
 xmlns:cdv="http://cordova.apache.org/ns/1.0"
>

Within the widget node, there are several other nodes that should be defined:

<

name

>

This is the display name of the application:

<
name
>
Ionic2Do
<

ame
>

<

description

>

This is a general description of the application. It is a part of the specification, but it is not referenced in the app store:

<
description
>
Standard To Do app using Ionic 2.
<
/description
>

<

author

>

The author of the application, either a company or individual (this is required for Windows 10 builds). This node has two attributes that can be set:

email

This is the email for the author

href

This is typically either the company home page or the app home page:

<
author email="[email protected]" href="http://ajsoftware.com/"
>
↵
Chris Griffith
<
/author
>

<

content

>

This node defines the initialhtml_page that Cordova should load. It is not recommended that you change thesrcattribute from_index.html:

<
content src="index.html"/
>

<

access

>

,

<

allow-navigation

>

, and

<

allow-intent

>

These nodes are used to define the set of external domains that the app will be allowed to communicate with. It is highly recommended that you read and understand the various settings in theWhitelist Guide.

<
access origin="*"/
>
<
allow-intent href="http://*/*"/
>
<
allow-navigation href="http://example.com/*" /
>
<
allow-intent href="https://*/*"/
>
<
allow-intent href="tel:*"/
>
<
allow-intent href="sms:*"/
>
<
allow-intent href="mailto:*"/
>
<
allow-intent href="geo:*"/
>

<

platform

>

By setting the name attribute to eitherios,android, orwinphone, you can manage platform-specific settings such as permissions, icons, and splash screens:

<
platform name="ios" /
>
<
platform name="android" /
>
<
platform name="winphone" /
>

Preferences

Cordova utilizes the<preference>tag to customize your application configuration. These can be applied globally to all the targeted platforms, or a specific platform. The options are set as pairs of name/value attributes.

Common General Preferences

<
preference name="DisallowOverscroll" value="true"/
>
<
preference name="Fullscreen" value="true" /
>
<
preference name="BackgroundColor" value="0xff0000ff"/
>
<
preference name="Orientation" value="portrait" /
>

DisallowOverscroll

Set totrueif you don’t want the interface to display any feedback when users scroll past the beginning or end of content. On iOS, overscroll gestures cause content to bounce back to its original position. On Android, they produce a more subtle glowing effect along the top or bottom edge of the content.

Fullscreen

Allows you to hide the status bar at the top of the screen.

BackgroundColor

Sets the app’s background color. Supports a four-byte hex value, with the first byte representing the alpha channel, and standard RGB values for the following three bytes. (Android & Windows only)

Orientation

Allowed values: default, landscape, portrait

Allows you to lock orientation and prevent the interface from rotating in response to changes in orientation.

Common iOS Preferences

<
preference name="BackupWebStorage" value="none"/
>
<
preference name="target-device" value="universal" /
>
<
preference name="deployment-target" value="7.0" /
>
<
preference name="SuppressesLongPressGesture" value="true" /
>
<
preference name="Suppresses3DTouchGesture" value="true" /
>

BackupWebStorage

Allowed values: none, local, cloud.

Set to cloud to allow web storage data to backup via iCloud. Set to local to allow only local backups via iTunes sync. Set to none to prevent web storage backups.

target-device

Allowed values: handset, tablet, universal

This property maps directly to TARGETED_DEVICE_FAMILY in the Xcode project. Note that if you target universal (which is the default), you will need to supply screen shots for both iPhone and iPad or your app may be rejected.

deployment-target

This sets the IPHONEOSDEPLOYMENT_TARGET in the build, which ultimately tranlsates to the MinimumOSVersion in the_ipa.

SuppressesLongPressGesture

Set totrueto avoid iOS9+ rendering a magnifying glass widget when the user longpresses the WebView.

Suppresses3DTouchGesture

Set totrueto avoid 3D Touch–capable iOS devices rendering a magnifying glass widget when the user applies force while longpressing the WebView.

Common Android Preferences

<
preference name="android-minSdkVersion" value="16"/
>
<
preference name="android-maxSdkVersion" value="22"/
>
<
preference name="android-targetSdkVersion" value="20"/
>

android-minSdkVersion

Sets theminSdkVersionattribute of the<uses-sdk>tag in the project’sAndroidManifest.xml.

android-maxSdkVersion

Sets themaxSdkVersionattribute of the<uses-sdk>tag in the project’sAndroidManifest.xml. It is not recommended to set this unless you know of an issue with a specific version of Android.

android-targetSdkVersion

Sets thetargetSdkVersionattribute of the<uses-sdk>tag in the project’sAndroidManifest.xml.

Common Windows Preferences

<
preference name="windows-phone-target-version" value="8.1" /
>
<
preference name="windows-target-version" value="8.1" /
>
<
preference name="WindowsStoreIdentityName" 
value="Cordova.Example.ApplicationDataSample" /
>
<
preference name="WindowsStorePublisherName" value="AJ Software" /
>

windows-phone-target-version

Sets the version of Windows Phone for which the app will target. If none is specified, it will be set to the same version as windows-target-version (if found).

windows-target-version

Sets the version of Windows for which the app will target. If none is specified, it will be set to"8.1".

WindowsStoreIdentityName

Identity name used for Windows store.

WindowsStorePublisherName

The publisher display name is the name under which your app will be listed in the Windows Store.

These are just some of the various preferences that you can control. For a complete list, see theCordova website.

Icons

The<icon>element is used to define the app icon. Each platform requires several icons at specific sizes. Often each collection of platform-specific icons is wrapped within a<platform>tag. Please notice that the value of the"src"attribute is relative to the project root directory and not to the_www_directory.

Android

<
platform name="android"
>
<
!--
      ldpi    : 36x36 px
      mdpi    : 48x48 px
      hdpi    : 72x72 px
      xhdpi   : 96x96 px
      xxhdpi  : 144x144 px
      xxxhdpi : 192x192 px
  --
>
<
icon src="res/android/ldpi.png" qualifier="ldpi" /
>
<
icon src="res/android/mdpi.png" qualifier="mdpi" /
>
<
icon src="res/android/hdpi.png" qualifier="hdpi" /
>
<
icon src="res/android/xhdpi.png" qualifier="xhdpi" /
>
<
icon src="res/android/xxhdpi.png" qualifier="xxhdpi" /
>
<
icon src="res/android/xxxhdpi.png" qualifier="xxxhdpi" /
>
<
/platform
>

iOS

<
platform name="ios"
>
<
!-- iOS 8.0+ --
>
<
!-- iPhone 6 Plus  --
>
<
icon src="res/ios/[email protected]" width="180" height="180" /
>
<
!-- iOS 7.0+ --
>
<
!-- iPhone / iPod Touch  --
>
<
icon src="res/ios/icon-60.png" width="60" height="60" /
>
<
icon src="res/ios/[email protected]" width="120" height="120" /
>
<
!-- iPad --
>
<
icon src="res/ios/icon-76.png" width="76" height="76" /
>
<
icon src="res/ios/[email protected]" width="152" height="152" /
>
<
!-- iOS 6.1 --
>
<
!-- Spotlight Icon --
>
<
icon src="res/ios/icon-40.png" width="40" height="40" /
>
<
icon src="res/ios/[email protected]" width="80" height="80" /
>
<
!-- iPhone / iPod Touch --
>
<
icon src="res/ios/icon.png" width="57" height="57" /
>
<
icon src="res/ios/[email protected]" width="114" height="114" /
>
<
!-- iPad --
>
<
icon src="res/ios/icon-72.png" width="72" height="72" /
>
<
icon src="res/ios/[email protected]" width="144" height="144" /
>
<
!-- iPhone Spotlight and Settings Icon --
>
<
icon src="res/ios/icon-small.png" width="29" height="29" /
>
<
icon src="res/ios/[email protected]" width="58" height="58" /
>
<
!-- iPad Spotlight and Settings Icon --
>
<
icon src="res/ios/icon-50.png" width="50" height="50" /
>
<
icon src="res/ios/[email protected]" width="100" height="100" /
>
<
/platform
>

Windows

<
platform name="windows"
>
<
icon src="res/windows/storelogo.png" target="StoreLogo" /
>
<
icon src="res/windows/smalllogo.png" target="Square30x30Logo" /
>
<
icon src="res/Windows/Square44x44Logo.png" target="Square44x44Logo" /
>
<
icon src="res/Windows/Square70x70Logo.png" target="Square70x70Logo" /
>
<
icon src="res/Windows/Square71x71Logo.png" target="Square71x71Logo" /
>
<
icon src="res/Windows/Square150x150Logo.png" target="Square150x150Logo" /
>
<
icon src="res/Windows/Square310x310Logo.png" target="Square310x310Logo" /
>
<
icon src="res/Windows/Wide310x150Logo.png" target="Wide310x150Logo" /
>
<
/platform
>

Splashscreens

When your application launches, it can display an initial splashscreen to provide more instant feedback to the user while your application continues its start-up procedure. Like the<icon>elements, these are also usually wrapped with a<platform>tag. Please notice that the value of the"src"attribute is relative to the project root directory, not the_www_directory.

Android

<
platform name="android"
>
<
splash src="res/screen/android/splash-land-hdpi.png" qualifier="land-hdpi"/
>
<
splash src="res/screen/android/splash-land-ldpi.png" qualifier="land-ldpi"/
>
<
splash src="res/screen/android/splash-land-mdpi.png" qualifier="land-mdpi"/
>
<
splash src="res/screen/android/splash-land-xhdpi.png" 
  qualifier="land-xhdpi"/
>
<
splash src="res/screen/android/splash-land-xxhdpi.png" 
  qualifier="land-xxhdpi"/
>
<
splash src="res/screen/android/splash-land-xxxhdpi.png" 
  qualifier="land-xxxhdpi"/
>
<
splash src="res/screen/android/splash-port-hdpi.png" qualifier="port-hdpi"/
>
<
splash src="res/screen/android/splash-port-ldpi.png" qualifier="port-ldpi"/
>
<
splash src="res/screen/android/splash-port-mdpi.png" qualifier="port-mdpi"/
>
<
splash src="res/screen/android/splash-port-xhdpi.png" qualifier="port-xhdpi"/
>
<
splash src="res/screen/android/splash-port-xxhdpi.png" 
  qualifier="port-xxhdpi"/
>
<
splash src="res/screen/android/splash-port-xxxhdpi.png" 
  qualifier="port-xxxhdpi"/
>
<
/platform
>

NOTE

You do not need to supply splashscreens for orientations your application will not support.

iOS

<
platform name="ios"
>
<
splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/
>
<
splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/
>
<
splash src="res/screen/ios/Default-Portrait~ipad.png" 
  width="768" height="1024"/
>
<
splash src="res/screen/ios/Default-Portrait@2x~ipad.png" 
  width="1536" height="2048"/
>
<
splash src="res/screen/ios/Default-Landscape~ipad.png" 
  width="1024" height="768"/
>
<
splash src="res/screen/ios/Default-Landscape@2x~ipad.png" 
  width="2048" height="1536"/
>
<
splash src="res/screen/ios/Default-568h@2x~iphone.png" 
  width="640" height="1136"/
>
<
splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/
>
<
splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/
>
<
splash src="res/screen/ios/Default-Landscape-736h.png" 
  width="2208" height="1242"/
>
<
/platform
>

Windows

<
platform name="windows"
>
<
splash src="res/screen/windows/splashscreen.png" width="620" height="300"/
>
<
splash src="res/screen/windows/splashscreenphone.png" 
  width="1152" height="1920"/
>
<
/platform
>

Plug-ins

Cordova’s capabilities are extended through the use of plug-ins. By using the Ionic CLI to manage the installation of the Cordova plug-ins, it will update the_config.xml_file automatically for you. By default, the following plug-ins are automatically added to your project:

<
plugin name="cordova-plugin-device" spec="~1.1.2"/
>
<
plugin name="cordova-plugin-console" spec="~1.0.3"/
>
<
plugin name="cordova-plugin-whitelist" spec="~1.2.2"/
>
<
plugin name="cordova-plugin-splashscreen" spec="~3.2.2"/
>
<
plugin name="cordova-plugin-statusbar" spec="~2.1.3"/
>
<
plugin name="ionic-plugin-keyboard" spec="~2.2.1"/
>

name

Plug-ins should be referenced by the plug-in ID which is normally in a reverse domain format (e.g.,com.phonegap.plugins.barcodescanner).

spec

Optional, but we highly recommend locking your plug-in version.

Some plug-ins may require additional parameters. See the specific documentation for each plug-in for additional information.

Features

Used to target platform-specific plug-ins that may require initializing during the WebView’s initialization:

<
feature name="StatusBar"
>
<
param name="ios-package" onload="true" value="CDVStatusBar"/
>
<
/feature
>

name

Allowed values: android-package, ios-package, and osx-package.

onload

Used to specify whether the corresponding plug-in (as specified in the “value” attribute) is to be instantiated when the controller is initialized.

value

Specifies the name of the package to be used to initialize the plug-in code.

Reference

The complete documentation on the_config.xml_file can be found on theCordova website.

Appendix C.Ionic Component Library

The Ionic applications are built atop a collection ofcomponents. These building blocks are essentially HTML and CSS, with just enough JavaScript to give them their functionality. This appendix briefly describes each component so you have a base familiarity with them:

Action Sheets

This component displays a set of options that is shown as an overlay from the bottom edge of the screen. This component is created directly via your code, not via any HTML.

Alerts

Although native dialogs are available through the use of the Dialogs plug-in, you may need to display an alert that is either more complex (one that has radio buttons or checkboxes) or works without the need for the plug-in. The component will simulate the native dialog for each platform. This component is created directly via your code and not via any HTML.

Badges

This component allows you annotate the counter of some item (unread notifications, for example). They can be given any color attribute.

Buttons

This will probably one of the most used components in your application. It supports a wide range of styles: Default, Outline, Clear, Round, Block, Full, Icon, and Floating. In addition, their coloring and sizing are easily controlled through the use of standard attributes.

Although they can be used independently, they also can be used within other Ionic components like Toolbars or Cards.

Cards

A popular UI component is the card component; it is a way to contain and organize information. This component is very flexible in it design capabilities, supporting headers, full-width images, button rows, and more.

Checkbox

This standard input type component holds a boolean value. The Ionic version of this HTML component will automatically adapt to the proper style for that platform.

DateTime

This is a new component in the Ionic Framework. It provides an easy method for users to input dates and times. Time and date formatting are customizable.

Gestures

The Ionic Framework has a gesture system built into it. This allows any component to respond to a collection of standard user gestures: tap, press, pan, swipe, rotate, and pinch.

Grid

Built atop the CSS Flexbox module, Ionic’s grid system is comprised of three elements: grid, rows, and columns. Leveraging Flexbox’s alignment system, grid content can be easily aligned vertically.

Icons

The framework ships with 700+ icons (and growing). This component supports both active and inactive states and will automatically adapt to the host platform’s style.

Inputs

The Ionic version of this standard HTML component expands it to properly reflect the style and functionality of each mobile platform. It supports a variety of styles: Fixed Inline Labels, Floating Labels, Inline Labels, Inset Labels, Placeholder Labels, and Stacked Labels.

Lists

Next to the button, the List component is probably the component you will use most often in your application. This component will naturally display a scrolling list of content. Beyond the basic list, there are additional list styles that can be defined: Inset, No Lines, Multi Line, and Sliding.

The list headers and dividers are configurable. Icons and avatars are also easily supported, as are other Ionic controls like the Toggle component.

Loading

This overlay component displays a loading element. This spinner can be changed from a collection of styles. This component is created directly via your code and not via any HTML.

Menus

This is the component used to create the side menu component. The style and display method will adapt to the host platform. This component is complex since it involves navigation and interactions with additional elements within your application. If you are planning to use this in your application, take the time to fully read the API documentation.

Modals

The modal component is an alternate dialog type. It will slide onto the screen and display its content. This component is created directly via your code and not via any HTML.

Navigation

Ionic apps can use the<ion-nav>component to handle the flow of navigation through their application. It uses a standard push/pop model. Back buttons and screen titles will be updated based on the flow of the app.

Popover

The Popover component displays itself over the app’s content. This component is often used to allow a quick change of a setting or filter. This component is created directly via your code and not via any HTML.

Radio

Just like the checkbox, a radio is an input component that holds a boolean value. Ionic radios are no different than HTML radio inputs. However, like other Ionic components, radios are styled differently on each platform.

Range

Also referred to as a Slider component, this Ionic component allows a user to select from a fixed range of values.

Searchbar

This component creates a platform-specific element that gives the user an input method to search. Typically, this component is paired with a list component.

Segment

This component, also referred to as a button-bar, displays a set of buttons inline.

Select

The<ion-select>component is similar to the standard HTML<select>element. Like the other enhanced controls, it will adapt to the platform it is running on.

Slides

The Slides component is designed as a mobile-friendly image carousel. Each slide is defined within a parent<ion-slides>element. It offers a variety of built-in functions such as autoplay, direction, looping, and paging.

Split Pane

This layout-level component allows you to define a two-column interface, with the menu-like pane and a main content pane. As the viewport’s width reduces, the menu pane will collapse and act like a side menu. This component is useful for tablet or desktop application–sized interfaces.

Tabs

This layout-level component allows you to define a series of tabs, each with its own navigation stack. Tabs can be shown as text-only, icon-only, or both. They will adapt to the look and behavior of the mobile platform they are displayed on. This component is a mixture of HTML and TypeScript.

Toast

This component is used to display a brief message on top of the app’s content. This component is created directly via your code and not via any HTML.

Toggle

The toggle is a simple two-state switch. It is the preferred user interface element for enabling and disabling a feature.

Toolbar

This component is a generic bar that can be used in several methods: header, sub-headers, or as a footer. It comes in three versions<ion-header>,<ion-footer>, and<ion-toolbar>. When wanting either a header or footer, it is recommended that you use<ion-header>or<ion-footer>, respectively. The component supports icons, buttons, segments, and searchbars as elements within it.