iOS adapter

What's specific

The Joshfire framework uses PhoneGap to compile your JavaScript app into a native iOS app.

Actually there are two major differences between the iOS adapter & the classic browser adapter:

Environment setup

Foreword

To use PhoneGap you'll need to have XCode installed & running on your system. Here are a few prerequisites and recommendations to help you build your iOS apps.

Prerequisites

To proceed with the following, you'll need:

XCode

If XCode isn't installed on your system, download it on Apple's developer portal. Keep in mind that you need to have an active membership to do so.

PhoneGap

PhoneGap has a good 'get started' page, where you can download the Zip archive, setup and test your first project.

There is also a nice video tutorial, and a more detailed version of the getting started page here.

Joshfire & PhoneGap

You've followed every phone gap directive, have run you first 'Hello world', what about building your Joshfire app to an iOS device?

Your phonegap's www/index.html file should look like the following:


  <!DOCTYPE html>
  <html>
    <head>
      <title>Your title</title>
  <link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen" charset="utf-8">
    /* Needed external librairies here : 
      Google Maps API http://maps.google.com/maps/api/js?sensor=false
      ....
    */
    /* iOS adapter bootstrap */
      <script  src="joshfirepath/adapters/ios/bootstrap.js"></script>
    /* Phone gap */
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js"></script>
      /* init your app after device ready */
    <script type="text/javascript" charset="utf-8">
    function initApp()
    {    
      document.addEventListener("deviceready",function(){
        require({
              urlArgs: "bust=" +  (new Date()).getTime()
            },["appsrc/app.ios"],function(MyApp) {
              window._app = new MyApp();
            });
      },false);
    }

      </script>
    </head>
    /* Call your initApp function onLoad */
    <body onload="initApp()">
    /* Nice HTML here */
    </body>
  </html>