Web Development or SDK?

iPhone in Action:

Web Developmentor SDK?

Christopher Allen

January 19, 2009

Christopher Allen

manning.com/callen

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

iPhone in Action:


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

iPhone in Action:


Additional Mobile Safari features:Webkit CSS Transforms

iPhone in Action:


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>


Canvas - Scalable Vector Graphics

iPhone in Action:


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.




Database - 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.





Touch Events

iPhone in Action:


touchStarttouchMovetouchEnd

touchCancelgestureStartgestureChangegestureEnd

changedTouchestargetTouches

touchesorientationrotationscale




Touch Events

Hide 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

MacintoshMost of the same Core Services as

MacintoshMost of functionality available to

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

templatesGreat debugging and profiling

iPhone in Action:


Web Development Advantages

iPhone in Action:


Same Advantages as in 2007

iPhone in

Action:

Web Development

or SDK?


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

iPhone in Action:



Simplicity

Dynamism

Update functionality anytime

Easy to fix bugs

Give users the latest data

iPhone in Action:



Simplicity

Dynamism

Globalized

Part of global network

One program for iPhone and desktop

Access to rest of web

Connected to everyone

iPhone in Action:


Multiple Platforms

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

iPhone in Action:



Sophistication

Accessibility

Always available

Functions without net

Cache data

Native speed

Private

iPhone in Action:



Sophistication

Accessibility

Monetization

Easy to sell through App Store

Does not depend on advertisements or subscriptions

iPhone in Action:


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.

iPhone in Action:


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

Mirrored Development

Mixed Development

Client-Server Development

iPhone in Action:


Mirrored Development

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

iPhone in Action:


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

iPhone in Action:


Mixed Developmentgoogle.com/reader & Maps App

iPhone in

Action:

Web Development

or SDK?

Client-Server Development

Link in to web software through the SDK

iPhone in Action:


Mirrored DevelopmentShowtimes App & Gifts App

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

iPhone in Action:


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 Exemplarsmapquest.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 Framework

iui.googlecode.comNavigation windows from JSON

objectsNavigational 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...

iPhone in Action:


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

Oriented for web developersTopics:

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

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

toolboxBlending web & iPhone SDK development

Available Now in Print & PDF

Updates and Blog at iphoneinaction.manning.com

iPhone in Action:


<mailto:[email protected]>

mailto:[email protected]

mailto:[email protected]

Date post:	01-Nov-2014
Category:	Technology
Upload:	christopher-allen
View:	3,329 times
Download:	3 times

Web Development or SDK?

Technology