SAPUI5 Beginners tutorial part 2

Lets go thru the next tutorial folks..

where to start?? Lets do start with explanation of part1

First and foremost thing after inclusion of meta tags is..”Including libraries and themes(data-sap-ui-libs= “sap.m” data-sap-ui-theme= “sap_mvi”)”. Lets begin with this for now..

What are libraries and why we should include?

A class library is a collection of prewritten class es or coded templates, any of which can be specified and used by a programmer when developing an application program. Once we include this library, then we can access those functions,methods etc that are defined in the library class.

Libraries in SAPUI5:

Most used libraries are sap.ui and sap.m

sap.ui : Lets exlpore the sap.ui here

sap.m : Exlpore sap.m here

The sap.ui namespace is the central OpenAjax compliant entry point for UI related JavaScript functionality provided by SAP.

Namespaces & Classes
base SAPUI5 base classes
***commons SAPUI5 library with most common controls. 
***core The SAPUI5 Core Runtime.
Device Device and Feature Detection API of the SAP UI5 Library.
layout SAPUI5 library with layout controls.
model The SAPUI5 Data Binding API.
richtexteditor SAPUI5 library with rich text editor.
***table SAPUI5 library with table controls.
unified SAPUI5 unified library
***ux3 SAPUI5 library with controls that implement the SAP User Experience (UX) Guidelines 3.0
vbm SAP UI library: sap.ui.vbm
Note: *** are important classes that used frequently in sapui5.
For controls in sapui5 clickhere

Explore themes..

SAPUI5 provides a number of themes. The theme used in this example is called ‘sap_platinum’. You can find other themes in the /resource/sap/ui/*/themes folders. Here are screenshots of the same page using the other themes (click the images to enlarge):

imageTheme: sap_goldreflection imageTheme: sap_ux
imageTheme: sap_hcb imageTheme: base


Explore screenshots of ui5 runtime folder now..For download clickhere

10-05-2014 14-34-04


10-05-2014 14-34-25


10-05-2014 14-34-36


10-05-2014 14-35-09


10-05-2014 14-35-23

Here you can see 4 themes that can be used in data-sap-ui-theme= “***”


10-05-2014 14-35-39


SAPUI5 Tutorial for beginners


Today we will learn basics on sapui5 implementation for beginners. In market there are multiple websites like etc for basics learning on php,javascript,jquery etc. In those websites its clearly explaining where to start with and continues with concept wise explanation with examples. Unfortunately our SAPUI5 doesn’t have this kind of tutorial websites for now as its a infant bee now ;).

So lets startup with one by one concept.

1. Create a HTML page something like xyz.html

2. Add the HTML5 doctype definition: <!DOCTYPE html>” in the first line and the Internet Explorer-specific meta tag :<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />” are the beginning of <head> element.
This ensures that all browsers use the latest version of their rendering engine. Although Microsoft Internet Explorer is not really used widely on mobile devices and not yet supported by the SAPUI5 mobile library, this meta tag makes the page more future-proof.

3. Add a second meta tag: <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″/>.
This lets all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file)

4. Add a <div> element to <body>.

5. The “sapUiBody” class should always be added to the <body> tag to initialize font and colors for the whole page:
<body class=”sapUiBody”> <!– This is where the App will live: –> <div id=”content”></div></body>

6. To load the SAPUI5 JavaScript file, that contains the library, add the following script tag in the <head>:
<script src= “http://<http://<server&gt;:<port>/sapui5/resources/sap-ui-core.js” id= “sap-ui-bootstrap” data-sap-ui-libs= “sap.m” data-sap-ui-theme= “sap_mvi”> </script>
Note that you are only loading the “sap.m” control library and the “sap_mvi” theme. mvi stands for Mobile Visual Identity and is the name of the SAP Mobile design.

7. Replace <server> and <port> with your local SAPUI5 installation or point to the SAPUI5 libraries on SAP HANA Cloud Platform:

Continue my next tutorial SAPUI5 Beginners tutorial part 2

My First SAPUI5 application


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.


<!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=”; 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 –>
// 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() {“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
icon: “;,
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
<body class=”sapUiBody”>
<div id=”content”></div>


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>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>SAPUI5 test</title>
        <script id="sap-ui-bootstrap"
            $(function () {
                // show an SAPUI5 alert box
                sap.ui.commons.MessageBox.alert("SAPUI5 ready for action.");

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: