Sunday, February 6, 2011

How to Make a Hybrid iPhone App in 7 Minutes






HTML/CSS/JS App Running as Native iPhone App

I created a short (7 minute) video that demonstrates how easy it is to create a native iPhone app using only HTML/CSS/JS.

I use an open-source xcode template, called QuickConnectiPhone, made by Lee Barney, who is a CS professor at Brigham Young University, that allows you to bring HTML/CSS/JS files into a native iPhone project by simple drag-n-drop, which are then compiled into a native iPhone application, without writing one single line of objective c.

Bellow is the only code I had to write to get this app to work. It is a single javascript function that handles the onClick event to switch between the views/divs. Since I am using apple's HTML components I get their slick sliding transitions for free simply by calling their JS method on their stack layout object.

// Called when switching between the details and video views
// of the stack layout object/part provided by apple.

function toggleStackLayout(event){

    // Grab references to the objects we are going to use.
    var videoObject = document.getElementById('video').object;
    var stackLayoutObject = document.getElementById('stackLayout').object;

    if (stackLayoutObject.getCurrentView().id == 'detailsView') {

        // transition to the video view/div
        stackLayoutObject.setCurrentView('videoView');

        // Start playing video
        videoObject.play();
        
    } else {
        
        // transition to the details view/div
        stackLayoutObject.setCurrentView('detailsView');
        
        // if the video is playing, stop it
        if (videoObject.playing()) {
            videoObject.stop();
        }
    }
}

Click here to see the video.

*Note: I updated an error I found in the code block above. I replaced an incorrect closing square bracket with a closing curly brace.

Also, since xcode 4 doesn't allow custom project templates anymore, you will need to start with a blank qciphone template saved in xcode 3, and then open that project in xcode 4, which should automatically update it.

You can start with one of the example projects that ship with qciphone, or you can use a blank one that I created...
http://dvia.com/dl/qciphone-hybrid-template.zip