Apache Cordova Cross-Platform Mobile App Development

All HOTT courses are available face-to-face, remote-live, on-demand or on-site at your facility. 

Apache Cordova (formerly PhoneGap) is an open-source is a mobile application development framework. It utilizes HTML5, CSS3 and JavaScript to create apps for a variety of mobile platforms. Students will learn how to build applications using jQuery Mobile and Apache Cordova that run on a variety of mobile platforms including iOS, Android and Windows Mobile. Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

Prerequisites:

Knowledge of HTML and JavaScript equivalent to attending the Website Development with HTML5, CSS and Bootstrap and JavaScript Programming courses.

Course Syllabus:

The Mobile Landscape

• Devices Types
  - Smartphones
  - Tablets
• Device Convergence
• Platform Comparison
• Three Types of Mobile Applications
  - Native Mobile Applications
  - Mobile Web Applications
  - Hybrid Mobile Applications
• Mobile Web Development
• Apache Cordova (PhoneGap) Overview
• Building with Cordova

Technology Stack

• HTML5 Main Objectives
• Browser-Side Data Storage
• Declaring HTML5
• Detecting Support for HTML5
• The Document Object Model
• CSS Overview
• Class and ID Attribute Selectors
• Working with JavaScript
• Detecting a Feature with JavaScript
• Using JavaScript Libraries
• jQuery Mobile Tooling Support

jQuery Overview

• What Is jQuery?
• Benefits of Using a JavaScript Library
• How to Use jQuery
• DOM Ready Events
• The jQuery Function Object
• The jQuery Wrapper
• The jQuery Wrapper as an Array-Like Object
• innerHTML vs. html()
• jQuery Wrapper Chaining
• API Function Notation
• Handling DOM Ready Events

Selectors

• Background: The Sizzle Selector Engine
• Selecting Elements by Attribute
• Pseudo-Selectors
• Selecting Elements Using Relationships
• Selecting Elements Using Filters
• Chaining Using end()
• Testing Elements
• Iterating Through Selected Elements Using each()
• JavaScript Methods
• JavaScript "this"
• Function Context
• The Function call() Method

Style Class Manipulation

• Specifying Style Properties
• Setting Style Properties
• Using addClass() and removeClass()
• Defining a Stylesheet
• Setting and Getting Dimensions
• Attributes

DOM Manipulation

• The $ Function Revisited
• Getters and Setters
• The text() Element Method
• Appending DOM Elements
• Removing DOM Elements
• DOM Performance

Introduction to Ajax

• What is Ajax?
• Creating the XMLHttpRequest Object
• The XMLHttpRequest Object Basics
• The Browser and the Server
• Ajax Requests and Responses
• Sending an Ajax Request With jQuery
• Data Types
• The data() Method
• Using serialize()
• Get vs. Post
• ajaxStart() and ajaxError()

JSONP

• JSONP - JSON with Padding
• Same-Origin Policy
• The <script> Tag
• Best Practices

The jQuery Mobile Toolkit

• Overview of jQuery Mobile
• Downloading and Using jQuery Mobile
• The Anatomy of a Page
• Page Segments
• Theming
• Creating a List View
• Decorating List View Rows
• Implementing Master Detail Navigation Patterns
• Create a Tabbed View

jQuery Mobile Lists

• Overview of jQuery Mobile Lists
• Inset Lists
• Adding Links
• Numbered Lists
• Count Bubbles
• Formatting List Items
• Formatted List Source
• Filters
• Filtered List Source

jQuery Mobile Buttons

• jQuery Mobile Buttons
• Creating Buttons
• Button Appearance
• Enabling and Disabling
• Button Groups
• Horizontal Button Groups
• Inline Buttons
• Highlighting Preferred Choice
• Icons
• Alternate Icon Display

jQuery Mobile Forms

• jQuery Mobile Forms
• Form Enhancements
  - Labels
  - Placeholders
• Client-Side Validation
• The required Attribute
• Patterns
• Widgets
• Input Types
  - Color
  - Date
  - Range
  - Select
  - Checkboxes
  - Horizontal Checkboxes
  - Radio Buttons
• Datalists
• Submitting Forms

jQuery Mobile Themes

• Overview of the jQuery Mobile Theming System
• Working with Themes
• Theme Examples
  - Using ThemeRoller
  - Global Theme Settings
• Downloading Themes
• Contents of the Theme Zip File
• Theme Images
• Editing Your Themes
• Custom Transitions in jQuery Mobile
• Custom Transitions Using CSS

Geolocation

• Overview of the Geolocation API
• Functions and Options
  - Success Function
  - Error Function
• Using the watchPosition() Method

Apache Cordova (PhoneGap)

• Introduction to Apache Cordova
• The Cordova Model
  - Usage
  - API
  - Features

Device and Contacts Information APIs

• Cordova Device Info Object
• Device Info Permissions
• The cordova and uuid Properties
• The platform and version Properties
• The name Property
• Contacts Database API
• Contacts Database Helper Objects
• Supported Platforms
• Contacts API Permissions
• Contact Properties
• Creating a New Contact
• Saving a Contact
• Deleting (Removing) a Contact
• Finding Contact(s)

The Cordova File API

• Accessing the Mobile File System with Cordova
• File API Permissions
• The Cordova File API
• Accessing the Device File System
• The requestFileSystem() Method
• The File Object
• The FileEntry Object
• The DirectoryEntry Object
• The DirectoryReader Object
• The FileError Object
• Writing Files with the FileWriter Object
• Reading Files with the FileReader Object

The Accelerometer

• Overview of the Accelerometer
• Supported Platforms
• Accelerometer Precision
• Accelerometer Detection
• Accelerometer Permissions
• The Accelerometer API
• The Acceleration Object
• The getCurrentAcceleration() Method
• The watchAcceleration() Method
• The accelerometerSuccess Call-Back Function
• The clearWatch() Method
• Device Shake Tracking Application Code