ptg ptg Praise for Developing Hybrid Applications for the iPhone “For those not ready to tackle the complexities of Objective-C, this is a great way to get started building iPhone apps. If you know the basics of HTML, JavaScript, and CSS, you’ll be building apps in no time.” —August Trometer, Owner of FoggyNoggin Software, www.foggynoggin.com “Lee S. Barney takes the complexities of iPhone application creation and utilizes simple and often witty examples and language to make this book an enjoyable and useful read. It is not a simple how-to book, but if you have some web programming background and an idea, this book can provide you with the foundation for well-made, maintain- able, and useable applications for the iPhone.” —William Dalton “This is an outstanding book! If you are interested in building applications for the iPhone, this is the book for you. Lee S. Barney makes it simple and easy to understand. He has you creating a custom application from the very first chapter.Then, he brings you up the learning curve until you’re building applications with advanced iPhone features, such as the accelerometer, GPS, and embedded maps.This is an extremely well-written and easy-to-follow book.” —Joey Skinner, CEO and President, Rodeo Software “Lee S. Barney employs his solid background in JavaScript and Xcode to demonstrate useful techniques for building hybrid iPhone applications. I appreciate his candor as he shares some of the pitfalls that might trap newcomers, which then supports the direction for his solution. If you have a strong background in Javascript and are looking to break into iPhone application development, this book would make for a good segue.” —A. Scott Mikolaitis ptg This page intentionally left blank ptg Developing Hybrid Applications for the iPhone ptg This page intentionally left blank ptg Developing Hybrid Applications for the iPhone Using HTML, CSS, and JavaScript to Build Dynamic Apps for the iPhone Lee S. Barney Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • To r o n t o • Montreal • London • Munich • Paris • Madrid Cape Town • Sydney • To k y o • Singapore • Mexico City ptg Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publish- er was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. The author and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omis- sions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. The publisher offers excellent discounts on this book when ordered in quantity for bulk pur- chases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more information, please contact: U.S. Corporate and Government Sales (800) 382-3419 corpsales@pearsontechgroup.com For sales outside the United States, please contact: International Sales international@pearson.com Visit us on the Web: informit.com/aw Library of Congress Cataloging-in-Publication Data Barney, Lee. Developing hybrid applications for the iPhone : using HTML, CSS, and JavaScript to build dynamic apps for the iPhone / Lee S. Barney. p. cm. Includes index. ISBN 978-0-321-60416-3 (pbk. : alk. paper) 1. iPhone (Smartphone) Programming. 2. Application software Development. 3. Cross-platform software development. I. Title. TK6570.M6B37 2009 621.3845'6 dc22 2009019162 Copyright © 2009 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited repro- duction, storage in a retrieval system, or transmission in any form or by any means, elec- tronic, mechanical, photocopying, recording, or likewise. For information regarding permis- sions, write to: Pearson Education, Inc. Rights and Contracts Department 501 Boylston Street, Suite 900 Boston, MA 02116 Fax (617) 671-3447 ISBN-13: 978-0-321-60416-3 ISBN-10: 0-321-60416-4 Text printed in the U n i t e d Sta t e s on r e c y cled p a p er a t R . R . Do n n e l ley in C r awfor d s v i lle, Indiana. First printing June 2009 Editor-in-Chief Karen Gettman Acquisitions Editor Chuck Toporek Development Editor Sheri Cain Managing Editor Kristy Hart Project Editor Jovana San Nicolas-Shirley Copy Editor Deadline Driven Publishing Indexer Erika Millen Proofreader Kathy Ruiz Technical Reviewers August Trometer Randall Tamura Publishing Coordinator Romny French Cover Designer Gary Adair Compositor Jake McFarland ptg ❖ This book is dedicated to my wonderful wife Joan and our five boys who have put up with me being too busy while this book was being created. Eternity isn’t long enough to be with you. ❖ ptg This page intentionally left blank ptg Table of Contents Preface xiii 1 Developing with Dashcode and Xcode 1 Section 1: Using Dashcode and the Custom QuickConnect Template 1 Section 2: Using Xcode and the Custom QuickConnect Template 4 Section 3: Using Xcode and the Custom PhoneGap Template 9 Section 4: Introduction to Basic Objective-C 11 Section 5: Objective-C QuickConnectiPhone Application Structure 14 Section 6: Objective-C PhoneGap Application Structure 17 Section 7: Embedding Web Content: QuickConnectiPhone 19 Section 8: Embedding Web Content: PhoneGap 23 Summary 24 2 JavaScript Modularity and iPhone Applications 25 Section 1: Modularity 25 Section 2: The QuickConnect JavaScript Framework—A Modularity Example 26 Section 3: The QuickConnectiPhone Implementation of the Modular Design 34 Section 4: Business and View Application Controller Implementations 38 Section 5: Error Application Controller Implementation 42 Section 6: Application Functionality Creation Steps 43 Summary 43 3 Creating iPhone User Interfaces 45 Section 1: Apple’s Human Interface Guide 45 Section 2: List- and Browser-Based Interfaces 48 Section 3: Nonlist-Based View Applications 51 [...]... tab in the upper-left hand corner of the Inspector, change the ID field to read display, and then clear the Label field Add a Push button to the interface by dragging and dropping it outside the text field The inspector now displays the information for the button instead of the text field Select the blue cube in the upper right-hand corner of the Inspector dialog.This causes the Behaviors tab to appear.This... to import them again into Xcode Next, right-click the Parts group and import the files in the Parts folder Repeat this for the Images group and the Images folder, and you are almost ready to run the application Because files were added to the Resources group, Xcode needs to be told to include them in the resources used by the application Expand the Targets selection near the bottom of the screen, and. .. interface and interaction for iPhone hybrid applications are created using HTML, JavaScript, and CSS, Dashcode is where you do most of your development and debugging Dashcode’s drag -and- drop interface builder is unique in its scope and ease of use Dashcode is used to create most of the application, and it also used to debug it using the simulator and built-in debugging tools Because most of the code for iPhone. .. part of the chapter shows how the code behind the JavaScript call is written and how it works.You can decide how deep into the JavaScript and Objective-C you want to delve The book is organized as follows: Chapter 1, Developing with Dashcode and Xcode,” teaches you how to use Dashcode and Xcode together with QuickConnectiPhone and PhoneGap to quickly create fun -to- use applications that run on the iPhone. This... compiles and displays the HTML page, as shown in Figure 1.7 pg_hello Figure 1.7 A running PhoneGap application It is also possible to use Dashcode to create the HTML, CSS, and JavaScript for a PhoneGap application.This is done by starting Dashcode and double-clicking the Custom Web Application template.Add the same Text and Push Button elements, and create the listener for the button in the same way as the. .. show the deployment screen.This enables you to save the completed HTML, CSS, and JavaScript to disk in a form that is ready to embed in your application Enter a name for a new directory in the Path field to create a directory on the hard drive of your machine .The files are then 3 4 Chapter 1 Developing with Dashcode and Xcode Figure 1.2 The simple example application runs in the Dashcode simulator after... an HTML div tag into the underlying index .html file of your application and some JavaScript to fill it with whatever text, background colors, and so on that you choose For this example, you change the id of the text div to display and empty the text field.This is done using the interface entity inspector Selecting the Inspector icon in the top bar of Dashcode activates this dialog Select the red and. .. blank 1 Developing with Dashcode and Xcode When unique, exciting, hybrid iPhone applications the power andofease of use needed used together, Dashcode and Xcode provide to create Because both these tools were extended with custom templates for hybrid iPhone applications, you do not have to “roll your own” Objective-C wrapper In the first three sections, you learn how to use existing hybrid iPhone application... after the button is clicked stored in this new directory.They are also ready to be imported into Xcode Figure 1.3 shows the deployment screen For more information about the JavaScript files included in this template and how to use them to make application creation easier, see Chapter 2 Section 2: Using Xcode and the Custom QuickConnect Template Because you ran the QuickConnectFamily installer, the Xcode... references to them is up to you How do you decide? Each method has its advantages If you copy the files, the project directory is complete and can be passed to other developers who do not need to replicate the directory structure of the machine that holds the existing files If you use the reference method, you can go back into Dashcode to make changes, and then export the project to overwrite the files . ptg Developing Hybrid Applications for the iPhone ptg This page intentionally left blank ptg Developing Hybrid Applications for the iPhone Using HTML, CSS, and JavaScript to Build Dynamic Apps. Cataloging-in-Publication Data Barney, Lee. Developing hybrid applications for the iPhone : using HTML, CSS, and JavaScript to build dynamic apps for the iPhone / Lee S. Barney. p. cm. Includes index. ISBN. ptg ptg Praise for Developing Hybrid Applications for the iPhone For those not ready to tackle the complexities of Objective-C, this is a great way to get started building iPhone apps. If you know the