My First SAPUI5 application

Pals,

I hope you are aware of configuring sapui5 in eclipse with my previous post. If not pls check here

Now just create a new project in SAPUI5 Application Development – >Application Project

Create a mobile.html file in it.

Paste the following code and run in tomcat server.

Code:

<!DOCTYPE HTML><html> <head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″/>
<title>Mobile App in 23 Seconds Example</title>

<script src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js&#8221; id=”sap-ui-bootstrap” data-sap-ui-libs=”sap.m” data-sap-ui-theme=”sap_mvi”> </script>
<!– only load the mobile lib “sap.m” and the “sap_mvi” theme –>
<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: “Initial Page”,
content : new sap.m.Button({ // content is just one Button
text : “Go to Page 2”,
tap : function() {
app.to(“page2”); // when tapped, it triggers drilldown to page 2
}
})
});
// 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(){
// when tapped, the back button should navigate back up to page 1
app.back();
},
icon: “http://www.sap.com/global/ui/images/global/sap-logo.png&#8221;,
content : new sap.m.Text({text:”Hello Mobile World!”})
});
app.addPage(page1).addPage(page2); // add both pages to the App
// place the App into the HTML document
app.placeAt(“content”);
</script>
</head>
<body class=”sapUiBody”>
<div id=”content”></div>
</body>
</html>

Output:

10-05-2014 12-28-11

10-05-2014 12-28-32

 

Note: To play around with the app in your desktop browser, add the following URL parameter to the file URL: sap-ui-xx-fakeOS=ios, so that the URL reads : “mobile.html?sap-ui-xx-fakeOS=ios”. This enables the simulation of touch events on desktop PCs. This also enables the iPhone/iPad styling; if you want to see the Android styling, use sap-ui-xx-fakeOS=android instead.

 

Sample Program to run in 5 secs:

A first test

Now we have the documentation up and running, we create our first test to see if we have all the required files.

To run this test, setup a new project or website in VS. Copy the ‘resources’ folder from sapui5-static into the site and create the following test.html file:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>SAPUI5 test</title>
        <script id="sap-ui-bootstrap"
           src="resources/sap-ui-core.js"
           data-sap-ui-theme="sap_platinum"
           data-sap-ui-libs="sap.ui.commons"&gt;&lt;/script&gt;
        <script>
            $(function () {
                // show an SAPUI5 alert box
                sap.ui.commons.MessageBox.alert("SAPUI5 ready for action.");
            })
        </script>
    </head>
    <body>
    </body>
</html>

The test.html file instructs the browser to load the sap-ui-core.js file which contains jQuery and also a dynamic loader which will load further required js and css files. To show that everything loads correctly, we simply create an alert box (one of the SAPUI5 controls) when the DOM is ready.

View the test.html file in the browser and you see:

SNAGHTML7a1fad9

Source: http://allthatjs.com/2012/02/23/getting-started-with-sapui5/

Advertisements

One thought on “My First SAPUI5 application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s