Building Android Apps with HTML, CSS, and javascript Making Native Apps with Standards-Based Web Tools

176 Pages·2012·10.35 MB·English

by  Jonathan Stark

SECOND EDITION
Building Android Apps with
HTML, CSS, and JavaScript
Jonathan Stark
with Brian Jepson
Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo
Building Android Apps with HTML, CSS, and JavaScript, Second Edition
by Jonathan Stark with Brian Jepson
Copyright © 2012 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: [phone] or [email protected].
Editor: Brian Jepson Cover Designer: Karen Montgomery
Production Editor: Kristen Borg Interior Designer: David Futato
Proofreader: O’Reilly Production Services Illustrator: Robert Romano
September 2010: First Edition.
January 2012: Second Edition.
Revision History for the Second Edition:
2012-01-10 First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449316419 for release details.
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 authors assume
no responsibility for errors or omissions, or for damages resulting from the use of the information con-
tained herein.
ISBN: 978-1-449-31641-9
[LSI]
1326207514
To Erica & Cooper

Table of Contents
Preface ..................................................................... ix
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 15
Prepare a Separate Android Stylesheet 19
Control the Page Scaling 20
Adding the Android CSS 22
Adding the Android Look and Feel 26
Adding Basic Behavior with jQuery 28
What You’ve Learned 33
3. Advanced Styling ...................................................... 35
Adding a Touch of Ajax 35
Traffic Cop 36
Setting Up Some Content to Work With 38
Routing Requests with JavaScript 39
Simple Bells and Whistles 41
Progress Indicator 41
Setting the Page Title 44
v
Handling Long Titles 46
Automatic Scroll-to-Top 47
Hijacking Local Links Only 49
Roll Your Own Back Button 49
Adding an Icon to the Home Screen 56
What You’ve Learned 57
4. Animation ............................................................ 59
With a Little Help from Our Friend 59
Sliding Home 59
Adding the Dates Panel 62
Adding the Date Panel 65
Adding the New Entry Panel 68
Adding the Settings Panel 70
Putting It All Together 74
Customizing jQTouch 76
What You’ve Learned 78
5. Client-Side Data Storage ................................................ 79
Web Storage 79
Saving User Settings to Local Storage 80
Saving the Selected Date to Session Storage 84
Web SQL Database 85
Creating a Database 86
Inserting Rows 90
Selecting Rows and Handling Result Sets 93
Deleting Rows 97
Web Database Error Code Reference 101
What You’ve Learned 102
6. Going Offline ......................................................... 103
The Basics of the Offline Application Cache 103
Online Whitelist and Fallback Options 107
Creating a Dynamic Manifest File 113
Debugging 117
The JavaScript Console 118
What You’ve Learned 120
7. Going Native ......................................................... 121
Introduction to PhoneGap 121
Building Your App Locally with Eclipse and the Android SDK 122
Download and Install Eclipse Classic 122
Download and Install the Android SDK 123
vi | Table of Contents
Install the ADT Plug-In in Eclipse 123
Add Android Platforms and Other Components 124
Download the Latest Copy of PhoneGap 125
Set Up a New Android Project 125
Running Kilo as an Android App 127
Controlling the Phone with JavaScript 129
Beep, Vibrate, and Alert 129
Geolocation 133
Accelerometer 140
What You’ve Learned 143
8. Submitting Your App to the Android Market ............................... 145
Preparing a Release Version of Your App 145
Removing Debug Code 145
Versioning Your App 146
Compile and Sign Your App 147
Uploading Your App to the Android Market 147
Distributing Your App Directly 149
Further Reading 153
Appendix: Detecting Browsers with WURFL ..................................... 155
Table of Contents | vii