SAPUI5 is advanced framework which used to provide or design the views , those views will flexible to run in all device breakpoints(like Desktop, Tablet and Mobile).
Android is mobile technology.
Now SAPUI5 application can convert into the Android application using Phone Gap(Cardova) plugin.
Prerequisites:
1.Android Setup in Eclipse IDE
2.Phone gap plug in
3.SAPUI5 libraries
4.SAPUI5 developed application
5. Other required changes
1.Android Setup in Eclipse IDE:
a) Download Android SDK from the link http://developer.android.com/sdk/index.html
b) Once you have downloaded the SDK , execute the .exe file
click next
click next
click next
click next
click Install.
c)Download the ADT plug in from Eclipse. For this go to Help->Install New Software
Click the ADD button and enter Name and location for the ADT download from https://dl-ssl.google.com/android/eclipse/
Click OK and select the developer tool as mentioned in the below screen shot and click Next.
You will see the below screen and click Next button,
Accept the license agreements and click finish. Eclipse will automatically ask for the restart. Perform the Restart.
Once you finish this step, Eclipse will restart. Do not open the Android SDK manager and choose the Close button to close all the pop up.
Go to system preference and specify the path for Android as where you have downloaded the SDK.
Once you are done with the above step, open the Java perspective.
Java perspective (Windows -> Open Perspective ->Java) and click the highlighted Android SDK Manager.
Select the below packages and install.
Once performed the above steps, after successful installation, restart the eclipse.
Create Android Applications in Eclipse:
Enter the application name , minimum required SDK, Target SDK, Compile With, Theme as shown in below pic and click on “Next” button
click next
click next
click next
click next
Then you will get project directory in Eclipse Package Explorer
Create the AVD for this,
Go to Windows->Android Virtual Device Manager->create->Enter the AVD details as your want, finally you will get created AVD.
Click Start button->launcher, finally will show Android view automatically.
2.Phone gap plug in:
Download the PhoneGap2.9.0 plug in from link http://phonegap.com/download
Extract the phonegap2.9.0 zip file.
Create the www folder under assets folder in the project, copy the cordova.js into www folder.
Copy the cordova-2.9.0.jar file from phonegap2.9.0->lib->android into the libs folder in the project .
Create the xml folder in res folder of project and copy the config.xml file into this xml folder.
3.SAPUI5 libraries:
For this have to download the zip files sapui5-mobile-static.zip, sapui5-sdk-static.zip and sapui5-static.zip(no need to use these 3 zips files for one project, have to use based on our requirement).
After downloading the zip file and extract this zip file and copy the resource folder from this zip file into the assets->www folder of project as above screen.
4.SAPUI5 developed application:
Once SAPUI5 application is ready ,
then, have to copy the all content or files into assets->www folder of project.
5. Other required changes:
changes in AndroidManifest.xml file:
add the following code in AndroidManifest.xml file,
<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" />
need to change following code in same AndroidManifest.xml file which are highlighted:
<activity
android:name="com.example.horseapp1.MainActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
changes in index.html file:
add the following 3 lines as like screen in index.html file,
<script type="text/javascript" src="/assets/www/resources/sap/ui/thirdparty/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="//assets/www/resources/sap/ui/thirdparty/jqueryui/jquery-ui
position.js">
</script>
and,
<script type="text/javascript" src="/ScimsApp/assets/www/cordova.js"></script>
Output:
After entering the User ID and Password, the page is navigate next page like below,
Note:Need to include the required SAPUI5 library properly as mentioned above.
- SAP Managed Tags:
3 Comments
