Platform Independent Mobile Development with jQuery Mobile and Apache Cordova (PhoneGap) Training

Chapter 1. The Mobile Landscape

• Devices Types
• Smartphones
• Tablets
• Device Convergence
• Platforms
• Platform Comparison
• In a perfect world …
• The Reality
• Three Types of Mobile Applications
• Native Mobile Applications
• Mobile Web Applications
• Hybrid Mobile Applications
• The Future?
• HTML5 — 9 New Features
• Cascading Style Sheets — CSS
• JavaScript
• Libraries
• Common Features
• Differences
• Mobile Web Development
• Apache Cordova (PhoneGap)
• Building with Cordova
• Summary

Chapter 2. Technology Stack

• HTML5
• HTML5 Main Objectives
• Which Features of HTML 4 Changed
• New Features of HTML 5
• New Features of HTML 5
• Browser-side Data Storage
• Declaring HTML5
• Detecting Support for HTML5
• HTML5 Input Validation Example
• HTML5 Date Form Widget
• The Document Object Model
• The Document Object Model
• What the DOM is Not
• Cascading Style Sheets
• CSS Levels
• How CSS Work
• Examples of CSS Styling
• Class and ID Attribute Selectors
• What is JavaScript?
• Working with JavaScript
• Working with JavaScript
• Detecting a feature with JavaScript
• Using JavaScript libraries
• jQuery Mobile
• jQuery Mobile Tooling Support
• Apache Cordova (Adobe PhoneGap)
• Apache Cordova History
• Summary

Chapter 3. The jQuery Mobile Toolkit

• Introduction
• Downloading and Using jQuery Mobile
• The Basics
• Example: A Multi-Page HTML
• The Anatomy of a Page
• Example of Page Segments
• Theming
• Creating a List View
• Decorating List View Rows
• Implement Master Detail Navigation Pattern
• Create a Tabbed View
• Summary

Chapter 4. jQuery Overview

• What Is jQuery?
• Benefits of Using a JavaScript Library
• jQuery Example
• CSS Selectors
• How to Use jQuery
• Practical Usage Notes
• Background – DOM
• Background - DOM Ready Events
• Background - JavaScript Functions
• The jQuery Function Object
• What Does the $() Function Take as Argument?
• The jQuery Function – Case 1
• The jQuery Function - Case 2
• The jQuery Function – Case 3
• The jQuery Function – Case 4
• The jQuery Wrapper
• The jQuery Wrapper as an Array-Like Object
• Note: innerHTML vs. .html()
• jQuery Wrapper Chaining
• API Function Notation
• Handling DOM Ready Event
• Summary

Chapter 5. Selectors

• Background: The Sizzle Selector Engine
• Selecting Elements by Attribute
• Pseudo-Selectors
• Form Pseudo-Selectors
• Faster Selection
• Selecting Elements Using Relationships
• Selecting Elements Using Filters
• More on Chaining: .end()
• Testing Elements
• Is the Selection Empty?
• Saving Selections
• Iterating Through Selected Elements Using .each()
• JavaScript Methods
• JavaScript "this"
• Function Context
• The Function call() Method
• .each() Revisited
• Summary

Chapter 6. Style Class Manipulation

• Two Options
• Specifying Style Properties
• Setting Style Properties
• .addClass() / .removeClass()
• Defining a Stylesheet
• Setting & Getting Dimensions
• Attributes
• Summary

Chapter 7. DOM Manipulation

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

Chapter 8. jQuery Mobile List

• jQuery Mobile Lists
• HTML Lists
• jQuery Mobile Lists
• Inset Lists
• Adding Links
• Numbered Lists
• Count Bubbles
• Formatting List Items
• Formatted List Source
• Formatted List Example
• Filters
• Filtered List Source
• Filtered List Example
• Summary

Chapter 9. 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
• Summary

Chapter 10. jQuery Mobile Forms

• jQuery Mobile Forms
• A Simple Form
• Form Enhancements
• Labels
• Placeholders
• Client-Side Validation
• The required Attribute
• Patterns
• Another Pattern Example
• Widgets
• More Widgets
• Color
• Date
• Range
• Datalist
• Select
• Checkboxes
• Horizontal Checkboxes
• Radio Buttons
• Submitting Forms
• Summary

Chapter 11. Introduction to AJAX

• What is AJAX?
• A Simple Example
• The Old Way
• The AJAX Way
• Two Key Aspects of AJAX
• What are the Advantages of the AJAX Approach?
• AJAX Technologies
• The Basic AJAX API
• Creating the XMLHttpRequest Object
• The XMLHttpRequest Object Basics
• Complete Example
• The Timeline
• Review Questions
• Review Answers

Chapter 12. Ajax

• Ajax Overview
• The Browser & the Server
• The Ajax Request
• The Ajax Response
• Sending an Ajax Request With jQuery - The General Case
• When this code is executed…
• Sending an Ajax Request With jQuery - Simpler, Typical Case
• Data Types
• The .data() method
• Summary

Chapter 13. Advanced Ajax

• A Form Example
• An Ajax Form Example
• Serialize()
• Get vs. Post
• More on Query Strings
• ajaxStart() and ajaxError()
• Summary

Chapter 14. JSONP

• JSONP – JSON with Padding
• Same-Origin Policy
• The <script> Tag
• Example
• The JavaScript
• Warning
• Best Practices
• Summary

Chapter 15. jQuery Mobile Themes

• jQuery Mobile Theming System
• CSS3 Roots
• Working with Themes
• Theme Example
• The jQuery Mobile ThemeRoller
• Global Theme Settings
• Download Your Themes
• Contents of the Theme Zip File
• Theme Images
• Editing Your Themes (if needed)
• CSS3 Transitions
• Example of a CSS3 Transition
• jQuery Transitions
• Custom Transitions in jQuery Mobile
• Custom Transitions using CSS
• Summary

Chapter 16. Plugins

• What is a Plugin?
• Goal
• Self-Executing Anonymous Functions
• Meeting Our Goal
• Prototype Objects
• The jQuery Wrapper Class Revisited
• Example Plugin
• Summary

Chapter 17. Geolocation

• Geolocation Concepts
• How Does it Work?
• Users Need to Agree!
• Geolocation API
• Functions and Options
• Example
• Success Function
• Error Function
• Options
• watchPosition
• Summary

Chapter 18. Apache Cordova (PhoneGap)

• Introduction
• The Cordova Model
• Usage
• API
• Features
• App Stores
• Who uses Cordova?
• Packaging Cordova Apps
• Java Code
• Adobe PhoneGap Build
• Summary

Chapter 19. 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)
• Find Contacts Example
• Summary

Chapter 20. 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 requestFileSystem Method Example
• The File Object
• The FileEntry Object
• The FileEntry Object's Methods
• The DirectoryEntry Object
• The DirectoryEntry Object's Methods
• The DirectoryReader Object
• The DirectoryReader Object Example
• The FileError Object
• Writing Files with the FileWriter Object
• Writing Files with the FileWriter Object (Cont'd)
• Reading Files with the FileReader Object
• Summary

Chapter 21. The Accelerometer

• What is 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
• Accelerometer API in Action: Device Shake Tracking
• Device Shake Tracking Application Code
• Summary

Chapter 22. The Camera

• Accessing the Camera with Cordova
• Camera Permissions
• The Cordova Camera API
• The Camera Object
• The getPicture Method
• The Camera Call-Back Functions
• The cameraSuccess Call-Back Function
• The cameraError Call-Back Function
• Camera Options
• Cordova Camera API Example: Displaying an Image
• The cleanup Method
• Summary

Chapter 23. Best Practices

• jQuery Mobile Benefits
• Progressive Enhancement
• Common UI Guidelines
• Platform-specific UI Guidelines
• Cordova Business Layer Initialization
• Business Layer Best Practices
• The online and offline Events
• Cordova Domain Whitelist Guide
• Background Tasks
• When Applications are in Background ...
• Cordova Background Task API
• Summary

Lab Exercises

Lab 1. Getting Started with jQuery Mobile
Lab 2. Exploring Mobile UI Patterns
Lab 3. More on Selectors
Lab 4. Dynamic Style Class Assignment
Lab 5. DOM Manipulation
Lab 6. Lists
Lab 7. Buttons
Lab 8. Forms
Lab 9. Geolocation
Lab 10. Setting up Cordova Development Environment 
Lab 11. Custom Themes
Lab 12. Device Information
Lab 13. The Cordova File API