SAPUI5 provides an additional control library called sap.m, which is optimized for mobile devices, but also runs fine in desktop browsers.
Procedure-step1
The sap.m library provides a control calledAppwhich is meant to be the root control of a mobile application. It provides the initialization of the HTML page, sets some meta tags to ensure an as-native-as-possible look&feel, and can manage different pages and the animations between them.
Create the control and define the page that you want to display first:
// 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
Typical mobile applications are often composed of a number of pages/views/screens between which the user can navigate. You now add two of them to your app.
When the Button is pressed, it triggers a drilldown navigation by callingapp.to("page2"), where page2 is the ID of the second page. You could also give the animation type. The default is a slide animation from right to left.
sap.m.Pagecontrols can be used as pages, and the aggregation is called pages, but other controls could be used as well.
showNavButtonis set totrueto get a Back button displayed. When this button is pressed, the handler callsapp.back(). This causes an inverse animation, which leads back to the main page.
app.placeAt("content"); // place the App into the HTML document
Replace <server> and <port> with your local SAPUI5 installation.
NoteOnly "sap.m" library and "sap_bluecrystal" theme are loaded
Note that you are only loading thesap.mcontrol library and thesap_bluecrystal
theme.
i have run the below code in https://account.hanatrial.ondemand.com
SAPWEBID
<!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>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" 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",
press: function() {
app.to("page2"); // when pressed, 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
navButtonPress: function(){
app.back(); // when pressed, the back button should navigate back up to page 1
},
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>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
output:
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 | |
10 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |