Skip to Content

In this blog, I want to share my development experience while creating SAPUI5 Mobile applications for native mobile platforms(iOS/Android) using PhoneGap. There are plenty of blogs in the SCN which explains in detail about how to setup the Eclipse environment for SAPUI5 developments. So, I’m going to cover only the steps to deploy and run SAPUI5 in native devices(iOS/Android).

Just a quick introduction about PhoneGap before I proceed.

What is PhoneGap?

PhoneGap is an Open source framework that helps the developers to build cross platform Mobile Applications.

It helps the developers to use HTML5, JavaScript and CSS within the PhoneGap container and to create native mobile applications for different Operating systems such as (iOS, Android, Windows 8..etc). It helps interacting with the native operating system functionality using the JavaScript. You can read more info from http://phonegap.com/

PhoneGap supported features are listed in http://phonegap.com/about/feature/

I’m covering mainly three areas and they are,

A) How to setup Android development platform in Eclipse.

B) Steps to deploy and run SAPUI5 in Android devices using PhoneGap.

C) Steps to deploy and run SAPUI5 in iOS devices using Xcode and PhoneGap.


You can move to Step B and Step C directly if you are familiar with Step A.



Prerequisites: Eclipse and Xcode are already installed in your machine.

A) How to setup Android development platform in Eclipse:


    Download the Android SDK from here: http://developer.android.com/sdk/index.html

1.JPG

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

2.JPG

3.JPG

4.JPG5.JPG

     Uncheck the “Start SDK manager” and click finish

6.JPG

Download the ADT plug in from Eclipse.

    Go to help->Install New Software

7.JPG

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

8.JPG

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

9.JPG

  You will see the below screen and click Next button.

10.JPG

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

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

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

13.JPG

  Select the below packages and install.

14.JPG

15.JPG

    Once you have performed the above steps, after successful installation, restart the eclipse.

Create simple Android Applications in Eclipse

Go to File -> New -> Android Application Project


Enter the application name , minimum required SDK, Target SDK, Compile With, Theme as shown in below pic and click on “Next” button

16.JPG

17.JPG

Configure the launcher Icon 🙂

18.JPG

19.JPG

20.JPG

You will see the folder structure as shown below.

21.JPG

Run the application by creating the virtual device(AVD) visible in the Java Perspective of Eclipse.

22.JPG

You will see the app and the usual “Hello World” 🙂 screen in the Virtual device

24.JPG

To report this post you need to login first.

5 Comments

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

  1. Yasin BEDER

    Thanks for the blog Rajkumar,

    I have a requirement where i need to ‘wrap’ an already existing and working sapui5 application within an android application. have done similar with iphone so we could use push services and its working fine. I need to do the same with android so  we can push messages to the users.

    I would appreciate any input,

    Thanks again,

    (0) 
  2. Mantri Shekar

    Hi Rajkumar,

    I followed the Steps you suggested , but at the end while craeting Android Application Project the project is created with some error. When i see the log i saw the following error.

    Please find the attaError.pngched image file

    (0) 

Leave a Reply