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

14 comments:

  1. I used the iPhone and they are awesome gadgets, but i also use different company's handset Rebtel offers the smartphone which are also awesome devices which you have to use it too.

    ReplyDelete
  2. Thanks, I really appreciate custom tshirt the kind of words and thanks for sharing that valuable information.

    ReplyDelete
  3. Really nice one.. Thanks Second home for sharing this type of useful content..

    ReplyDelete
  4. Nice post. Love it!!So inspiring.
    Keep it up :)
    Mac customer care

    ReplyDelete
  5. We are always here to help you if you are facing some problem regarding Lenovo.
    Lenovo Customer Support

    ReplyDelete
  6. Welcome to MS office support service. We provide solution regarding MS office support number. Visit us to know more. ms office 365 installation support number

    ReplyDelete
  7. It’s awesome to come across a blog every once in a while that isn’t the same out of date rehashed information.
    iphone customer Support

    ReplyDelete
  8. If you are facing any problem regarding the Gmail, just visit the given link-
    Gmail Customer Support

    ReplyDelete
  9. I really like the information present in your post, it is very informative and it is very helpful for us. Chrome Customer Care

    ReplyDelete
  10. we provide service regarding router support. if you have face any problem related to the router so please contact our team.
    cisco router support

    ReplyDelete
  11. I need to thank you for the endeavours you have put in penning this site. I really need to see similar high-review blog entries by you later on also. In truth, your exploratory composed work limits has requested that I get my own particular extraordinary blog now

    Affordable Escort Service in Delhi
    Miss919.info
    Miss919.info
    Miss919.info
    Udaipur Call Girl service
    Call And Have Fun With Sensual World Class Escorts Services In Jaipur

    ReplyDelete
  12. Heloo!
    Thanks, I really appreciate compare mortgage rates canada the kind of words and thanks for sharing that valuable information.

    ReplyDelete