Getting Sencha Touch 2 and PhoneGap Cordova to work in XCode

Seems there are a lot of questions regarding this one.  Having done it myself and have got it working.  Thought I would share the experience.  First, what I am using :

IMac with OSX Lion and XCode 4.4
Sencha Touch 2 (obviously)
PhoneGap 1.7 (now cordova)

What to install

1. OK, start with downloading and installing XCode 4 this means going to: https://developer.apple.com/xcode/ to get the latest
2. Next download and install phone gap from  http://phonegap.com/
3. Create your projects directory (mine is aptly called 'projects')
4. Next download sencha touch 2  http://www.sencha.com/products/touch/  and pop that in the projects directory
5. finally, download and install the sdk tools at http://www.sencha.com/products/sdk-tools

Create the phonegap project

First i am going to create the Phonegap/Cordova project.  So start up Xcode, create new xcode project and select 'Cordova' for the project template (MyApp is my project name).  Give the project a run on your chosen emulator (I have chosen the IOS Emulator 5.0) you will be greated with the infamous :

OK,  When you run the application, the result was a www directory being created.  You can see this if you select your project in xcode and right click show in finder:

Here's the project directory:

You need to drag the www folder from the finder window onto the project in XCode and select the 'Create references' radio button if not selected (second in the list) which leaving all the others unselected

Run your app again and you should get :

Hurrah thats the first part.

Adding your Sencha Project

OK.  We are now going to add the sencha project.  First of all, I am going to rename the Index.html in my current project to phonegapindex.html

I then open a terminal and cd into my sencha 2 sdk folder (this is the SDK folder and NOT the tools directory) and type the command:

sencha generate app app ../MyApp/www

A little confusing perhaps as I have named the sencha app 'app' so the command is sencha generate app

then the app name (in my case 'app') I have then told it to generate this in myApp/www

if all goes well:

and you now have an app directory within your www directory with an mvc sencha 2 app.

Getting it all to work

I am now going to rename the index.html generated by the sencha command to senchaindex.html and the phonegapindex.html back to index.html

What I am going to show you is the basics of getting phonegap calling our ext application.  its up to you to go on and experiment.

I've added, the sencha libs, the app css, our app.js file and the main view

    <script type="text/javascript" charset="utf-8" src="sdk/sencha-touch-all.js"></script>

    <link rel="stylesheet" href="resources/css/app.css">

    <script type="text/javascript" charset="utf-8" src="app.js"></script>

    <script type="text/javascript" charset="utf-8" src="app/view/main.js"></script>

so a snapshot of the top part of my code:

I have also commented out the code between the body tags (the hey its cordova) etc....
I have then modified OnDeviceReady to:

function onDeviceReady()

{

        loadApp();

       // do your thing!

      //navigator.notification.alert("Cordova is working")

}

As you can see I have stubbed out the original app creation and replaced with a very simple implementation just to get us started.  Dont forget the sencha touch 2 is mvc based so we add our main view to the viewport.  you can get the name of the view by looking in the views directory at main.js and the define statement indicates what view needs to be added.

If all goes well, you should get the following when you run the app in the simulator:

haza !

Testing the Theming

Before we going any further with theming, please make sure you have the compass installed and the sass compiler.  Open a terminal window and type:

$ sudo gem install haml
$ sudo gem install compass

so as a quick check, lets try changing the base colour.  under the resources/sass directory you will find app.sass add the following to the top of the file above all the other import lines

$base_color: #FF0000;

We now need to recompile the sass, I like to remove the app.css from the resources/css directory for the first time just to prove it is working.

open a terminal and navigate to your projects directory/www/resources, if you overwrite, you will see:

then run your app once more and you should be greated with a red version of your sencha app.

Hope that helps you all out there !