Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa

186 Pages·2010·4.18 MB·English

by  Jonathan Stark

Building iPhone Apps with HTML, CSS, and
JavaScript

Building iPhone Apps with HTML,
CSS, and JavaScript
Jonathan Stark
Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo
Building iPhone 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: [phone] or [email protected].
Editor: Brian Jepson Indexer: Fred Brown
Production Editor: Sumita Mukherji Cover Designer: Karen Montgomery
Copyeditor: Emily Quill Interior Designer: David Futato
Proofreader: Sada Preisch Illustrator: Robert Romano
Printing History:
January 2010: First Edition.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of
O’Reilly Media, Inc. Building iPhone Apps with HTML, CSS, and JavaScript, the image of a bluebird, 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.
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0
United States License.
TM
This book uses RepKover™, a durable and flexible lay-flat binding.
ISBN: 978-0-596-80578-4
[M]
1262957633
To Erica—and that little jumping bean in her
tummy.

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
Intro to HTML 3
Intro to CSS 6
Intro to JavaScript 9
2. Basic iPhone Styling .................................................... 13
First Steps 14
Preparing a Separate iPhone Stylesheet 16
Controlling the Page Scaling 17
Adding the iPhone CSS 19
Adding the iPhone Look and Feel 21
Adding Basic Behavior with jQuery 23
What You’ve Learned 28
3. Advanced iPhone Styling ................................................ 29
Adding a Touch of Ajax 29
Traffic Cop 29
Simple Bells and Whistles 34
Roll Your Own Back Button 40
Adding an Icon to the Home Screen 46
Full Screen Mode 48
Changing the Status Bar 48
Providing a Custom Startup Graphic 49
vii
What You’ve Learned 50
4. Animation ............................................................ 51
With a Little Help from Our Friend 51
Sliding Home 51
Adding the Dates Panel 55
Adding the Date Panel 56
Adding the New Entry Panel 58
Adding the Settings Panel 60
Putting It All Together 62
Customizing jQTouch 64
What You’ve Learned 67
5. Client-Side Data Storage ................................................ 69
localStorage and sessionStorage 69
Saving User Settings to localStorage 70
Saving the Selected Date to sessionStorage 73
Client-Side Database 74
Creating a Database 75
Inserting Rows 78
Selecting Rows and Handling Result Sets 82
Deleting Rows 86
What You’ve Learned 89
6. Going Offline .......................................................... 91
The Basics of the Offline Application Cache 91
Online Whitelist and Fallback Options 94
Creating a Dynamic Manifest File 98
Debugging 102
The JavaScript Console 103
The Application Cache Database 107
What You’ve Learned 113
7. Going Native ......................................................... 115
Intro to PhoneGap 115
Using the Screen’s Full Height 121
Customizing the Title and Icon 123
Creating a Startup Screen 130
Installing Your App on the iPhone 131
Controlling the iPhone with JavaScript 136
Beep, Vibrate, and Alert 136
Geolocation 140
Accelerometer 146
viii | Table of Contents