jQuery Mobile and Apache Cordova (PhoneGap)

Have Queries? Ask us +91 72592 22234

Course Overview


In jQuery Mobile and Apache Cordova (PhoneGap) training course, participants will learn on 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.

Course Content


The Mobile Landscape

  • Devices Types
  • Smartphones
  • Tablets
  • Device Convergence
  • Platforms
  • Platform Comparison
  • In a perfect world …
  • The Reality
  • Platform Independent Solutions
  • The Future
  • HTML5 — 10 New Features
  • Cascading Style Sheets — CSS
  • JavaScript
  • Libraries
  • Common Features
  • Differences
  • Mobile Web Development
  • Apache Cordova (PhoneGap)
  • Building with Cordova

Technology Stack

  • HTML5
  • Which Features of HTML 4 Changed
  • 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
  • What the DOM is not
  • Cascading Style Sheets
  • CSS Levels
  • How CSS Work
  • Class and ID Attribute Selectors
  • What is JavaScript?
  • Working with JavaScript
  • Detecting a feature with JavaScript
  • Using JavaScript libraries
  • jQuery Mobile
  • Apache Cordova (Adobe PhoneGap)

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

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

Selectors

  • Topics
  • Background: The Sizzle Selector Engine
  • Selecting Elements by Attribute
  • Pseudo-Selectors
  • Form Pseudo-Selectors 1 of 2
  • Form Pseudo-Selectors 2 of 2
  • 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 1 of 2
  • Function Context 2 of 2
  • The Function call() Method
  • each() Revisited
  • Conclusion

Style Class Manipulation

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

DOM Manipulation

  • Topics
  • The $ Function Revisited - 1 of 2
  • The $ Function Revisited - 2 of 2
  • Getters and Setters
  • The text() Element Method
  • Appending DOM Elements
  • Removing DOM Elements
  • Performance – 1 of 2
  • Performance – 2 of 2
  • Conclusion

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

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
  • 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

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

jQuery Mobile Themes

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

Plugins

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

Geolocation

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

Apache Cordova (PhoneGap)

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

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 API Permissions
  • Contact properties
  • Creating a New Contact
  • Saving a Contact
  • Deleting (Removing) a Contact
  • Finding Contact(s)
  • Find Contacts Example

The Cordova File API

  • Accessing the Mobile File System with Cordova
  • File API Permissions
  • The Cordova File API
  • Accessing the Device File System
  • 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

  • What is the Accelerometer?
  • Supported Platforms
  • Accelerometer Permissions
  • The Accelerometer API
  • The getCurrentAcceleration Method
  • The watchAcceleration Method
  • The clearWatch Method
  • Accelerometer API in Action: Device Shake Tracking
  • Device Shake Tracking Application Code

The Camera

  • Accessing the Camera with Cordova
  • Camera Permissions
  • The Cordova Camera API
  • The getPicture Method
  • The cameraSuccess Function
  • The cameraError Function
  • Cordova Camera API Example: Displaying an Image
  • The cleanup Method

Best Practices

  • jQuery Mobile Benefits
  • Progressive Enhancement
  • Common UI Guidelines
  • Cordova Business Layer Initialization
  • Business Layer Best Practices
  • Cordova Domain Whitelist Guide
  • Background Tasks
  • Cordova Background Task API

Customer Reviews


Thanks to Xpertised and the tutor who walked me through all the topics with Practical exposure which is helping me in my current project.
-Waseem

Course was quite helpful in terms of understanding of concepts and practicality. Its really a very friendly environment to learn. The timing were mutually chosen, as we both are working professional. I am quite satisfied with the course.
-Tanmoy

...more
Share:

For Batch Details
Call us at: +91 7259222234

Not sure? Consult Our Experts

Looking for a Training for

Myself

My Team/Organization

I agree to be contacted over mail or phone

or
Call us at: +91 7259222234