Wednesday, June 13, 2012

Converting the jQuery Mobile Calculator to PhoneGap (iOS version)

When I wrote the tutorial detailing the steps necessary to convert my jQuery Mobile Calculator into an Android app with PhoneGap, I promised a tutorial for iOS as well. So, here is the promised iOS tutorial. 

One of things I really like about the combination of jQuery Mobile and PhoneGap is that it really easy to put together a decent UI for the non-designers amongst us. While not as slick as some of the UI put together by design gurus, it is a UI perfectly suited for an internal app or other type of small app.

Create an iOS Project

First thing we need to do is make a regular iOS project. Nothing difficult here.
  • launch Xcode
  • select File -> New -> Project
  • select "Cordova-based Application"
  • click "Next"
  • fill out the Product Name and Company Identifier text boxes
  • make sure that the "Use Automatic Reference Counting" check box is NOT selected
  • click "Next"
  • select the "Create" button
The first steps above can actually be executed now. You should get an error message, "ERROR: Start Page at 'www/index.html' was not found."

Make it a PhoneGap Project

When you use the Cordova template, it creates the "www" folder for your HTML, it includes the missing "index.html" and also "cordova-1.7.0.js", but Xcode needs to be aware of these files for them to be functional. PhoneGap's tutorial suggests that you drag-and-drop the "www" folder. I find this a little risky since if you miss the drop target, you won't be sure how to recover. I instead prefer to:
  • right click the project root, labeled "jqmcalculator 1 target, iOS SDK 5.1"
  • click the menu item, "Add Files to "jqmcalculator"...
  • expand the "jqmcalculator" folder
  • highlight the "www" folder by clicking it
  • click "Add" in the lower right corner
This will the "www" folder to your project. PhoneGap includes a starter index.html with the project. Run it now. If you did everything right, you should see the alert dialog.

Now Make it jQuery Mobile Calculator PhoneGap App 

Now we are ready to move the calculator project into PhoneGap. 
  • rename index.html to oldIndex.html
  • right-click the "www" folder and click "Show in Finder"
  • open the calculator project in the Finder
  • select the "content" and "scripts" folders and the "index.html" file
  • right-click and choose "Copy 3 Items"
  • right-click on the "www" folder and click "Paste Items"
  • this will copy the calculator files to the "www" folder
  • the copied items should also appear below the "www" folder in Xcode
  • copy the Cordova script tag from oldIndex.html to index.html, it should be the first script tag
Adding the Cordova <script> tag

Run the app in the iPhone simulator now. You should see the calculator. We only needed to make one minor change to get the app to work in PhoneGap. Pretty cool huh? 


That's it for this tutorial. Be sure to add a custom splash page and icons for a more profession look. If you would like to add ads to the calculator, please see my tutorial, "Cordova (PhoneGap) and AdMob Together: iOS Version".