beginning ios application development with html and javascript

www.it-ebooks.info
ffirs.indd ivffirs.indd iv 12/21/11 2:29:58 PM12/21/11 2:29:58 PM
www.it-ebooks.info
BEGINNING
IOS APPLICATION DEVELOPMENT
WITH HTML AND JAVASCRIPT®
INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
PART I GETTING STARTED
CHAPTER 1 Introducing iOS Development Using Web Technologies . . . . . . . . . . . . . 3
CHAPTER 2 Working with Core Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
CHAPTER 3 The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CHAPTER 4 Writing Your First Hello World Application . . . . . . . . . . . . . . . . . . . . . . . . 65
CHAPTER 5 Enabling and Optimizing Web Sites for the iPhone and iPad . . . . . . . . 79
PART II APPLICATION DESIGN
CHAPTER 6 Designing the iPhone UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
CHAPTER 7 Designing for iPad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
CHAPTER 8 Styling with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
PART III APPLICATION DEVELOPMENT
CHAPTER 9 Programming the Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
CHAPTER 10 Handling Touch Interactions and Events . . . . . . . . . . . . . . . . . . . . . . . . . 189
CHAPTER 11 Special E ects and Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
CHAPTER 12 Integrating with iOS Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
CHAPTER 13 Packaging Apps as Bookmarks: Bookmarklets
and Data URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
PART IV ADVANCED PROGRAMMING TECHNIQUES
CHAPTER 14 Programming the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
CHAPTER 15 O ine Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
CHAPTER 16 Building with Web App Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
CHAPTER 17 Bandwidth and Performance Optimizations . . . . . . . . . . . . . . . . . . . . . . 303
CHAPTER 18 Debug and Deploy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317





ffirs.indd iffirs.indd i 12/21/11 2:29:56 PM12/21/11 2:29:56 PM
www.it-ebooks.info
PART V NEXT STEPS: DEVELOPING NATIVE IOS APPLICATIONS
WITH HTML AND JAVASCRIPT
CHAPTER 19 Preparing for Native iOS Development . . . . . . . . . . . . . . . . . . . . . . . . . . 333
CHAPTER 20 PhoneGap: Native Apps from Your HTML, CSS,
and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
CHAPTER 21 Submitting Your App to the App Store . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
APPENDIX Exercise Answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .381

ffirs.indd iiffirs.indd ii 12/21/11 2:29:58 PM12/21/11 2:29:58 PM
www.it-ebooks.info
BEGINNING
iOS Application Development
with HTML and JavaScript
®
ffirs.indd iiiffirs.indd iii 12/21/11 2:29:58 PM12/21/11 2:29:58 PM
www.it-ebooks.info
ffirs.indd ivffirs.indd iv 12/21/11 2:29:58 PM12/21/11 2:29:58 PM
www.it-ebooks.info
BEGINNING
iOS Application Development
with HTML and JavaScript
®
Richard Wagner
John Wiley & Sons, Inc.

ffirs.indd vffirs.indd v 12/21/11 2:29:58 PM12/21/11 2:29:58 PM
www.it-ebooks.info
Beginning iOS Application Development with HTML and JavaScript®
Published by
John Wiley & Sons, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
w w w.wile y .com
Copyright © 2012 by John Wiley & Sons, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978-1-118-15900-2
ISBN: 978-1-118-22607-0 (ebk)
ISBN: 978-1-118-23751-9 (ebk)
ISBN: 978-1-118-26405-8 (ebk)
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means,
electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108
of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization
through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers,
MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the
Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201)
748-6008, or online at />Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with
respect to the accuracy or completeness of the contents of this work and specifi cally disclaim all warranties, including
without limitation warranties of fi tness for a particular purpose. No warranty may be created or extended by sales or
promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is
sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional
services. If professional assistance is required, the services of a competent professional person should be sought. Neither
the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is
referred to in this work as a citation and/or a potential source of further information does not mean that the author or the

publisher endorses the information the organization or Web site may provide or recommendations it may make. Further,
readers should be aware that Internet Web sites listed in this work may have changed or disappeared between when this
work was written and when it is read.
For general information on our other products and services please contact our Customer Care Department within the
United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with
standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to
media such as a CD or DVD that is not included in the version you purchased, you may download this material at
http ://booksupport.wiley.com. For more information about Wiley products, visit w w w.wiley.co m.
Library of Congress Control Number: 2011945668
Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Wrox Programmer to Programmer, and related trade dress are
trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affi liates, in the United States and other coun-
tries, and may not be used without written permission. JavaScript is a registered trademark of Oracle America, Inc. All
other trademarks are the property of their respective owners. John Wiley & Sons, Inc., is not associated with any product
or vendor mentioned in this book.
ffirs.indd viffirs.indd vi 12/21/11 2:30:03 PM12/21/11 2:30:03 PM
www.it-ebooks.info
To KimmyWags and the J-Team
ffirs.indd viiffirs.indd vii 12/21/11 2:30:03 PM12/21/11 2:30:03 PM
www.it-ebooks.info
ffirs.indd viiiffirs.indd viii 12/21/11 2:30:04 PM12/21/11 2:30:04 PM
www.it-ebooks.info
ABOUT THE AUTHOR
RICHARD WAGNER is Lead Product Architect of Mobile/Web at Maark, LLC. Previously, he was
the head of engineering for the Web scripting company Nombas and VP of Product Development
for NetObjects, where he was the chief architect of a CNET award-winning JavaScript tool named
NetObjects ScriptBuilder. He is an experienced web designer and developer and the author of
several Web-related books on the underlying technologies of the iOS application platform.
ffirs.indd ixffirs.indd ix 12/21/11 2:30:04 PM12/21/11 2:30:04 PM
www.it-ebooks.info

ffirs.indd xffirs.indd x 12/21/11 2:30:04 PM12/21/11 2:30:04 PM
www.it-ebooks.info
CREDITS
EXECUTIVE EDITOR
Carol Long
PROJECT EDITOR
Kelly Talbot
TECHNICAL EDITOR
Michael Gilbert
PRODUCTION EDITOR
Kathleen Wisor
COPY EDITOR
Charlotte Kughen
EDITORIAL MANAGER
Mary Beth Wakefi eld
FREELANCER EDITORIAL MANAGER
Rosemarie Graham
ASSOCIATE DIRECTOR OF MARKETING
David Mayhew
MARKETING MANAGER
Ashley Zurcher
BUSINESS MANAGER
Amy Knies
PRODUCTION MANAGER
Tim Tate
VICE PRESIDENT AND EXECUTIVE GROUP
PUBLISHER
Richard Swadley
VICE PRESIDENT AND EXECUTIVE
PUBLISHER

Neil Edde
ASSOCIATE PUBLISHER
Jim Minatel
PROJECT COORDINATOR, COVER
Katie Crocker
PROOFREADER
Sheilah Ledwidge, Word One
INDEXER
Robert Swanson
COVER DESIGNER
Ryan Sneed
COVER IMAGE
© Sam Burt Photography / iStockPhoto
ffirs.indd xiffirs.indd xi 12/21/11 2:30:04 PM12/21/11 2:30:04 PM
www.it-ebooks.info
ffirs.indd xiiffirs.indd xii 12/21/11 2:30:05 PM12/21/11 2:30:05 PM
www.it-ebooks.info
ACKNOWLEDGMENTS
THE IPHONE AND IPAD HAVE EMERGED as my favorite pieces of technology I have ever owned. As
such, the topic of iOS application development has been a joy to write about. However, the book
was also a joy because of the stellar team I had working with me on this book. First and foremost,
I’d like to thank Kelly Talbot for his masterful role as project editor. He kept the project on track
and running smoothly from start to fi nish. I’d also like to thank Michael Gilbert for his insights and
ever-watchful eye that ensured technical accuracy in this book. Further, thanks also to Charlotte
Kughen for her editing prowess.
ffirs.indd xiiiffirs.indd xiii 12/21/11 2:30:05 PM12/21/11 2:30:05 PM
www.it-ebooks.info
ffirs.indd xivffirs.indd xiv 12/21/11 2:30:05 PM12/21/11 2:30:05 PM
www.it-ebooks.info
CONTENTS

INTRODUCTION xxiii
PART I: GETTING STARTED
CHAPTER 1: INTRODUCING IOS DEVELOPMENT USING WEB
TECHNOLOGIES 3
Discovering the Safari on iOS Platform 3
Key Safari Features for Web Developers 6
Four Ways to Develop Web Apps for iOS 7
The Finger Is Not a Mouse 9
Limitations and Constraints 10
Setting Up Your Development Environment on a Local Network 11
CHAPTER 2: WORKING WITH CORE TECHNOLOGIES 15
Exploring HTML 5 Media Elements 15
Scripting JavaScript 18
Syntax and Basic Rules 18
Variables 20
Operators 26
Reserved Words 27
Basic Conditional Expressions 28
Loops 31
Comments 33
Functions 35
Data Types 39
CHAPTER 3: THE DOCUMENT OBJECT MODEL 47
What Is the DOM? 47
DOM as a Tree 48
Accessing the DOM from JavaScript 51
Accessing a Specifi c Element 51
Accessing a Set of Elements 52
Accessing Family Members 53
Retrieving Attributes 53

Manipulating the DOM 55
Creating an Element and Other Nodes 55
ftoc.indd xvftoc.indd xv 12/21/11 2:35:54 PM12/21/11 2:35:54 PM
www.it-ebooks.info
xvi
CONTENTS
Adding a Node to the DOM 55
Creating Other Elements 57
Setting a Value to an Attribute 59
Moving a Node 60
Cloning a Node 60
Removing a Node from the DOM 61
Removing an Attribute 62
CHAPTER 4: WRITING YOUR FIRST HELLO WORLD APPLICATION 65
Setting Up 66
Creating Your Index Page 66
Creating the Main Screen 67
Adding Detail Pages 70
CHAPTER 5: ENABLING AND OPTIMIZING WEB SITES
FOR THE IPHONE AND IPAD 79
Tier 1: iOS Compatibility 80
Tier 2: Navigation-Friendly Websites 82
Working with the Viewport 82
Turning Your Page into Blocks 85
Defi ning Multiple Columns (Future Use) 87
Tier 3: Custom Styling 87
Media Queries 88
Text Size Adjustment 88
Case Study: Enabling an Existing Web Site 89
Tier 4: Parallel Sites 92

PART II: APPLICATION DESIGN
CHAPTER 6: DESIGNING THE IPHONE UI 99
Evolving UI Design 99
The iPhone Viewport 100
Exploring iOS Design Patterns 102
Categorizing Apps 103
Navigation List-based UI Design 104
Application Modes 105
Exploring Screen Layout 106
Title Bar 106
Edge-to-Edge Navigation Lists 107
Rounded Rectangle Design Destination Pages 108
ftoc.indd xviftoc.indd xvi 12/21/11 2:35:55 PM12/21/11 2:35:55 PM
www.it-ebooks.info
xvii
CONTENTS
Designing for Touch 109
Working with Fonts 110
Best Practices in iOS UI Design 111
Adding Finishing Touches 112
CHAPTER 7: DESIGNING FOR IPAD 117
Special iPad Considerations 117
Design Essentials 118
Dealing with Scrolling 118
Split View Design Pattern 119
Designing a UI for iPad 120
CHAPTER 8: STYLING WITH CSS 135
CSS Selectors Supported in Safari 135
Text Styles 137
Controlling Text Sizing with -webkit-text-size-adjust 138

Handling Overfl owed Text with text-overfl ow 139
Creating Subtle Shadows with text-shadow 142
Styling Block Elements 142
Image-Based Borders with -webkit-border-image 142
Rounded Corners with -webkit-border-radius 143
Gradient Push Buttons with -webkit-appearance 144
Multiple Background Images 144
Setting Transparencies 145
Creating CSS-based iOS Buttons 147
Identifying Incompatibilities 148
PART III: APPLICATION DEVELOPMENT
CHAPTER 9: PROGRAMMING THE INTERFACE 153
Top Level of Application 154
Examining Top-Level Styles 155
Adding the Top Toolbar 157
Adding a Top-Level Navigation Menu 159
Displaying a Panel with an Internal URL 160
Creating a Secondary Navigation List 162
Designing for Long Navigation Lists 163
Creating a Destination Page 164
Adding a Dialog 168
ftoc.indd xviiftoc.indd xvii 12/21/11 2:35:55 PM12/21/11 2:35:55 PM
www.it-ebooks.info
xviii
CONTENTS
Scripting UI Behavior 178
On Document Load 179
Loading a Standard iUI Page 181
Handling Link Clicks 183
Loading a Dialog 184

CHAPTER 10: HANDLING TOUCH INTERACTIONS AND EVENTS 189
Three Types of Touch Events 189
Mouse-Emulation Events 190
Many Events Handled by Default 190
Conditional Events 190
Mouse Events: Think “Click,” Not “Move” 191
Click-Enabling Elements 192
Event Flow 192
Unsupported Events 192
Touch Events 194
Gesture Events 196
Detecting an Orientation Change 196
Changing a Style Sheet When Orientation Changes 198
Changing Element Positioning Based on Orientation Change 203
Trapping for Key Events with the On-Screen Keyboard 204
CHAPTER 11: SPECIAL EFFECTS AND ANIMATION 207
Gradients 207
Creating CSS Gradients 207
Creating Gradients with JavaScript 210
Adding Shadows 212
Adding Refl ections 213
Working with Masks 215
Creating Transform E ects 217
Creating Animations 218
CHAPTER 12: INTEGRATING WITH IOS SERVICES 223
Making Phone Calls from Your App 224
Sending Emails 226
Sending SMS Messages 229
Pointing on Google Maps 230
ftoc.indd xviiiftoc.indd xviii 12/21/11 2:35:56 PM12/21/11 2:35:56 PM

www.it-ebooks.info
xix
CONTENTS
CHAPTER 13: PACKAGING APPS AS BOOKMARKS:
BOOKMARKLETS AND DATA URLS 235
Working with Bookmarklets 236
Adding a Bookmarklet to Safari on iOS 236
Exploring How Bookmarklets Can Be Used 237
Storing an Application in a Data URL 239
Constraints and Issues with Using Data URLs 239
Developing a Data URL App 240
PART IV: ADVANCED PROGRAMMING TECHNIQUES
CHAPTER 14: PROGRAMMING THE CANVAS 251
Identifying the User Agent 251
Programming the iOS Canvas 254
Defi ning the Canvas Element 254
Getting a Context 254
Drawing a Simple Rectangle 256
Drawing Other Shapes 257
Drawing an Image 259
Advanced Drawing 261
Drawing with Encoded Images 262
Adding Color and Transparency 264
Creating an Image Pattern 265
CHAPTER 15: OFFLINE APPLICATIONS 269
HTML 5 O ine Application Cache 269
Create a Manifest File 270
Reference the Manifest File 271
Programmatically Control the Cache 271
Checking Connection Status 273

Using Key-Value Storage 276
Saving a Key Value 276
Loading Key-value Data 277
Deleting Key-value Data 278
Going SQL with the JavaScript Database 283
Open a Database 283
Querying a Table 283
ftoc.indd xixftoc.indd xix 12/21/11 2:35:56 PM12/21/11 2:35:56 PM
www.it-ebooks.info
xx
CONTENTS
CHAPTER 16: BUILDING WITH WEB APP FRAMEWORKS 287
Using jQuery Mobile 288
Using iWebKit 293
CHAPTER 17: BANDWIDTH AND PERFORMANCE
OPTIMIZATIONS 303
Optimization Strategies 303
Best Practices to Minimize Bandwidth 304
General 304
Images 305
CSS and JavaScript 305
Compressing Your Application 306
Gzip File Compression 306
JavaScript Code Compression 307
JavaScript Performance Optimizations 308
Smart DOM Access 309
Local and Global Variables 311
Dot Notation and Property Lookups 311
Avoiding Nested Properties 311
Accessing a Named Object 312

Property Lookups Inside Loops 312
String Concatenation 313
What to Do and Not to Do 314
CHAPTER 18: DEBUG AND DEPLOY 317
Simulating the iPhone or iPad on Your Development Computer 318
Xcode’s iOS Simulator 318
Using Safari on Mac or Windows 320
Working with Desktop Safari Debugging Tools 322
Working with the Develop Menu 322
Working with Safari’s Web Inspector 323
Working with the Scripts Inspector 325
Debugging on an iOS Device 326
Debug Console 326
DOM Viewer 327
ftoc.indd xxftoc.indd xx 12/21/11 2:35:57 PM12/21/11 2:35:57 PM
www.it-ebooks.info
xxi
CONTENTS
PART V: NEXT STEPS: DEVELOPING NATIVE IOS APPLICATIONS
WITH HTML AND JAVASCRIPT
CHAPTER 19: PREPARING FOR NATIVE IOS DEVELOPMENT 333
Downloading Xcode 333
Joining the iOS Developer Program 334
Getting an iOS Developer Certifi cate 335
Retrieving the Developer Certifi cate 337
Adding a Device for Testing 337
Creating an App ID 338
Creating a Provisioning Profi le 340
Installing the Development Provisioning Profi le 341
CHAPTER 20: PHONEGAP: NATIVE APPS FROM

YOUR HTML, CSS, AND JAVASCRIPT 345
Installing PhoneGap 345
Creating a New PhoneGap Project in Xcode 346
Running the Base Project 348
Adding Web Files to the Xcode Project 348
Merging Your Web App Code 349
Tweaking the Xcode Project 357
Allowing External References 357
Opening External Links in Safari 358
Adding an Icon and Launch Image 359
Running the Finished App 360
CHAPTER 21: SUBMITTING YOUR APP TO THE APP STORE 363
Step 1: Getting a Distribution Certifi cate 364
Step 2: Creating a Distribution Provisioning Profi le 365
Step 3: Building a Distribution Release of Your App 368
Step 4: Submitting Your App to the App Store 369
APPENDIX: EXERCISE ANSWERS 375
INDEX 381
ftoc.indd xxiftoc.indd xxi 12/21/11 2:35:57 PM12/21/11 2:35:57 PM
www.it-ebooks.info
flast.indd xxiiflast.indd xxii 12/21/11 8:06:32 AM12/21/11 8:06:32 AM
www.it-ebooks.info
INTRODUCTION
THE AMAZING SUCCESS OF THE IPHONE and iPad over the past four years has proven that
application developers are now smack deep in a brave new world of sophisticated, multifunctional
mobile applications. No longer do applications and various media need to live in separate silos.
Instead, mobile web-based applications can bring together elements of web apps, native apps,
multimedia video and audio, and the mobile device.
This book covers the various aspects of developing web-based applications for iOS. Specifi cally, you will
discover how to create a mobile application from the ground up, utilize existing open source frameworks

to speed up your development times, emulate the look and feel of built-in Apple applications, capture
fi nger touch interactions, and optimize applications for Wi-Fi and wireless networks.
WHO THIS BOOK IS FOR
This book is aimed primarily for beginning and intermediate web developers who want to build new
applications for iOS or migrate existing web apps to this platform. In general, readers will fi nd it
helpful to have a working knowledge of the following technologies:
HTML/XHTML
CSS
JavaScript
Ajax
However, if you are a less experienced working with these technologies, be sure to take advantage of
the early chapters at the start of the book.
WHAT THIS BOOK COVERS
This book introduces readers to the web application platform for iOS. It guides readers through the
process of building new applications from scratch and migrating existing web applications to this
new mobile platform. As it does so, it helps readers design a user interface that is optimized for iOS
touch-screen displays and integrate their applications with iPhone services, including Phone, Mail,
Google Maps, and GPS.
HOW THIS BOOK IS STRUCTURED
The chapter-level breakdown is as follows:

1. Introducing iOS Development Using Web Technologies. Explores the Safari development
platform and walks you through different ways you can develop apps for iOS.
➤
➤
➤
➤
flast.indd xxiiiflast.indd xxiii 12/21/11 8:06:32 AM12/21/11 8:06:32 AM
www.it-ebooks.info