Last year Dagfinn Parnas wrote an article about combining SAPUI5 and PhoneGap:

Building awesome mobile apps with SAPUI5 and PhoneGap

Dagfinn Parnas didn’t use the SAPUI5 mobile library so the full power of combining SAPUI5 and PhoneGap wasn’t achieved. I haven’t found anyone else on the internet make this possible either. With this blog post I will demonstrate how you can combine SAPUI5 mobile library with PhoneGap. This will make it possible for you to build native apps for all mobile platforms. You can use eclipse if you want but I will demonstrate the process without it for you, so that you will understand it deeper.

All the below files are available at my GitHub:

https://github.com/morganap/SAPUI5andPhonegap

Step 1:

Download SAPUI5: http://scn.sap.com/community/developer-center/front-end

Unzip the downloaded file.

Step 2:

In the SAPUI5 folder delete the following to reduce its size:

From sapui5-static.zip, delete:

           /test-resources/*

           /discovery/*

           /resources/sap-ui5-dbg.js

           /resources/sap-ui-core-all-dbg.js

           /resources/sap/uiext/*

           /resources/sap/service/*

           /resources/sap/makit

           /resources/sap/viz chart libraries

and in /resources/sap/ui/ the following library folders

           commons

           qunit

           richtexteditor

           table

           test

           ux3

The instruction above is from Andreas Kunz: http://scn.sap.com/thread/3287821

Step 3:

In the SAPUI5 folder you copy the resources folder to a place where you want to develop the web app.

(If you already have SAPUI5 version 1.10.4 and want to retrieve the resource folder check my other article

“SAP and mobile powers combined through SAPUI5 and Phonegap – make it work with new SAPUI5 version”)

And then create an index.html file and a config.xml file like the picture below:

In the index.html file insert the code bellow:

Filename: index.html

<!DOCTYPE HTML>

<html>

       <head>

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

                    <script src=”phonegap.js”></script>

              <script type=”text/javascript” charset=”utf-8″>

                        var pictureSource;   // picture source

                        var destinationType; // sets the format of returned value

                        // Wait for Cordova to connect with the device

                        //

                        document.addEventListener(“deviceready”,onDeviceReady,false);

                        // Cordova is ready to be used!

                        //

                        function onDeviceReady() {

                            pictureSource=navigator.camera.PictureSourceType;

                            destinationType=navigator.camera.DestinationType;

                            navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});

                        }

                        // Called when a photo is successfully retrieved

                        //

                        function onPhotoDataSuccess(imageData) {

                          // Uncomment to view the base64 encoded image data

                          // console.log(imageData);

                          // Get image handle

                          //

                          var smallImage = document.getElementById(‘smallImage’);

                          // Unhide image elements

                          //

                          smallImage.style.display = ‘block’;

                          // Show the captured photo

                          // The inline CSS rules are used to resize the image

                          //

                          smallImage.src = “data:image/jpeg;base64,” + imageData;

                        }

                        // Called when a photo is successfully retrieved

                        //

                        function onPhotoURISuccess(imageURI) {

                          // Uncomment to view the image file URI

                          // console.log(imageURI);

                          // Get image handle

                          //

                          var largeImage = document.getElementById(‘largeImage’);

                          // Unhide image elements

                          //

                          largeImage.style.display = ‘block’;

                          // Show the captured photo

                          // The inline CSS rules are used to resize the image

                          //

                          largeImage.src = imageURI;

                        }

                        // A button will call this function

                        //

                        function capturePhoto() {

                          // Take picture using device camera and retrieve image as base64-encoded string

                            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,

                            destinationType: destinationType.DATA_URL });

                        }

                        // A button will call this function

                        //

                        function capturePhotoEdit() {

                          // Take picture using device camera, allow edit, and retrieve image as base64-encoded string

                          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,

                            destinationType: destinationType.DATA_URL });

                        }

                        // A button will call this function

                        //

                        function getPhoto(source) {

                          // Retrieve image file location from specified source

                          navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,

                            destinationType: destinationType.FILE_URI,

                            sourceType: source });

                        }

                        // Called if something bad happens.

                        //

                        function onFail(message) {

                          alert(‘Failed because: ‘ + message);

                        }

                     // onSuccess Geolocation

                        //

                        function onSuccess(position) {

                            var element = document.getElementById(‘geolocation’);

                            element.innerHTML = ‘Latitude: ‘           + position.coords.latitude              + ‘<br />’ +

                                                ‘Longitude: ‘          + position.coords.longitude             + ‘<br />’ +

                                                ‘Altitude: ‘           + position.coords.altitude              + ‘<br />’ +

                                                ‘Accuracy: ‘           + position.coords.accuracy              + ‘<br />’ +

                                                ‘Altitude Accuracy: ‘  + position.coords.altitudeAccuracy      + ‘<br />’ +

                                                ‘Heading: ‘            + position.coords.heading               + ‘<br />’ +

                                                ‘Speed: ‘              + position.coords.speed                 + ‘<br />’ +

                                                ‘Timestamp: ‘          +                                   position.timestamp          + ‘<br />’;

                        }

                        // onError Callback receives a PositionError object

                        //

                        function onError(error) {

                            alert(‘code: ‘    + error.code    + ‘\n’ +

                                    ‘message: ‘ + error.message + ‘\n’);

                        }

                    </script>

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

                                          id=”sap-ui-bootstrap”

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

                                          data-sap-ui-theme=”sap_mvi” >

                    </script>

                    <script>

                          // create a mobile App

                          // it initializes the HTML page for mobile use and provides animated page handling

                          var app = new sap.m.App(“myApp”, {initialPage:”page1″}); // page1 should be displayed first

                          // create the first page of your application

                          var page1 = new sap.m.Page(“page1”, {

                              title: “SAPUI5 and Phonegap”,

                              content : [new sap.m.Text({text:”Hello Mobile World!”}),

                                         new sap.m.Button({   // content is just one Button

                                             text : “Go to next page”,

                                             tap : function() {

                                                 app.to(“page2”, “fade”);   // when tapped, it triggers drilldown to page 2

                                             }

                                             }),

                                             new sap.m.Button(“open_camera_button”, {

                                                      text : “Open camera”,

                                                      tap : function () {

                                                                 capturePhoto();

                                                      }

                                             }),

                                             new sap.ui.core.HTML({content:'<p id=”geolocation”>Finding geolocation…</p> <img style=”display:none;width:60px;height:60px;” id=”smallImage” src=”” /><img style=”display:none;” id=”largeImage” src=”” />’})

                                                                      ]}

                          );

                          page1.setBackgroundDesign(“List”);

                          // create the second page of your application

                          var page2 = new sap.m.Page(“page2”, {

                              title: “Page 2”,

                              showNavButton: true,       // page 2 should display a back button

                              navButtonTap: function(){

                                  app.back();            // when tapped, the back button should navigate back up to page 1

                              },

                              content : new sap.m.Text({text:”Hello Mobile World!”})

                          });

                          app.addPage(page1).addPage(page2); // add both pages to the App

                          app.placeAt(“content”); // place the App into the HTML document

                    </script>

          </head>

          <body class=”sapUiBody” role=”application”>

                       <div id=”content”></div>

    </body>

</html>

Step 4

Insert the following code in the config.xml file:

Filename: config.xml

<?xml version   =”1.0″ encoding=”UTF-8″ ?>

<widget xmlns   = “http://www.w3.org/ns/widgets

                xmlns:gap   = “http://phonegap.com/ns/1.0

                id                      = “com.intel.sample”

                versioncode = “1”

                version                 = “1.0.0”>

                <name>SAPUI5 and Phonegap</name>

                <content src=”index.html”/>

                <description>

                    Test application with SAPUI5 and Phonegap

                </description>

                <preference name=”phonegap-version” value=”2.0.0″ />

                <feature name=”http://api.phonegap.com/1.0/camera“/>

                <feature name=”http://api.phonegap.com/1.0/file“/>

                <feature name=”http://api.phonegap.com/1.0/geolocation“/>

                      <!– for iPhone –>

                      <plugin name=”Camera” value=”CDVCamera” />

                      <plugin name=”Geolocation” value=”CDVLocation” />

                <!– for Android –>

                <plugin name=”Camera” value=”org.apache.cordova.CameraLauncher”/>

                <plugin name=”Geolocation” value=”org.apache.cordova.GeoBroker” />

                <preference name=”orientation” value=”portrait” />

                <preference name=”android-minSdkVersion” value=”9″ />

</widget>

Step 5

Make your files to a zip file:

————————————————————————————————————————————

————————————————————————————————————————————

Step 6

Create a free account at:

https://build.phonegap.com

This web service makes it possible to build native apps to all different mobile platforms without needing to setup different native SDK environment for every mobile platform.

Step 7

Log in with your new account:

https://build.phonegap.com

Create a new app by pressing the new app button. Then choose private, like the below picture.

Upload your index.zip file that you created in step 5.

Step 8

When the upload is complete this app will appear. Press the “Ready to build” button.

Now wait for the build to complete for all the different mobile platforms.

Step 9

The build will succeed for every platform except iOS and blackberry. If you want to create iOS apps you will need to enter a developer code. It will require you to have an apple computer, iPhone and an apple developer account. Blackberry complains because it thinks there are too many files uploaded. This can sure be fixed and if anyone will give it a try I appreciate it.

Press the android figure above and a download of the apk file for that platform will begin. You can download the platform you want but I will describe below for the android platform. Send the downloaded file to your android phone. You can for example email it. Before opening the file you need to allow unknown sources in your phone:

For android 4 devices and up:

  1. Tap Menu.
  2. Tap Security.
  3. Check the box labeled Unknown Sources.

For older android devices:

  1. Tap Menu.
  2. Tap Settings.
  3. Tap Applications.
  4. Check the box labeled Unknown Sources.

Step 10

Now open your apk file in your android mobile device. This will give you an option to install it. Choose to install.

Step 11

Open your newly created application. Play around with the app! You can test to press the camera button.

The camera opens and you take a picture. Then the picture is placed under the Timestamp text:

Step 12

The above steps show how easy it is to develop apps for all mobile platforms using SAPUI5 and PhoneGap. So what are you waiting for! Give it a try!

Unleash the power of SAP and mobiles combined!

To report this post you need to login first.

18 Comments

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

  1. Shiang Li

    Hi Morgan,

    This is a very helpful tutorial. I do have a question: I installed the latest SDK (1.10.4) for eclipse when I developed my app a few days ago… version 1.10.4 has some really nice features I’d like to keep in my app… however when it came time to package everything using phone gap… I am resorted to the latest “resources” folder I can get my hands on, which is 1.8.4… Do you know if there’s such resource package for 1.10.4?

    Thanks,

    Shiang

    (0) 
  2. Puran Khoeval

    Hi Morgan,

    Your blog is really a path provider who needs guidance in building mobile app with UI5 and phonegap.

    I am using 1.8.4 version of UI5 SDK so thought that of updating my SDK with latest version but while trying to check for the updates I do not get any updates for UI5 via Eclipse.

    UI5 1.10.4 is for GA or is it for specific set of customers, if it is for GA can you please share the update site?

    Best Regards,

    Puran Khoeval.

    (0) 
      1. Puran Khoeval

        Hi Morgan,

        Thanks for the link, I was able to update to new version. I tried my hands on one app and wanted to add a table on the page. During the web browser testing I can see the table and the app works perfectly but when I install the apk file in the mobile, all I get is one white blank page:(.

        For the mobile app can we “sap.ui.table” library, I do not see any Table control in the sap.m library. What is the correct way to use Table control for mobile apps. Can you please guide me on this. Thanks in advance!

        Best Regards,

        Puran Khoeval.

        (0) 
        1. Morgan Apelqvist Post author

          Hello Puran!

          The sap.ui.table is like you say not accessible from the mobile library. So that is why your mobile app is a white blank page. If the desktop version show the table it can be because the desktop library files is left in the web browser cache because you have ran SAPUI5 applications that use that library.

          In the mobile library it’s a list component that can be something for you:

          https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/m/List.html

          Best regards

          Morgan Apelqvist

          (0) 
  3. Manoj Chaurasiya

    Hi Morgan,

    I am trying to implement sapui5 with phoneGAP. But i receive error. because i am not deploy app into PhoneGAP site.

    Is there any way to implement this.

    Is this perform as a sencha(extjs) Concept If i provide the all necessary js files.

    Is there any advance level tutorial other then ondemand documentation url ?

    Thanks

    Manoj

    (0) 
  4. Vijaykumar Ratnakar

    Hi Morgan,

      

        I am a beginner to sapui5,this blog is very helpfull for me .

    Thanks for this blog. I am trying to package a simple mobile app i.e., developed using wizards(MVC model) ,I have extracted resources from jar files,now I want to package the app using PhoneGap could you post the steps for packaging the app developed using MVC model.

    Regards,

    Vijaykumar.

    (0) 
    1. Morgan Apelqvist Post author

      Hello Vijaykumar!

      Im happy to hear that you benefited from the blog!

      I do not have the time right now to look into your question.

      So I suggest you post your question in the forum insteed.

      Best regards!

      //Morgan

      (0) 
    1. Virinchy P

      I would suggest you update your app to a latest version .


      To do this,

      Go to your config.xml and add the following line:

      preference name=”phonegap-version” value=”3.3.0″


      Value can change accordingly.

      (0) 

Leave a Reply