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!
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
Location would look like this:
Where:
Adt bundle and Apache Ant must be setup in the Windows Environment
To setup the environment:
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
android update project -p <c:\temp\androidproject> -t android-19
mv commons-codec-1.6.jar framework/libs
then run in the framework directory:
| android update project -p . -t android-19 | |
| ant jar |
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
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>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
9 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |