Below you will find the instruction on how to build an Android App with PhoneGap 2 and Sencha Touch 2 in Eclipse on Mac OSX


Step 1: Download and Setup Sencha Touch 2

  • Details instruction is available here: http://docs.sencha.com/touch/2-1/#!/guide/getting_started

Step 2: Create a Sencha Touch 2 app

2.1 cd into the sencha touch 2 sdk folder, (should be created in step 2)

e.g.  $ cd /Demo/sencha-touch-2.0.1.1

Note: run “sencha” in the sdk folder, you should see the following:

$ sencha
Sencha Command v2.0.2
Copyright (c) 2012 Sencha Inc.

Usage:
sencha [module] [action] [arguments...]

Example:
sencha fs minify --from app.js --to app-minified.js --compressor closurecompiler

Available modules:

app Resolve application dependencies and build for production
fs A set of useful utility actions to work with files. Most commonly used actions are: concat, minify, delta
manifest Extract class metadata
test Unit testing using Jasmine
generate Automates the generation of projects and files
package Packages a Sencha Touch 2 application for native app stores

For more information on a specific module, simply type:
sencha [module]

For example:
sencha fs

For more information on a specific action of a specific module, simply type:
sencha [module] [action]

For example:
sencha fs minify

2.2 Create a Sencha Touch 2 app

$ sencha app create <sencha touch app namespace> <path to the new app> all

Note: the last option “all” is for generating all libraries

This step basically creates the Sencha Touch skeleton file and directory structure as follow:

<application>
|_ app/
|_ resources/
|_ touch/
|_ app.js
|_ app.json
|_ build.xml
|_ index.html
|_ packager.json

and the under app folder is where the MVC framework located:

<application>
|_ app/
|_ view/
|_ store/
|_ profile/
|_ model/
|_ controller/

2.3 create a build directory in <path to new app>

$ cd <path to new app>

$ mkdir build

Note: This build directory is going to be our workspace location for our Android application (Step 3). And the Sencha Touch application will be compiled into build/www (Config: Step 2.4.2 and Compilation: Step 4.2)

2.4 edit the app.json file
2.4.1 add the following to include PhoneGap Javascript file(cordova-2.1.0.js):

"js": [
{
"path": "cordova-2.1.0.js"
},
{
"path": "sdk/sencha-touch-all.js"
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
}
]

2.4.2 change the buildpaths for package to “build

"buildPaths": {

"testing": "build/testing",
"production": "build/production",
"package": "build/assets/www",
"native": "build/native"
}

Step 3: Setup PHONEGAP 2 for Sencha Touch 2 IN ECLIPSE

  • Please follow the instruction here to setup PhoneGap 2 in Eclipse with the following changes:

3.1 Uncheck the “Create Project in Workspace”
3.2 Enter the location where the “build” path is entered in setup 2.4.2 above

3.3 skip the step for copying the cordova-2.1.0.js file to assets/www folder but instead copy the cordova-2.1.0.js file to the <path to new app> folder

Note.  For JQuery mobile we copy the cordova file to assets/www, but for Sencha Touch, we copy it in the app folder.

3.4 skip the step for creating the index.html file

Note: step 3.3 and 3.4 will be done when building the Sencha Touch 2 app (step 4.2) and the build configuration is implemented by step 2.4.1 and 2.4.2 above

Step 4: Build Sencha Touch 2 App

4.1 cd into the <path to new app>
4.2 run sencha app build command as follow:

$ sencha app build package

Step 5: Launch the Android App with PhoneGap 2 and Sencha Touch 2 in the emulator from Eclipse

You should see the following Sencha Touch 2 welcome screen:

and the “Get Started Page”

 

Congratulation! You just build an Android app with PhoneGap 2 and Sencha Touch 2 in Eclipse