Moving Sencha Touch 2 to Phonegap

Here i am going to describe the process to set up your environment for Android Development using PhoneGap(Which is now renamed as Corodova) platform. So before that, you should be a sencha touch App developer and should have some knowledge about Android. Hope its there. As Sencha touch 2 is not giving much native functionality like Barcode scaning and all, for more native part we should access the PhoneGap APIs. Now suppose you have a project developed using sencha touch with just basic UI. Now for native phone functionality, you want to move to PhoneGap. So please follow the below steps::

  • Just start Eclipse(Eclipse 3.4+) and create a project named DemoPhoneGap (you can give any other name).
  • Download the latest copy of Cordova and extract its contents. We will be working with the Android directory.
  • In the root directory of your project, create two new directories:
    • /libs
    • assets/www
    • /resources
  • Copy xml folder from your Cordova download earlier to /res in your current project
  • Copy cordova-1.8.0.jar from your Cordova download earlier to /libs
  • Verify that cordova-1.8.0.jar is listed in the Build Path for your project. Right click on the /libs folder and go to Build Paths/ > Configure Build Path.… Then, in the Libraries tab, add cordova-1.8.0.jar to the project.
  • Inside assets/www folder, copy cordova-1.8.1.js file which you downloaded previously.
  • Edit your project’s main Java file found in the src folder in Eclipse
  • Change the class’s extend from Activity to DroidGap
  • the Activity code should look like this:
import android.os.Bundle;
import org.apache.cordova.*;
public class SenchaCameraAPPActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setIntegerProperty("loadUrlTimeoutValue", 60000);
super.loadUrl("file:///android_asset/www/index.html");
}
}
  • Open the Android Manifest file and Paste the following permissions between the <uses-sdk…/> and <application…/> tags.
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
uses-permission android:name="android.permission.VIBRATE"
uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"
uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"
uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"
uses-permission android:name="android.permission.READ_PHONE_STATE"
uses-permission android:name="android.permission.INTERNET"
uses-permission android:name="android.permission.RECEIVE_SMS"
uses-permission android:name="android.permission.RECORD_AUDIO"
uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"
uses-permission android:name="android.permission.READ_CONTACTS"
uses-permission android:name="android.permission.WRITE_CONTACTS"
uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"
uses-permission android:name="android.permission.GET_ACCOUNTS"
uses-permission android:name="android.permission.BROADCAST_STICKY"
  • Support orientation changes by pasting the folowing inside the <activity> tag.
android:configChanges="orientation|keyboardHidden|screenSize"
  • Open your sencha directory where you created your project. Hopefully it should be inside apache tomcat/webapps
  • In the project, there should be one folder called app.
  • Copy the app folder and paste it inside assets/www folder.
  • Copy app.js file from sencha project directory and keep it inside the app folder of the PhoneGap project. It means copy the file inside assets/www/app
  • Then open the Sencha SDK (sencha-touch-2.0.0-commercial) and copy the sencha-touch-all.js and sencha-touch.js files and paste them inside www/app.
  • Copy all the folders from resources folder of sencha sdk. Paste them inside the resources folder of the PhoneGap project(DemoPhoneGap)
  • Inside resources/css folder, you can find sencha-touch.css file
  • Copy the file and paste it inside assets/www
  • Copy the index.html file from  your sencha project and paste it inside assets/www
  • Copy the below lines inside index.html file(After title tag)
<script type="text/javascript" id="phonegap" src="cordova-1.8.1.js"></script>
<script src="sencha-touch-all.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
  • So now index.html file should look like this:::
<!DOCTYPE html></pre>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listview</title>
<script type="text/javascript" src="sencha-touch-all.js"></script>
<script id="phonegap" type="text/javascript" src="cordova-1.8.1.js"></script>
<script type="text/javascript" src="app/app.js"></script><script type="text/javascript">
if (!Ext.browser.is.WebKit) {
alert("The current browser is unsupported.\n\nSupported browsers:\n" +
"Google Chrome\n" +
"Apple Safari\n" +
"Mobile Safari (iOS)\n" +
"Android Browser\n" +
"BlackBerry Browser"
);
}
</script>
</head>
<body></body>
</html>

Now its done. Just try and hope you can see the desired result. Sorry, because in the post codes and text are not properly aligned.


About these ads

6 thoughts on “Moving Sencha Touch 2 to Phonegap

  1. Hello! I was following your post on Stackoverflow about integrating the Barcode plugin between phonegap and sencha touch 2. It appears that the thread created by the native function can’t pass the value back to the webview thread. I can’t find a proper solution, how did it go for you?

    • For me i used to scan the barcode while clicking a button. After getting the barcode, i use to display it in the text box. Please check the below code:

      xtype: 'button',
      height: 40,
      scope: this,
      margin: '0 0 0 10',
      name: 'scanbutton',
      width: '80',
      listeners: {

      tap: function(){
      //do stuff
      window.plugins.barcodeScanner.scan(function(result){
      // me.getBarcodebox.setValue("" + result.text);

      var thisFeedbackForm = thisMe.down('formpanel');
      var ThisFeedValues = thisFeedbackForm.setValues({
      barcodeValue: result.text
      });

      }, function(error){
      alert("Scanning failed: " + error);
      });
      }
      },

      text: 'scan barcode'

      Hope it will help you..

  2. I have to thank you for the efforts you’ve put in writing this site. I really hope to view the same high-grade content by you in the future as well. In truth, your creative writing abilities has inspired me to get my very own site now ;)

  3. May I just say what a relief to find someone that truly understands what they’re talking about on the web. You actually understand how to bring an issue to light and make it important. A lot more people should look at this and understand this side of the story. It’s surprising you’re not more popular because you most certainly have the gift.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s