Book Image

PhoneGap 4 Mobile Application Development Cookbook

Book Image

PhoneGap 4 Mobile Application Development Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
PhoneGap 4 Mobile Application Development Cookbook
Oct, 2015 | 356 pages
No titles found
Table of Contents (19 chapters)
PhoneGap 4 Mobile Application Development Cookbook
PhoneGap 4 Mobile Application Development Cookbook
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Welcome to PhoneGap 3
Welcome to PhoneGap 3
Introduction
Installing PhoneGap 3
Creating a new project
Using the command line
Installing API plugins
2
Movement and Location – Using the Accelerometer and Geolocation Sensors
Movement and Location – Using the Accelerometer and Geolocation Sensors
Introduction
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
3
Filesystems, Storage, and Local Databases
Filesystems, Storage, and Local Databases
Introduction
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
4
Working with Audio, Images, and Video
Working with Audio, Images, and Video
Introduction
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
5
Working with Your Contacts List
Working with Your Contacts List
Introduction
Listing all available contacts
Displaying the contact information for a specific individual
Creating and saving a new contact
6
Hooking into Native Events
Hooking into Native Events
Introduction
Pausing your application
Resuming your application
Displaying the status of the device battery levels
Displaying network connection status
Creating a custom submenu
7
Working with XUI
Working with XUI
Introduction
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
8
Working with the Ionic Framework
Working with the Ionic Framework
Introduction
Getting familiar with basics of the library
Exploring Ionic commands
Exploring the Ionic framework structure
Using ngCordova
9
Ionic Framework Development
Ionic Framework Development
Introduction
Exploring the UI components
Creating a layout
Using Ionic and Angular
Putting it all together
10
User Interface Development
User Interface Development
Introduction
Creating a jQuery Mobile layout
Persisting data between jQuery Mobile pages
Using jQuery Mobile ThemeRoller
11
Extending PhoneGap with Plugins
Extending PhoneGap with Plugins
Introduction
Extending your Cordova Android application with a native plugin
Extending your Cordova iOS application with a native plugin
The plugin repository
12
Development Tools and Testing
Development Tools and Testing
Introduction
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
Index

Exploring the UI components

In this recipe, we will explore the UI components of the Ionic framework by building a sample UI of settings.

How to do it…

To get started, follow these steps:

  1. Create a new blank Ionic application project with the name as uiComponent:

    ionic start uiComponent blank

  2. Change the directory to uiComponent:

    cd uiComponent

  3. Then add the device platforms to the project:

    ionic platform add ios
ionic platform add android

  4. We open www/index.html and clean <body> so that we have the following code:

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app...
Previous Section
End of Section 3
Next Section