Phonegap-Beginners-Guide.Pdf
Total Page:16
File Type:pdf, Size:1020Kb
PhoneGap Beginner's Guide Build cross-platform mobile applications with the PhoneGap open source development framework Andrew Lunny BIRMINGHAM - MUMBAI PhoneGap Beginner's Guide Copyright © 2011 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: September 2011 Production Reference: 1160911 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-849515-36-8 www.packtpub.com Cover Image by Asher Wishkerman ([email protected]) Credits Author Project Coordinator Andrew Lunny Joel Goveya Reviewers Proofreader Paul McCrodden Aaron Nash Andrey Rebrov Indexer Acquisition Editor Hemangini Bari Usha Iyer Production Coordinator Development Editor Aparna Bhagat Meeta Rajani Cover Work Technical Editors Aparna Bhagat Pallavi Kachare Priyanka Shah About the Author Andrew Lunny is a software developer based in Vancouver, BC, where he is "Chief N00b" at Nitobi Software. He has worked at Nitobi for four years, since a brutal shark attack cut short his promising career as a surfer. He is the lead developer and all-around fall guy for the PhoneGap Build web service, a member of the PhoneGap team, and has over 10 years' experience with PhoneGap and related technologies. He is fond of Ruby, JavaScript, Unix, Git, and the Internet. Nitobi is a software company run by Andre Charland, Dave Johnson, and Brian Leroux. They specialize in cross-platform mobile development and design, and sponsor the PhoneGap open source project. In his spare time, Andrew enjoys cycling, running, walking, and jumping. He has two unrelated degrees from the University of British Columbia. Thanks to Tammy, to my parents, and to Hugo and Natasha for putting up with me while I procrastinated along. Thanks to Michael Brooks for running a Windows VM so I did not have to, and thanks to all of my other co-workers for working on such a great open source project. Thank you to everyone who follows me on Twitter. Finally, thanks to all my old surfing buddies—Skip, Dingo, even Jelly! I'll get back on the waves with you guys some time, I promise. About the Reviewers Paul McCrodden is a Digital Media Developer from a small country in the west of Europe known for its potatoes and leprechauns. He is a chartered engineer graduating with a Bachelor of Engineering in Digital Media from Dublin City University and a Master of Science in Multimedia Systems from Trinity College Dublin. With this knowledge he aims to merge the technical with the creative when it comes to digital media production. Paul has previously worked for global companies such as Ericsson and Bearingpoint Consulting along with various medium to small businesses on contract. He recently gave up the 9 - 5 to work 9 - 9 for his own company, which provides digital media consulting and a range of services including, web solutions, mobile application development, and other multimedia. For more information go towww.paulmccrodden.com . I would like to thank my family, friends, and last but by no means least, my girlfriend Claire for her support and patience. A huge thanks to the Drupal community for all their hard work and the Wordpress and PhoneGap communities for theirs. Lastly, a thank you to Packt for asking me to review the book; it has been a great all round learning experience. Andrey Rebrov, 23, has big plans for his future. He started as a software developer in Magenta Technology—a big British software company specialized in Enterprise Java Solutions, and worked there for more than three years. Now, he is working on Luxoft as a senior Java web developer. In February 2011 he graduated from the IT Department of Samara State Aerospace University with an honors degree. He is also working with different web technologies—JavaScript (ExtJS, jQuery), HTML/ HTML5, CSS/CSS3, and has some experience in Adobe Flex. He is also interested in mobile platforms, and developing web and native apps. Exploring PhoneGap, jQuery Mobile, and Sencha Touch, he has created some plugins for jQuery Mobile. In his work he uses Agile methodologies such as Scrum and Kanban, and is interested in innovation and Agile games. At the moment he is working on innovation games popularization in Russia and Russian communities. He also uses GTD methodologies, which help him in his work and daily routine. And, of course, it helps him with blogging. In his blog he writes about interesting technologies, shares his developer experience, and translates some articles from English into Russian. I would like to thank Kartikey Pandey who asked me to review this book and Joel Goveya who helped me throughout the review. I would like to thank my parents for providing me with the opportunity to be where I am. Without them, none of this would even be possible. You have always been my biggest support and I appreciate that. And the last thanks go to my girlfriend, Tatyana, who always gives me strength and hope. www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? Fully searchable across every book published by Packt Copy & paste, print and bookmark content On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Chapter 1: Installing PhoneGap 7 Operating systems 7 Dependencies 8 Getting started with iOS 9 Time for action – Getting an app running on the simulator 9 Installing PhoneGap-iPhone 12 Time for action – Hello World with PhoneGap-iPhone 12 Getting started with Android 17 A note on development environments 18 Time for action – Getting the SDK running 18 PhoneGap Android 22 Time for action – Hello World on PhoneGap Android 23 What's in a PhoneGap Android application, anyway? 25 Getting started with BlackBerry web works 26 Time for action – Your first PhoneGap BlackBerry app 27 Code signing for BlackBerry 33 Summary 34 Chapter 2: Building and Debugging on Multiple Platforms 35 Designing with desktop browsers 36 WebKit 36 Developing our first application: You Are The Best 36 Time for action – Initial design and functionality 37 Our workflow 41 Our styles 41 Unobtrusiveness 41 Width and height 42 -webkit-border-radius 42 Table of Contents Our scripts 43 Unobtrusiveness 44 addEventListener 44 DOMContentLoaded 45 Using the web inspector 46 Accessing web inspector 46 Time for action – Simple logging and error checking 47 Moving to native platforms 52 Time for action – You Are The Best for iPhone 52 <meta name="viewport"> 57 phonegap.js 57 deviceready 58 Summary 59 Chapter 3: Mobile Web to Mobile Applications 61 Implementing web server roles 61 Time for action – Implementing LocalStorage 62 Other storage options 68 Web SQL 68 Indexed DB 68 View templating 69 Time for action – Food detail view 70 Accessing remote resources 76 Cross-origin policy 76 Time for action – Talking about food 77 Accessing remote resources 84 Parsing remote data 85 Event delegation 86 Sleight: The PhoneGap development server 88 Summary 89 Chapter 4: Managing a Cross-Platform Codebase 91 Inherent differences between platforms 91 Using a single codebase 92 Time for action - Detection and fallbacks 93 User agent sniffing 102 Feature detection 104 Media queries 106 Preprocessing code 109 Summary 110 Chapter 5: HTML5 APIs and Mobile JavaScript 111 Mobile JavaScript 111 XUI 112 [ ii ] Table of Contents Time for action – Downloading, building, and using XUI 112 Why not jQuery? 121 HTML5 123 Media elements 123 Time for action – My dinner with PhoneGap 124 Media events and attributes 128 The audio element 129 The canvas element 130 Time for action: Dinner dashboard 131 The canvas API 136 A note on performance 137 What else is in HTML5? 138 Summary 139 Chapter 6: CSS3: Transitions, Transforms, and Animation 141 Translate with transitions 141 Time for