Building Android Apps with HTML, CSS, and JavaScript Building Android Apps with HTML, CSS, and JavaScript Jonathan Stark Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Building Android Apps with HTML, CSS, and JavaScript by Jonathan Stark Copyright © 2010 Jonathan Stark. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Editor: Brian Jepson Indexer: Lucie Haskins Production Editor: Adam Zaremba Cover Designer: Karen Montgomery Copyeditor: Amy Thomson Interior Designer: David Futato Proofreader: Kiel Van Horn Illustrator: Robert Romano Printing History: September 2010: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Building Android Apps with HTML, CSS, and JavaScript, the image of a maleo, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. TM This book uses RepKover™, a durable and flexible lay-flat binding. ISBN: 978-1-449-38326-8 [M] 1284478806 To Erica & Cooper Table of Contents Preface ..................................................................... xi 1. Getting Started ......................................................... 1 Web Apps Versus Native Apps 1 What Is a Web App? 1 What Is a Native App? 1 Pros and Cons 2 Which Approach Is Right for You? 2 Web Programming Crash Course 3 Introduction to HTML 3 Introduction to CSS 6 Introduction to JavaScript 9 2. Basic Styling .......................................................... 13 Don’t Have a Website? 13 First Steps 14 Prepare a Separate Android Stylesheet 17 Control the Page Scaling 19 Adding the Android CSS 20 Adding the Android Look and Feel 23 Adding Basic Behavior with jQuery 25 What You’ve Learned 31 3. Advanced Styling ...................................................... 33 Adding a Touch of Ajax 33 Traffic Cop 33 Setting Up Some Content to Work With 36 Routing Requests with JavaScript 36 Simple Bells and Whistles 38 Progress Indicator 38 Setting the Page Title 41 vii Handling Long Titles 43 Automatic Scroll-to-Top 44 Hijacking Local Links Only 45 Roll Your Own Back Button 46 Adding an Icon to the Home Screen 52 What You’ve Learned 53 4. Animation ............................................................ 55 With a Little Help from Our Friend 55 Sliding Home 55 Adding the Dates Panel 58 Adding the Date Panel 60 Adding the New Entry Panel 62 Adding the Settings Panel 64 Putting It All Together 66 Customizing jQTouch 68 What You’ve Learned 70 5. Client-Side Data Storage ................................................ 71 Web Storage 71 Saving User Settings to Local Storage 72 Saving the Selected Date to Session Storage 75 Web SQL Database 76 Creating a Database 78 Inserting Rows 80 Selecting Rows and Handling Result Sets 84 Deleting Rows 88 What You’ve Learned 91 Web Database Error Code Reference 91 6. Going Offline .......................................................... 93 The Basics of the Offline Application Cache 93 Online Whitelist and Fallback Options 96 Creating a Dynamic Manifest File 99 Debugging 105 The JavaScript Console 106 What You’ve Learned 108 7. Going Native ......................................................... 109 Introduction to PhoneGap 109 Download the Android SDK 110 Download PhoneGap 114 Setting Up the Environment 115 viii | Table of Contents