iPhone App Built

THIS TUTORIAL IS OUT OF DATE. READ THE COMMENTS BELOW BEFORE STARTING – IT WILL SAVE YOU A LOT OF TIME.  IF SOMEONE HAS THE TIME AND KNOWLEDGE PLEASE UPDATE(YOU JUST NEED TO SIGN UP FOR A FREE ACCOUNT).

Edit 3/2011: To claryfy: You do NOT need *any* of the stuff described below, at least for iOS on Mac.

All you have to do is open Finder, navigate to your project’s www folder and copy all the files you need into that folder. All these files will make it into your iOS app, including all files in subfolders. Your app will start — surprise — with index.html. It’s really that simple. Yeah!

—-

  1. Download/install the iPhone SDK (free): http://developer.apple.com/iphone/program/download.html 
  2. Download PhoneGap from github: http://github.com/sintaxi/phonegap/tree/master/iphone
  3. Open the PhoneGap.plist file.
  4. Change the offline value to 1. (This turns on offline mode and makes the ‘www’ folder the default offline folder for all your offline resources). No Offline value in current Phonegap version. Use WWW folder and Index.html.
  5. Update your index.html with the www folder.
  6. Build and Go!

     

  7. You should see the default index.html page loaded into the simulator: 
  8. So now you’ve got your index.html file loading when the application loads! You can edit this file in XCode by browsing for it in the resources folder. Try making some changes and recompiling!
  9. Now all we need to cover is adding additional files so you can include images, javascript, css, and other files!
  10. To add a file, first we have to drag the file from our file system into the resources folder: 
  11. Once we drop the file we’ll get a dialog box popping up. Be sure to check the “Copy item into destination’s…” checkbox! Then click “Add” 
  12. Now you can see we have the smily.png file in our resources folder!
  13. Now let’s add the image to our index.html file: 
  14. Go ahead and build and go at this point. You should see your image in the application! 
  15. That’s it! You can add CSS, JS, any files you want! You access them as though they were in the same dir as the index.html file.

Notes

It appears that creating “subfolders” isn’t possible. At least, I haven’t managed to make it work yet. If you do, please post here for us!

Troubleshooting

– I get an image-not-found box!

Sooner or later you’ll run into a file that doesn’t seem to be making it all the way to the application. You see it in the resources tab but it just refuses to load in the application. Here’s where to look to see if things are all proper:

  1. Make sure the file is in the resources folder.You probably already did this, but double check to make sure the file is really in the resources folder. If it didn’t make it to your project, it won’t show up in your application!
  2. Make sure the file is in the “Copy Bundle Resources” step of the build process of your target application.Look at this step in XCode. If you don’t see your file here then it isn’t being copied into your executable bundle. The solution is to drag the file from your resource folder into this step of the application. Save and re-compile. Your file should be available and working in your application!