Skip to Content

This blog will help you quickly understand the end-to-end packaging and publishing of SAPUI5 / OPENUI5 apps .This blog will be using Demokit Icon Explorer as the sample UI5 project to be packaged and published to Play Store. Here is a quick outline of the content :

  • Node / Phonegap / Cordova installation .
  • Android project creation using command line.
  • Importing project and integrating SAPUI5 code.
  • Build apk and publish on Play Store.

Node / Phonegap / Cordova installation

To start the development process of making a using a hybrid app using phone gap . Node js installation is required . You can download and install the node from the following link : node.js . Once the installation is done, install the cordova and phonegap using the following commands

on OS X and Linux:

$ sudo npm install -g cordova

on Windows:

C:\>npm install -g cordova
C:\> npm install -g phonegap 

Once installation completes, you can invoke phonegap on command line for further help.

Android project creation using command line:

To create a project for android platform use the follwing set of commands :

    $ cordova create hello com.example.hello HelloWorld
    $ cd hello
    $ cordova platform add android
    $ cordova build

More information can be found at the following url : PhoneGap API Documentation

Importing project and integrating SAPUI5 code:

  1. Launch the Eclipse application.
  2. Select the New Project menu item.
  3. Choose Android Project from Existing Code from the resulting dialog box, and press Next:
  4. If you’re using the CLI, navigate to the hello directory you created for the project, then to the platforms/androidsubdirectory. Alternately, if you use the create shell utility, simply navigate to the hello directory.
  5. Press Finish.


Now that the Phonegap project is ready and imported into the Eclipse IDE , time for some SAPUI5 action .


Set-up UI5 Resources :


The most basic requirement for UI5 application is to have resources in place .  Download the resources from OpenUI5 site and place in your imported project in the folowing hierarchy .

phonegap.PNG


Once the resources are available , adjust the index file to load the UI5 Bootlader.


<!DOCTYPE html>

<html>

  <head>

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

  <meta charset=”UTF-8″>

  <title>OpenUI5 Icon Explorer</title>

  <script type=”text/javascript” src=”cordova.js”></script>

  <script type=”text/javascript” src=”js/index.js”></script>

  <script id=”sap-ui-bootstrap”

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

  data-sap-ui-xx-bindingSyntax=”complex”

  data-sap-ui-theme=”sap_bluecrystal”

  data-sap-ui-libs=”sap.m”>

  </script>

  <link rel=”stylesheet” type=”text/css” href=”css/style.css”>

  </head>

  <body class=”sapUiBody” id=”content”>

  </body>

</html>

Load the application after the phonegap is ready (deviceready event ) . You incorporate this by modifying the index.js file

onDeviceReady: function() {

        app.receivedEvent(‘deviceready’);

    },

    // Update DOM on a Received Event

    receivedEvent: function(id) {

    // Tell UI5 where to find application content

    sap.ui.localResources(“view”);

    sap.ui.localResources(“model”);

    sap.ui.localResources(“util”);

    jQuery.sap.registerModulePath(‘Application’, ‘Application’);

    // Launch application

    jQuery.sap.require(“Application”);

    var oApp = new Application({

    root : “content”

    });

        console.log(‘Received Event: ‘ + id);

    }

Build apk and publish on Play Store

Follow the link to publish the application Play Store : Publishing Overview | Android Developers

I will share the code on GitHub Shortly .

You can get the Icon Explorer app on Play Store (UI5 Icon Explorer – Android-Apps auf Google Play ) or scanning the QR Code below

/wp-content/uploads/2014/12/qrcode_597464.png

To report this post you need to login first.

4 Comments

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

    1. Mayank Jain Post author

      Hi,

      I haven’t put it on github yet. Will upload and share the link. If it is urgently required inbox me your email address , I will mail it to you .

      Regards

      Mayank

      (0) 

Leave a Reply