SAPUI5 Mobile App for cross platforms(iOS/Android) using PhoneGap: PART2

[yesrajkumar]

In my earlier blog, I have discussed about how to setup the Android development platform in Eclipse. This blog will cover the steps to run the SAPUI5 in Android devices.

Steps to deploy and run SAPUI5 in Android devices using Phone Gap.

     Download the phone gap(2.9.0) from the following URL. http://phonegap.com/download

   Copy the contents to your local directory and unzip them.

Open the Eclipse Project for Android, explained in my earlier blog, Select the “Assets” folder and create a new folder named “WWW” under it

Copy the cordova.js, cordova-2.9.0.jar folders that you have download from the phonegap 2.9.0 folder to your project(WWW and libs folder respectively) as shown in the below picture. The path to the phoneGap 2.9.0 would be "phonegap-2.9.0\lib\android"

Right click on the Libs folder and make sure the project has the correct build path as shown

In the MainActivity.java file, perform the below changes,

     Copy and paste the following content into the “AndroidManifest.xml”.

< 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" />

Add the config changes attribute in the same file as highlighted below

Download the contents of SAPUI5 from SDN site.  http://scn.sap.com/community/developer-center/front-end

Copy the required mobile libraries from the downloaded contents as shown below and move it to WWW folder in your eclipse. I have other resources as well as it was required for my project.

Now copy your SAPUI5 developed application in to WWW folder of the project.

     Open the index.HTML file and add the cordova.js and Jquery files as shown

     <script type="text/javascript" src="resources/sap/ui/thirdparty/jquery/jquery-1.7.1.js"></script>

     <script type="text/javascript" src="resources/sap/ui/thirdparty/jqueryui/jquery-ui-position.js"></script>

     <script type="text/javascript" src="cordova.js"></script>

     Index.html file will look as below

    I have selected the Android Virtual device(AVD) and able to launch the SAPUI5 application.

Using the below option you can generate the .Apk file from Eclipse.

Thanks,

S.Rajkumar.