Beginning PhoneGap. Mobile Web Framework for JavaScript and HTML5. Rohit Ghatol Yogesh Patel

Transcription

1 Beginning PhoneGap Mobile Web Framework for JavaScript and HTML5 Rohit Ghatol Yogesh Patel

2 Contents at a Glance Contents About the Authors About the Technical Reviewers Acknowledgments Introduction Chapter 1: Understanding Cross-Platform Mobile Application Development 1 Chapter 2: Getting Started with PhoneGap 17 Chapter 3: Setting the Environment 97 Chapter 4: Using PhoneGap with jquery Mobile 127 Chapter 5: Using PhoneGap with Sencha Touch 193 Chapter 6: Using PhoneGap with GWT 231 Chapter 7: PhoneGap Emulator and Remote Debugging 249 Chapter 8: Using PhoneGap Plug-Ins 271 Chapter 9: Extending PhoneGap 293 Index 325 v ix x xi xii iv

3 Contents Contents at a Glance About the Author s About the Technical Reviewers Acknowledgments Introduction iv ix 11 X 11 xi xii Chapter 1: 'Understanding Cross-Platform Mobile App1lication Development 1 Types ot Mobile Applications 2 Understanding Web Services 3 Overview ot Mobile Applications.4 Mobile Application Features 4 User Interaction 5 Location Awareness 6 Push Notitication 7 Challenges in Cross-Platform Mobile Application Development.. 7 OS Fragmentation 8 Multiple TeamsiProducts 9 Consistent User Experience 9 Feature Fragmentation 10 Development Environment Fragmentation 11 PhoneGap's Strategy tor Cross-Platform Mobile Application 12 Browser Component As the Common Platform 12 Mobile Application Webviews 13 Native Hooks to Expose Device Capabililies 14 HTML5 and CSS3: The Standards tor Writing Applications 15 Single Origin Policy Not Applicable 15 Conclusion 16 Chapter 2: Getting Started with PhoneGap 17 PhoneGap Architecture 18 Setting up an Environment on the Android 19 Required Installations tor PhoneGap Android Project 20 Create a New Project 28 v

4 acontents Write the HelloWorld Applieation 35 Deploy to Simulator 37 Deploy to the Deviee 38 Exploring PhoneGap Features 45 PhoneGap Tutorials 47 Emulator Examples 47 Deviee Examples 83 Chapter 3: Setting the Environment 97 Loeal Development Environment 97 Prerequisite Steps 98 Download PhoneGap 98 Setting Environment tor ios Using Xeode 4 98 Setting Environment tor BlaekBerry 104 Setting Environment tor Symbian 109 Setting Environment tor webos 112 Cloud Build Environment Using PhoneGap Build 113 Registering with PhoneGap Build 113 Registering Your Application with PhoneGap Build 114 Setting Up Android Build Environment Setting Up ios Build Environment. 121 Setting Up BlaekBerry Build Environment Launehing PhoneGap Build' 125 Conelusion 125 Chapter 4: Using PhoneGap with jquery Mobile 127 Getting Acquainted with jquery 128 jquery Initialization 128 jquery Seleetors 129 jquery DOM Manipulation 131 jquery Ajax Calls 132 Getting Aequainted with jquerymobile 132 Ineluding jquerymobile in Mobile App 133 jquerymobile Deelarative UI 134 Pages and Dialogs 134 Toolbars and Buttons 140 Form Elements 141 List Views 148 jquerymobile Event Handling 150 Normal Events 150 Touch Events 151 Orientation Change Events 153 Seroll Events 155 Page Events 156 PhoneGap jquerymobile Integration 156 Loeal Seareh Using jquerymobile and PhoneGap 157 Bootstrapping PhoneGap and jquery 163 Installing Neeessary JavaSeript Libraries 163 Layout ot Local Seareh 164 vi

5 .CONTENTS Searching tor a Local Business 165 Overall' Layout in HTML 167 Fetching and Showing the Search Results 171 Showing Details ot a Place/Business 173 Adding and Removing a Place/Business to Favorite 175 Loading Your Favorite Places 178 Showing Search Result on a Map 179 Complete Source Code 180 Pros ot jquerymobile 192 Cons ot jquerymobile 192 Conclusion 192 Chapter 5: Using PhoneGap with Sencha Touch 193 Why Use Sencha Touch? 193 Pros ot Sencha Touch 194 Cons ot Sencha Touch 194 Downloading Sencha Touch 194 Integrating Sencha with PhoneGap 195 Building a Local Search Application Using Sencha Touch 196 Initializing Sencha Touch 197 Creating the Layout (Application Skeleton) 198 Switching Between Panels 211 Fetching the Places Listing 211 Fetching Places Details 213 Storing and Retrieving Favorites trom Database 216 Conclusion 230 Chapter 6: Using PhoneGap with GWT 231 Why Use GWT tor User Interface Development? 231 Getting Acquainted with the GWT PhoneGap 232 Building a PhoneGap GWT Application 232 Build the GWT Application 232 Build a PhoneGap Android Application 241 GWT PhoneGap Reterence 247 Chapter 7: PhoneGap Emulator and Remote Debugging 249 Introduction 249 PhoneGap Emulator tor Chrome - Using Ripple 250 Installing Ripple 250 Using Chrome Effectively tor PhoneGap : 254 Using Ripple 255 Tune Your App tor Ripple 255 Start Chrome with Special Flags 257 Load App in Chrome 257 Enable Ripple 258 Play with Ripple Settings 258 Test Application with Ripple 259 Remote Debugging Setting up Remote Debugging 262 Injecting Remote Debugging in the PhoneGap App 263 vii

6 .CONTENTS Debugging and Modifying the DOM Element 264 Issues with debug.phonegap.com,.,."".",,,..", 268 Installing local debug.phonegap.com,,.,,268 Conclusion,,.'", ",., 270 Chapter 8: Using PhoneGap Plug-Ins 271 What Is PhoneGap Plug-In? ",,,.. ", 271 Facebook Authentication and Fetching Friends.,,,.,, 272 Setting Environment for Android ",,,,,..,.272 Initializing Facebook-Connect P,lug-ln.,.,,., ".", 275 C2DM Plug-In for Mobile Push Notification to PhoneGap 279 Setting Environment for Android "".,.,.",,.,, 280 Modifying Plug-In for PhoneGap Signup for C2DM Service,..,,.., 287 Using C2DM Sender Account in PhoneGap 287 Android Simulator for C2DM-Enabled Service, ", 288 Conclusion." ", ",,..,,." 291 Chapter 9: Extending PhoneGap 293 JavaScript limitations,.,..,,., ' 293 Solution,,.",,,,,,,..,, ', 294 Architecture,, 294 Scope,,, ",, 294 Extending PhoneGap.for Android "..,,295 Declaring the Native Part of the Plug-In 297 Declaring the JavaScript Part of the Plug-In 301 Calling the Plug-In,,,,,.",.'",., ",..,,.,.,., 303 Sharing the Android PhoneGap Plug-In,.,.,, 305 Extending PhoneGap for iphone,.., "",, 306 Declaring the Native Part of the Plug-In 307 Declaring the JavaScript Part of the Plug-In 311 Calling the Plug-In, ", " 312 Sharing the iphone PhoneGap Plug-In ".. " 315 Extending PhoneGap for BlackBerry,.. '.." 316 Declaring the Native Part of the Plug-In 316 Declaring the JavaScript Part of the Plug-In 320 Calling the Plug-In "..",, 321 Sharing the BlackBerry PhoneGap Plug-In,, 324 Conclusion,,,.",.,..,, 324 Index 325 viii