March 2009
iPhone in Action:
Web Development
or SDK?
Christopher Allen
Tuesday, March 3, 2009

Christopher Allen
Tuesday, March 3, 2009

manning.com/callen
Tuesday, March 3, 2009

iPhone in Action:
Web Development
or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

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
Tuesday, March 3, 2009

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
Tuesday, March 3, 2009

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
The iPhone SDK leverage the full
power of the iPhone and years of
Apple’s development experience
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone’s Mobile Safari features:
HTML 4.01 and XHTML 1.0
CSS 2.1 and some CSS 3
Full DOM
Javascript 1.4
XMLHttpRequest
thus support for AJAX
Canvas
PDF & Quicktime
Up to 8 “tabs”
Many custom WebKit functions
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Additional Mobile Safari features:
Tuesday, March 3, 2009

turning it into a wackybox class:
-webkit-transform: rotate(30deg) translate(5%,5%);
iPhone in Action:
The result is that your news article appears at an angle, moved somewhat off the
Figure 4.2 shows this change, which you can compare to the nontransformed new
Web Development or SDK?
that appears a few pages back as figure 4.1. This particular transform isn’t that
you want people to read it, but it could be
a nice background for a news site or
something similar. There are many other
Additional Mobile Safarido with transforms,
things that you can features:
Webkit CSS 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-
Tuesday, March 3, 2009

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.
iPhone in Action:
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 together
Web Development or SDK?
Having 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.
Additional Mobile Safari features:
Webkit CSS Transforms
Canvas - Scalable Vector Graphics
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.
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK? 69
Recognizing touches and gestures
The results are shown in figure 4.4, which as you
can Additional Mobile Safari the WebKit CSS ele-
see make good use of some of features:
ments that we highlighted earlier, showing off the great
Webkit CSS Transforms
functionality that the WebKit provides you with.
The JavaScript Scalable Vector Graphics
Canvas - database is the last WebKit element
that you can make use of on SQLite Storagecan also
Database - Local the iPhone, but it
be used more broadly. The last couple of items that
we’ll discuss are instead iPhone specific.
Adjusting the chrome
In 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
Figure 4.4 Data retrieved from a
Tuesday, your web app’s home page:
March 3, 2009

iPhone in Action:
Web Development or SDK?
touchStart
Additional Mobile Safari features:
touchMove
Webkit CSS Transforms
touchEnd
Canvas - Scalable Vector Graphics touchCancel
Database - Local SQLite Storage gestureStart
Touch Events gestureChange
gestureEnd
changedTouches
targetTouches
touches
orientation
rotation
scale
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK? 69
Recognizing touches and gestures
The results are shown in figure 4.4, which as you
can Additional Mobile Safari the WebKit CSS ele-
see make good use of some of features:
ments that we highlighted earlier, showing off the great
Webkit CSS Transforms
functionality that the WebKit provides you with.
The JavaScript Scalable Vector Graphics
Canvas - database is the last WebKit element
that you can make use of on SQLite Storagecan also
Database - Local the iPhone, but it
be used more broadly. The last couple of items that
Touch Events
we’ll discuss are instead iPhone specific.
Hide Mobile Safari’s Chrome
Adjusting the chrome
In 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
Figure 4.4 Data retrieved from a
Tuesday, your web app’s home page:
March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit
Objective C and C++ compiler
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit
Objective C and C++ compiler
Interface Builder with UIKit
templates
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit
Objective C and C++ compiler
Interface Builder with UIKit
templates
Great debugging and profiling
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Same Advantages as in 2007
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management
Display of data is easy
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management
Display of data is easy
Deployment is an upload
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management
Display of data is easy
Deployment is an upload
Easy to use
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Update functionality anytime
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Update functionality anytime
Easy to fix bugs
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Update functionality anytime
Easy to fix bugs
Give users the latest data
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
One program for iPhone and
desktop
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
One program for iPhone and
desktop
Access to rest of web
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
One program for iPhone and
desktop
Access to rest of web
Connected to everyone
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Multiple Platforms
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Deeper access to internals
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Deeper access to internals
Camera, accelerometers, GPS,
gestures, contacts, photos
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Deeper access to internals
Camera, accelerometers, GPS,
gestures, contacts, photos
Better graphics and 3D
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Cache data
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Cache data
Native speed
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Cache data
Native speed
Private
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Monetization
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Monetization
Easy to sell through App Store
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Monetization
Easy to sell through App Store
Does not depend on
advertisements or subscriptions
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Both development approaches have
their advantages.
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Both development approaches have
their advantages.
You want to take advantage of each
programming methods strengths and
use it when appropriate.
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Both development approaches have
their advantages.
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.
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Mirrored Development
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Mirrored Development
Mixed Development
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Mirrored Development
Mixed Development
Client-Server Development
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Mirrored Development
Write a free web version as well a
more fully featured SDK version
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Mirrored Development
apnews.com & Mobile News App
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Mixed Development
Write different parts of a program
suite via different means
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Mixed Development
google.com/reader & Maps App
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Client-Server Development
Link in to web software through
the SDK
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Mirrored Development
Showtimes App & Gifts App
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
iPhone Friendly Web
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
iPhone Friendly Web
iPhone Optimized Web
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
iPhone Friendly Web
iPhone Optimized Web
iPhone Web Apps
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
iPhone Friendly Web
iPhone Optimized Web
iPhone Web Apps
Dashcode Web
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
iPhone Friendly Web
iPhone Optimized Web
iPhone Web Apps
Dashcode Web
Native Apps SDK
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
iPhone Friendly Web
iPhone Optimized Web
iPhone Web Apps
Dashcode Web
Native Apps SDK
SDK Client App w/Web Server
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
google.com/reader
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
iphone.facebook.com
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
hahlo.com
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
apnews.com
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
101cookbooks.com/iphonerecipes
Tuesday, March 3, 2009

Resources
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
iPhone Dev Center
developer.apple.com/iphone/
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Web Apps Dev Center
developer.apple.com/webapps
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
iPhoneWebDev
iPhoneWebDev.com
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest
A great iPhone user experience
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest
A great iPhone user experience
1.8KB with gzip and Dojo shrinksafe
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest
A great iPhone user experience
1.8KB with gzip and Dojo shrinksafe
Moviesapp.com written in 5 hours...
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
moviesapp.com using iUI
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
SQLite Safari
tinyurl.com/sqlitesafari
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
DashCode
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
Dashcode Development
Tuesday, March 3, 2009

iPhone in
Action:
Web
Development
or SDK?
TouchCode (json,xml,rss,...)
touchcode.googlecode.com
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox
Blending web & iPhone SDK development
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox
Blending web & iPhone SDK development
Available Now in Print & PDF
Tuesday, March 3, 2009

iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox
Blending web & iPhone SDK development
Available Now in Print & PDF
Updates and Blog at
iphoneinaction.manning.com
Tuesday, March 3, 2009

<mailto:ChristopherA@manning.com>
Tuesday, March 3, 2009