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

              /wp-content/uploads/2015/07/11_741282.jpg

        b) Once you have downloaded the SDK , execute the .exe file

 

                 /wp-content/uploads/2015/07/12_741283.jpg



   click next

          


               /wp-content/uploads/2015/07/13_741284.jpg

             

         click next



                 /wp-content/uploads/2015/07/14_741285.jpg

                 click next


                   

                  /wp-content/uploads/2015/07/15_741286.jpg

                 click next

                   /wp-content/uploads/2015/07/16_741290.png

                  click Install.

                 

c)Download the ADT plug in from Eclipse. For this go to Help->Install New Software

              

                     /wp-content/uploads/2015/07/17_741291.jpg

    

       Click the ADD button and enter Name and location for the ADT download from https://dl-ssl.google.com/android/eclipse/

       /wp-content/uploads/2015/07/18_741292.jpg

      Click OK and select the developer tool as mentioned in the below screen shot and click Next.

         /wp-content/uploads/2015/07/19_741296.jpg

       You will see the below screen and click Next button,

            /wp-content/uploads/2015/07/20_741297.jpg

        Accept the license agreements and click finish. Eclipse will automatically ask for the restart. Perform the Restart.

            /wp-content/uploads/2015/07/21_741298.jpg

      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.

     

                      /wp-content/uploads/2015/07/22_741262.jpg

   

          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.

                   /wp-content/uploads/2015/07/23_741299.jpg

         Select the below packages and install.

          /wp-content/uploads/2015/07/24_741301.jpg

        /wp-content/uploads/2015/07/25_741304.jpg

       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

         /wp-content/uploads/2015/07/26_741308.jpg

click next

     

          /wp-content/uploads/2015/07/27_741309.jpg

      click next

  

          /wp-content/uploads/2015/07/28_741313.jpg

       click next

            /wp-content/uploads/2015/07/29_741317.jpg

        click next

       /wp-content/uploads/2015/07/30_741244.jpg

  

        Then you will get project directory in Eclipse Package Explorer

                    /wp-content/uploads/2015/07/31_741320.jpg

     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.


   /wp-content/uploads/2015/07/32_741321.jpg

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).


                          /wp-content/uploads/2015/07/33_741322.jpg


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 ,


           /wp-content/uploads/2015/07/34_741329.jpg


            then,  have to copy the all content or files into assets->www folder of project.


       

                        /wp-content/uploads/2015/07/35_741330.jpg

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>


          /wp-content/uploads/2015/07/36_741341.jpg

Output:

            lform.JPG

            lform2.JPG

              After entering the User ID and Password,  the page is navigate next page like below,

                  lform3.JPG


Note:Need to include the required SAPUI5 library properly as mentioned above.




 

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Nadia Rohmawati

    Nice article. I can follow your clear step above.But I have some problems here. I can’t find SAPUI5 package 🙁

    Can you show me how to get sapui5-mobile-static.zip, sapui5-sdk-static.zip and sapui5-static.zip, please? Thank you anyway.

    (0) 
  2. Simone Milesi

    Hi @Nageswar Gurram

    Nice article and i think i’ll use soon for my app.

    Just a question: how do you solve CORS issue if your app is on your phone when you consume OData?

    Or the plugin is just a wrapper over the classical UI5 app deployed on SAP server?

    (0) 

Leave a Reply