Web or SDK Development

iPhone in Action:Web Development

or SDK?Christopher Allen

March 2009

Tuesday, March 3, 2009

Christopher Allen


manning.com/callen


iPhone in Action:Web Development

or SDK?


iPhone in Action:Web Development or SDK?


There are two ways that you can program for the iPhone, using web development tools and using the SDK




Web development leverages internet technologies




Web development leverages internet technologies

The iPhone SDK leverage the full power of the iPhone and years of Apple’s development experience





The iPhone’s Mobile Safari features:HTML 4.01 and XHTML 1.0CSS 2.1 and some CSS 3Full DOMJavascript 1.4XMLHttpRequest

thus support for AJAXCanvasPDF & QuicktimeUp to 8 “tabs”Many custom WebKit functions



Additional Mobile Safari features:



Additional Mobile Safari features:Webkit CSS Transforms


60 CHAPTER 4 Advanced WebKit and textual web apps

The properties in table 4.3 are applied to boxes within CSS. Much like relative posi-tioning, they don’t affect layout, so you have to be careful with them.

The following definition could be added to our roundedbox class from listing 4.1, turning it into a wackybox class:

-webkit-transform: rotate(30deg) translate(5%,5%);

The result is that your news article appears at an angle, moved somewhat off the screen. Figure 4.2 shows this change, which you can compare to the nontransformed news article that appears a few pages back as figure 4.1. This particular transform isn’t that useful if you want people to read it, but it could be a nice background for a news site or something similar. There are many other things that you can do with transforms, such as setting up banners, printing text at a variety of sizes, and making similar changes on static web pages. Some will be gimmicks, but others can have func-tional benefits.

Before we leave transforms behind, we’ll note that they support one other property, –webkit-transform-origin, which can be used to move the origin for scales and skews away from the center of the object.

Although you can do quite a bit with transforms all on their own, their real power appears when you start working with the implicit animation of transi-tions, which are the next WebKit func-tion that we’re going to talk about.

Table 4.3 The WebKit transforms apply to output elements in a variety of ways.

Function Argument Summary

scale!scaleX!scaleY

Number Resizes the object

rotate CSS angle Rotates the object

translate!translateX!translateY

Length (or percentage) in X direction, Length (or percentage) in Y direction

Moves the object

skew!skewX!skewY

CSS angle Skews the object

Figure 4.2 Our roundedbox transformed into !a wackybox, which is rotated 30 degrees and translated 5 percent along each of the X and Y axes.

Licensed to null <null>


Additional Mobile Safari features:Webkit CSS TransformsCanvas - Scalable Vector Graphics


120 CHAPTER 6 Using Canvas for web apps

Third, you can use overlaying HTML <div>s—just the sort of absolute positioning that we’ve argued against elsewhere in this book (but which is perhaps necessary in this situation).

Discussions on this topic are scattered across the internet, alongside individuals’ solutions for them. At the time of writing, none of the library solutions were compre-hensive enough for us to recommend them here, but take a look around if you need text in your Canvas object and you don’t want to write the routines yourself.

With that disappointment behind us, we’re going to finish our look at Canvas by seeing how to put it all together.

6.8 Putting it togetherHaving shown lots of stand-alone Canvas methods, we’ll now show how a variety of shapes can be painted onto a single Canvas object. Figure 6.9 includes a pair of screenshots that show off most of the Canvas functionality that we’ve discussed.

Figure 6.9 Canvas allows for a wide variety of shapes to be created from a small set of primitives, as this combination of images, patterns, curves, and shapes shows.



Additional Mobile Safari features:Webkit CSS TransformsCanvas - Scalable Vector GraphicsDatabase - Local SQLite Storage

iPhone in Action:Web Development or SDK? 69Recognizing touches and gestures

The results are shown in figure 4.4, which as you can see make good use of some of the WebKit CSS ele-ments that we highlighted earlier, showing off the great functionality that the WebKit provides you with.

The JavaScript database is the last WebKit element that you can make use of on the iPhone, but it can also be used more broadly. The last couple of items that we’ll discuss are instead iPhone specific.

4.4 Adjusting the chromeIn the previous chapter we showed you some simple methods for dealing with the iPhone chrome. We explained how to scroll the URL bar and noted that the status bar and the bottom bar could not be changed. Using the WebKit, you have slightly more control over things, provided that your user is using iPhone OS 2.1 or higher. All you need to do is enter a new metatag on your web app’s home page:

<meta name="apple-mobile-web-app-capable" content="yes" />

This code doesn’t change the web app when it’s run through the browser. It’s only when a user chooses to save your app to his or her iPhone home page and then calls it back up that things will act differently. When called back up, your app will appear without the URL bar or the bottom bar: only the status bar continues to eat space in your web app.

Because your user will not be able to navigate using the URL bar, you have to be very careful when using this metatag. You should only do so when navigation is totally self-contained within the program—for example, if you’ve built it with iUI or Dash-code, both topics that we’ll return to in future chapters. This metatag is only appropri-ate for a true web app.

There’s one other metatag of note: apple-mobile-web-app-status-bar-stylecan have its content set to default, black, or black-translucent to change the way the status bar looks when a user re-enters your program:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

That’s as much control as you have over the iPhone’s chrome; now let’s move on to the next iPhone-specific topic: touches and gestures.

4.5 Recognizing touches and gesturesIn the previous chapter we introduced some rudimentary ways to access events on the iPhone. We showed you how to correlate iPhone-initiated touches with regular JavaScript events such as mouseup and mousedown. However, now that you’re diving

Figure 4.4 Data retrieved from a database can then be displayed.



Additional Mobile Safari features:Webkit CSS TransformsCanvas - Scalable Vector GraphicsDatabase - Local SQLite StorageTouch Events


touchStarttouchMovetouchEnd

touchCancelgestureStartgestureChangegestureEnd

changedTouchestargetTouches

touchesorientationrotationscale


Additional Mobile Safari features:Webkit CSS TransformsCanvas - Scalable Vector GraphicsDatabase - Local SQLite StorageTouch EventsHide Mobile Safari’s Chrome

iPhone in Action:Web Development or SDK? 69Recognizing touches and gestures

The results are shown in figure 4.4, which as you can see make good use of some of the WebKit CSS ele-ments that we highlighted earlier, showing off the great functionality that the WebKit provides you with.

The JavaScript database is the last WebKit element that you can make use of on the iPhone, but it can also be used more broadly. The last couple of items that we’ll discuss are instead iPhone specific.

4.4 Adjusting the chromeIn the previous chapter we showed you some simple methods for dealing with the iPhone chrome. We explained how to scroll the URL bar and noted that the status bar and the bottom bar could not be changed. Using the WebKit, you have slightly more control over things, provided that your user is using iPhone OS 2.1 or higher. All you need to do is enter a new metatag on your web app’s home page:

<meta name="apple-mobile-web-app-capable" content="yes" />

This code doesn’t change the web app when it’s run through the browser. It’s only when a user chooses to save your app to his or her iPhone home page and then calls it back up that things will act differently. When called back up, your app will appear without the URL bar or the bottom bar: only the status bar continues to eat space in your web app.

Because your user will not be able to navigate using the URL bar, you have to be very careful when using this metatag. You should only do so when navigation is totally self-contained within the program—for example, if you’ve built it with iUI or Dash-code, both topics that we’ll return to in future chapters. This metatag is only appropri-ate for a true web app.

There’s one other metatag of note: apple-mobile-web-app-status-bar-stylecan have its content set to default, black, or black-translucent to change the way the status bar looks when a user re-enters your program:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

That’s as much control as you have over the iPhone’s chrome; now let’s move on to the next iPhone-specific topic: touches and gestures.

4.5 Recognizing touches and gesturesIn the previous chapter we introduced some rudimentary ways to access events on the iPhone. We showed you how to correlate iPhone-initiated touches with regular JavaScript events such as mouseup and mousedown. However, now that you’re diving

Figure 4.4 Data retrieved from a database can then be displayed.



The iPhone SDK features:Same Mach kernel and Core OS as

Macintosh




MacintoshMost of the same Core Services as

Macintosh





MacintoshMost of functionality available to

Apple’s iPhone apps






Apple’s iPhone appsCocoa Touch with UIKit






Apple’s iPhone appsCocoa Touch with UIKitObjective C and C++ compiler






Apple’s iPhone appsCocoa Touch with UIKitObjective C and C++ compilerInterface Builder with UIKit

templates






Apple’s iPhone appsCocoa Touch with UIKitObjective C and C++ compilerInterface Builder with UIKit

templatesGreat debugging and profiling





Web Development Advantages



Same Advantages as in 2007

iPhone in Action:

Web Development

or SDK?



Simplicity




Simplicity

Easier then using low-level C




Simplicity


Languages are dynamic




Simplicity



No memory management




Simplicity




Display of data is easy




Simplicity





Deployment is an upload




Simplicity





Deployment is an upload

Easy to use




Simplicity

Dynamism




Simplicity

Dynamism

Update functionality anytime




Simplicity

Dynamism


Easy to fix bugs




Simplicity

Dynamism


Easy to fix bugs

Give users the latest data




Simplicity

Dynamism

Globalized




Simplicity

Dynamism

Globalized

Part of global network




Simplicity

Dynamism

Globalized


One program for iPhone and desktop




Simplicity

Dynamism

Globalized



Access to rest of web




Simplicity

Dynamism

Globalized



Access to rest of web

Connected to everyone



Multiple Platforms

iPhone in Action:

Web Development

or SDK?


SDK Development Advantages

Sophistication




Sophistication

Great depth of functionality




Sophistication


Superior development environment




Sophistication



Deeper access to internals




Sophistication




Camera, accelerometers, GPS, gestures, contacts, photos




Sophistication




Camera, accelerometers, GPS, gestures, contacts, photos

Better graphics and 3D




Sophistication

Accessibility




Sophistication

Accessibility

Always available




Sophistication

Accessibility

Always available

Functions without net




Sophistication

Accessibility

Always available


Cache data




Sophistication

Accessibility

Always available


Cache data

Native speed




Sophistication

Accessibility

Always available


Cache data

Native speed

Private




Sophistication

Accessibility

Monetization




Sophistication

Accessibility

Monetization

Easy to sell through App Store




Sophistication

Accessibility

Monetization

Easy to sell through App Store

Does not depend on advertisements or subscriptions





Both development approaches have their advantages.




You want to take advantage of each programming methods strengths and use it when appropriate.




You want to take advantage of each programming methods strengths and use it when appropriate.

Don’t blindly just use the SDK or the Web because you're more comfortable with it.





There are options to combine both approaches and thus play to their strengths




Mirrored Development





Mixed Development





Mixed Development

Client-Server Development






Write a free web version as well a more fully featured SDK version



Mirrored Developmentapnews.com & Mobile News App

iPhone in Action:

Web Development

or SDK?




Mixed Development

Write different parts of a program suite via different means



Mixed Developmentgoogle.com/reader & Maps App

iPhone in Action:

Web Development

or SDK?




Client-Server Development

Link in to web software through the SDK



Mirrored DevelopmentShowtimes App & Gifts App

iPhone in Action:

Web Development

or SDK?




Seven kinds of iPhone development




iPhone Compatible Web





iPhone Friendly Web





iPhone Friendly Web

iPhone Optimized Web





iPhone Friendly Web


iPhone Web Apps





iPhone Friendly Web


iPhone Web Apps

Dashcode Web





iPhone Friendly Web


iPhone Web Apps

Dashcode Web

Native Apps SDK





iPhone Friendly Web


iPhone Web Apps

Dashcode Web

Native Apps SDK

SDK Client App w/Web Server



Web App Exemplarsgoogle.com/reader

iPhone in Action:

Web Development

or SDK?


Web App Exemplarsiphone.facebook.com

iPhone in Action:

Web Development

or SDK?


Web App Exemplarshahlo.com

iPhone in Action:

Web Development

or SDK?


Web App Exemplarsapnews.com

iPhone in Action:

Web Development

or SDK?


Web App Exemplars101cookbooks.com/iphonerecipes

iPhone in Action:

Web Development

or SDK?


Resources


iPhone Dev Centerdeveloper.apple.com/iphone/

iPhone in Action:

Web Development

or SDK?


http://developer.apple.com/iphone/


Web Apps Dev Centerdeveloper.apple.com/webapps

iPhone in Action:

Web Development

or SDK?




iPhoneWebDeviPhoneWebDev.com

iPhone in Action:

Web Development

or SDK?




iUI Frameworkiui.googlecode.com



iUI Frameworkiui.googlecode.comNavigation windows from JSON

objects




objectsNavigational objects using canvas UI

tags for speed





tags for speedHandles phone rotation events





tags for speedHandles phone rotation eventsSupports XmlHttpRequest





tags for speedHandles phone rotation eventsSupports XmlHttpRequestA great iPhone user experience





tags for speedHandles phone rotation eventsSupports XmlHttpRequestA great iPhone user experience1.8KB with gzip and Dojo shrinksafe





tags for speedHandles phone rotation eventsSupports XmlHttpRequestA great iPhone user experience1.8KB with gzip and Dojo shrinksafeMoviesapp.com written in 5 hours...



moviesapp.com using iUI

iPhone in Action:

Web Development

or SDK?


SQLite Safaritinyurl.com/sqlitesafari

iPhone in Action:

Web Development

or SDK?


DashCode

iPhone in Action:

Web Development

or SDK?


Dashcode Development

iPhone in Action:

Web Development

or SDK?


TouchCode (json,xml,rss,...)touchcode.googlecode.com

iPhone in Action:

Web Development

or SDK?




iPhone In Action:Introduction to Web & SDK Developmentmanning.com/iphoneinaction



iPhone In Action:Introduction to Web & SDK Developmentmanning.com/iphoneinactionOriented for web developers



iPhone In Action:Introduction to Web & SDK Developmentmanning.com/iphoneinactionOriented for web developersTopics:

Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI





Learning about the iPhone native SDK





Learning about the iPhone native SDKProgramming with Cocoa Touch's UIKit





Learning about the iPhone native SDKProgramming with Cocoa Touch's UIKitBuilding apps that delve into the iPhone's

toolbox






toolboxBlending web & iPhone SDK development







Available Now in Print & PDF







Available Now in Print & PDFUpdates and Blog at

iphoneinaction.manning.com



<mailto:[email protected]>


mailto:[email protected]

mailto:[email protected]

Web or SDK Development

Technology

iphone sdk

iphone os

iphone specific

iphone chrome

static web pages

webkit css ele

webkit elementthat

canvas functionality