iPhone Development: 12 Tips To Get You Started Article

9: Gestures

On the iPhone, gestures are two-finger actions: scaling (zoom in and zoom out) and rotation. We learned above that the touches and targetTouches events contain information about each finger that touches the device. It’s possible to use those events to also handle gestures such as zoom and pan. But for this purpose, there are more convenient gesture events. You can listen to the following events:

• gesturestart
• gestureend
• gesturechange

In the next example, we’ll listen to the gesturechange event, and then scale and rotate a div using the WebKit-only webkitTransform style property. As usual, the event listeners accept an event object parameter. The event object has the properties:

• event.scale – a value of 1 when there’s no scaling, less than 1 when zooming out (such as making our div smaller), and greater than 1 when zooming in.
• event.rotate – the rotation angle in degrees.

The code is very similar to the touch-and-drag code from the previous example:

window.addEventListener('load', function() {   

  var b = document.getElementById('box'),   

      bstyle = b.style;   

  b.addEventListener('gesturechange', function(event) {   

    event.preventDefault();   

    bstyle.webkitTransform = 'scale(' + event.scale + ') ' +   

                             'rotate('+ event.rotation + 'deg)';   

  }, false);   

}, false);

Example 12 shows this code in action – scaling and rotating a div.

If you’re viewing that example in an iPhone simulator, hold down the Option key: two gray dots will appear to represent two fingers, and as you drag the mouse, you can move the dots in and out.

10: Special Links

It’s nice when you browse a page that has a phone number to be able to simply click and call the number without typing it out. Phone numbers become links automatically provided, of course, they follow a phone number format. But there might be cases when you want to create the phone links manually. In this case you can use the tel: prefix (URI scheme), for example:

<a href="tel:12345678900">Call me</a>

If an SMS text is more your style, use the sms: scheme to launch the iPhone’s text message application.

<a href="sms:12345678900">Send me a text</a>

Some other links can perform special actions on the iPhone, although a special URI scheme is unnecessary:

• Links to the iTunes Store will launch iTunes. You can obtain the link to a track in the iTunes Store by using iTunes to search for the track, then right-clicking on the result, and selecting “Copy iTunes Store URL.” Another way is to use the iTunes Link Maker application, which generates the HTML markup to use, including a nice little iTunes button graphic.
• A link to Google Maps will launch the Maps application.
• YouTube links will launch the native YouTube application, as opposed to the YouTube site.
• Links to an email address will launch the Mail application.

11: The Home Icon

Hopefully a visitor will like your site so much that they think it deserves a spot on their Home screen. When a user adds your page to the Home screen, the iPhone will use a screenshot of your page as an icon. But you can do better by providing your own icon.

To do this, create a PNG file with dimensions 57x57px, name it apple-touch-icon.png, and put it in the root of your web server, just like you would with a favicon – and you’re done. The iPhone will automatically add the glossy effect and rounded corners – no need to try to recreate this on your own!

You also have the flexibility of specifying the location and the filename of the icon, via a link element. This allows you to use a different web server, such as a content distribution network (CDN), to host the icon or share the same file across several web sites. To specify the location of the icon, use a link element as follows:

<link rel="apple-touch-icon" href="http://www.example.com/my-filename.png" />

12: Debugging: View Source and the Console

How about viewing the source – the all-time favorite learning and debugging tool? This is unavailable on the iPhone. Luckily, bookmarklets work in Safari for the iPhone, so you can use bookmarklets to add missing functionality. How do you do that?

Well, you have access to the source of the page (generated source, that is) in JavaScript via document.documentElement.innerHTML. In your bookmarklet it’s only a question of displaying this somehow, for example, in a new window. But the good news is that this JavaScript exercise can be performed by a nicely working bookmarklet. iPhoneWebDev has already packaged up some bookmarklets, optimized for the iPhone display and free for the taking. Once you have the bookmarklets you need, simply synchronise your bookmarks to your iPhone in iTunes.

For debugging, the iPhone includes a debugging console. You can enable it on your phone by going to Safari’s settings in the Settings app, choosing Developer, and setting Debug Console to ON. Now it appears in your Safari browser under the URL toolbar. It will show you any errors you might have on your pages, and you can also use the console object to write any debug messages from your JavaScript. For example:

console.log('Something');   

console.error('Oops');   

console.warning('Beware!');

Go Forth and Develop!

Well, at the end of this intro article I’d like to welcome you to iPhone web development with its new and exciting possibilities and challenges. I hope that by now you have a few ideas of your own and you’re eager to try them out.

We’ve put all that code together in Example 11.