Professional iphone and ipod touch programming

www.it-ebooks.info Professional iPhone™ and iPod® touch Programming Building Applications for Mobile Safari™ Richard Wagner Wiley Publishing, Inc www.it-ebooks.info ffirs.indd iii 12/7/07 3:01:28 PM www.it-ebooks.info ffirs.indd ii 12/7/07 3:01:28 PM Professional iPhone™ and iPod® touch Programming Chapter 1: Introducing the iPhone and iPod touch Development Platform Chapter 2: Designing a User Interface 13 Chapter 3: Implementing the Interface 33 Chapter 4: Styling with CSS 83 Chapter 5: Handling Touch Interactions and Events 101 Chapter 6: Advanced Programming Topics: Canvas and Video 121 Chapter 7: Integrating with iPhone Services 153 Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 179 Chapter 9: Bandwidth and Performance Optimizations 209 Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs 221 Chapter 11: Case Studies: Beyond Edge-to-Edge Design 237 Chapter 12: Testing and Debugging 261 Index 279 www.it-ebooks.info ffirs.indd i 12/7/07 3:01:28 PM www.it-ebooks.info ffirs.indd ii 12/7/07 3:01:28 PM Professional iPhone™ and iPod® touch Programming Building Applications for Mobile Safari™ Richard Wagner Wiley Publishing, Inc www.it-ebooks.info ffirs.indd iii 12/7/07 3:01:28 PM Professional iPhone™ and iPod® touch Programming: Building Applications for Mobile Safari™ Published by Wiley Publishing, Inc 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2008 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 978-0-470-25155-3 Manufactured in the United States of America 10 Library of Congress Cataloging-in-Publication Data is available from the publisher 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 Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, or online at http://www.wiley.com/go/permissions 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 specifically disclaim all warranties, including without limitation warranties of fitness 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 Website 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 Website may provide or recommendations it may make Further, readers should be aware that Internet Websites 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 (800) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002 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 affiliates, in the United States and other countries, and may not be used without written permission iPhone, iPod, and Safari are trademarks or registered trademarks of Apple Computer, Inc All other trademarks are the property of their respective owners Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book Wiley also publishes its books in a variety of electronic formats Some content that appears in print may not be available in electronic books www.it-ebooks.info ffirs.indd iv 12/7/07 3:01:28 PM To Kim and the J-boys www.it-ebooks.info ffirs.indd v 12/7/07 3:01:29 PM www.it-ebooks.info ffirs.indd vi 12/7/07 3:01:29 PM About the Author Richard Wagner is an experienced Web designer and developer as well as author of several Web-related books on the underlying technologies of the Mobile Safari platform These books include XSLT For Dummies, Creating Web Pages All-In-One Desk Reference For Dummies, XML All-In-One Desk Reference For Dummies, Web Design Before & After Makeovers, and JavaScript Unleashed (1st, 2nd ed.) Before moving into full-time authoring, Richard was an experienced programmer and head of engineering He was also inventor and chief architect of the award-winning NetObjects ScriptBuilder A versatile author with a wide range of interests, he is also author of The Myth of Happiness Richard can be located online at tech.digitalwalk.net About the Technical Editor Ishan Anand is cofounder and developer for AppMarks.com, a Web desktop for iPhone Prior to AppMarks, he worked at Digidesign, a division of Avid Ishan has a B.S in Computer Science, Electrical Engineering and Mathematics from M.I.T He can be reached through his Web site at http://ishananand.com www.it-ebooks.info ffirs.indd vii 12/7/07 3:01:29 PM Chapter 12: Testing and Debugging Figure 12-10: Rotating iPhoney to landscape mode Debugging Inside Mobile Safari So far,you’ve seen how to test and debug your iPhone and iPod touch applications on your desktop using desktop-based solutions While those tools are good for general testing or specific problem solving, you will want to spend a good part of your time debugging directly on the iPhone or iPod touch devices themselves Unfortunately, no robust debugging tools such as Drosera are available, but there are several community-based debugging tools that should be a standard part of your Mobile Safari development toolkit Firebug for iPhone Joe Hewitt — developer of the popular Firefox debugger, Firebug — has developed a debugger for iPhone and iPod touch called Firebug for iPhone This debugger is a Python-based Web server running on your desktop computer It connects Mobile Safari on your iPhone to a Firebug console running on your desktop When code is executed inside of the Mobile Safari browser, Firebug for iPhone logs the details directly to the Firebug console At the time of this writing, the Firebug console was not functional inside Safari 3.0 for Mac beta Therefore, if you experience problems, be sure to run it inside of Firefox on your desktop machine Before beginning, you will need to download the free, open source file at www.joehewitt.com/blog/ firebug_for_iph.php You will also need to make sure you have Python installed on your computer Mac systems already have it If you are running Windows, you can download it at www.python.org/download 274 www.it-ebooks.info c12.indd 274 12/7/07 3:00:37 PM Chapter 12: Testing and Debugging Launching Firebug for iPhone Once you have downloaded the zip file and unzipped it into a folder on your computer, open a terminal window in Mac or a command window in Windows Change to the directory into which you placed the files Then, enter the following command line: python ibug.py launch Your browser will load with the Firebug for iPhone page displayed (If the console is opened in Safari, simply copy and paste the URL in Firefox and then continue.) See Figure 12-11 Figure 12-11: Firebug for iPhone Adding a Script Tag to Your Page The Firebug console provides a script tag that you need to copy and paste into the head of each page of your iPhone application The tag will look something like this: 275 www.it-ebooks.info c12.indd 275 12/7/07 3:00:37 PM Chapter 12: Testing and Debugging Note that if you are running a firewall, you may need to open the port (specified after the colon in the script tag) that Firebug uses In the previous example, Firebug is using the 1840 port Debugging with Firebug for iPhone Once you have the Firebug console running, you are ready to begin testing To test, simply interact with your application on your iPhone or iPod touch Firebug will log any exceptions or errors on your desktop Firebug for iPhone also provides a command line in which you can enter JavaScript code and have it execute on the iPhone As a simple example, enter alert(“Hello world”) into the command line and the alert box is displayed on the iPhone Terminating the Debug Session When you are done, close the running instance of Python by pressing Ctrl+C in the Terminal window DOM Viewer The DOM Viewer, available from Brainjar.com, is a Web-based DOM viewer that you can work with directly inside of Mobile Safari The DOM Viewer provides an expandable tree structure that lists all of the properties of a given node When a property of a node is another node, then you can view its properties by clicking its name The tree expands to show these details The DOM Viewer is housed in a separate HTML page that is launched in a separate window from the original page While DOM Viewer does not have the robust capabilities of the desktop Safari’s Web Inspector, it does have the assurance that all of the information you are looking at comes directly from Mobile Safari itself, not its desktop cousins Starting the DOM Viewer To use DOM Viewer, follow these steps: Download the source file at brainjar.com/dhtml/domviewer/domviewer.html Save the file in the same folder as your application Add a test link to your page to launch the viewer: View in DOM Viewer Alternatively, you can add a script to the end of your HTML page in which you wish to inspect: window.open(‘domviewer.html’); The problem with this solution, however, is that iUI gets in the way of the default open action if you are using an iUI-based application Save the file Open the page inside of Mobile Safari If needed, click the View in DOM Viewer link 276 www.it-ebooks.info c12.indd 276 12/7/07 3:00:38 PM Chapter 12: Testing and Debugging The DOM Viewer is displayed in a new pane inside of Mobile Safari (see Figure 12-12) Interact with it as desired Figure 12-12: DOM Viewer Specifying a Root Node One of the things you will immediately notice when working with the DOM Viewer inside of the small iPhone viewport is the sheer amount of information you have to scroll through to find what you are looking for To address this issue, DOM Viewer allows you to specify a particular node (identified by id) as the document root (see Figure 12-13) Here’s the code to add, specifying the desired element as the getElementById() parameter: var DOMViewerObj = document.getElementById(“Jack_Armitage”) var DOMViewerName = null; 277 www.it-ebooks.info c12.indd 277 12/7/07 3:00:38 PM Chapter 12: Testing and Debugging Figure 12-13: Specifying a root node for the DOM Viewer Because it will reference the desired element directly by getElementById(), you can add this code in your HTML page after the element you wish to examine in the body but not before it Go to brainjar.com/dhtml/domviewer for full details on the DOM Viewer 278 www.it-ebooks.info c12.indd 278 12/7/07 3:00:38 PM Index Index A addColorStop() method, 138 addEventListener function, 68–69, 71–72, 106 aggregators, 17 AJAX external URLs and, 42–45 links, 72–74 animation, creating, 144–146 Apple Mighty Mouse, applications aggregators, 17 categories, 17 data URLs and, 226 constraints, 227 issues with, 227 modes, 20 UI access, 21 native, 15 aggregators, 17 task-based, 17 widgets, 17 offline, 227–231 converting to data URLs, 234–236 embedding external styles and scripts, 231–233 images, encoding, 233–234 phone calls from, 159–161 task-based, 17 widgets, 17 arcs, 128–130 aspect ratio, video, 148–149 audio files, embedding, 151–152 B Back button, 22 background, multiple images, 93–94 bandwidth CSS and, 211 images and, 210 JavaScript and, 211 minimizing, 210–211 beginpath() function, 127 best practices in design, 28–31 bit rate, video, 147–148 block elements gradient push buttons, 91–93 image-based borders, 90 rounded corners, 91 blocks, 187–190 bookmarklets, 221 adding, 223–224 uses, 224–226 borders, image-based, 90 button bar, 24 buttons, CSS-based, 95–98 C canvas, 123–124 animation, 144–146 context, 124–125 properties, 125 drawing shapes, 127–130 images, drawing, 131–135 rectangles, 125–127 state, 142–144 canvas element, 124 canvasGradient object, 136 case studies iRealtor 2.0, 237–238 attaching photos page, 244–245 creating photos page, 240–242 photo.css, 241–242 photo.js, 242–244 programming photos page, 242–244 styling photos page, 240–242 toolbar, 238–240 www.it-ebooks.info bindex.indd 279 12/7/07 3:06:09 PM case studies (continued) case studies (continued) Mobile WYFFL, 245–249 game day navigation list page, 254–259 table-based destination pages, 251–254 text-based destination pages, 249–251 checkOrientAndLocation() event handler, 69 clicks, link clicks, 71–72 closePath() function, 127 color, adding, 136 columns, 187–190 multiple, 190 Command button, 22 compatibility, 180–183 compression, 211 gzip, 212 iUI.js file, 213 JavaScript code, 212–213 concatenation, 218–219 constraints, 9–10 corners, rounded, 91 createPattern() method, 140 createRadialGradient() method, 139 CSS (cascading style sheets) CSS-based buttons, 95–98 cui.css style sheet, 158–159 media queries, 191 orientation changes and, 106–111 selectors Mobile Safari, 84 supported, 83–85 cui.css style sheet, 158–159 iProspector, 175–177 cuiServiceLink class, 161 curves, 128–129 D data URLs applications and, 226 constraints, 227 issues with, 227 converting offline applications, 234–236 Dean Edwards’s Packer, 213 Debug commands, 264 Debug Console, 261 Debug menu, enabling, 262–264 debugging DOM Viewer, 276–278 Drosera and, 268 breakpoints, 269 inspecting variables, 270 preparing, 268–269 stepping through code, 269 Firebug for iPhone, 274–276 JavaScript Console and, 267–268 simulating Mobile Safari on desktop, 271–274 Web Inspector, 264–267 design, best practices, 28–31 desktop, simulating Mobile Safari on, 272–274 destination pages, creating, 46–50 developing, levels of development, 5–8 dialog class, 51 dialogs adding, 50–55 iUI, loading, 74–75 div element, empty, 198 document loading, addEventListener function, 68–69 Dojo ShrinkSafe, 213 DOM, access cache references, 214–215 offline DOM manipulation, 215–216 DOM Viewer, 276–278 dot notation named objects, 217 nested properties and, 217 drag-and-drop, simulating, 117–120 drawImage() method, 131 drawing images, 131–135 shapes, 127–130 Drosera breakpoints, 269 inspecting variables, 270 preparing, 268–269 stepping through code, 269 E EDGE, video export and, 149–150 edge-to-edge navigation lists, 23–24 elements canvas, 124 defining, 124 position, orientation and, 111–113 email, sending with iProspector, 164–167 280 www.it-ebooks.info bindex.indd 280 12/7/07 3:06:10 PM HTML, document loading, addEventListener function, 68–69 embedding audio files, 151–152 video files, 151–152 Encoding bookmarklet, 234 event handling, 101–103 events JavaScript compatibility, 102 orientation change, 103 sequencing, 103 trapping for with keyboard, 120 external URLs, AJAX data, 42–45 I F Filemark Maker, 234 files, accessing, Wi-Fi, 11–12 fill() function, 127 filling areas, 127 fillRect() method, 126, 138 fillStyle property, 136 finger gestures, finger input, finger is not a mouse, 8–9 fingers, designing for, 24–27 Firebug for iPhone, 274–276 Flash, 180–181 SWFObject and, 181 fonts, 27–28 functions, addEventListener, 68–69 G getSelectedPage() method, 68 global variables, 216 Google Maps, 167–169 iProspector and, 170–178 gradient push buttons, 91–93 gradients adding, 136–139 radial, 139 gzip compression, 212 H H.264, 146 hot scrollable region, 114 Index iRealtor iCal, 21 image patterns, creating, 140 image-based borders, 90 images background, multiple, 93–94 bandwidth and, 210 encoding, offline applications, 233–234 incompatibilities, identifying, 99 init() function, 199 internal URLs, panels and, 40–42 iPhoney, 272–274 iProspector application shell, 154–157 Contact header, 157–158 cui.css style sheet, 158–159 Contacts address box, 170–171 cui.css, 175–177 email, sending, 164–167 Google Maps and, 170–178 iui.js, 178 prospector.html, 173–175 service buttons, 171–173 service links, 161–164 iRealtor, 33 Contact Us page, integrated with services, 55–67 destination pages, 46–50 dialogs, adding, 50–55 Featured Listings menu item, 42 internal URLs, 40–42 irealtor.css, 44–45 full code view, 66–67 irealtor.html, 35 full code view, 57–59 navigation menu, 38–39 iui.css, 35–36 full code view, 59–65 iui.js, 68 navigation lists, 45–46 styles, 35–36 toolbar, 36–38 top level, 34–39 URLs external, 42–45 internal, 40–42 281 www.it-ebooks.info bindex.indd 281 12/7/07 3:06:10 PM iRealtor 2.0 AJAX, 72–74 link clicks, 71–72 service links, 161–164 telephone links, 159–160 local variables, 216 loops, property lookups and, 217 iRealtor 2.0 photo.css, 241–242 photo.js, 242–244 photos page attaching, 242–244 creating, 240–242 programming, 242–244 styling, 240–242 toolbar, 238–240 isAppleMobile() function, 199 iUI dialogs, loading, 74–75 link types, 38 pages, loading, 69–71 iui.css, 35–36 rules, 52–53 iUI.js, compression benchmark, 213 iui.js addEventListener function, 68–69 AJAX links, 72–74 code, 75–82 full code view, 75–82 iProspector, 178 iUI pages, loading, 69–71 link clicks, 71–72 iui.showPageByHref() method, 72–73 M J–K JavaScript bandwidth and, 211 code compression, 212–213 events, compatibility, 102 performance optimization, 214 DOM access, 214–216 JavaScript Console, debugging and, 267–268 JSMin, 212 JSON iui.js and, 68 window.iui object, 68 keyboard, trapping for key events, 120 L landscape viewport, 15 limitations, 9–10 links mailto: protocol, 164–166 MakeRefMovie, 150 media queries, 191 mega tag, viewport, properties, 186 min-height, 36 minimizing bandwidth, 210–211 Mobile Safari, 1–5 CSS selectors, 84 selectors supported, 83–85 launching, Mac and, performance, programming language, 3–5 pseudo-classes, 84–85 pseudo-elements, 84–85 simulating on desktop, 271–274 UI (User Interface), user agent, 122 Web pages, scale, 15 Windows and, Mobile WYFFL destination pages table-based, 251–254 text-based, 249–251 game day navigation list page, 254–259 mouse, finger and, 8–9 N named objects, dot notation and, 217 navigation edge-to-edge lists, 23–24 lists, 19–20 edge-to-edge, 23–24 long, 45–46 navigation-friendly web sites, 183–190 nested properties, dot notation and, 217 282 www.it-ebooks.info bindex.indd 282 12/7/07 3:06:10 PM O R objects, named, dot notation and, 217 offline applications, 227–231 converting to data URLs, 234–236 external scripts, embedding, 231–233 external styles, embedding, 231–233 images, encoding, 233–234 onmousedown event handler, 102 onmousemove event handler, 102 onorientationchange event handler, 103–104 Operation Classroom, 192–197 optimization, strategies, 209–210 orient attribute, 36 orientation change, detecting, 103–113 element position and, 111–113 style sheets, 106–111 changing, 106–111 orientationChange() function, 106 overflowed text, 87–89 radial gradients, 139 rectangles, drawing on canvas, 125–127 reference movie, 150 resources, constraints, 10 rotate() method, 144 rounded corners, 91 rounded rectangle design, 24 metrics for, 25 RTP/RTSP streaming, 149–150 P Packer (Dean Edwards), 213 pages iUI, loading, 69–71 sizing to viewport, 186 panel class property, 41 panels, internal URLs and, 40–42 parallel sites, 197–207 paths beginPath() function, 127 closePath() function, 127 subpaths, 127 phone calls, from application, 159–161 PhpMovieRef, 150 portrait viewport, 14 Preferences.plist file, 262 properties canvas context, 125 nested, dot notation and, 217 property lookups, loops and, 217 psuedo-classes, 84–85 psuedo-elements, 84–85 push buttons, gradient, 91–93 Index subpaths S screen, titlebar, 20–23 screen title, 22 scrollBar() function, 116 scrolling drag-and-drop and, 117–120 hot scrollable region, 114 two-finger, capturing, 113–116 viewport, 15 selected attribute, 36 service links, 161–164 setInterval function, 69, 105 shadowed text, 89 shadows, 140–142 shapes, drawing, 127–130 showDialog() function, 74–75 showForm() function, 75 slidePages() function, 70 state of canvas, 142–144 strings, concatenation, 218–219 stroke() function, 127 strokeRect() method, 126 strokeStyle property, 136 stroking lines, 127 style sheets media queries, 191 orientation and, 106–111 text, size, 191–192 styles custom, 190 case study, 192–197 media queries, 191 text size, 191–192 subpaths, 127 283 www.it-ebooks.info bindex.indd 283 12/7/07 3:06:10 PM task-based applications T V task-based applications, 17 technologies not supported, 10 telephone links, 159–160 text overflowed, 87–89 shadowed, 89 size, 191–192 styles, sizing, 85–86 titlebar, 20–23 Back button, 22 Command button, 22 Screen title, 22 toolbar, 21 iRealtor, 36–38 touch, designing for, 24–27 transform() function, 142–143 transparencies, setting, 94–95 transparency, adding, 136 trapping events, with keyboard, 120 two-finger scrolling capturing, 113–116 drag-and-drop and, 117–120 twoFingerScroll() function, 115 variables global, 216 local, 216 video aspect ratio, 148–149 bit rate, 147–148 EDGE and, 149–150 embedding files, 151–152 H.264, 146 reference movie, 150 size, 147–148 support, 147 Wi-Fi and, 149–150 viewport, 14–15 default size, 184 mega tag, properties, 186 scale, 185 sizing pages to, 186 viewport meta tag, 183 void() function, 222 U UI design, navigation list based, 18–20 updatePage() function, 70 URI image encoder, 234 URI Kitchen, 234 Url2iphone, 234 URLs (uniform resource locators) external, AJAX data, 42–45 internal, panels and, 40–42 user agent components, 122 identifying, 121–123 iPod, 122 W Web Inspector, 264–267 -webkit-appearance, 91–93 -webkit-border-image, 90 -webkit-border-radius, 91 Wi-Fi file access, 11–12 video export and, 149–150 widgets, 17 window.onresize event handler, 105 with statements, 219 X–Y–Z XMLHttpRequest, 42, 73 YUI Compressor, 212 284 www.it-ebooks.info bindex.indd 284 12/7/07 3:06:11 PM www.it-ebooks.info badvert.indd 285 12/7/07 3:05:27 PM www.it-ebooks.info badvert.indd 286 12/7/07 3:05:27 PM www.it-ebooks.info badvert.indd 287 12/7/07 3:05:27 PM Now you can access more than 200 complete Wrox books online, wherever you happen to be! Every diagram, description, screen capture, and code sample is available with your subscription to the Wrox Reference Library For answers when and where you need them, go to wrox.books24x7.com and subscribe today! www.it-ebooks.info badvert.indd 288 12/7/07 3:05:27 PM ... ❑ Chapter 5, “Handling Touch Interactions and Events”: The heart of iPhone and iPod touch is its touch- screen interface This chapter explores how to handle touch interactions and capture JavaScript... JavaScript ❑ AJAX What This Book Covers Professional iPhone and iPod touch Programming introduces readers to the Web application platform for iPhone and iPod touch The book guides readers through... www.it-ebooks.info ffirs.indd ii 12/7/07 3:01:28 PM Professional iPhone and iPod touch Programming Chapter 1: Introducing the iPhone and iPod touch Development Platform Chapter 2: Designing