In my prior post, I made a simple modification to Alex MacCaw's mobile contacts example. Today I'll walk through the steps to wrap it with PhoneGap as an iOS application.
Setup an Initial PhoneGap Project
Open a terminal and change to your spine mobile application directory.
$ cd ~/Documents/spine.mobile.contacts
Create a subdirectory for your Xcode project. Alex suggests using ./build/ios within your spine project directory (e.g. ~/Documents/spine.mobile.contacts/build/ios).
Start Xcode and select the PhoneGap-based application template.
Enter your Product Name and Company Identifier. I chose MyContacts. Not very original, eh?
Change the Scheme to iPhone 5.0 Simulator and run the application. You'll get a warning indicating the www folder is missing from your project and the iPhone Simulator will display an error message that index.html was not found.
Quit the iOS Simulator. Drag the www folder created in the project directory onto the project folder in Xcode. This will add a reference to it in your Xcode project.
In the dialog box that pops up, make sure you check the Create folder references for any added folders option.
Run the project again and you'll get a default sample PhoneGap application with an alert in the iOS Simulator. It works!
Tweak your Spine Mobile Application for PhoneGap
You need to add phonegap.js to your spine mobile application. The current version is named phonegap-1.2.0.js. Make a new directory in the spine project directory called lib (~/Documents/spine.mobile.contacts/lib). Copy phonegap.js from the www directory (~/Documents/spine.mobile.contacts/build/ios/MyContacts/www) into the new lib directory. You also need to add phonegap.js to the libs section of the slug.json file.
{
"dependencies": [
"es5-shimify",
"json2ify",
"jqueryify",
"gfx",
"spine",
"spine/lib/local",
"spine/lib/ajax",
"spine/lib/route",
"spine/lib/tmpl",
"spine/lib/manager",
"spine.mobile"
],
"libs": [
"./lib/phonegap-1.2.0.js"
]
}
I also needed to modify the spine.mobile.contacts index.html page slightly. Change href="/application.css" and src="/application.js" to href="./application.css" and src="./application.js".
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>App</title>
<link rel="stylesheet" href="./application.css" type="text/css" charset="utf-8">
<script src="./application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQuery = require("jqueryify");
var exports = this;
jQuery(function(){
var App = require("index");
exports.app = new App({el: $("body")});
});
</script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
</head>
<body>
</body>
</html>
Compile your application with hem from the spine project directory.$ hem build
At this point you could test your spine mobile application using a browser. Just run hem server and browse to http://localhost:9294/. You can even use your iPhone/iPod Touch if your computer firewall will allow it. Run a command like ifconfig or look in your network preferences for your ip address (e.g. http://192.168.1.112:9294).
$ hem server
You need to copy the contents of the spine mobile project public directory (~/Documents/spine.mobile.contacts/public) to the www directory in the Xcode project (~/Documents/spine.mobile.contacts/build/ios/MyContacts/www). You'll need to do this after each hem build. I added a step to the build phase to automate this. You could also add a command to build your spine mobile project before it's copied. For now, just copy application.css, application.js, cache.manifest, favicon.ico, and index.html manually.
Run the Xcode project again... Voila!
You now have a working iOS application. Future posts will include setting up icons, syncing data with a server, etc.
