Professional iphone and ipod touch Programming. Building Applications for Mobile Safari

Transcription

1 Professional iphone and ipod touch Programming Building Applications for Mobile Safari Richard Wagner WILEY Wiley Publishing, Inc.

2 Acknowledgments Introduction xvii 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 11 Chapter 2: Designing a User Interface 13 The iphone Viewport 14 Exploring Native iphone Applications 15 Navigation List-Based UI Design 18 Application Modes 20 Screen Layout: Emulating Apple Design 20 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 28 Chapter 3: Implementing the Interface 33 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 40 Displaying AJAX Data from an External URL 42 Designing for Long Navigation Lists 45 Creating a Destination Page 46

3 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 Chapter 4: Styling with CSS 83 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 Chapter 5: Handling Touch Interactions and Events 101 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 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 xii

4 Drawing 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 146 Preparing iphone/ipod touch-friendly Video 146 Embedding Video or Audio Files 151 Chapter 7: Integrating with iphone Services 153 Preparing the iprospector Application Shell 154 Creating the Contact Header 157 Creating the cui.css Style Sheet 158 Making Phone Calls from Your Application 159 Creating Service Links 161 Sending s 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 179 Tier 1: iphone/ipod touch Compatibility 180 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 190 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 xiii

5 Chapter 9: Bandwidth and Performance Optimizations 209 Your Optimization Strategy 209 Best Practices to Minimize Bandwidth 210 General 210 Images 210 CSS and JavaScript 211 Compressing Your Application 211 Gzip File Compression 212 JavaScript Code Compression 212 JavaScript Performance Optimizations 214 Smart DOM Access 214 Local and Global Variables 216 Dot Notation and Property Lookups 217 Avoiding Nested Properties 217 Accessing a Named Object 217 Property Lookups Inside Loops 217 String Concatenation 218 What to Do and Not to Do 219 Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs 221 Bookmarklets 221 Adding a Bookmarklet to Mobile Safari 223 Exploring How Bookmarklets Can Be Used 224 Storing an Application in a Data URL 226 Constraints and Issues with Using Data URLs 227 Creating an Offline iphone/ipod touch Application 227 Chapter 11: Case Studies: Beyond Edge-to-Edge Design 232 Case Study: irealtor 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 xiv

6 Chapter 12: Testing and Debugging 261 iphone and ipod touch Debug Console 261 Working with Desktop Safari Debugging Tools 262 Enabling the Debug Menu 262 Working with the Safari Web Inspector 264 Working with the JavaScript Console 267 Industrial Strength Debugging with Drosera 268 Preparing Drosera for Safari 268 Working with Drosera 269 Simulating Mobile Safari on Your Desktop 271 Using Safari for Mac or Windows 271 Using iphoney 272 Debugging Inside Mobile Safari 274 Firebug for iphone 274 DOM Viewer 276 Index 229 xv