Currently Being Moderated

Building Sapui5 mobile application for IOS devices with phonegap

 

Since sapui5 is a growing HTML5 framework and bringing many features with nice look and feel. I wanted to try myself on ios platform by using phonegap. In SCN there are lots of blogs about sapui5 and gateway services well i want to thank to everyone because some helped me to build my application.

 

In this blog,  we will build a sapui5 ios application with consuming Netweaver gateway service.  I will not explain how-to create gateway service but there are some good blogs

 

Useful links:

Gateway Service Builder (SEGW) with a focus on DDIC Importer

Create your first service with SAP Gateway

Consume NetWeaver Gateway services via SAPUI5 - Part 1

 

Prerequisites

•    Development package sapui5

•    A Netweaver gateway service

•    Phonegap plugin installed on Xcode - Phonegap

 

Step 1 : Create a phonegap project on xcode

I assume you are already familiar with phonegap plugin but i explain for who are not familiar about it

 

1-    Go to File -> New -> Project and  choose Cordova-based Application as it seen below.

 

cordova.png

2- There one missing file which “www” that you should add to project. Right click on project and select “add files to <projectname>” . On your mac go to “Documents -> CordovaLib -> CordovaLibApp ” select “www” folder to add.

 

selecttoAdd.png

 

www.png

 

 

3- Finally your project seems to be as below, so its ready for building sapui5 app

 

finallyproject.png

 

 

 

 

Step 2 : Adding sapui5 api to project


Sapui5 framework mobile api size is quite bigger to have all in a project.  As this disscussed before on some blogs so i added the files which only i needed.

You can check this blog about size.

 

1- Import folder “sap” which includes only  “m” and “ui-model” into the project. Right click on “www” folder and specify the sapui5 api path.

 

 

sapui5fileadded.png

2-    You should also add the jquery-1.7.1.js file. You can get it from following link http://jquery.com/download/

 

 

Step 3: Creating HTML page


Here we begin to place our application content on html page.

 

1-    Create a html page and name it as “sapui5.html” and add the following code into the page.

 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <script type="text/javascript" charset="utf-8" src="cordova.ios.js"></script>
    <script src="./sap-ui-core.js" 
        id="sap-ui-bootstrap"
        type="text/javascript"
        data-sap-ui-libs="sap.m" 
        data-sap-ui-theme="sap_mvi">
    </script>
      <script src="./Js/Main.js"></script>
      <script src="./Js/CustomerList.js"></script>
      <script src="./Js/CustomerDetail.js"></script>
    <script>
        initCustomerApp(); 
    </script>
  </head>
  <body class="sapUiBody">
    <div id="content"></div>
  </body>
</html>

 

 

2-    Since phonegap starts with index.html page as default so we need to change it to our new html page.

 

In xcode go to the Classes and open AppDelegate.m file as below change the index.html to sapui5.html

 

changehtml.png

Step 4: Preparing gateway service

Prepare your gateway service.  There are some goods blogs about how-to create  gateway services(check useful links). In this blog my gateway service’s structure is as below.

 

{
    "success": "true",
    "msg": "",
    "mydata": [
        {
            "mandt": "",
            "email": "",
            "firstname": "",
            "lastname": ""
        }
    ]
}

 

Since we are loading data from external host so you need to configure external host in phonegap project. For detail information please check the page

 

cordovaplist.png

In cordova plist file add either host adress or asterix sign for any host.

 

Step 5: Creating Main javascript file

 

In main javascript file we will create the application instance and pages which are Customerlist and CustomerDetail.

 

1-    Under “www” folder create a new folder and name it as Js. Then under Js folder create a new javascript file name it as main.js

 

Add the following code into the main.js file

 

var app;
function initCustomerApp(){
    app = new sap.m.App("CustomerApp", {initialPage:"customerlist"});
    var customerList = customerListScreenLayout();
    var customerDetail = customerDetailScreenLayout();
    app.addPage(customerList).addPage(customerDetail);
    app.placeAt("content");
}

 

 

Step 6: Creating CustomerList javascript file

We will create our customerlist so under Js folder create a new javascript file and name it as CustomerList.js

Add the following code into the CustomerList.js file

 

 

/*
 * Customer List
 *
 */
var oModel;
function customerListScreenLayout(){
    var customerList = new sap.m.List({
                                      headerText : "Customers",
                                      width:"100%"
                                      });
     var oItemTemplate = new sap.m.StandardListItem({
                                                    title : "{firstname}",
                                                    type : sap.m.ListType.Navigation,
                                                    description:"{email}",
                                                    tap : function(evt) {
                                                            navigateToPage(evt,"customerdetail");
                                                        }
                                               });
    // Calling Ajax request
    var returnedData = getData();
    bindListData(returnedData, oItemTemplate, customerList);
     var oFlexBox = new sap.m.VBox("fv-flexbox", {
                                  items: [
                                          customerList
                                          ],
                                  fitContainer: true,
                                  alignItems: "Stretch"
                                  });
    var page1 = new sap.m.Page("customerlist", {
                               title: "Customer",
                               content : [oFlexBox]
                               });
    return page1;
}
function getData() {
    var returnedData="";
    jQuery.ajax({
                url: "http://<gatewayservice>",
                type: 'GET',
                contentType: 'application/json',
                cache: false,
                dataType: "json",
                async: false,
                success: function(data, textStatus, jqXHR) {
                       returnedData = data;
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("Error occurred while obtaining data from the server. URL: " + url);
                    console.log(jqXHR.status);
                    console.log(errorThrown);
                }
                });
    return returnedData;
}
function bindListData(data, itemTemplate, list) {
    oModel = new sap.ui.model.json.JSONModel();
    oModel.setData(data);
    list.setModel(oModel);
    list.bindAggregation("items", "/mydata", itemTemplate);
}

 

Step 7: Creating CustomerDetail javascript file

 

Create a CustomerDetail javascript file under Js folder and add the following code.

 

/*
 *
 *Customer Detail
 *
 **/
function customerDetailScreenLayout(){
    var firstnameLabel = new sap.m.Label( {
                                         text:"Firstname",
                                         width: "160px",
                                         labelFor:firstnameText
                                 });
    var firstnameText = new sap.m.Input( {
                                       value: "{firstname}",
                                       width: "160px",
                                       tooltip: "Firstname"
                                 });
    var line1 = new sap.m.HBox( {
                               items:[ firstnameLabel, firstnameText,]
                               });
    var lastnameLabel = new sap.m.Label( {
                                         text:"Lastname",
                                         width: "160px",
                                         labelFor: lastnameText
                                         });
    var lastnameText = new sap.m.Input( {
                                        value: "{lastname}",
                                        width: "160px",
                                        tooltip: "Lastname"
                                        });
    var line2 = new sap.m.HBox( {
                               items:[ lastnameLabel, lastnameText,]
                               });
    var emailLabel = new sap.m.Label( {
                                        text:"Email",
                                        width: "120px",
                                        labelFor: emailText
                                        });
    var emailText = new sap.m.Input( {
                                       value: "{email}",
                                       width: "200px",
                                       tooltip: "email"
                                       });
    var line3 = new sap.m.HBox( {
                               items:[ emailLabel, emailText,]
                               });
    var layout = new sap.m.VBox( {
                            items:[ line1,line2,line3 ]
                            });
    var page2 = new sap.m.Page("customerdetail", {
                               title: "Customer Detail",
                               showNavButton: true,
                               navButtonTap: function(){
                               app.back();
                               },
                               content:[layout]
                               });
    return page2;
}
function navigateToPage(evt,toScreen){
    var context = evt.oSource.getBindingContext();
    var screen  = app.getPage(toScreen);
    screen.setBindingContext(context);
    screen.setModel(oModel);
    app.to(screen);
}

 

 

Conclusion

Build the project and deploy the application.

The screenshot from the application.

 

app1.png    app2.png

 

Hopefully you have seen how easy to build sapui5 application with phonegap. Sapui5 has many features on ios devices and works very well.

Comments

Actions

Filter Blog

By author:
By date:
By tag: