Clicky

Touch4j and Apache Cordova: Deploying to Android

In this tutorial we will see how to deploy a Touch4j application to Android using Touch4j and Apache Cordova (PhoneGap)

The requirements for this tutorial are:

- A Mac or a Windows PC
- The Android SDK .
- Eclipse and the Android plugin for Eclipse .
- Cordova(PhoneGap). Download and install it from http://phonegap.com . We will be working with the Android directory
- GWT 2.4 or higher
- The touch4j.jar file

To see how to get started with Touch4j, refer to our other tutorial located at: http://emitrom.com/touch4j/install

Lets get started!

1. Create an Android project (our project will be called Touch4jAndroid). We will use this project to deploy the Touch4j app to Android.



Click next. Fill the details and press OK.



2. Add the cordova.jar to the classpath of the Android project and also create a libs folder in your Android project and copy the jar there.



3. Modify the main activity of the Android project:



Note line 12. it shows that the Android application will start from an index.html file located in a www folder inside the Android assets folder.

4. Create the www folder inside the asset folder of the Android project. Also download and copy the Sencha Touch library and put it under the www folder (our copy of Sencha Touch is located in a folder called 'st').



Note that we also copied the cordova-1.7.0.js (for Android) to the www folder.

5. From the cordova download (Android folder), copy the xml folder inside the 'res' folder of the Android project.

6. Modify the AndroidManifest.xml file to look like:

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.emitrom.touch4j.app" android:versionCode="1" android:versionName="1.0" > <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" /> <uses-permission android:name="android.permission.CAMERA" /> <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" /> <uses-sdk android:minSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".Touch4jAndroidActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="org.apache.cordova.DroidGap" android:configChanges="orientation|keyboardHidden" android:label="@string/app_name" > <intent-filter> </intent-filter> </activity> </application> </manifest>

7. Modify the content of the index.html file of the Android project to something like the following:

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> <link type="text/css" rel="stylesheet" href="Touch4jApp.css"> <link id="0" type="text/css" rel="stylesheet" href="./{yourproject}/resources/css/sencha-touch.css" /> <title>Emitrom - Touch4j 2.1</title> <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> <script type="text/javascript" charset="utf-8" src="./{yourproject/sencha-touch-all-debug.js"></script> <script type="text/javascript" src="{yourproject}/{yourproject}.nocache.js"></script> </head> <body> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> </body> </html>

Note that you will need to replace {yourproject} with the name of your Touch4j GWT project

8. Now that Cordova (PhoneGap) is setup lets write our Touch4j application. Our code will be something like the following:



9. Compile the GWT project and point the war folder to the www directory of the Android project.



10. Run the Android project in the emulator and you should get:





11. Now lets see how to acces native code using the Device API in Touch4j. First you need to inherit the Device module

<inherits name="com.emitrom.gwt4.touch.device.Device" />

12. Then use the following code to display a native alert when the app is running in Cordova (PhoneGap)



Note how seamless the access to the native API is.

13. Compile and run it in the emulator. Below is the result



Go and build amazing stuff :)
Happy coding!

Thank you so much for both the iOS and the android deployment tutorial

Great tutorial, but exist the sources of this example to download like the Kitchen Sink.

Best Regards

Is the tutorial not clear enough that you need the source ? Let us know where you are having problems and we will try to help you.
Cheers.

Thanks for the rapid response,

That's ok, the problem was that i did not copy the Touch4j project result to the www folder of my android device so i would not see any in my emulator ;)

I used maven for the android phonegap and for the GWT project too, so i had to do some changes from your example to run, anyway the problem was resolved!.
My company (www.thingtrack.com) has large experince with Vaadin Touchkit a HTML5 server side framework for PC and mobile, but Sencha and Touch4j looks cool to do offline apps with HTML5 and java, we will include it in our portfolio solutions :)

Best Regards.