PhoneGap 4 Mobile Application Development Cookbook

Book Image

PhoneGap 4 Mobile Application Development Cookbook

Book Image

PhoneGap 4 Mobile Application Development Cookbook

Overview of this book

PhoneGap 4 Mobile Application Development Cookbook

PhoneGap 4 Mobile Application Development Cookbook

Credits

About the Authors

About the Authors

About the Reviewer

About the Reviewer

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Welcome to PhoneGap 3

Welcome to PhoneGap 3

Installing PhoneGap 3

Creating a new project

Using the command line

Installing API plugins

Movement and Location – Using the Accelerometer and Geolocation Sensors

Movement and Location – Using the Accelerometer and Geolocation Sensors

Detecting device movement using the accelerometer

Adjusting the accelerometer sensor update interval

Updating a display object position through accelerometer events

Obtaining device geolocation sensor information

Adjusting the geolocation sensor update interval

Retrieving map data through geolocation coordinates

Creating a visual compass to show the device direction

Filesystems, Storage, and Local Databases

Filesystems, Storage, and Local Databases

Saving a file in the device storage

Opening a local file from the device storage

Displaying the contents of a directory

Creating a local SQLite database

Uploading a file on a remote server

Caching content using the local storage API

Working with Audio, Images, and Video

Working with Audio, Images, and Video

Capturing audio using the device audio recording application

Recording audio within your application

Playing audio files from the local filesystem or over HTTP

Capturing a video using the device video recording application

Loading a photograph from the device camera roll/library

Applying an effect to an image using canvas

Playing a remote video

Working with Your Contacts List

Working with Your Contacts List

Listing all available contacts

Displaying the contact information for a specific individual

Creating and saving a new contact

Hooking into Native Events

Hooking into Native Events

Pausing your application

Resuming your application

Displaying the status of the device battery levels

Displaying network connection status

Creating a custom submenu

Working with XUI

Working with XUI

Getting started with XUI

Learning the basics of the library

DOM manipulation

Working with touch and gesture events

Updating element styles

Working with remote data and AJAX requests

Creating simple tweens and animations

Working with the Ionic Framework

Working with the Ionic Framework

Getting familiar with basics of the library

Exploring Ionic commands

Exploring the Ionic framework structure

Using ngCordova

Ionic Framework Development

Ionic Framework Development

Exploring the UI components

Creating a layout

Using Ionic and Angular

Putting it all together

User Interface Development

User Interface Development

Creating a jQuery Mobile layout

Persisting data between jQuery Mobile pages

Using jQuery Mobile ThemeRoller

Extending PhoneGap with Plugins

Extending PhoneGap with Plugins

Extending your Cordova Android application with a native plugin

Extending your Cordova iOS application with a native plugin

The plugin repository

Development Tools and Testing

Development Tools and Testing

Downloading Cordova

Using the command line to create a new iOS Cordova project

Debugging the iOS Cordova application using Safari Web Inspector

Using Android Studio to develop Android Cordova applications

Using Adobe Dreamweaver to develop Cordova applications

Using the PhoneGap Build service

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Creating a layout

In the last recipe, we explored the Ionic UI components by creating a single-page application using a blank starter template. In this recipe, we will create a clone of the Instagram mobile app's layout.

How to do it…

To start creating our own version of the Instagram UI, we follow these steps:

Create a new tab Ionic application project with the name as ionSnap:
```
ionic start ionSnap tabs
```
Change the directory to ionSnap:
```
cd ionSnap
```

Then add the device platforms to the project:

ionic platform add ios
ionic platform add android

Let's change the tab name. Open www/templates/tabs.html and edit each title attribute of ion-tab:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
    <ion-tab title="Timeline" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
        <ion-nav-view name="tab-dash"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Explore" icon-off="ion-ios-search" icon-on="ion-ios-search" href="#/tab/chats...