SAPUI5 Mobile App for cross Android Platform using Phone Gap (Cordova) plugin

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.