Phonegap and Sencha Touch 2.3 integration

Question

I am trying to use Phonegap and Sencha Touch 2.3 together

My XAMPP installation is here: E:\Programming\xampp

I have downladed and uzipped the Sensa Touch 2.3 installtion zip file and renamed it to "touch" and placed it here: E:\Programming\xampp\htdocs

After firing up Apache and going to : http://localhost/touch/examples/

I can see that the example apps are showing up correctly.

Phonegap:
I want to integrate phonegap into this folder structure because finally I want a native app. So, I want the www folder of phonegap to have the Sencha code so that I can just zip the www folder and upload to build.phonegap.com for building it to native apps

I create a new phonegap app here:

E:\Programming\xampp\htdocs\touch\somsapp>sencha generate app www www

Effectively I replace the www folder of the phonegap created app with a sencha app named "www"

Now, I am trying to modify the source code in the www folder (e.g. changing E:\Programming\xampp\htdocs\touch\somsapp\www\app.js) and see the effect in the chrome browser at: http://localhost/touch/somsapp/www

Once satisfied, I want to zip up the somsapp folder (Phonegap generated) and upload to build.phonegap.com

However,

1. I think that this method is convoluted. Is there any more elegant method?
2. Changing the code (say in app.js) is not having any effect - the browser still shows a "loading" static page of the default Sencha app

Answer 1

Phonegap And Sencha Touch Integration

Prerequisites • Android-sdk • Ruby 1.9.3 (or earlier) • Phonegap-2.8.1 • Sencha touch sdk • Sencha Cmd

Steps for integration

1. Generate a new sencha application

   C:\xampp\htdocs\touch> sencha generate app integrationapp ../integrationapp

2. Package the sencha application with command

   Sencha app build package

3. To Create a phonegap application, set the path as

   C:\tools\phonegap-2.8.1> cd C:\tools\phonegap-2.8.1\lib\android\bin

4. Set the path of android sdk tools

   set PATH=C:\tools\Android\android-sdk\tools;%PATH%;

5. Set the path of android sdk platform-tools

   set PATH=C:\tools\Android\android-sdk\platform-tools;%PATH%

6. Create a phonegap Project

   create ./myApp com.xyz.myApp myApp

Project will be created at the following path:

C:\tools\phonegap-2.8.1\lib\android\bin

1. Copy files from package directory of sencha app built under /build/appName to phonegap android -> path_to_app\assets\www

2. Import the phonegap project in eclipse as an android project.

3. Build the project .Apk will be in bin folder.

Answer 2

There's two ways you can use PhoneGap with Sencha Touch:

1. Maintain a PhoneGap project locally (including downloading the iOS / Android SDKs)

OR

1. Use PhoneGap Build (no change in the normal Sencha Touch structure is required)

To use PhoneGap Build, just create your Sencha Touch project as normal. All you will need to do is create a config.xml file to tell PhoneGap Build how to build your application, and you will also need to reference "phonegap.js" in your index.html file (you only need to reference it, you do not need to include a phonegap.js file in your project, this is added automatically by the PhoneGap Build server).

Once you've done this you will be able to start using PhoneGap functions, but remember they will only work once you've actually built the application and put it on a device. PhoneGap functions won't run through your browser and will throw an error (likely breaking your application).

For more information: http://www.joshmorony.com/using-sencha-touch-with-phonegap-build/