SAPUI5 Development with Android & iOS using Cordova

Thought I’d share these basic steps to get people started with SAPUI5 and Cordova for mobile development.  Like all my blogs, these are basic crash course meant for a quick start.  Hope this helps someone out to get started quickly and concentrating more on coding rather than trying to figure out how to setup.  We’ve gotten two apps out on pilot as soon as we got the procedures below.  Happy coding!

1. Download Eclipse Kepler or Juno install
2. Download Cordova 3.3.0
3. Download Apache Ant – this is more relevant for Android
4. SAPUI5 UI Development Toolkit
5. Android ADT SDK
6. Latest version install of the Java SDK or Java JRE.  This should have been installed on desktop.  To determine if this is installed, open a Windows Command Prompt and type the command: java -version.  It should show:

java version “1.7.0_45”

Java(TM) SE Runtime Environment (build 1.7.0_45-b18)

Java HotSpot(TM) 64-Bit Server VM (build 24.45-b08, mixed mode)

Note: With the exception of the Android ADT SDK, the rest are ZIP compressed file where you need to un-compress them in a location where it is easy for you to get to.  It is advised to extract them at the ‘C’ drive

1. Extract Eclipse
2. Extract Cordova
3. Extract Apache Ant
4. Extract SAPUI5
5. Extract Android ADT SDK

Location would look like this:

Where:

• Android – adt-bundle-window-86
• Cordova – cordova-3.3.0-src
• Apache Ant – apache-ant-1.9.3
• Eclipse – Eclipse

Adt bundle and Apache Ant must be setup in the Windows Environment

To setup the environment:

1. Click on the windows start button
2. Right click on “Computer”
3. On menu items, click on “Properties”
4. In the “System” Window, select “Advanced System Settings”
5. In “System Properties”, select “Environment Variables”
6. In the “Environment Variables” & “System Variables”, select “Path”
7. At the end of the “Variable value” field, the following paths:  C:\adt-bundle-windows-x86\sdk\tools, C:\adt-bundle-windows-x86\sdk\platform-tools, C:\apache-ant-1.9.3\bin

Run “android” from the ADT “tools” sub-folder to install the SDK

Note that for iOS, Xcode, all these must be setup in MacOS.  Except for Eclipse.  The cordova ClI creates an Xcode project file

Setup Android

1. Open Windows Command line

1. Change directory to phonegap2.2.0\bin sub-folder

1. Type the command: create <project_path> <package> <project_name>.  For example: create c:\projects\cordovaAndroid com.saskpower cordovaAndroid
2. Change directory to C:\cordova-2.2.0\framework to build and update project target

android update project -p <c:\temp\androidproject> -t android-19

1. File > New > Project…
2. Android > Android Project
3. Create project from existing source (point to the generated app found in tmp/android)
4. To create your cordova.jar, copy the commons codec:

mv commons-codec-1.6.jar framework/libs

then run in the framework directory:

1. Right click on libs/cordova.jar and add to build path
2. Right click on the project root: Run as > Run Configurations
3. Click on the Target tab and select Manual (this way you can choose the emulator or device to build to)

Project in Eclipse should look like this:

You make all your code changes in the “www” sub-folder.  Note the “cordovaAndroid-CordovaLib” project. This is in conjunction with the initial cordovaAndroid project.  Make sure that both this projects are open in Eclipse in order to have proper compile. The “apk” file is located in the “bin” folder

For iOS

The “create” command is in “cordova-ios”.  When the “create” command runs sucessfully, you can open the generated Xcode project in Xcode and the folder structure is very similar to that of Android and Eclipse.  This “create” command does need to be on MacOS with Xcode installed. There’s no way around this.

– open terminal

– change directory to cordova-ios/bin

– run this command: ./create <path of project> <package> <project name>

     Example: ./create /User/username/Documents/MyCordovaProject com.mycordovaproject MyCordovaProject

Hybrid App using SAPUI5 Framework

1. Extract the UI_Development_Toolkit for SAPUI5
2. You will find the “sapui5-mobile-static.zip” file, extract this as well
3. Copy the “resources” folder and paste into the same folder where your index.html, css, js are located

          4. Paste the code snippet below into your index.html

<!DOCTYPE html>

<html>

<head>

<meta charset=”ISO-8859-1″>

<title>Outage Finder</title>

<!–  Load SAPUI5 mobile –>

<script src=”resources/sap-ui-core.js” id=”sap-ui-bootstrap” data-sap-ui-libs=”sap.m” data-sap-ui-theme=”sap_bluecrystal”></script>

<!– App specific functions –>

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

<script src=”js/Base64.js”></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:”Outage Finder”}); // page1 should be displayed first

      // create the first page of your application

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

          title: “24 Hours Outages”,

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

              text : “Go to Page 2”,

              press: function() {

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

              }

          })*/

          initApp();

      });

      // 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

          navButtonPress: function(){

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

          },

          icon: “http://www.sap.com/global/ui/images/global/sap-logo.png“,

          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>

    <!– App specific functions –>

</head>

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

<div id=”content”>

<!–  div id=”outagemap” style=”margin: 0 auto; width: 100%; height: 100%; border:1px solid blue;”></div –>

</div>

</body>

</html>