Building Android Apps with HTML, CSS, and JavaScript

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

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

Create an Android Virtual Device 117

Build KiloGap 118

Installing KiloGap in the Emulator 122

Using the Screen’s Full Height 125

Customizing the App Icon 126

Installing KiloGap on Your Phone 127

Controlling the Phone with JavaScript 128

Beep, Vibrate, and Alert 128

Geolocation 132

Accelerometer 137

What You’ve Learned 140

8. Submitting Your App to the Android Market . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Preparing a Release Version of Your App 141

Removing Debug Code 141

Versioning Your App 142

Signing Your App 142

Uploading Your App to the Android Market 146

Distributing Your App Directly 147

Further Reading 148

Appendix: Detecting Browsers with WURFL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155