Packaging sapui5 application using phoneGap for Android [ Command line Interface ]

    PhoneGap is an open source framework that allows you to create native apps for different platforms like ios, android, windows 8, bbos etc.

Using PhoneGap we could develop various platform apps using well known technologies like HTML5 , Javascript with a minimal platform specific skills.

There are two methods to package an SAPUI5 app using PhoneGap

    1) PhoneGap Build Service

    2) Packaging apps with CLI

PhoneGap build service is a paid service, free plan allows us to have only one private app, here i’l be concentrating on “Packaging using Command Line Interface”.

You can download the latest version of phonegap here  .

Step1 : Navigate to android/bin folder in the command prompt in my case it is

D:\360545\phonegap-2.9.0\phonegap-2.9.0\lib\android\bin

Step 2 :

    Now enter command “create d:\NewAndroidApp com.phoneGap.android Approval ” and click enter. This will create an android phoneGap application.

Step 3 :

Open ADT, click on File -> new -> others

Expand android in wizard, and select “Android Project from existing Code”

And click on “next”.

Click on “Browse ” and navigate to the android project that you have created previously, i.e., NewAndroidApp then click ok -> check “copy projects into workspace “

click on finish.

Step 4:

  Run the app in simulator, you should see sample cordova application for android.

This confirms that that your phoneGap project is created.

Step 5:

My sapui5 folder structure is as follows  :

Let’s copy “approval” folder from WebContent and paste it in www folder of your android project

Refer these .js files in index.html file.

1. i.e., add these two lines to index.html

<script type=”text/javascript” src=”approval/App.controller.js”></script>

<script type=”text/javascript” src=”approval/App.view.js”></script>

<script type=”text/javascript” src=”approval/App.controller.js”></script>

<script type=”text/javascript” src=”approval/App.view.js”></script>

App.view.js  :

sap.ui.jsview(“approval.App”, {

          getControllerName: function() {

                    return “approval.App”;

          },

createContent : function(oController) {

                    this.app = new sap.m.App(“App”);

                    var approval = sap.ui.jsview(“idApproval”,”approval.approval”);

                    approval.app = this.app;

                    this.app.addPage(approval);

                    return this.app;

          }

});

and approval.view.js contains the application code.

Step 6:

Copy resources from “ sapui5-mobile-static ” and paste it under www folder.

Refer these resources in your index.html i.e.,

<script id=”sap-ui-bootstrap”

type=”text/javascript“

      src=”/resources/sap-ui-core.js“

       data-sap-ui-theme=”sap_bluecrystal”

       data-sap-ui–libs=”sap.m”>  </script>

Step 7:

app.initialize() initializes the app . We have onDeviceReady() event in index.js which is fired as soon as device is ready

so we get App.view.js and place this

View at content i.e., paste following code in onDeviceReadyEvent().

var myapp = sap.ui.jsview(“approval.App”);

   myapp.placeAt(‘content’);

Now run the app, You should be able to see your sapui5 application in the simulator .

Now your app is ready 🙂 .