Professional
iPhone™ and iPod® touch
Programming
Building Applications for Mobile Safari
Richard Wagner
WILEY
Acknowledgments xvii Introduction xix
Chapter 1 : Introducing the iPhone and iPod touch Development Platform 1
Discovering the Mobile Safari Platform 1 Four Ways to Develop for iPhone and iPod touch 5
The Finger Is Not a Mouse 8 Limitations and Constraints 9 Accessing Files on a Local Wi-Fi Network 1 1
Chapter 2 : Designing a User Interface 1 3
The iPhone Viewport 14 Exploring Native iPhone Applications 15
Navigation List-Based UI Design 18
Application Modes 20
Screen Layout: Emulating Apple Design 2 0
Titlebar 20 Edge-to-Edge Navigation Lists 23
Rounded Rectangle Design Destination Pages 24
Button Bar 24
Designing for Touch 24 Working with Fonts 27 Best Practices in iPhone UI Design 2 8
Chapter 3 : Implementing the Interface 3 3
Top Level of Application 34
Creating irealtor.html 35 Examining Top-Level Styles in iui.css 35
Adding the Top Toolbar to irealtor.html 36 Adding a Top-Level Navigation IVIenu in irealtor.html 38
Displaying a Panel with an Internal URL 4 0 Displaying AJAX Data from an External URL 42
Designing for Long Navigation Lists 4 5
Contents
Adding a Dialog
Designing a Contact Us Page with Integrated iPhone Services Scripting Ul Behavior with iui.js
On Document Load
Loading a Standard iUI Page Handling Link Clicks
Handling AJAX Links Loading an iUI Dialog
5 0 55 6 8 68 69 71 72 74
Chapter 4 : Styling with CSS 8 3
CSS Selectors Supported in Mobile Safari Text Styles
Controlling Text Sizing with -webkit-text-size-adjust Handling Overflowed Text with text-overflow Subtle Shadows with text-shadow
Styling Block Elements
Image-Based Borders with -webkit-border-image Rounded Corners with -webkit-border-radius Gradient Push Buttons with -webkit-appearance Multiple Background Images
Setting Transparencies
Creating CSS-Based iPhone Buttons Identifying Incompatibilities
83
85
85
87
89
90
90
91
91
93
94
95
99
Chapter 5: Handling Touch Interactions and Events 1 0 1
How iPhone Handles Events Detecting an Orientation Change
Changing a Style Sheet When Orientation Changes
Changing Element Positioning Based on Orientation Change
Capturing Two-Finger Scrolling Simulating a Drag-and-Drop Action
Trapping for Key Events with the On-Screen Keyboard
101
103
106
111
113
117
120
Chapter 6: Advanced Programming Topics: Canvas and Video
Identifying the User Agent for iPhone and iPod touch Programming the iPhone Canvas
Defining the Canvas Element Getting a Context
Drawing a Simple Rectangle
1 2 1
121
123
124
124
125
xiiDrawing Other Shapes 127 Drawing an Image 131 Adding Color and Transparency 136
Adding Gradients 136 Creating an Image Pattern 140
Adding Shadows 140 Transforming a Canvas State 142
Saving and Restoring State 144 Creating an Animation 144 Canvas in Action 146
Working with Video 1 4 6
Preparing iPhone/iPod touch-Friendly Video 146
Embedding Video or Audio Files 151
Chapter 7: Integrating with iPhone Services 1 5 3
Preparing the iProspector Application Shell 1 5 4
Creating the Contact Header 157 Creating the cui.css Style Sheet 158
Making Phone Calls from Your Application 159
Creating Service Links 161
Sending Emails 164 Pointing on Google Maps 167
Creating a Contacts Address Box 170
Creating Service Buttons 171
Chapter 8: Enabling and Optimizing Web Sites for
iPhone and iPod touch 1 7 9
Tier 1 : iPhone/iPod touch Compatibility 1 8 0 Tier 2: Navigation-Friendly Web Sites 183
Working with the Viewport 183 Turning Your Page into Blocks 187 Defining Multiple Columns (Future Use) 190
Tier 3: Custom iPhone/iPod touch Styles 1 9 0
Media Queries 191 Text Size Adjustment 191
Case Study 192
Tier 4: Parallel Sites 197
Avoid Handcuffs, Offer Freedom 197 Transform a Site to an iPhone/iPod touch Design 200
Contents
Chapter 9 : Bandwidth and Performance Optimizations 2 0 9
Your Optimization Strategy 2 0 9 Best Practices to Minimize Bandwidth 2 1 0
General 210 Images 210 CSS and JavaScript 211
Compressing Your Application 2 1 1
Gzip File Compression 212 JavaScript Code Compression 212
JavaScript Performance Optimizations 214
Smart DOM Access 214
Local and Global Variables 2 1 6 Dot Notation and Property Lookups 2 1 7
Avoiding Nested Properties 217 Accessing a Named Object 217 Property Lookups Inside Loops 217
String Concatenation 218
What to Do and Not to Do 2 1 9
Chapter 1 0 : Packaging Apps as Bookmarks: Bookmarklets
and Data URLs 2 2 1
Bookmarklets 2 2 1
Adding a Bookmarklet to Mobile Safari 223 Exploring How Bookmarklets Can Be Used 224
Storing an Application in a Data URL 2 2 6
Constraints and Issues with Using Data URLs 227 Creating an Offline iPhone/iPod touch Application 227
Chapter 1 1 : Case Studies: Beyond Edge-to-Edge Design 2 3 2
Case Study: iRealtor 2.0 2 3 7
Customizing the Application Toolbar 238 Creating and Styling the Photos Page 240 Programming the Photos Page 242 Attaching the Photos Page to iRealtor 244
Case Study: Mobile WYFFL 245
Text-Based Destination Pages 249 Table-Based Destination Pages 251 Game Day Navigation List Page 254
Chapter 1 2 : Testing and Debugging 2 6 1
iPhone and iPod touch Debug Console 2 6 1 Working with Desktop Safari Debugging Tools 2 6 2
Enabling the Debug Menu 262 Working with the Safari Web Inspector 264
Working with the JavaScript Console 267
Industrial Strength Debugging with Drosera 2 6 8
Preparing Drosera for Safari 268 Working with Drosera 269
Simulating Mobile Safari on Your Desktop 2 7 1
Using Safari for Mac or Windows 271
Using iPhoney 272
Debugging Inside Mobile Safari 274
Firebug for iPhone 274 DOM Viewer 276
