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
