Platform Independent Mobile Development with jQuery Mobile and Apache Cordova

Course#: BSMD1149

About this Course

Course Type Course Code Duration
Mobile Development BSMD1149 3 Days

Participants in this three day class 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. Discussion and labs will focus on the jQuery Mobile library and Apache Cordova.

Why Attend this Course?

What Makes this Course Stand Apart?

This is a highly interactive Hands on courses with the options of the Accelerator Plus1 Workshop.

Lot of demos, practical exercises and samples. Very strong presentation skill of the trainer. Good balance between theory and practice application.

What you will Learn?

Upon completion of this course, you will be able to:

Audience

Web Developers, programmers working on developing mobile device applications.

Prerequisites

Some knowledge of HTML and JavaScript.

Course Outline

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

Unit Topics
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
Unit Conclusion

Chapter 5. Selectors

Topics
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
Conclusion

Chapter 6. Style Class Manipulation

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

Chapter 7. DOM Manipulation

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

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

Topics
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
Unit Conclusion

Chapter 13. Advanced Ajax

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

Chapter 14. JSONP

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

Chapter 15. jQuery Mobile
Chapter 16. 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 17. Plugins

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

Chapter 18. 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 19. 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 20. 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 21. 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 22. 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 23. 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 24. 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

0

Start typing and press Enter to search