Summary of Contents
Page 1
III'..I"i:0"ViA-f.'iMe',1 1BeginningiOSApplicationDevelopmentwithHTML and JavaScript «Richard WagneractionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 2
ffirs.indd ivffirs.indd iv12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 3
BEGINNING IOS APPLICATION DEVELOPMENT WITH HTML AND JAVASCRIPT®INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiiPART I GETTING STARTEDCHAPTER 1 Introducing iOS Development Using Web Technologies . . . . . . ...
Page 4
PART V NEXT STEPS: DEVELOPING NATIVE IOS APPLICATIONS WITH HTML AND JAVASCRIPTCHAPTER 19 Preparing for Native iOS Development . . . . . . . . . . . . . . . . . . . . . . . . . . 333CHAPTER 20 PhoneGap: Native Apps from Your HTML, CSS, and JavaScript . . . . . . . . . . . . . . . . . . . . . . ....
Page 5
BEGINNING iOS Application Development with HTML and JavaScript®ffirs.indd iiiffirs.indd iii12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 6
ffirs.indd ivffirs.indd iv12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 7
BEGINNING iOS Application Development with HTML and JavaScript®Richard WagnerJohn Wiley & Sons, Inc.ffirs.indd vffirs.indd v12/21/11 2:29:58 PM12/21/11 2:29:58 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http...
Page 8
Beginning iOS Application Development with HTML and JavaScript®Published byJohn Wiley & Sons, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256actionURI(http://www.wiley.com):w actionURI(http://www.wiley.com):w actionURI(http://www.wiley.com):w.wiley.comCopyright © 2012 by John Wiley &am...
Page 9
To KimmyWags and the J-Teamffirs.indd viiffirs.indd vii12/21/11 2:30:03 PM12/21/11 2:30:03 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 10
ffirs.indd viiiffirs.indd viii12/21/11 2:30:04 PM12/21/11 2:30:04 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 11
ABOUT THE AUTHORRICHARD 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 NetObj...
Page 12
ffirs.indd xffirs.indd x12/21/11 2:30:04 PM12/21/11 2:30:04 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 13
CREDITSEXECUTIVE EDITORCarol LongPROJECT EDITORKelly TalbotTECHNICAL EDITORMichael GilbertPRODUCTION EDITORKathleen WisorCOPY EDITORCharlotte KughenEDITORIAL MANAGERMary Beth Wakefi eld FREEL ANCER EDITORIAL MANAGERRosemarie GrahamASSOCIATE DIRECTOR OF MARKETINGDavid MayhewMARKETING MANAGERAshle...
Page 14
ffirs.indd xiiffirs.indd xii12/21/11 2:30:05 PM12/21/11 2:30:05 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 15
ACKNOWLEDGMENTSTHE 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 foremo...
Page 16
ffirs.indd xivffirs.indd xiv12/21/11 2:30:05 PM12/21/11 2:30:05 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 17
CONTENTSINTRODUCTION xxiiiPART I: GETTING STARTEDCHAPTER 1: INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIES 3Discovering the Safari on iOS Platform 3Key Safari Features for Web Developers 6Four Ways to Develop Web Apps for iOS 7The Finger Is Not a Mouse 9Limitations and Constraints 10Settin...
Page 18
xviCONTENTSAdding a Node to the DOM 55Creating Other Elements 57Setting a Value to an Attribute 59Moving a Node 60Cloning a Node 60Removing a Node from the DOM 61Removing an Attribute 62CHAPTER 4: WRITING YOUR FIRST HELLO WORLD APPLICATION 65Setting Up 66Creating Your Index Page 66Creating t...
Page 19
xviiCONTENTSDesigning for Touch 109Working with Fonts 110Best Practices in iOS UI Design 111Adding Finishing Touches 112CHAPTER 7: DESIGNING FOR IPAD 117Special iPad Considerations 117Design Essentials 118Dealing with Scrolling 118Split View Design Pattern 119Designing a UI for iPad 120CHAPTER ...
Page 20
xviiiCONTENTSScripting UI Behavior 178On Document Load 179Loading a Standard iUI Page 181Handling Link Clicks 183Loading a Dialog 184CHAPTER 10: HANDLING TOUCH INTERACTIONS AND EVENTS 189Three Types of Touch Events 189Mouse-Emulation Events 190Many Events Handled by Default 190Conditional Events ...
Page 21
xixCONTENTSCHAPTER 13: PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS 235Working with Bookmarklets 236Adding a Bookmarklet to Safari on iOS 236Exploring How Bookmarklets Can Be Used 237Storing an Application in a Data URL 239Constraints and Issues with Using Data URLs 239Developing a Da...
Page 22
xxCONTENTSCHAPTER 16: BUILDING WITH WEB APP FRAMEWORKS 287Using jQuery Mobile 288Using iWebKit 293CHAPTER 17: BANDWIDTH AND PERFORMANCE OPTIMIZATIONS 303Optimization Strategies 303Best Practices to Minimize Bandwidth 304General 304Images 305CSS and JavaScript 305Compressing Your Application 306G...
Page 23
xxiCONTENTSPART V: NEXT STEPS: DEVELOPING NATIVE IOS APPLICATIONS WITH HTML AND JAVASCRIPTCHAPTER 19: PREPARING FOR NATIVE IOS DEVELOPMENT 333Downloading Xcode 333Joining the iOS Developer Program 334Getting an iOS Developer Certifi cate 335Retrieving the Developer Certifi cate 337Adding a Dev...
Page 24
flast.indd xxiiflast.indd xxii12/21/11 8:06:32 AM12/21/11 8:06:32 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 25
INTRODUCTIONTHE 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...
Page 26
xxivINTRODUCTION 2. Working with Core Technologies. Provides an overview of some of the key technologies you’ll be working with as you develop iOS web apps. 3. The Document Object Model. Explores how you can work with an HTML page as a tree in order to navigate and control various parts in you...
Page 27
INTRODUCTIONxxv 19. Preparing for Native iOS Development. Walks you through all of the steps needed to join the Apple Developer Program and obtaining necessary credentials for publishing to the App Store. 20. PhoneGap: Native Apps from Your HTML, CSS, and JavaScript. How do you know when you nee...
Page 28
xxviINTRODUCTIONAs for styles in the text:We highlight new terms and important words when we introduce them.We show keyboard strokes like this: Ctrl+A.We show fi le names, URLs, and code within the text like so: persistence.properties. We present code in two different ways:We use a monofont type...
Page 29
INTRODUCTIONxxviiErrata link. You will be taken to a page which lists all errata that has been submitted for the book and posted by Wrox editors. If you discover an issue that is not found on the Errata page, I would be grateful for you to let us know about it. To do so, go to www.wrox.com/contac...
Page 30
flast.indd xxviiiflast.indd xxviii12/21/11 8:06:51 AM12/21/11 8:06:51 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 31
BEGINNING iOS Application Development with HTML and JavaScript®flast.indd xxixflast.indd xxix12/21/11 8:06:51 AM12/21/11 8:06:51 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 32
flast.indd xxxflast.indd xxx12/21/11 8:06:51 AM12/21/11 8:06:51 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 33
PART IGetting StartedCHAPTER 1: Introducing iOS Development Using Web TechnologiesCHAPTER 2: Working with Core TechnologiesCHAPTER 3: The Document Object ModelCHAPTER 4: Writing Your First Hello World ApplicationCHAPTER 5: Enabling and Optimizing Web Sites for the iPhone and iPadc01.indd 1c01....
Page 34
c01.indd 2c01.indd 212/22/11 8:48:52 AM12/22/11 8:48:52 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 35
Introducing iOS Development Using Web TechnologiesWHAT YOU WILL LEARN IN THIS CHAPTER:Using Safari on iOS as a development environment Developing touch-oriented apps Setting up your development environment The introduction of the iPhone, and the subsequent unveilings of the iPod touch and iPad, r...
Page 36
4 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESJavaScript (ECMAScript 3 (ECMA 262), JavaScript 1.4)AJAX (for example, XMLHTTPRequest)SVG (Scalable Vector Graphics) 1.1HTML5 media tagsAncillary technologies (video and audio media, PDF, and so on)Safari on iOS (which I refer to...
Page 37
Table 1-1 shows the bandwidth performance of Wi-Fi, 3G, and the older EDGE networks.Launching: Native applications are all launched from the main Home screen of the iOS device (see Figure 1-3). In the original iPhone OS release, Apple provided no way for web apps to be launched from here, which m...
Page 38
6 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESKEY SAFARI FEATURES FOR WEB DEVELOPERS There are several capabilities available to web app developers with the recent releases of iOS. These are highlighted in the following list.Geolocation: Safari on iOS supports HTML5 geolocat...
Page 39
Google, for example, uses this capability with its Web-based Latitude service for sharing your location with your friends. HTML5 Media Tags: Safari on iOS supports HTML5 video and audio elements for embedding video and audio content in Web pages. These new elements eliminate the need for complica...
Page 40
8 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIES(see Figure 1-10). These sites avoid using technologies that the Apple mobile devices do not support, including Flash, Java, and other plug-ins. The basic structure of the presentation layer also maximizes use of blocks and colum...
Page 41
Level 4 — iOS web application: The fi nal approach is to provide a web application that is designed exclusively for iPhone and/or iPad and has a UI design that resembles a native app or one that takes full advantage of the capabilities of iOS devices (see Figure 1-13). One of the design goals ...
Page 42
10 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESLIMITATIONS AND CONSTRAINTSBecause iPhone, iPad, and iPod touch are mobile devices, they are obviously going to have resource constraints that you need to be fully aware of as you develop applications. Table 1-3 lists the resour...
Page 43
SETTING UP YOUR DEVELOPMENT ENVIRONMENT ON A LOCAL NETWORKBecause iOS does not allow you to access the local fi le system, you cannot place your application directly onto the device itself. As a result, you need to access your web application through another computer. On a live application, you ...
Page 44
12 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESYou can add fi les either in the computer’s website directory (/Library/WebServer/Documents) or your personal website directory (/Users/YourName/Sites) and then access them from the URL bar on your iPhone or iPad (see Figure ...
Page 45
EXERCISES 1. What’s the diff erence between a native iOS app and a web app? 2. Can a web app be placed on the Home screen alongside native apps? 3. Does fi nger input always correspond to mouse input?Answers to the Exercises can be found in Appendix A.Setting Up Your Development Environment o...
Page 46
14 ❘ CHAPTER 1 INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIESWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSKey Safari features for developersGeolocation support, HTML5 media tags, CSS animation and eff ects, and SVGSupporting mobile devices on your websiteLevel 1: Fully compatible webs...
Page 47
Working with Core TechnologiesWHAT YOU WILL LEARN IN THIS CHAPTER:Adding video to your app Discovering basic JavaScript coding techniquesWorking with functions and arrays Although a native iPhone app is built entirely in Objective-C, an iPhone web app is composed of a variety of core technologies...
Page 48
16 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESYou use the video element to defi ne a video clip or stream, much like an img tag defi nes an image on your page. The promise of the video tag is that it eliminates the complicated hoops that developers have to go through with embedded media cont...
Page 49
Exploring HTML 5 Media Elements ❘ 17TRY IT OUT Adding a Video Adding a video into your app now becomes as easy as adding the video tag to your page. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch02-Ex1.html.<!DOCTYPE html PUBLIC “-//W3C//D...
Page 50
18 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESSCRIPTING JAVASCRIPTThe scripting layer of your iOS web app is often the “brains behind the operation” — the place on the client-side in which you add your programming logic. That’s why as you begin to develop more and more sophisticated we...
Page 51
Scripting JavaScript ❘ 19 { alert(message); } // Otherwise, show this message else alert(“I withhold all greetings.”);}// Call function showGreeting(true)</script>Notice a few aspects of the JavaScript syntax: Case sensitivity: JavaScript is a case-sensitive language. The...
Page 52
20 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESVariablesA variable is an alias that stores another piece of data — a text string, a number, a true or false value, or whatever. Variables are core to programming because they eliminate the need for having everything known while you are developin...
Page 53
Scripting JavaScript ❘ 21var element = document.getElementById(“container”); // Array item var item = myArray[0]; If you are coming from a Java, ActionScript, or other stronger typed language, you are probably wondering where you declare the type of data that can be stored by the variab...
Page 54
22 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESvar mainWindow; // Invalidvar is; var default; var window; Accessing a Variable After you defi ne a variable and assign it a value, each time you reference it in your code, the variable represents the value that was last assigned to it. In the fol...
Page 55
Scripting JavaScript ❘ 23The variable is created when the boldText() function runs, but it no longer exists after the function ends. However, if you defi ne the variable at the top level of the scripting block — in other words, outside of a function — then that variable (known as a global ...
Page 56
24 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESWhen this function is executed the alert box displays the following text: Don’t hassle me, I’m a local variable, and you cannot stop me. Notice that the local variable msg took precedence over the global variable msg. However, after that functi...
Page 57
Scripting JavaScript ❘ 25In this example, document is the DOM object name for the HTML document and is all in lowercase. The method getElementsByTagName() is a compound word, so that the fi rst letter of the additional words in the method are capitalized. My variable divElements uses lowerCame...
Page 58
26 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESOperatorsAn operator is a no-frills symbol used to assign values, compare values, manipulate expressions, or connect pieces of code together. The equal sign is perhaps the most common operator and you use it to assign a value to an expression. For ...
Page 59
Scripting JavaScript ❘ 27OPER ATOREX AMPLEDESCRIPTION===x===y Evaluates both for value and data type (for example, if x = “5” and y = 5, then x==y is true, but x===y is false) <x<yx is less than y <=x<=yx is less than or equal to y>x>yx is greater than y >=x>=yx is g...
Page 60
28 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESTABLE 2-8: JavaScript Reserved Wordsabstractbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumexportextendsfalsefi nalfi nallyfl oatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpacka...
Page 61
Scripting JavaScript ❘ 29A prompt box is displayed to the user. The typed response of the user is assigned to the response variable. The if statement then evaluates whether response is equal to “Jerry Monroe.” If so, then the alert box is displayed. Otherwise, if block is ignored. I mention...
Page 62
30 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESif/else StatementsThe if/else statement extends the if statement so that you can also execute a specifi c block of code if the expression evaluates to true and a separate block if it is false. The basic structure is the following: if (condition) {...
Page 63
Scripting JavaScript ❘ 31 break; case label2: //code to be executed if expression equals label2 break;case label3 : //code to be executed if expression equals label3 break;default: // code to be executed if expression is different // from both label1, label2, and label3}The switch ...
Page 64
32 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIEScode until a condition changes. JavaScript provides two programming constructs for these purposes: for and while blocks. A for loop cycles through a block of code x number of times. A while loop executes a block of code as long as a specifi c cond...
Page 65
Scripting JavaScript ❘ 33In this example, the code block loops as long as num is less than 100. However, suppose that num has the value of 101; the while code block is never executed. The do/while loop is similar except that the condition evaluates at the end of the loop instead of at the start...
Page 66
34 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESUsing JSDoc Comments The Java world has a documentation generator called Javadoc, which is a tool that can generate HTML-based documentation from the comments a developer adds to the source code. JSDocToolkit is an open-source tool written in Perl ...
Page 67
Scripting JavaScript ❘ 35FunctionsA function is the basic building block or organizing unit of JavaScript. A foundation of a house is composed of many building blocks. In the same way, a JavaScript script usually consists of a set of functions. These building blocks may be easy to take for gran...
Page 68
36 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIES 2. Add the addAndDisplay() function inside the script element: function addAndDisplay(a,b){ var total = a + b; alert(total); }Code snippet BIDHJ-Ch02-Ex2.html 3. Inside the script element, add the following code just after the function you just ...
Page 69
Scripting JavaScript ❘ 37function createProfile(el){ if (el == null) { alert(“Undefined DOM element. Cannot continue. :(“); return; } else { // do something really important to el } }In this example, the function checks to see if the el parameter is null. If so, then the...
Page 70
38 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESHowever, suppose your needs change over time. Instead of two numbers, you now need to add three or four or fi ve numbers at a time. Instead of writing separate functions for each case, you could overload the add() function to do all of these summi...
Page 71
Scripting JavaScript ❘ 39 } else return ”Unsupported data type”; }}The add() function examines the type of the fi rst parameter and assigns the result to argType. If the type is a number then the routine continues just like the earlier example. If the type is a string, howeve...
Page 72
40 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESAlternatively, you can use the backslash character (\) to “escape” an apostrophe or quotation mark if the string is enclosed by the same type of mark. Here are a couple cases: var str2 = ‘I\’m happy, aren\’t I’; var el = “<div id=\...
Page 73
Scripting JavaScript ❘ 41if (flagUser == true){ alert(“Hey User! You are hereby flagged.”);}The if statement displays the alert box if flagUser evaluates to true. Note that a Boolean value is not wrapped in quotation marks. So notice the difference: // Boolean var isABoolean = true;var isA...
Page 74
42 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESArrays So far, I’ve been talking about variables as individuals. An array, in contrast, is a collection of values. They are grouped together and indexed so that you can access a specifi c item stored in the group. JavaScript stores arrays as Arr...
Page 75
Scripting JavaScript ❘ 43Getting and Setting the Size of an ArrayYou can get the number of items in an array by accessing its length property. (Yes, an array is an object, so it has its own set of properties and methods.) For example: var primeNumbers = [1,3,5,7,11];alert(primeNumbers.length));...
Page 76
44 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESNotice that the length property is assigned to a variable rather than being included directly inside the for loop like this: // Valid, but less efficient for(i=0; i<castMembers.length; i++){}Although that loop is perfectly valid, it is not as ef...
Page 77
Scripting JavaScript ❘ 45string[Second pass]100truestringHowever, when you pass an object or a function into an array, the array stores a reference to those advanced data types rather than a copy of it. As a result, any changes you make to the object or function outside of the array are refl e...
Page 78
46 ❘ CHAPTER 2 WORKING WITH CORE TECHNOLOGIESWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSEmbedding video or audio into your appAdd a video or audio element to your HTML fi le.VariablesA variable is an alias that stores another piece of data.Scope of variablesVariable scope refers to the...
Page 79
The Document Object ModelWHAT YOU WILL LEARN IN THIS CHAPTER:Looking at your document as a treeAccessing the DOM from your codeEditing your document from the DOM A web page is an HTML document containing markup tags and content. But, as you develop web apps, you’ll fi nd it more helpful to thi...
Page 80
48 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELLevel 2: Level 2 support extends DOM support to include new core functionality, event listeners, and CSS DOM. Safari and other browsers provide generally strong support for most aspects of DOM2. Level 3: Level 3 adds support for newer properties and met...
Page 81
tree as well. The text content inside an element is a child node of the parent element. So, for example, Pretty lame paragraph is considered a child node of the p element that contains it. Attributes are also considered nodes, but are a bit of a special case. They don’t participate in the paren...
Page 82
50 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELFIGURE 3-3documentchildNodeschildNodeschildNodeschildNodeschildNodesdocumentdocumentattributesattributesReally Awesome Web PagenoedType=Node.TEXT_NODEtitlenodeType=Node.ELEMENT_NODEheadnodeType=Node.ELEMENT_NODEbodynodeType=Node.ELEMENT_NODEid=“contai...
Page 83
Node.DOCUMENT_NODENode.DOCUMENT_TYPE_NODE Node.DOCUMENT_FRAGMENT_NODE Node.NOTATION_NODEEach of the Node constants represent an unsigned short number. ELEMENT_NODE represents 1, ATTRIBUTE_NODE equals 2, and so on. ACCESSING THE DOM FROM JAVASCRIPT You access the document object through a named ob...
Page 84
52 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELAccessing a Set of Elements In addition to accessing a specifi c element, you’ll also fi nd occasions in which you’ll want to access all element nodes of a given kind. You can also access a set of elements by using the document object’s getEleme...
Page 85
Accessing Family MembersYou can access nodes related to other nodes through more “familial ways” through several node properties: parentNode returns the parent node of the current element.firstChild gets the fi rst child of a node. lastChild gets the last child of a node. previousSibling get...
Page 86
54 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELdoing so because attributes are inextricably associated with an element. Not surprisingly, attributes are accessible through a DOM element by accessing its attributes property or by using one of three methods. Accessing All AttributesThe object that ret...
Page 87
MANIPULATING THE DOM You can do more than use the DOM to look at a document. In fact, you can also manipulate it — creating nodes, adding them to the DOM tree, editing nodes, and removing parts of a document for which you have no more use. In the sections that follow, I show you how to add and ...
Page 88
56 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODEL<body><div id=”content”><h1 id=”header1”>Welcome to the World of Cinema</p><p id=”p1”>Favorite films are shown below:</p><ol id=”movieList”><li id=”film_30329”>The Shawshank Redemption&...
Page 89
<li id=”film_20216”>Braveheart</li><li/><li id=”film_28337”>Groundhog Day</li><li/><ol>Creating Other Elements The document object contains methods for creating the rest of the common node types: attribute, text, comment, and document fragment. Ea...
Page 90
58 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELdf.appendChild(e); }document.getElementById(“content”).appendChild(df); TRY IT OUT Adding a Complete NodeNow that you know how to create the other node types, I want to revisit the movie list example. Instead of adding empty li elements, add the att...
Page 91
a = document.createAttribute(“id”, “film_29323”); t = document.createTextNode(“Amélie (Le Fabuleux destin d’Amélie Poulain)”); e.appendChild(a); e.appendChild(t); nd = document.getElementById(“film_30202”); document.getElementById(“movieList.).insertBef...
Page 92
60 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELHere’s a little more detailed example of using setAtttribute() to clean up a document. Suppose you have an HTML document that has attributes with uppercase names. If you want to convert them to all lowercase, you could the following script: var all = ...
Page 93
not part of the DOM. You can then add it wherever you want using the familiar appendChild() and insertBefore() methods. This method takes a single Boolean parameter: cloneNode(deepBoolean)If the parameter is set to true then all subnodes of the current node are copied along with it. When cloning ...
Page 94
62 ❘ CHAPTER 3 THE DOCUMENT OBJECT MODELIn this routine, the while loop checks to see if there is a child node for the current node. If so, then the child node is removed using removeChild(). This process repeats until there no childNodes[0].Removing an AttributeSuppose you have had it with a...
Page 95
WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSAccessing elements from the DOMUse document.getElementById() or document.getElementsByTagName().Accessing attributesUse the attributes property of a node to get a list of attributes; use getAttribute() to get a specifi c attribute value. Adding to...
Page 96
c03.indd 64c03.indd 6412/22/11 8:57:04 AM12/22/11 8:57:04 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 97
Writing Your First Hello World ApplicationWHAT YOU WILL LEARN IN THIS CHAPTER:Creating your index page Adding styles Programming the UI with JavaScriptDeploying your app Okay, enough leg work. It’s time to start developing your fi rst app. In this chapter, I walk you through the full start-to-...
Page 98
66 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONSETTING UP Before you can begin developing an application, you need to set up a place for your app on a remote web server or on a server on your development machine. Make sure the server can be accessed via Wi-Fi from an iOS device. TRY...
Page 99
TRY IT OUT Creating the Index Page To create the basic shell of your app, follow these steps: 1. Create a new text fi le in your topfilmz folder and save it as index.html. 2. Enter the following HTML text: <!DOCTYPE html><html><head><title>Top Filmz</title></hea...
Page 100
68 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONWithin an app, you can place anything that you want to on a page. However, a typical template that many apps use is a standard header-content-footer division. You can achieve this in jQuery Mobile by using the following code: <div da...
Page 101
2. Inside the header div, add the app title: <div data-role=”header”> <h1>Top Filmz</h1> </div>Code snippet index.html 3. Inside the footer div, add a credit line: <div data-role=”footer”><h5>Hello World Apps</h5></div>Code snippe...
Page 102
70 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONAlthough the app is not functional yet, go ahead and sneak a peek at the main screen by opening the page on your iPhone or other iOS device. You can do so by typing the URL of the app on your development server. In my case, I would ente...
Page 103
href=”http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css” /> <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.3.min.js”> </script> <script type=”text/javascript” src=”http://code.jquery.com/mobile/1.0b...
Page 104
72 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONLISTING 4-1 (continued) src=”http://ecx.images-amazon.com/images/I/519NBNHX5BL._SL500_AA300_.jpg”/> <a href=”http://www.imdb.com/title/tt0111161/” data-role=”button”>Go to IMDB Page</a> <a hr...
Page 105
<div data-role=”footer”> <h5>Hello World Apps</h5> </div></div><div data-role=”page” id=”groundhogDay”> <div data-role=”header”> <h1>Groundhog Day</h1> </div> <div data-role=”content” style=...
Page 106
74 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATION <div data-role=”header”> <h1>Chariots of Fire</h1> </div> <div data-role=”content” style=”background-color:#ffffff”> <img class=”poster” src=”http://ecx.images-amaz...
Page 107
FIGURE 4-2FIGURE 4-3That’s it! You have created your fi rst iPhone app. However, here’s an Easter egg bonus for what you already created. If you have an iPad, open the web app from the iPad version of Safari. Surprise! jQuery Mobile automatically displays the app in a customized manner suite...
Page 108
76 ❘ CHAPTER 4 WRITING YOUR FIRST HELLO WORLD APPLICATIONEXERCISES 1. What are the benefi ts to using a mobile framework such as jQuery Mobile? 2. For a jQuery Mobile-based app, do all app pages need to be stored in separate fi les? 3. How do you link to another page that is stored in the s...
Page 109
WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSFind a location for your web appDetermine where you want to set up your developer server — either on a remote server or on a server running on your development machine. Use jQuery Mobile as a mobile app frameworkUse <!DOCTYPE html> and add ...
Page 110
c04.indd 78c04.indd 7812/21/11 3:37:40 PM12/21/11 3:37:40 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 111
Enabling and OptimizingWeb Sites for the iPhoneand iPadWHAT YOU WILL LEARN IN THIS CHAPTER:Making your website compatible with iOS devices Making your site easy to navigate from iPhone and iPad Adding custom style sheets for iOS devicesAlthough this book is focused on developing web apps for iOS ...
Page 112
80 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADto be expected for being on the cutting edge of technology. However, today, if you design or run a website, your visitors won’t be nearly as forgiving. In the past, you could design a minimalist, text-only style sheet f...
Page 113
Tier 1: iOS Compatibility ❘ 81Therefore, if you plan on using Flash for an interactive portion of a page then you should also plan to degrade gracefully to a static graphic or alternative content. At a minimum, you should place a disclaimer over Flash content. It’s not ideal, but it is better...
Page 114
82 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPAD<head><title>Company XY Home Page</title><meta name=“viewport” content=“width=780”><script type=“text/javascript” src=“swfobject.js”></script></head><body>&l...
Page 115
Tier 2: Navigation-Friendly Websites ❘ 83it is loading as being 980 pixels in width, and then shrinks the page scaling so that the entire page width can fi t inside of the 320-pixel viewport (see Figure 5-3). Here is the default declaration:<meta name=“viewport” content=“width=980;use...
Page 116
84 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADIn addition to the width property, you can also programmatically control the scale of the viewport when the page initially loads through the initial-scale parameter. For example, if you want to set the initial scale to be...
Page 117
Tier 2: Navigation-Friendly Websites ❘ 85PROPERT YDEFAULT VALUEMINIMUM VALUEMA XIMUM VALUEDESCRIPTIONminimum-scale0.25>010Use to set the lower end for scalingmaximum-scale1.6>010Use to set the higher end for scalingAlthough it’s not generally recommended, you can specify the width of th...
Page 118
86 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADTRY IT OUT Making a Web Page Easy to Navigate for iOS UsersWith a few simple tweaks, you can transform the page into something far easier for smaller devices (iPhone and iPod touch) to work with. Follow the instructions b...
Page 119
Tier 3: Custom Styling ❘ 87Defi ning Multiple Columns (Future Use)The latest versions of WebKit (Safari) and Mozilla-based browsers provide support for new CSS3 properties that enable you to create newspaper-like, multicolumn layouts. For a content block, you can specify the number of columns,...
Page 120
88 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADprovide a richer, more tailored experience for Safari on iOS. The easiest way to do this is to create custom styles specifi cally for iPhone and iPad.Media QueriesIf you want to specify a style sheet for iOS usage, you c...
Page 121
Tier 3: Custom Styling ❘ 89In general, for most website viewing, you will want to keep this property enabled. For iPhone-specifi c contexts in which you want more control over scaling and sizing, you need to disable this option.Case Study: Enabling an Existing Web SiteConsider a case study exa...
Page 122
90 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPAD rel=”stylesheet” href=”iPhone.css” /><!-<![endif]-><link media=”screen and (min-device-width: 1025px)” href=”default.css” type=”text/css” rel=”stylesheet”/>Next, inside the HT...
Page 123
Tier 3: Custom Styling ❘ 91}#pageheader { font-family:Helvetica,Arial,Verdana,Sans-serif; font-weight: bold; font-size: 2.2em; margin-bottom: 1px; margin-top: 3px;}The next issue is to shrink the size of the banner at the top of the page. Here’s the pre-iPhone style for the banner text:#...
Page 124
92 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADAs you can see, you can often transform your existing website into an iPhone-friendly site with a handful of well-thought-out style changes. TIER 4: PARALLEL SITESUnless you are creating an iPhone or iPod touch applicatio...
Page 125
Tier 4: Parallel Sites ❘ 93 3. Add the following script to the document head: <script type=“application/x-javascript”>function isiPhone() { result ((navigator.platform.indexOf(“iPhone”) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1))}function isiPad() { resul...
Page 126
94 ❘ CHAPTER 5 ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPADEXERCISES 1. Is Flash supported on iOS devices? 2. What is the purpose of a viewport meta tag? 3. What constant should you use to size the page to the width of the device’s viewport? 4. Why is it a good idea to make ...
Page 127
Tier 4: Parallel Sites ❘ 95WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSMaking your website compatible with iOS devicesAvoid using Adobe Flash media, Java applets, and Plug-ins. Also, avoid using the CSS property position:fixed. Making your site easy to navigate with iOS devicesAdd a viewpo...
Page 128
c05.indd 96c05.indd 9612/21/11 3:43:13 PM12/21/11 3:43:13 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 129
PART IIApplication DesignCHAPTER 6: Designing the iPhone UICHAPTER 7: Designing for iPadCHAPTER 8: Styling with CSSc06.indd 97c06.indd 9712/21/11 5:33:55 PM12/21/11 5:33:55 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.c...
Page 130
c06.indd 98c06.indd 9812/21/11 5:33:59 PM12/21/11 5:33:59 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 131
Designing the iPhone UIWHAT YOU WILL LEARN IN THIS CHAPTER:Understanding the iPhone viewportExploring iOS design patterns Designing for touchMore than anything else, the iPhone and iPad are known for their usability, intuitiveness, and overall positive user experience. The native iOS user interfa...
Page 132
100 ❘ CHAPTER 6 DESIGNING THE IPHONE UIis no different. All of the innovations that have transpired — such as HTML5 and Ajax — have revolutionized the structure and composition of a website but not how users interact with it. Moreover, mobile and handheld devices offered a variety of new ...
Page 133
Users can scroll around the viewport with their fi ngers. However, they cannot resize it. To use desktop lingo, an iOS application is always “full screen” and takes up all available space.If the on-screen keyboard is displayed, the visibility of the viewport is further restricted with the ke...
Page 134
102 ❘ CHAPTER 6 DESIGNING THE IPHONE UIBecause users have a much smaller viewport than they are used to working with on their desktop, the iPhone viewport has a scale property that you can manipulate. When Safari on iOS loads a web page, it automatically defi nes the page width as 980 pixels...
Page 135
Categorizing Apps To fully appreciate the design decisions that went into these applications, you need to understand the differences in the way in which users use iOS applications compared to their desktop counterparts. After all, consider the types of applications that you fi nd installed on yo...
Page 136
104 ❘ CHAPTER 6 DESIGNING THE IPHONE UIThe document is the primary point of focus in a traditional desktop application, but it is not surprising for a document on an iOS device to be consumable and temporary. You have the Pages, Numbers, and Keynote applications for iOS, but many of the docum...
Page 137
However, no matter the style of the navigation lists, they are each designed to quickly take you to a destination page in as few interactions as possible.What’s more, the top title bar of the app usually provides contextual information to help users understand where they are in the hierarchy of...
Page 138
106 ❘ CHAPTER 6 DESIGNING THE IPHONE UITherefore, as you begin to examine how you should design the UI of your application, look to see what parallels there are with the built-in iPhone application design. Even if you don’t emulate its look and feel, you might want to have a consistent appr...
Page 139
to the page and how to get back. If the page is at the top level of the application then there is no back button.Screen title: Each screen should have a title displayed in the center of the toolbar. The title of the page should be one word and appropriately describe the content of the current scr...
Page 140
108 ❘ CHAPTER 6 DESIGNING THE IPHONE UITable 6-4 lists each of the specifi c metrics to emulate the same look and feel of the Apple design in edge-to-edge navigation lists. TABLE 6-4: Metrics for Apple’s Edge-to-Edge DesignITEMVALUECell height (including bottom line)44pxCell width320px (po...
Page 141
DESIGNING FOR TOUCHOne of the most critical design considerations you need to take into account for iPhone interfaces in particular is that that you are designing an interface that interacts with a fi nger, not a mouse or other mechanical pointing device. A mouse pointer has a small point that...
Page 142
110 ❘ CHAPTER 6 DESIGNING THE IPHONE UIIn addition to sizing and spacing issues, another important design decision is to minimize the need for text entry. Use select lists rather than input fi elds where possible. What’s more, use cookies to remember last values entered to prevent constant...
Page 143
Safari on iOS automatically substitutes three unsupported fonts with their built-in counterparts. Courier New is substituted when Courier is specifi ed. Helvetica is substituted for Helvetica Neue, and Times New Roman is used in place of Times.BEST PRACTICES IN IOS UI DESIGNWhen you are designin...
Page 144
112 ❘ CHAPTER 6 DESIGNING THE IPHONE UIPlace text entry fi elds at the top of the page. When your application requires data-entry fi elds, work to place these input fi elds as near to the top of the page as possible. Top positioning of text entry fi elds helps minimize the chances of the ...
Page 145
6. Add the following link tags to the document head:<link rel=”apple-touch-icon” href=”icon.png”/><link rel=”apple-touch-icon” sizes=”72x72” href=”icon-ipad.png” /><link rel=”apple-touch-icon” sizes=”114x114” href=” icon-iphone4.png” /> 7. Save y...
Page 146
114 ❘ CHAPTER 6 DESIGNING THE IPHONE UIEXERCISES 1. When would you use the edge-to-edge navigation list design pattern? 2. What is the minimum pixel size a button or other UI element should generally be for touch? 3. True or False? Comic Sans is a font available on iOS. 4. True or False? ...
Page 147
WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSViewportA viewport is a rectangular area of screen space within which an application is displayed. A user can manipulate what is seen inside of the viewport by resizing the window, scrolling its contents, and, in many cases, changing the zoom level...
Page 148
c06.indd 116c06.indd 11612/21/11 5:34:21 PM12/21/11 5:34:21 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com /http://freepdf-books.com
Page 149
Designing for iPadWHAT YOU WILL LEARN IN THIS CHAPTER:Knowing special design considerations for iPadUnderstanding limitations of Safari on iPadCreating a Split View app The iPad is mobile, but it is not a phone device. That statement is a “no-brainer” obviously, but when designing for the iPa...
Page 150
118 ❘ CHAPTER 7 DESIGNING FOR IPADAdding an iPad-specifi c media query: <link media=”only screen and (min-device-width: 768px) and (max-device-width: 1024px)” type=”text/css” rel=”stylesheet” href=”iPad.css” />Adding iPad-specifi c styles: @media only screen and ...
Page 151
that users will be looking for in an app that targets the iPad device. You can download it at http://cubiq.org/iscroll-4. In addition to more native-like scrolling capabilities, iScroll 4 also provides several additional touch event capabilities including pinch/zoom of content, pull down to refre...
Page 152
120 ❘ CHAPTER 7 DESIGNING FOR IPADDESIGNING A UI FOR IPADWhen you read Chapter 16 you fi nd out that you can create a web app for iPad using popular mobile frameworks, such as jQuery Mobile, and have it behave nicely within the Safari on iOS environment. However, because most of these framew...
Page 153
World app I created in Chapter 5 is a perfect example of this technique. However, suppose you would like your web app to follow closely the native iOS UI guidelines, so that it has a basic “look and feel” that is similar to the native apps that users are familiar with. You can create this “...
Page 154
122 ❘ CHAPTER 7 DESIGNING FOR IPAD 4. Add the main page content inside of the document body: <!-- Begin Page (shown in both landscape and portrait --> <div id=”main” class=”abs”> <!-- Begin Page Header --> <div class=”abs header_upper chrome_light”> ...
Page 155
5. Add the following sidebar-related code after the previous content block inside the document body: <!-- Begin Sidebar (shown as sidebar in landscape, shown as popover in portrait --><div id=”sidebar” class=”abs”> <span id=”nav_arrow”></span> <!-- Ap...
Page 156
124 ❘ CHAPTER 7 DESIGNING FOR IPADFIGURE 7-3FIGURE 7-4c07.indd 124c07.indd 12412/21/11 3:43:46 PM12/21/11 3:43:46 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 157
As you can see from this simple example, Slablet offers you considerable functionality when you have correctly defi ned the right elements in your HTML fi le. Looking under the Slablet hood, there are a few key parts of the template that are worth looking at. First, the master.js fi le is used...
Page 158
126 ❘ CHAPTER 7 DESIGNING FOR IPAD <!-- Main menu button - shown only in Portait mode displays popover menu when pressed --> <span class=”float_left button” id=”button_navigation”> Menu </span> ...
Page 159
3. Replace the empty sidebar content so that it includes the following code: <!-- Begin Sidebar (shown as sidebar in landscape, shown as popover in portrait --><div id=”sidebar” class=”abs”> <span id=”nav_arrow”></span> <!-- App Name --> <di...
Page 160
128 ❘ CHAPTER 7 DESIGNING FOR IPAD <a href=”#”>Kyle Exwhi</a> </li> <li> <a href=”#”>Jason Masters</a> </li> ...
Page 161
9. Open 431.html in your editor. 10. Replace the code in the main_content_inner div with the following code: <div id=”main_content_inner”> <h1>Session 431: Distributing Your App</h1> <p>In this compellings session, Doug Majoring leads you through how to...
Page 162
130 ❘ CHAPTER 7 DESIGNING FOR IPAD suscipit elit odio sed leo. Vivamus ut lobortis velit. Nam pretium vestibulum tellus non vehicula.</p> <p>Proin dolor diam, laoreet vel faucibus nec, malesuada sit amet purus. Proin turpis orci, ultrices at laoreet quis, v...
Page 163
FIGURE 7-5FIGURE 7-6Designing a UI for iPad ❘ 131c07.indd 131c07.indd 13112/21/11 3:43:49 PM12/21/11 3:43:49 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 164
132 ❘ CHAPTER 7 DESIGNING FOR IPADFigure 7-8 shows the example session page. However, what’s important to note about this page is that the content scrolls inside the page div using the popular iScroll.js library. FIGURE 7-7FIGURE 7-8c07.indd 132c07.indd 13212/21/11 3:43:50 PM12/21/11 ...
Page 165
EXERCISES 1. True or False? Although the iPhone should use the viewport meta tag for web apps, the viewport tag is not needed for iPad web apps. 2. Is it better to design for landscape or portrait modes? 3. How can you overcome the limitation of being unable to scroll overfl owing content insid...
Page 166
134 ❘ CHAPTER 7 DESIGNING FOR IPADWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSKey meta tags to add for most every iPad web appViewport meta tag, apple-mobile-web-app-capable meta tagDesign for portrait and landscapeDesign your app to work at 1024 × 768 in landscape and 768 × 1024 in po...
Page 167
Styling with CSSWHAT YOU WILL LEARN IN THIS CHAPTER:Working with text styles and shadows Styling block elements Creating CSS buttons Like its Mac and Windows cousins, the mobile version of Safari on iOS provides some of the best CSS support of all web browsers. As you develop iOS web applications...
Page 168
136 ❘ CHAPTER 8 STYLING WITH CSSSafari provides support for, and Table 8-2 lists the set of pseudo-classes and pseudo-elements that Safari works with.Note that the following CSS3 selectors are not supported with Safari::last-child:only-childnth-child()nth-last-child()last-of-typeonly-of-type:...
Page 169
TEXT STYLESWhen you are styling text inside your iOS web apps, keep in mind three text-related styles that are important to effective UI design: -webkit-text-size-adjust, text-overflow, and text-shadow. These properties are explained in this section.TABLE 8-2: Safari Pseudo-Classes and Pseudo-Ele...
Page 170
138 ❘ CHAPTER 8 STYLING WITH CSSControlling Text Sizing with -webkit-text-size-adjustWhen a page is rendered, Safari on iOS automatically sizes the page’s text based on the width of the text block. However, by using the -webkit-text-size-adjust property, you can override this setting. The n...
Page 171
Handling Overfl owed Text with text-overfl owBecause the width of the viewport in Safari on iPhone is either 320 (portrait) or 480 (landscape) pixels (and Safari on iPad is 768 (portrait) or 1024 (landscape), effectively managing the physical length of dynamic text on UI elements can be tricky....
Page 172
140 ❘ CHAPTER 8 STYLING WITH CSSTRY IT OUT Creating Ellipsis TextTo demonstrate how to work with an ellipsis in text, follow these steps. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch8-Ex1.html. <html><meta name=“viewport” conte...
Page 173
3. Add a class attribute to each of the three div elements, associating each with a corresponding style. <div class=“ellipsis”> this is a test this is a test this is a testthis is a test this is a test this is a testthis is a test </div><br><br><div class=“ellips...
Page 174
142 ❘ CHAPTER 8 STYLING WITH CSSCreating Subtle Shadows with text-shadowIn the iOS UI, Apple makes subtle use of text shadows, particularly on buttons and larger heading text. In addition to aesthetics, text shadows are also useful in making text more readable by increasing its contrast with ...
Page 175
If the image URL you provide cannot be located or the style is set to none then border-style properties are used instead.You can optionally specify one or two keywords at the end of the declaration. These determine how the images for the sides and the middle are scaled and tiled. The valid keywor...
Page 176
144 ❘ CHAPTER 8 STYLING WITH CSSGradient Push Buttons with -webkit-appearanceThe -webkit-appearance property is designed to transform the appearance of an element into a variety of different controls. Safari on iOS supports just two of the possible values: push-button and button. But it is th...
Page 177
You defi ne a set of background images by listing them in order after the background property name declaration. Images are rendered with the fi rst one declared on top, the second image behind the fi rst, and so on. You can also specify the background-repeat and background-position values for ...
Page 178
146 ❘ CHAPTER 8 STYLING WITH CSS float: left; margin-bottom: 10px; font-family: Helvetica; font-size: 20px; text-align:center; color:white; text-shadow: rgba(0,0, 0, 0.7) 0 1px 0; line-height: 46px;}</style></head><body><div style=“margin...
Page 179
CREATING CSS-BASED IOS BUTTONSUsing -webkit-border-image, you can create buttons that closely emulate Apple’s standard button design. This technique, inspired by developer Matthew Krivanek, involves using a pill-shaped button image (available for download aactionURI(http://www.wrox.com):t www.w...
Page 180
148 ❘ CHAPTER 8 STYLING WITH CSS 3. Add an <a>link with a fullSizedButton class:<a href=“mailto:rich@company.com” class=“fullSizedButton”>Send to Client</a> 4. Save your document. 5. View it on your iPhone or iPod touch. How It WorksIn this example, the display prop...
Page 181
text-fill-color-webkit-text-fill-color-website-appearance (push-button supported, but no other values are)EXERCISES 1. What experimental CSS extensions are supported by Safari on iOS? 2. For a website (not an app) would you typically use -webkit-text-size-adjust: auto or -webkit-text-size-adjust:...
Page 182
150 ❘ CHAPTER 8 STYLING WITH CSSWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSTransforming an element into a button using CSSThe -webkit-appearance property is designed to transform the appearance of an element into a button.Specify transparency in CSSUse the rgba() function, in which the ...
Page 183
PART IIIApplication DevelopmentCHAPTER 9: Programming the InterfaceCHAPTER 10: Handling Touch Interactions and EventsCHAPTER 11: Special Eff ects and AnimationCHAPTER 12: Integrating with iOS ServicesCHAPTER 13: Packaging Apps as Bookmarks: Bookmarklets and Data URLsc09.indd 151c09.indd 1511...
Page 184
c09.indd 152c09.indd 15212/21/11 3:44:25 PM12/21/11 3:44:25 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 185
Programming the InterfaceWHAT YOU WILL LEARN IN THIS CHAPTER:Using iUI to program and style your iOS web app Developing a web app that closely resembles native iOS appsDiscovering how CSS and JavaScript can work together The previous two chapters surveyed the UI standards and guidelines that you ...
Page 186
154 ❘ CHAPTER 9 PROGRAMMING THE INTERFACErelatively static, but the MLS listings need to be database-driven. Therefore, the app takes advantage of Ajax to seamlessly integrate listing data into the application.Here’s an overview of the technologies that are for iRealtor:XHTML/HTML and CSS f...
Page 187
TRY IT OUT Creating the index.html of Your Web AppFollow the steps below to create the iUI-based shell for your web app. 1. Create a new blank document in your text editor. 2. Add the following HTML to your document: <!DOCTYPE html><html><head><title>iRealtor</title&g...
Page 188
156 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe iui.css adds additional styles, uses -webkit-user-select and -webkit-text-size-adjust to ensure that iRealtor behaves as an application rather than a web page. Here’s the defi nition in iui.css:body { overflow-x: hidden; -webkit-text-size-...
Page 189
background-position: right center, left top; background-image: url(listArrowSel.png), url(selection.png);}ul > li > a[selected=”progress”] { background-image: url(loading.gif), url(selection.png);}The ul > li > a[selected=”progress”] style in default-theme.css is use...
Page 190
158 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE left: 6px; right: none;}#backButton { display: none;}The default-theme.css adds some iOS-specifi c styling: .toolbar { padding: 0 10px 10px 10px; height: 45px; background: url...
Page 191
body[orient=”landscape”] .button { top: 3px; right: 3px; line-height: 26px;}#backButton { left: 6px; right: auto; padding: 0; max-width: 55px; border-width: 0 8px 0 14px; -webkit-border-image: url(backButton....
Page 192
160 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe styles for the list items and links are as follows in default-theme.css:body > ul > li { margin: 0; border-bottom: 1px solid #E0E0E0; padding: 8px 0 8px 10px; font-size: 20px; font-weight: bold; list-...
Page 193
<p class=”normalText”>Lorem ipsum dolor sit amet, consect etuer adipis cing elit. Suspend isse nisl. Vivamus a ligula vel quam tinci dunt posuere. Integer venen atis blandit est. Phasel lus ac neque. Quisque at augue. Phasellus purus. Sed et risus. Suspe ndisse laoreet conse...
Page 194
162 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE width: auto; height: auto; padding: 12px; margin: 0; text-align: left;} }FIGURE 9-3FIGURE 9-4The panel class property displays the vertical pinstripes, which is a standard background for iOS applicati...
Page 195
<li><a href=”#”>34 Main Ave, Newbury</a></li> <li><a href=”#”>33 Infinite Loop, Princeton</a></li> <li><a href=”#”>233 Melville Road, Rutland</a></li> <li><a href=”#”>320 Muffly, Slive...
Page 196
164 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEby providing an external URL. However, the document that is retrieved needs to be a document fragment, not a complete HTML page.iUI fully encapsulates XMLHttpRequest() for you. Therefore, when you supply an external URL in a link that does not have tar...
Page 197
The design goal of the page is to provide a picture and summary details of the house listing. But, taking advantage of iPhone’s services, suppose you also want to add a button for looking up the address in the Map app and an external web link to a site providing town information. Figures 9-8 an...
Page 198
166 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEdata are contained in div elements with the row class. The set of div row elements is contained in a fieldset. Third, the button links to the map and external web page are assigned a whiteButton class. Figures 9-8 and 9-9 shows the page as it looks in ...
Page 199
The styles for this page come from both iui.css and from a custom style I added to index.html. First, here are the row class and label styles in default-theme.css (if you recall, the fieldset is defi ned earlier in the chapter):fieldset > .row { min-height: 42px;}fieldset > .row >...
Page 200
168 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE -moz-border-radius: 6px; border-radius: 6px;}Code snippet index.htmlThis style rounds the corners of the image and adds a border around it, providing a much more pleasing iOS-looking effect. However, before leaving this page, notice...
Page 201
search or submittal) or cancel out. Just as in any desktop environment, a dialog is ideal for form entry.iRealtor needs dialog boxes for two parts of the application—Search and the Mortgage Calculator. The user can access the Search dialog by tapping the Search button on the top toolbar. Here...
Page 202
170 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe dialog class indicates that the form is a dialog. The form elements are wrapped inside a fieldset. The action buttons for the dialog are actually defi ned as links. To be specifi c, the Cancel and Search links are defi ned as button leftButton a...
Page 203
Consider the CSS styles that are used to display this dialog. From default-theme.css, there are several rules to pay attention to:body > .dialog,body[orient=”landscape”] > .dialog { top: 0px; z-index: 2; background: rgba(0, 0, 0, 0.8); padding: 0;}body > .dia...
Page 204
172 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEbody > .dialog > fieldset > div.row > label { position: absolute; margin: 0; padding: 10px 8px 10px 12px; font-weight: normal; line-height: 1em; font-size: 12px; color: #666;}bod...
Page 205
onblur=”calc()”name=”termZip”/> </div> <div class=”row”> <label for=”payment”>Monthly payment</label> <input class=”calc” type=”text” readonly=”true” id=”payment”/> </div>...
Page 206
174 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThis routine performs a standard mortgage calculation and returns the results to the payment and total input fi elds. Figures 9-16 and 9-17 show the calculator in action on iPhone.FIGURE 9-16FIGURE 9-17Listing 9-1 provides a full code view of the inde...
Page 207
{ total = total * (1 + ir); } var mp = amt * ir / ( 1 - (1/total)); document.getElementById(‘payment’).value = Math.round(mp*100)/100; document.getElementById(‘total’).value = Math.round(mp * term *100)/100 ;}</script><style>.panelImage{ border: ...
Page 208
176 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE <li><a href=”#”>1 One Road, Zooly</a></li></ul> <!-- Calculator --> <form id=”calculator” class=”dialog”> <div class=”toolbar”> <h1>Mortgage Calculator</h1> ...
Page 209
Donec quis eros eu erat ullamc orper euismod. Nam aliquam turpis. Nunc convallis massa non sem. Donec non odio. Sed non lacus eget lacus hend rerit sodales.</p> </div> </fieldset></div> <!-- House Listing --> <div id=”406509171” title=”20 May L...
Page 210
178 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE class=”dialog” name=”searchForm” action=”search.php” method=”GET”> <div class=”toolbar”> <h1>Search Listings</h1> <a class=”button leftButton” type=”cancel”>Cancel</a> ...
Page 211
The following example is iui.js. The iui.js consists of the object window.iui, three listeners for load and click events, and several supporting routines. All of the JavaScript code is enclosed in an anonymous function with several constants and variables defi ned:(function() {var slideSpeed = 2...
Page 212
180 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe getSelectedPage() method of the JSON object iui is called to get the selected page—the block element node that contains a selected=“true” attribute. This node is then passed to iui.showPage(), which is the core routine to display content.setT...
Page 213
The currentDialog semi-global variable is evaluated to determine whether a dialog is already displayed. (currentDialog is set in the showDialog() function.) This variable would be null when the document initially loads because of the line var currentDialog = null; earlier in iui.js, which runs ev...
Page 214
182 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEThe updatePage() function is responsible for updating the pageHistory array, which is required for enabling the Safari Back button to work even in single-page web apps, such as iRealtor. The value of the node’s title attribute is then assigned to be ...
Page 215
Handling Link ClicksBecause most of the user interaction with an iOS web app is tapping the interface to navigate the application, the event listener for link clicks is, in many ways, the “mission control center” for iui.jss. Check out the code:addEventListener(“click”, function(event){ ...
Page 216
184 ❘ CHAPTER 9 PROGRAMMING THE INTERFACE followAjax(link, null); } else return; event.preventDefault(); } var div = findParent(event.target, “div”); if (div && hasClass(div, “toggle”)) { div...
Page 217
submitForm(form); }; form.onclick = function(event) { if (event.target == form && hasClass(form, “dialog”)) cancelDialog(form); };}The showForm() function assigns event handlers to the onsubmit and onclick events of the form. When a form is su...
Page 218
186 ❘ CHAPTER 9 PROGRAMMING THE INTERFACEEXERCISES 1. Using iUI, how do you defi ne multiple screens inside the same HTML page? 2. How do you defi ne a navigation list that is replaced by new data coming from an Ajax source? 3. When evaluating frameworks, such as iUI, how important is it t...
Page 219
WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSDefi ning a multi-screen, single page web appFrameworks like iUI and jQuery Mobile enable you to defi ne full apps inside a single HTML fi leUsing iUI frameworkCreating your UI and logic in HTML and linking in the framework’s CSS and JS fi le...
Page 220
c09.indd 188c09.indd 18812/21/11 3:45:07 PM12/21/11 3:45:07 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 221
Handling Touch Interactions and EventsWHAT YOU WILL LEARN IN THIS CHAPTER:How to respond to basic touch eventsHow to respond to orientation event changesHow to customize key eventsAn essential part of any web application is the ability to respond to events triggered by the user or by a condition ...
Page 222
190 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSGesture events: Gesture events are combinations of touch events that also support scaling and rotation information. The mouse emulation events are the ones that you’ll likely be working with for most typical interactions inside your web...
Page 223
Mouse-Emulation Events ❘ 191GESTUREEVENT(S) FIREDDESCRIPTIONDouble-tapNoneTapClickable element: mouseover, mousemove, mousedown, mouseup, clickNon-clickable element: NoneIf mouseover or mousemove changes page content then the remaining events in the sequence are canceled. TABLE 10-2: Two-Finger...
Page 224
192 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSClick-Enabling ElementsIf the element you are working with is not considered “clickable” by Safari on iOS then all mouse-related events for it are ignored. However, there are certain situations in which this can be problematic, such a...
Page 225
Mouse-Emulation Events ❘ 193becomes the active page, JavaScript events (including polling events created with setInterval()) are not fi red. However, the unload event of the window object is triggered when the user loads a new page in the current window.Table 10-4 lists the events that are ful...
Page 226
194 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSTOUCH EVENTSIn addition to the mouse-emulation events, Safari on iOS also captures additional touch-related sequences of events for each fi nger that touches the screen surface. A touch event begins when a fi nger touches the screen sur...
Page 227
Touch Events ❘ 195The items inside these arrays are Touch objects (shown in Table 10-7) that provide the information related to the touch events.TABLE 10-7: Touch Object PropertiesPROPERT YDESCRIPTIONclientXx coordinate of the object relative to the full viewport (not including scroll off set)c...
Page 228
196 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS { // do something to begin } else if (event.type == “touchmove”) { // do something on move } else if (event.type == “touchend”) { // do something to end } else { // do ...
Page 229
Detecting an Orientation Change ❘ 197TRY IT OUT Detecting an Orientation ChangeFor a demonstration of how to detect an orientation change in your app, follow the steps below. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch10-Ex2.html. <!DOCTY...
Page 230
198 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS break; } document.getElementById(“mode”).innerHTML = str; }</script>Code snippet BIDHJ-Ch10-Ex2.htmlHow It WorksAn onorientationchange attribute is added to the body element and assigned the JavaScript fu...
Page 231
Detecting an Orientation Change ❘ 199orientationChangeHandler() function by updating the orient attribute of the body element based on the current orientation and then updating the active CSS styles off of that attribute value.TRY IT OUT Changing a Style Sheet When Orientation ChangesFor a demo...
Page 232
200 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS margin: 0; padding: 0; width: 320px; height: 416px; font-family: Helvetica; -webkit-user-select: none; cursor: default; -webkit-text-size-adjust: none; background: #000000; ...
Page 233
Detecting an Orientation Change ❘ 201 text-align: center; line-height: 42px; } /* Styles adjusted based on orientation */ body[orient=’portrait’] .container { height: 436px; } body[orient=’landscape’] .container { height: 258px; ...
Page 234
202 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTS document.getElementById(‘bottomToolbar’).offsetTop +’px’; }, 100); setTimeout(function() { window.scrollTo(0, 1); }, 100); ...
Page 235
Changing Element Positioning Based on Orientation Change ❘ 203CHANGING ELEMENT POSITIONING BASED ON ORIENTATION CHANGEWhen you begin to understand the basic interaction between an orientationChangeHandler() function and orientation-dependent styles, you can begin to dynamically position element...
Page 236
204 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSTRAPPING FOR KEY EVENTS WITH THE ON-SCREEN KEYBOARDAs with an ordinary web page, you can validate keyboard input by trapping the keydown event. To illustrate, suppose you have an input fi eld in which you want to prevent the user from en...
Page 237
Trapping for Key Events with the On-Screen Keyboard ❘ 205EXERCISES 1. What are the three major types of touch events? 2. Do you need to code all touch events in your web app? 3. What event do you trap to handle screen orientation changes?Answers to the Exercises can be found in the Appendix.c...
Page 238
206 ❘ CHAPTER 10 HANDLING TOUCH INTERACTIONS AND EVENTSWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSHandling mouse-like events No events trigger until the user’s fi nger leaves the touch screen.Design your app to respond to click events rather than the other mouse events.Responding to ...
Page 239
Special Eff ects and AnimationWHAT YOU WILL LEARN IN THIS CHAPTER:Creating gradients using CSS and JavaScript Adding shadows and refl ectionsCreating animations with JavaScript The strengths of Safari on iOS as a development platform are evident when you begin to explore the capabilities you hav...
Page 240
208 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONThe from() and to() functions indicate the starting and ending colors, and the color-stop() function defi nes a color at a particular point on the gradient.For example, the following style can be added to a div or other block element to create a ...
Page 241
To create a radial gradient, you use the following syntax: -webkit-gradient(radial, innerCenter, innerRadius, outerCenter, outerRadius, from(color), color-stop(percent, color), to(color)); The innerCenter defi nes the x, y coordinate of the center of the inner circle that starts the gradient....
Page 242
210 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONCreating Gradients with JavaScriptIf you prefer scripting, you can also create both linear and radial gradients by using the following methods of the context object:createLinearGradient(x1,y1,x2,y2) creates a gradient from the starting point (x1,y...
Page 243
context.fillStyle = lg; context.strokeStyle=“#666666”; context.lineWidth=“.5”; context.fillRect(10,10,250,250); context.strokeRect(10,10,250,250);}</script>Code snippet BIDHJ-Ch11-Ex1.html 3. Add an onload event handler to the body tag and save the fi le: <body onload=”d...
Page 244
212 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONFIGURE 11-6ADDING SHADOWS Shadow effects are a common visual technique you can use to enhance the look of your page element. Using JavaScript, the context object provides four properties that you can use for defi ning shadows on the canvas: shado...
Page 245
img3.src = ‘images/nola.jpg’; img3.onload = function() { context.drawImage( img3, 20, 30 ); } }The four bold lines of code defi ne a blurred black shadow that is offset 5px from the canvas. Figure 11-7 shows the result. ADDING REFLECTIONS If you have used the CoverFlow view in th...
Page 246
214 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONRefl ections on black backgrounds can be especially visually compelling on an iOS viewport. The following example shows a refl ection on black (see Figure 11-9): <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://w...
Page 247
<body><img src=”images/nola.jpg” class=”reflectedImage”/></body></html>If you want to add refl ections using JavaScript, I recommend checking out several open source libraries that use canvas programming to create sophisticated charts and image effects, such as re...
Page 248
216 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONYou are not limited to using a masked image, however. You can also use a -webkit-gradient() function to achieve a faded mask effect. For example, consider this style: .fadeToWhite { -webkit-mask-image:-webkit-gradient(linear, left top, ...
Page 249
CREATING TRANSFORM EFFECTS You can use three methods of a canvas context object to transform the state of a canvas:translate(x, y) changes the origin coordinate (0, 0) of the canvas.rotate(angle) rotates the canvas around the current origin of a specifi ed number of radians.scale(x, y) adjusts t...
Page 250
218 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATION context.rotate(.15*r); context.globalAlpha=i*.33; context.drawImage(img, 20, 20); r+=1; } }}Figure 11-14 shows the layered result. Note the difference in transparency of the bottommost image to the topmost.FIGURE 11-13FIGU...
Page 251
can be ideal. However, any such excitement needs to be kept in check. Perhaps the chief shortcoming of canvas drawing in JavaScript is that you need to repaint the entire canvas for each frame of your animation. As a result, complex animations are at risk for being jerky on the mobile device. Tha...
Page 252
220 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATION context.beginPath(); context.arc(50+p,50+p,30,0, 360, false); context.fill(); p+=1;}</script>Code snippet BIDHJ-Ch11-Ex2.html 3. Add an onload event handler to the body tag and save the fi le: onload=”init()”Code snippet BIDHJ-Ch...
Page 253
EXERCISES 1. When you draw onto a canvas, what is the key object that you work with? 2. What CSS property do you use to create a refl ection? 3. What do the context object’s save() and restore() methods do? Answers to the Exercises can be found in the Appendix.Creating Animations ❘ 221c11...
Page 254
222 ❘ CHAPTER 11 SPECIAL EFFECTS AND ANIMATIONWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSCreating gradientsWith CSS, use –webkit-gradient() functionWith JavaScript, use createLinearGradient() or createRadialGradient()Adding shadowsUse the following context object properties: shadowCol...
Page 255
Integrating with iOS ServicesWHAT YOU WILL LEARN IN THIS CHAPTER:Tapping into iOS services and built-in apps within your appSending email and SMS text messagesMapping href links to iOS servicesOne of the most intriguing ideas when creating a web app for iOS is integrating the application with cor...
Page 256
224 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESFIGURE 12-1PHONE NUMBERSTelephone links can go beyond ordinary numbers. iPhone provides partial support for the RFC 2086 protocol (www.ietf.org/rfc/rfc2806.txt), which enables you to develop some sophisticated telephone-based URLs. For example, th...
Page 257
Making Phone Calls from Your App ❘ 225TRY IT OUT Creating a Call Link For a demonstration of how to call from inside of your web app, use the following steps. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch12-Ex1.html. <!DOCTYPE html PUBLIC ...
Page 258
226 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESFigure 12-2 shows the page that displays. How It WorksThe a links use the tel: protocol in the href value. To degrade gracefully when running on iPod touch or iPad, the onclick handler ensures that the link works only if running on iPhone by evalu...
Page 259
Sending Emails ❘ 227If you’ve worked with HTML pages at all before, you are probably quite familiar with mail links. However, here’s what happens when an email link is clicked on an iOS device. When the user presses this link, Mail opens and a new message window is displayed, as shown in Fi...
Page 260
228 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESTRY IT OUT Creating a Preformatted Email For a demonstration of how to create your own predefi ned email in your web app, follow these steps. 1. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch12-Ex2....
Page 261
SENDING SMS MESSAGESYou can send SMS messages using the sms protocol in much the same way as you integrate email. For example, the following code launches the SMS application, addressing a text message to 765-545-1212: <a href=”sms:765-545-1212” onclick=”return (navigator.userA...
Page 262
230 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESNOTE You cannot specify whether to display the map in Map or Satellite view. The location you specify displays in the last selected view of the user.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/...
Page 263
Pointing on Google Maps ❘ 231Here’s the syntax used for a full street address:<a href=“http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA”> Jack Armitage’s Office</a>TRY IT OUT Linking to the Maps App How about rolling up your sleeves and diving further into ...
Page 264
232 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESHow It WorksAs you can see, the example shows three different ways in which you can use Google Maps links in your web app. When the address shown previously is located in Google Maps, the marker is generically labeled 1000 Massachusetts Ave Boston...
Page 265
Pointing on Google Maps ❘ 233EXERCISES 1. When creating a web app that accesses iOS services, why would you want to identify the type of iOS device that is running the app? 2. What URL protocols should you use for the following links: a phone number, email message, and SMS message? 3. Do iPhon...
Page 266
234 ❘ CHAPTER 12 INTEGRATING WITH IOS SERVICESWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSMaking phone calls from your appUse the tel: protocol for making phone calls.Sending emailsUse the mailto: protocol for creating an email message and displaying the Mail app.Add optional attributes ...
Page 267
Packaging Apps as Bookmarks: Bookmarklets and Data URLsWHAT YOU WILL LEARN IN THIS CHAPTER:Discovering what bookmarklets areCreating offl ine apps using bookmarkletsEncoding your images and source codeBecause iOS web apps function inside the Safari environment, there are two seemingly obvious re...
Page 268
236 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLSin offl ine mode. You probably won’t want to package heavy-duty enterprise-level apps in a bookmarklet, but for smaller apps, it could be something to consider. WORKING WITH BOOKMARKLETSA bookmarklet is JavaScript stor...
Page 269
Working with Bookmarklets ❘ 237 2. When the functionality works as expected, drag the javascript: URL from your Address box onto your Bookmarks bar in Safari. If you are going to have a set of bookmarklets, you may wish to create a special Bookmarklets folder to store these scripts. Or, if your...
Page 270
238 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLSWhen executed, the script adds a target=”_blank” attribute to all links on the page and adds a small “new window” icon after the link (see Figure 13-2).An iOS user can then use this self-contained “applet” on ...
Page 271
Storing an Application in a Data URL ❘ 239</body></html>“);newDoc.close();var pre = newDoc.body.appendChild(newDoc.createElement(“pre”)); pre.appendChild(newDoc.createTextNode(document.documentElement.innerHTML));Code snippet ViewSource.jsFIGURE 13-3STORING AN APPLICATION IN A...
Page 272
240 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS(2) package up a snapshot of the data and put it in a form accessible from a client script. However, in most cases in which you need to use cached data, you should use HTML5 offl ine storage instead (see Chapter 15). The...
Page 273
Developing a Data URL App ❘ 241<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head><head><title>Tipster</title><meta name=“viewp...
Page 274
242 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS 2. Add the following JavaScript code in the page’s header: <script type=“application/x-javascript”>addEventListener(‘load’, function() { setTimeout(function() { window.scrollTo(0, 1); }, 100); }, ...
Page 275
Developing a Data URL App ❘ 243 border-bottom: 1px solid #2d3642; border-top: 1px solid #6d84a2; padding: 10px; height: 45px; background: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAArCAIAAAA2QHWOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUCNddjDEOg...
Page 276
244 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS 6. Upload BIDHJ-Ch13-Ex1.html and then click Generate to create an encoded URL, which is displayed in the URL box of Safari (see Figure 13-5). FIGURE 13-5 7. Drag the URL onto your Bookmarks bar. 8. Sync up with your iO...
Page 277
Developing a Data URL App ❘ 245The fi nal steps involve getting the self-contained app into a form that is accessible when the browser is offl ine. In the example, I used the data: URI Kitchen to do the conversion, but there are several ways to automate this process for you:Url2iphone (www.so...
Page 278
246 ❘ CHAPTER 13 PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLSThe following Perl syntax turns HTML into a data URL:perl -0777 -e ‘use MIME::Base64; $text = <>; $text = encode_base64($text); $text =~ s/\s+//g; print “data:text/html;charset=utf-8;base64,$text\n”;’In PH...
Page 279
Developing a Data URL App ❘ 247WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSWhat is a bookmarklet?A bookmarklet is JavaScript stored as a URL and saved as a bookmark in the browser.Storing an app in a data URLYou can store the contents of a page and its assets inside an encoded data URL.c13...
Page 280
c13.indd 248c13.indd 24812/21/11 3:48:18 PM12/21/11 3:48:18 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 281
PART IVAdvanced Programming TechniquesCHAPTER 14: Programming the CanvasCHAPTER 15: Offl ine ApplicationsCHAPTER 16: Building with Web App FrameworksCHAPTER 17: Bandwidth and Performance OptimizationsCHAPTER 18: Debug and Deployc14.indd 249c14.indd 24912/21/11 3:48:42 PM12/21/11 3:48:42 ...
Page 282
c14.indd 250c14.indd 25012/21/11 3:48:45 PM12/21/11 3:48:45 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 283
Programming the CanvasWHAT YOU WILL LEARN IN THIS CHAPTER:Identifying the iOS user agentDrawing rectangles and other shapesDrawing images onto a canvas The unique platform capabilities of the iOS enable developers to create innovative applications inside Safari that go beyond the normal “web ap...
Page 284
252 ❘ CHAPTER 14 PROGRAMMING THE CANVASThe Safari user agent string for iPhone closely resembles the user agent for Safari on other platforms. However, it contains an iPhone platform name and the mobile version number. Depending on the version of Safari on iOS, it looks something like this:Mo...
Page 285
Identifying the User Agent ❘ 253<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head><title>User Agent Detection via WebKit Script</title>&l...
Page 286
254 ❘ CHAPTER 14 PROGRAMMING THE CANVASThe switch statement then evaluates the mobile devices. If it is an iPhone, then it checks to see if minSupport is true. If it is true then a real application would begin here. If minSupport is false then the user is notifi ed to update his or her iPhon...
Page 287
Getting a Context ❘ 255As the fi rst step in working with the canvas, you fi rst need to get a 2d context object. This object, which is responsible for managing the canvas’ graphics state, is obtained by calling the getContext() method of the canvas object:var canvas = document.GetElementBy...
Page 288
256 ❘ CHAPTER 14 PROGRAMMING THE CANVASPROPERT YDESCRIPTIONshadowOffsetYSpecifi es the vertical distance of the shadow from the source.strokeStyleDefi nes the CSS color or style (gradient, pattern) when stroking paths.textAlignDetermines the text alignment.textBaselineSpecifi es the baseli...
Page 289
Drawing Other Shapes ❘ 257The full page source is shown in the following code:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”><head><title>Draw Box...
Page 290
258 ❘ CHAPTER 14 PROGRAMMING THE CANVASstroke() draws a line along the current path.fill() closes the current path and paints the area within it. (Because fill() closes the path automatically, you don’t need to call closePath() when you use it.)lineTo(x,y) adds a line segment from the curre...
Page 291
Drawing an Image ❘ 259arc(x, y, radius, startAngle, endAngle, clockwise) adds an arc to the current subpath using a radius and specifi ed angles (measured in radians).arcTo(x1, y1, x2, y2, radius) adds an arc of a circle to the current subpath by using a radius and tangent points.quadratricCur...
Page 292
260 ❘ CHAPTER 14 PROGRAMMING THE CANVASThe second method enables you to specify the dimensions of the image with the w and h arguments:context.drawImage(image, x, y, width, height)TRY IT OUT Drawing an Image onto the CanvasTo draw an image onto the canvas, use the following steps. 1. Create ...
Page 293
Drawing an Image ❘ 261How It WorksWhen the document is loaded, it calls the drawImg() function. In the function, context and img objects are created. However, the drawImage() method of the context object is not called until after the image is loaded. Figure 14-4 shows the image displayed inside...
Page 294
262 ❘ CHAPTER 14 PROGRAMMING THE CANVAScoordinate (151, 63). You then paint the same sized rectangle at coordinate (10, 10) on the canvas. Here is the updated code:function drawImg(){ var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); var img =...
Page 295
Drawing an Image ❘ 263You can then integrate the outputted encoded string into the script code as the image object’s source (much of the encoded text for this example has been removed for space reasons):function drawImg(){var img_src = ‘data:image/jpeg;base64,’+‘/9j/4AAQSkZJRgABAgAAZABk...
Page 296
264 ❘ CHAPTER 14 PROGRAMMING THE CANVAS‘w4l27YfQoySSTmTxS0XONXF1AKmtAKDwCTCq5TqDM0jm6SQRliATQDTnRABRKEqG2wwhF3euK5AAkJT7’+‘lyRACJOK4lCD5jjkgQYxNEkhp5R4pNWkVGaCpOJzKcBIuCRKkOaBirqmlOGdF1SuwSGenAp+U/IPco4K’+‘duHhls9xya0krZHP0Kbc7k9Nlow4yCslPw8vFdZQgDLioUTnTSumdm817hwVrbUHgsnlnVVbak6Bo...
Page 297
Creating an Image Pattern ❘ 265context.arc(95,90,60,0, 2*pi, 0);context.fill();// Smaller circle—30% transparencycontext.fillStyle = “rgba(0,0,255, 0.3)”;context.beginPath();context.arc(135,120,40,0, 2*pi, 0);context.fill();}Alternatively, you can set the context.globalAlpha property to s...
Page 298
266 ❘ CHAPTER 14 PROGRAMMING THE CANVAS var pImg = new Image(); pImg.src = ‘images/tech.jpg’; // call when image is fully loaded pImg.onload = function() { var pat = context.createPattern(pImg,’repeat’); context.fillStyle = pat; context.fillRect(0,0,300,300)...
Page 299
Creating an Image Pattern ❘ 267EXERCISES 1. How can you identify the user agent of an iPad? 2. What is the diff erence between stroking and fi lling? 3. What is a drawing path composed of? 4. Why would you consider drawing an encoded image onto a canvas? Answers to the Exercises can be fou...
Page 300
268 ❘ CHAPTER 14 PROGRAMMING THE CANVASWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSIdentifying an iOS device in the user agent iOS devices have similar user agent strings, but distinctively identify whether it is an iPhone, iPad, or iPod touch.Creating a canvas on an HTML pageA canvas el...
Page 301
Offl ine ApplicationsWHAT YOU WILL LEARN IN THIS CHAPTER:Storing fi les locally in an offl ine cache Storing data on the client using key-value storage Accessing a local SQL database with JavaScriptIn the past, one of the key differences between native iOS apps and web apps was the ability of ...
Page 302
270 ❘ CHAPTER 15 OFFLINE APPLICATIONSto determine whether or not to update the cache, not its last-saved date or other fi le attribute.) However, if you want to force an update, you can do so programmatically through JavaScript. Create a Manifest FileTo enable the offl ine cache, you need to...
Page 303
HTML 5 Offl ine Application Cache ❘ 271After you have created the manifest fi le, you need to save it with a .manifest extension. In order for offl ine cache to work correctly, you need to be sure that your web server serves up the manifest fi le correctly. Because HTML 5 offl ine cache is...
Page 304
272 ❘ CHAPTER 15 OFFLINE APPLICATIONS}else if (window.applicationCache.status == window.applicationCache.IDLE){ alert(“No changes are necessary.”); }else { alert(“Let’s do something with the cache.”); }You can assign event handlers to the applicationCache object based on the re...
Page 305
HTML 5 Offl ine Application Cache ❘ 273The update() method updates the cache and then swapUpdate() replaces the old cache with the new cache you successfully downloaded.Checking Connection StatusWhen you use application cache, you may have some online processing that you want to disable if you...
Page 306
274 ❘ CHAPTER 15 OFFLINE APPLICATIONS localeCache.addEventListener(“progress”, cacheProgressHandler, false); // Swap cache localeCache.addEventListener(“updateready”, cacheUpdateReadyHandler, false); // Hide progress indicator localeCache.addEventListener(“cached”,...
Page 307
HTML 5 Offl ine Application Cache ❘ 275 3. Add an onload event handler to the body tag: <body onload=”init()”>Code snippet BIDHJ-Ch15-Ex1.html 4. Add a manifest declaration to the HTML tag and then save the document: <html manifest=”BIDHJ-Ch15-Ex1.manifest” xmlns=”http://www...
Page 308
276 ❘ CHAPTER 15 OFFLINE APPLICATIONSUSING KEY-VALUE STORAGE In addition to local cache, Safari on iOS also supports HTML 5 key-value storage as a way to provide persistent storage on the client either permanently or within a given browser session. Key-value storage bears several obvious simil...
Page 309
Using Key-Value Storage ❘ 277Whenever you interact with the local storage database, a storage event is dispatched from the body object. Therefore, to handle this event, you can attach a listener to the body: document.body.addEventListener(“storage”, storageHandler, false);The event object t...
Page 310
278 ❘ CHAPTER 15 OFFLINE APPLICATIONSIf the key value that you request is not located, then a null value is returned:if (sessionStorage.accessCode != null){ var valid = processCode(sessionStorage.accessCode); }Deleting Key-value DataYou can remove a specifi c key-value pair or clear all ke...
Page 311
Using Key-Value Storage ❘ 279<option value=”RI”>Rhode Island</option><option value=”VT”>Vermont</option></select></div><p><button onclick=’clearAll()’>Clear All</button><br /></p><div id=”statusDiv”>Start se...
Page 312
280 ❘ CHAPTER 15 OFFLINE APPLICATIONS { if (sessionStorage) { sessionStorage.setItem(value, document.getElementById(value).selectedIndex); setStatus(document.getElementById(value).id + “ saved as a session key....
Page 313
Using Key-Value Storage ❘ 281 “url=” + event.url + “, “ + “key=” + event.key + “, “ + “new value=” + event.newValue + “, “ + “old value=” + event.oldValue + “, “ + ...
Page 314
282 ❘ CHAPTER 15 OFFLINE APPLICATIONSFIGURE 15-6FIGURE 15-5FIGURE 15-4When you are working with key-value storage, I recommend using the Web Inspector that is provided with the Windows and Mac versions of Safari (you can fi nd it on the Develop menu). The Databases panel (see Figure 15-7) ena...
Page 315
Going SQL with the JavaScript Database ❘ 283GOING SQL WITH THE JAVASCRIPT DATABASEWhen you begin to develop more substantial web applications, you may easily have local storage needs that go beyond simple caching and key-value pair persistence. Perhaps your app stores application data locally a...
Page 316
284 ❘ CHAPTER 15 OFFLINE APPLICATIONS { for (var i=0; i<result.rows.length; i++) { var r = results.rows.item(i); alert(r[“first_name”] + “ was retrieved from the database.”); }}function errorHandler(error){ alert(“An error occurred...
Page 317
Going SQL with the JavaScript Database ❘ 285WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSEnabling offl ine cacheCreate a manifest fi le that lists the fi les you want to store offl ine.Loading local assets Access your offl ine cache using the window.applicationCache object. Saving and ...
Page 318
c15.indd 286c15.indd 28612/22/11 8:58:00 AM12/22/11 8:58:00 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 319
Building with Web App FrameworksWHAT YOU WILL LEARN IN THIS CHAPTER:Exploring the jQuery Mobile frameworksUsing iWebKit to create a web appWhen the iPhone was fi rst introduced, you had few options for creating web apps for Apple’s mobile device. You could use the original iUI .js library, or ...
Page 320
288 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSUSING jQUERY MOBILEIf you worked through the Hello World example in Chapter 5, you already have an introduction to jQuery Mobile. jQuery Mobile is built on the popular jQuery framework and makes heavy use of normal HTML mixed with CSS and JavaS...
Page 321
</script></head> <body> <div data-role=”page”> <div data-role=”header”> <h1>Page Title</h1> </div><!-- /header --> <div data-role=”content”> <p>Page content goes here.</p> ...
Page 322
290 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKS </div><!-- /header --> <div data-role=”content”> </div><!-- /content --> <div data-role=”footer”> <h4>Operation Classroom</h4> </div><!-- /footer -->...
Page 323
<h2>Priorities</h2> <ul> <li>Renovate the boarding school for the Junior Secondary School. The boarding home will container 24 classrooms. This will enable the school to move to a single shift instead of a double shift ...
Page 324
292 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSFigures 16-1 and 16-2 show the results. FIGURE 16-1FIGURE 16-2Although the look of the app is perfectly acceptable, suppose you want your jQuery Mobile web app to emulate the native look and feel of iOS. Fortunately, there’s a Github-based jQ...
Page 325
6. Add the following style sheet link below the jQuery Mobile style sheet link: <link rel=”stylesheet” href=”ios_inspired/styles.css” />Code snippet BIDHJ-Ch16-Ex2.html 7. Save the fi le. How It WorksIn this exercise, you add a link to the iOS Inspired style sheet, which trans...
Page 326
294 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSAn iWebKit web app begins with the following structure. Head: viewport meta tag and any other desired tags for mobile app development Links to the iWebKit CSS style sheet inside your folder structureLinks to the iWebKit JavaScript library, also...
Page 327
</head><body><div id=”topbar”></div><div id=”content”></div><div id=”footer”> <!-- Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for my work :-) --> <a class=”noeffec...
Page 328
296 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKS </div><div id=”content”></div><div id=”footer”> <!-- Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for my work :-) --> <a class=”noe...
Page 329
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta content=”yes” name=”apple-mobile-web-app-capable” /><meta content=”index,follow...
Page 330
298 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKS institutions of learning in Sierra Leone. Plans are to renovate the boarding house into classrooms for the Junior Secondary School.</p> <p> <img src=”http://www.gbgm-umc.org/operationclass...
Page 331
FIGURE 16-8FIGURE 16-9FIGURE 16-10FIGURE 16-11Using iWebKit ❘ 299c16.indd 299c16.indd 29912/21/11 3:50:25 PM12/21/11 3:50:25 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 332
300 ❘ CHAPTER 16 BUILDING WITH WEB APP FRAMEWORKSEXERCISES 1. Why is cross-platform support an important decision point in terms of which framework you might use? 2. Which of the frameworks enables you to contain multiple pages inside the same HTML fi le? Answers to the Exercises can be fo...
Page 333
WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSFeatures of jQuery MobileCross-platform support for iOS, Android, BlackBerry, Windows Phone 7, and moreBuilt-in support for touch events, page transitions, back button support, and themingFeatures of iWebKitDedicated to iOS look and feel Support fo...
Page 334
c16.indd 302c16.indd 30212/21/11 3:50:26 PM12/21/11 3:50:26 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 335
Bandwidth and Performance OptimizationsWHAT YOU WILL LEARN IN THIS CHAPTER:Shrinking the size of the assets of your appOptimizing performance of your JavaScriptWriting effi cient code In a decade where broadband is now the norm, many web developers have allowed their sites and applications to be...
Page 336
304 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSreadability of the code that they are optimizing. The second camp, perhaps best described as relaxed optimizers, are interested in optimizing their applications. But they are not interested in sacrifi cing code readability and manageabi...
Page 337
Best Practices to Minimize Bandwidth ❘ 305Consider using gzip compression when you serve your application. (See the following section for more on compression options.)Consider using a JavaScript compressor on your JavaScript libraries. You could then work with a normal, unoptimized JavaScript l...
Page 338
306 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSConsider using shorter CSS style names and JavaScript variable and function names. After all, the longer your identifi ers are, the more space your fi les take. At the same time, do not make your identifi ers so short that they become...
Page 339
Compressing Your Application ❘ 307JavaScript Code CompressionIn addition to reducing the total fi le size of your website, another technique is to focus on JavaScript code. These compression strategies go far beyond the manual coding techniques described in this chapter and seek to compress an...
Page 340
308 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSTABLE 17-1: Benchmark of JavaScript Library Compression COMPRESSORJAVASCRIPT COMPRESSION (BY TES)WITH GZIP COMPRESSION (BY TES)No compression100% (11284)26% (2879)JSMin65% (7326)21% (2403)Dojo ShrinkSafe58% (6594)21% (2349)YUI Compressor...
Page 341
JavaScript Performance Optimizations ❘ 309{ var d = divs[0];}var start2 = new Date().getTime();var delta1 = start2 — start1;document.getElementById(“output”).innerHTML = “Time: “ + delta1;</script></html>Safari for Mac OS X executes this script in 529 milliseconds, ...
Page 342
310 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSOffl ine DOM ManipulationWhen you are writing to the DOM, assemble your subtree of nodes outside of the actual DOM and then insert the subtree once at the end of the process. For example, consider the following:var comments=customBlog.g...
Page 343
Dot Notation and Property Lookups ❘ 311Using the Window ObjectThe window object is faster to use because Safari does not have to navigate the DOM to respond to your call. The last window reference in the following example is more effi cient than the fi rst three:// Inefficientvar h=document.l...
Page 344
312 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONSm.n.o.p.doThat();// More efficientvar d = m.n.o.p;d.doThis();d.doThat();Accessing a Named ObjectIf you access a named object, it is more effi cient to use getElementById() rather than access it via dot notation. For example, compare the...
Page 345
Dot Notation and Property Lookups ❘ 313for (i=0;i<myArray.length;i++) { // Do something}// More efficientmyArray = new Array();len = myArray.length;for (i=0;i<len;i++) { // Do something}String ConcatenationAnother traditional problem area in JavaScript is string concatenation. In genera...
Page 346
314 ❘ CHAPTER 17 BANDWIDTH AND PERFORMANCE OPTIMIZATIONS</body><script type=“text/javascript” language=“javascript”>stringTable();intermStringTable();</script></html>WHAT TO DO AND NOT TO DOYou want to be sure to avoid with statements, which slow down the proce...
Page 347
What to Do and Not to Do ❘ 315WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSMinimizing bandwidthMinimize the number of external fi lesRemove content that doesn’t need to be in your fi les (comments, extra white space, unused code/styles)Shrink your images as much as possible without degr...
Page 348
c17.indd 316c17.indd 31612/22/11 8:58:47 AM12/22/11 8:58:47 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 349
Debug and DeployWHAT YOU WILL LEARN IN THIS CHAPTER:Using an iOS Simulator on your Mac computer Debugging with Safari on Mac or Windows Debugging options on your iOS deviceGet in, get out. That’s the attitude that most developers have in testing and debugging their applications. Few developers ...
Page 350
318 ❘ CHAPTER 1 8 DEBUG AND DEPLOYSIMULATING THE IPHONE OR IPAD ON YOUR DEVELOPMENT COMPUTERBecause you are coding your iOS web app on a desktop computer, you’ll fi nd it helpful to also be able to perform initial testing on the desktop as well. To do so, you need to create a test browser e...
Page 351
To use the iOS Simulator for viewing a web app, simply click the Safari icon with your mouse. You can load your app from a bookmark or type a URL in the Address box. Figure 18-2 shows a Web app displayed in the iOS Simulator.FIGURE 18-2The iOS Simulator is actually quite powerful. Not only do the...
Page 352
320 ❘ CHAPTER 1 8 DEBUG AND DEPLOYFIGURE 18-3FIGURE 18-4Using Safari on Mac or WindowsBecause Safari on iOS is closely related to its Mac and Windows desktop counterparts, you can also perform initial testing and debugging right on your desktop. However, before doing so, you c18.indd 320c18....
Page 353
need to turn Safari into an iOS simulator by performing two actions — changing the user agent string and resizing the browser window.Changing Safari’s User Agent StringSafari on Mac and Windows enables you to set the user agent provided by the browser through the User Agent list, which you ac...
Page 354
322 ❘ CHAPTER 1 8 DEBUG AND DEPLOYAfter you have selected an iPhone, iPad, or iPod touch user agent, the desktop version of Safari appears to your web app as Safari on iPhone. Changing the Window SizeTo get the same viewport dimensions in Safari, you need to create a bookmarklet (see Chapter 1...
Page 355
The two Safari developer features worth special attention for your needs are the Web Inspector and JavaScript Console.Working with Safari’s Web InspectorThe best debugging feature available in Safari is certainly the Web Inspector. The Web Inspector, shown in Figure 18-7, enables you to browse ...
Page 356
324 ❘ CHAPTER 1 8 DEBUG AND DEPLOYSearching the DOM: You can use the Search box to look for any node of the DOM — element names, node attributes, even content. Results of the search are shown in the inspector pane, displaying the line on which a match was found. If you want to get a better i...
Page 357
Working with the Scripts Inspector The Web Inspector also sports a powerful Scripts Inspector, as shown in Figure 18-9. You can use it to inspect variables at point of execution, set breakpoints, step through your code, and view the call stack. FIGURE 18-9There are several tasks you can perform i...
Page 358
326 ❘ CHAPTER 1 8 DEBUG AND DEPLOYInspecting variables: The Scope Variables box at the top of the Script Inspector window displays the variables in scope (local, closure, global). You can inspect these variables by right-clicking them and choosing Inspect Element. A new Web Inspector window is...
Page 359
You can enable the Debug Console from Settings ➪ Safari ➪ Developer. Inside this menu screen, you can turn on the Debug Console (see Figure 18-13). DOM ViewerThe DOM Viewer, available from brainjar.com, is a web-based DOM viewer that you can work with directly inside of Safari on iOS. The DOM...
Page 360
328 ❘ CHAPTER 1 8 DEBUG AND DEPLOY 3. Open a page in your app and add a script to the end of your HTML page that you want to inspect:<script type=“application/x-javascript”>window.open(‘domviewer.html’);</script> 4. Save the fi le. 5. Open the page inside Safari. If needed...
Page 361
Because it will reference the desired element directly by getElementById(), you can add this code in your HTML page after the element you want to examine in the body but not before it.Go to http://brainjar.com/dhtml/domviewer for full details on the DOM Viewer.EXERCISES 1. What is alert() debuggi...
Page 362
330 ❘ CHAPTER 1 8 DEBUG AND DEPLOYWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSPreview and interact with your iOS web apps on your Mac computerUse the Safari app that runs inside Xcode’s iOS Simulator Inspecting a page’s DOM and stylesUse the Web Inspector, built into Safari on Mac or ...
Page 363
PART VNext Steps: Developing Native iOS Applications with HTML and JavaScriptCHAPTER 19: Preparing for Native iOS DevelopmentCHAPTER 20: PhoneGap: Native Apps from Your HTML, CSS, and JavaScriptCHAPTER 21: Submitting Your App to the App Storec19.indd 331c19.indd 33112/22/11 9:01:31 AM12/22...
Page 364
c19.indd 332c19.indd 33212/22/11 9:01:34 AM12/22/11 9:01:34 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 365
Preparing for Native iOS DevelopmentWHAT YOU WILL LEARN IN THIS CHAPTER:Joining the iOS Developer ProgramGetting necessary credentials Installing a provisioning profi leAlthough iOS web apps can perform and even look similar to native apps, many mobile web developers still want to package their ...
Page 366
334 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENTof programming in Objective-C, don’t sweat. Although you need to utilize Xcode to wrap your web apps inside a native wrapper, you don’t need to learn Objective-C. I promise! Xcode is a free download from the Mac App Store. If you can’...
Page 367
GETTING AN IOS DEVELOPER CERTIFICATEAfter you have been accepted into the iOS Developer Program, you can log in to the iOS Dev Center and download your developer certifi cate, which is required before you can install native apps onto an iOS device. This certifi cate links your identity to the v...
Page 368
336 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENT 16. Click the Certifi cates link on the left. 17. Click the Request Certifi cate button. 18. Click the Choose File button on the Create iOS Development Certifi cate page and choose the .certSigningRequest fi le you just created on you...
Page 369
RETRIEVING THE DEVELOPER CERTIFICATEWhen you receive an approval email you can go to the Program Portal to download the certifi cate. You download the developer certifi cate fi le (which is named developer_identity.cer) from Apple’s iOS Provisioning Portal at https://developer.apple.com/ios/...
Page 370
338 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENT 6. Go to the iOS Provisioning Portal at https://developer.apple.com/ios/manage/overview/index.action. 7. Click the Devices link and then click the Add Device button. 8. Type a descriptive name for the device in the space provided. From ex...
Page 371
For example, a typical App ID might look something like the following: 2MDCRUBLFG.com.richwagner.myamazingwebappTo create an App ID for your app: 1. Go to the iOS Provisioning Portal at https://developer.apple.com/ios/manage/overview/index.action. 2. Click the App IDs link. 3. Click the New App ...
Page 372
340 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENTCREATING A PROVISIONING PROFILE If you have proceeded in order through the chapter, you have submitted and obtained a developer certifi cate, registered your iOS device for testing, and created an App ID. Now, you are ready to create the ...
Page 373
4. Type the name of the profi le in the Profi le Name box. 5. The name of your developer certifi cate (which you created earlier in the chapter) displays next to the Certifi cates label. Click the checkbox to assign your developer certifi cate to this profi le. 6. Choose the App ID you cr...
Page 374
342 ❘ CHAPTER 19 PREPARING FOR NATIVE IOS DEVELOPMENTThat’s it! You have now gotten all of the busy work out of the way, so as you continue with Chapter 20, you can get back to wrapping your web app inside a native iOS shell. EXERCISES 1. What software is needed to create native iOS apps? ...
Page 375
WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSJoining the iOS Developer ProgramMembership into the iOS Developer Program is required for installing, testing, and distributing native iOS apps.Obtaining a Developer Certifi cateA developer certifi cate ties your identity to a validated contact ...
Page 376
c19.indd 344c19.indd 34412/22/11 9:01:52 AM12/22/11 9:01:52 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 377
PhoneGap: Native Apps from Your HTML, CSS, and JavaScriptWHAT YOU WILL LEARN IN THIS CHAPTER:Creating a PhoneGap project in XcodeAdding your web app code into PhoneGapTweaking the project to fi t your needs Worlds collide. At least that’s what happens when you use a tool like PhoneGap or one o...
Page 378
346 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT 3. Extract the .dmg fi le and then double-click the PhoneGap .pkg fi le launch the Installer. 4. Navigate through the steps in the Installer to install the tool onto your computer. CREATING A NEW PHONEGAP PROJECT IN...
Page 379
5. In the next dialog box (see Figure 20-2), enter the name of your project in the Product Name fi eld. I am calling mine Top Filmz. 6. Enter a unique company id in a “reverse domain” syntax. I am using com.richwagner.app. 7. Uncheck the Use Automatic Reference Counting box. This is an impo...
Page 380
348 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPTRUNNING THE BASE PROJECTBefore continuing, you need to confi rm that the Xcode part of your app is compiling and functioning correctly by running it inside of the iOS Simulator. Check out the Scheme combo box that list...
Page 381
4. Make sure that the Copy Items into Destination Group’s Folder box is unchecked. 5. Click Finish. As shown in Figure 20-5, the Xcode project now has a direct link with the www folder.FIGURE 20-5Click the Run button to run the app again in the iOS Simulator. Now that you have a connection wi...
Page 382
350 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPThandlers that you can uncomment if you want to utilize them in your app. The template index.html fi le is shown here:<!DOCTYPE html><html> <head> <title></title> <meta name=”vi...
Page 383
ready to roll */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelopertips.com/cocoa/launching-your-own-application- via-a-custom-url-scheme.html for more details -jm */ function onDevice...
Page 384
352 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT 3. Replace the existing boilerplate text in the body with the body code in the Top Filmz fi le. 4. Save the updated fi le. 5. Top Filmz app doesn’t have any supporting CSS, JS, or image fi les, but if your app h...
Page 385
function preventBehavior(e) { e.preventDefault(); }; document.addEventListener(“touchmove”, preventBehavior, false); */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelop...
Page 386
354 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT <li><a href=”#larsAndTheRealGirl”>Lars and the Real Girl</a></li> <li><a href=”#babettesFeast”>Babette’s Feast</a></li> <li&...
Page 387
<div data-role=”header”> <h1>Lars and the Real Girl</h1> </div> <div data-role=”content” style=”background-color:#ffffff”> <img class=”poster” src=”http://ecx.images-amazon.com/images/I/ 51Sn3wcuNGL._SL500...
Page 388
356 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT </div> <div data-role=”content” style=”background-color:#ffffff”> <img class=”poster” src=”http://ecx.images-amazon.com/images/I/ 51MeImdd92L._SL500_AA3...
Page 389
<img class=”poster” src=”http://ecx.images-amazon.com/images/I/ 51c02AOAyCL._SL500_AA300_.jpg”/> <a href=”http://www.imdb.com/title/tt0286106/” data-role=”button”>Go to IMDB Page</a> <a href=”#home” data-ro...
Page 390
358 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPT 2. In the key-value pairs displayed in Xcode, locate the External Hosts key. 3. Click the + button next to the External Hosts key and enter *.jquery.com in the value fi eld. 4. Click the + button again next to the E...
Page 391
2. Locate the shouldStartLoadWithRequest method: (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 3. Replace the existing method code with the following updated source code: (BOOL)...
Page 392
360 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPTRUNNING THE FINISHED APPWhen you have made all of the fi nal adjustments, you are ready to test your fi nished app. Click the Run button in Xcode and run the app in iOS Simulator. Figure 20-9 shows the app when it loa...
Page 393
EXERCISES 1. True/False. When adding your web app code to the PhoneGap project, you should overwrite the existing index.html fi le that is supplied by PhoneGap. 2. Why won’t a PhoneGap web app access an external resource by default? 3. What are the naming conventions and the dimensions of th...
Page 394
362 ❘ CHAPTER 20 PHONEGAP: NATIVE APPS FROM YOUR HTML, CSS, AND JAVASCRIPTWHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSInstalling PhoneGapDownload and install PhoneGap after you have installed Xcode Create a PhoneGap projectUse the PhoneGap-based Application template when you create a new...
Page 395
Submitting Your App to the App StoreWHAT YOU WILL LEARN IN THIS CHAPTER:Getting a distribution certifi cate Obtaining a distribution provisioning profi le Publishing your app to the App Store If you have made it this far, you’ve designed, coded, and tested your web app, and you’ve wrapped i...
Page 396
364 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORESTEP 1: GETTING A DISTRIBUTION CERTIFICATEiOS apps must be signed by a valid certifi cate before they can be run on an iPhone, iPad, or iPod touch. Similar to what you did when you obtained a developer certifi cate to develop and install ...
Page 397
Step 2: Creating a Distribution Provisioning Profi le ❘ 365 5. If you have a certifi cate ready, click the Download button. If you don’t, follow the instructions to create one. After it is created, then you can download the developer_identity.cer fi le and continue. 6. When you have downl...
Page 398
366 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORETRY IT OUT Obtaining a Distribution Provisioning Profi leA Distribution Provisioning Profi le is much like your app’s passport and is required for entry into the App Store. Here’s how to download your own Distribution Provisioning Pro...
Page 399
Step 2: Creating a Distribution Provisioning Profi le ❘ 367 7. Give Apple a few moments to process your request and then refresh the browser to see the profi le status changed to Active. 8. Click the Download button to download the .mobileprovision fi le. 9. Save this fi le to your hard d...
Page 400
368 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORESTEP 3: BUILDING A DISTRIBUTION RELEASE OF YOUR APPNow that you have all the preliminaries completed and your credentials in order, you are ready to publish the fi nal distribution release of your native iOS app. TRY IT OUT Publishing a Di...
Page 401
Step 4: Submitting Your App to the App Store ❘ 369How It WorksWhen you perform these actions, you build an archive fi le. In the next section, you take this archive fi le and submit it to the App Store. STEP 4: SUBMITTING YOUR APP TO THE APP STOREAfter you have your app compiled and ready to ...
Page 402
370 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STORETRY IT OUT Submitting to the App Store Follow these steps to submit your app to the Apple App Store. 1. Log in to the iOS Dev Center at http://developer.apple.com. 2. Click the iTunes Connect link. You are taken to the iTunes Connect webs...
Page 403
Step 4: Submitting Your App to the App Store ❘ 371 6. Enter the name of your app in the App Name box. 7. Enter a unique number to identify your app. This value isn’t a version number; it’s a way to differentiate between multiple apps you submit. 8. Select your provisioning profi le from ...
Page 404
372 ❘ CHAPTER 21 SUBMITTING YOUR APP TO THE APP STOREHow It WorksYou just walked through the fi nal, critical stage of submitting your app to the App Store. That’s it! You now just have to wait for Apple to review your app over the next week or weeks before it is offi cially available. EX...
Page 405
Step 4: Submitting Your App to the App Store ❘ 373WHAT YOU LEARNED IN THIS CHAPTERTOPICKEY CONCEPTSDistribution Certifi cateiOS apps must be signed by a valid certifi cate before they can be run on an Apple device.Distribution Provisioning Profi leA Provisioning Profi le is a collection of ...
Page 406
c21.indd 374c21.indd 37412/22/11 9:04:59 AM12/22/11 9:04:59 AMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 407
Exercise AnswersCHAPTER 1 1. A native app runs executable code on the device and is installable through the App Store. A web app runs inside of Safari on iOS and requires no installation onto the device. A native app is written in Objective-C whereas a web app is written using HTML, CSS, JavaScri...
Page 408
376 ❘ APPENDIX EXERCISE ANSWERS 6. Use arguments.length to determine to the total number of parameters passed to a function. 7. No. JavaScript treats an empty string as a different value than null. CHAPTER 3 1. The node is the basic component of the DOM. 2. False. A DOM hierarchy is not exa...
Page 409
Chapter 9 ❘ 377CHAPTER 6 1. Edge-to-edge navigation lists are the standard way to present list or hierarchical information. 2. It is generally recommended that you size your UI element by 40 pixels or more for ease of touch. 3. False. You won’t fi nd it on an iOS device. 4. False. Web app...
Page 410
378 ❘ APPENDIX EXERCISE ANSWERS CHAPTER 10 1. Mouse emulation, touch, and gesture events. 2. No, there are several touch interactions that are handled for you by default by Safari on iOS. These include fl ick-scrolling, zoom pinching and unpinching, and one-fi nger panning (or scrolling). ...
Page 411
Chapter 18 ❘ 379CHAPTER 14 1. The user agent string of an iPad has the text iPad in its platform string portion. 2. Stroking refers to drawing a line on a path, whereas fi lling is the painting of an area inside a path. 3. A path is composed of a series of subpaths, such as a straight line or ...
Page 412
380 ❘ APPENDIX EXERCISE ANSWERS 3. Enable the Debug Console through Settings ➪ Safari ➪ Developer. Once enabled, the Debug Console is displayed below the URL bar when an error occurs. CHAPTER 19 1. Xcode, which is available for free from the Mac App Store. 2. All of the above. The Devel...
Page 413
381Symbols!=, comparison operator, 26%=, assignment operator, 26*=, assignment operator, 26+=, assignment operator, 26-=, assignment operator, 26/=, assignment operator, 26<, comparison operator, 27<=, comparison operator, 27>, comparison operator, 27>=, comparison operator, 27... (el...
Page 414
382apps (continued)data URL, 237–244native, 331–341App ID, 334–335Apple Developer Program, 332developer certifi cates, 333–335Development Provisioning Profi le, 338–340provisioning profi le, 339–341Safari, 4, 5Xcode, 331–332offl ine, 267–283DOM, 308HTML5 cache, 267–273key-va...
Page 415
383blur, 190body, 48font-size:small, 90index.html, 67landscape, 200onload, 93, 264onorientationchange, 196orient, 197, 200portrait, 200body > .dialog, 170bookmark icons, 11bookmarklets, 235–239iPhone, 320Booleans, 40–41box-shadow, 146bread crumbs, 104–105breakpoints, 323Bundle Identifi ...
Page 416
384conference app, 123–130constants, 25Contacts, 103content div, 91iWebKit, 292contenteditable, 116contextcanvas, 252–254drawImage(), 259drawImg(), 259fillStyle, 262JavaScript, 210strokeStyle, 262context.clearRect(), 254context.fillRect(), 254context.globalAlpha, 263context.strokeRect(), 254c...
Page 417
385dbName, 281db.transaction, 282Dean Edward’s Packer, 215Debug Console, 324–325debugging, 315–328devices, 324–327Safari, 318–324declaration, manifest fi les, 268default-theme.css, 153, 165dialog, 169–170GIF, 155landscape mode, 154destHeight, 259destination page, UI, 162–166destwid...
Page 418
386double-tap fi nger gesture, 10, 189do/while, 32–33drag fi nger gesture, 9drawImage()canvas, 257–263context, 259onload, 258drawImg(), 259EE, 134E(attr), 134E + F, 134E > F, 134E ~ F, 134E F, 134E:after, 135E::after, 135E:before, 135E::before, 135E:checked, 135edge-to-edge navigation, 1...
Page 419
387iPhone, 189UI, 107–109firstChild, 53Flash media, 11, 16Safari, 80–82fldBillTotal, 244fldFinalTotal, 244fldTipPercent, 244fl ick fi nger gesture, 9float, 91fl oating-point numbers, 40float-left, 128FLV, 11.flv, 16focus, 190font, 91canvas, 253fonts. See also text size adjustmentSafari, 10...
Page 420
388Hello World, 65–77detail pages, 70–75index page, 66–67main screen, 67–70setting up, 66Herrera, Richard, 235hexadecimal numbers, 40horizontal scrolling, 109:hover, 189href, 69# (hash mark), 70div, 157id, 179jQuery Mobile, 279tel:, 224ul, 157HTMLanimations, 258data URL, 237DOM, 47, 48loc...
Page 421
389calc(), 171keydown, 182key-value storage, 279name, 171select, 168input fi elds, 108input type=”file”, 80insertAfter(), 56insertBefore(), 55, 59cloneNode(), 61moveNode(), 60integers, 40integrated development environment (IDE), 331intermStringTable(), 311internal URLlink clicks, 182panels, ...
Page 422
390iui.showPage(), 178iWebKit, 291–297CSS, 292JavaScript, 292viewport, 292JJava applets, 11Safari, 80Javadoc, 34JavaScript, 18–45; (semicolon), 19{} (curly brackets), 19animations, 217–218arrays, 42–45assignment operators, 26bookmarklets, 233–237Booleans, 40–41calc(), 171canvas, 256ca...
Page 423
391jquery.js, 121JSDoc, 34JSMin, 305–306JSON, 1878Kkey, 275key event trapping, 202keyboard, 202Keychain Access, 333, 335keydown, 190input, 202keypress, 190keyup, 190key-value storagedeleting data, 276HTML5, 274–280loading data, 275–276offl ine apps, 274–281saving data, 274–275Llandscap...
Page 424
392maps.google.com, 228margin, 151marketing version, user agent, 250masks, 213–214master-detail, 117master.js, 123mathematical operators, 27maximum-scale, 100viewport, 84–85media queriesHTML, 89–90iPad, 116websites, 88media tags, HTML5, 15–18Safari, 7Metrics pane, 322middle.png, 143minimu...
Page 425
393octal numbers, 40offl ine apps, 267–283DOM, 308HTML5 cache, 267–273key-value storage, 274–280SQL database, 281–282.ogg, 16OggTheora, 16oldValue, 275onchange, 279onclick, 224SMS, 227one-fi nger gestures, 188–189panning, 188onLine, 271onloadbody, 93, 264drawImage(), 258Image, 264init...
Page 426
394phone calls, 222–224PhoneGap, 343–355index.html, 347–348web apps, 347–355Xcode, 343Photos, navigation lists, 103pinch close fi nger gesture, 10pinch open fi nger gesture, 10pinch/unpinch zoom fi nger gesture, 189platform string, user agent, 250playcount, 16PlotKit, 213plug-ins, 11Sa...
Page 427
395SSafari, 10AJAX, 4Back button, 180bookmarklets, 234–235build number, 250canvas, 249click, 190compatibility, 80–82cookies, 4CSS, 3, 133animation, 7effects, 7selectors, 133–140data URL, 238debugging, 319–324Develop menu, 320–321DOM, 48external URL, 356–357fonts, 109geolocation, 6–7...
Page 428
396sessionStorage, 275, 279getItem(), 275setItem(), 274setAttribute(), 59–60setInterval(), 191setItem(), 275setLocalKeyValue(), 279setSessionKeyValue(), 279setTimeout(), 178setTimeout, 180Settings, navigation lists, 103shadows, 210–211shadowBlur, 210canvas, 253shadowColorcanvas, 253CSS, 210sh...
Page 429
397SVG. See Scalable Vector GraphicsswapUpdate(), 271, 273SWF, 11SWFObject, 81–83switchJavaScript, 30–31user agent, 251System Preferences, 11Ttap fi nger gesture, 9, 189target, 193target=”_blank”, 236targetNode, 55, 56target=”_replace”, 162, 182target=”_self”, 162link clicks, 182...
Page 430
398URI Kitchen, 245URLAJAX URL, 158data URL, 237–244externalAJAX, 161–162link clicks, 182Safari, 356–357UI link type, 158Xcode, 355–356internallink clicks, 182panels, 158–160UI link type, 158url, 275URL listings, manifest fi les, 268Url2iphone, 245user agentcanvas, 249–252Safari, 249...
Page 431
399iWebKit, 292jQuery Mobile, 286landscape mode, 137, 201orient, 154portrait mode, 137, 191Safari, 82–85WW3C, 47web apps, 3–14frameworks, 285–299iOS Simulator, 317local network, 11–12PhoneGap, 347–355resource constraints, 10–11Safari, 3–9Wi-Fi, 233Web Hypertext Application Technolog...
Page 432
400window.applicationCache.OBSOLETE, 272window.applicationCache.UNCACHED, 272window.applicationCache.UPDATEREADY, 272window.iui, 177window.orientation, 123window.scroll(), 116with, 312Word, 10Xx.509 certifi cates, 11XcodeDevelopment Provisioning Profi le, 339Distribution Provisioning Profi le,...
Page 433
bindex.indd 401bindex.indd 40112/21/11 2:29:05 PM12/21/11 2:29:05 PMactionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 434
Try Safari Books Online FREE for 15 days + 15% off for up to 12 Months*START YOUR FREE TRIAL TODAY!VisitactionURI(http://www.safaribooksonline.com/wrox29): actionURI(http://www.safaribooksonline.com/wrox29):www.safaribooksonline.com/wrox29 to get started.With Safari Books Online, you can experien...
Page 435
actionURI(http://www.it-ebooks.info):www.it-ebooks.infoactionURI(http://www.it-ebooks.info):http://freepdf-books.com
Page 436
Related Wrox BooksBeginning iOS 5 Application DevelopmentBeginning iOS Game Development Professional iPhone and iPad Application DevelopmentProfessional iPhone and iPad Database Application Programming Wei-Meng LeeBeginningiOS 5 Application DevelopmentWrox Programmer to Programmer™IN FULL COLO...