Apps consist of a set of pages, views, and screens between which the user can navigate. Now we add two pages to the app.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="http://<server>:<port>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m">
</script>
<script type="text/javascript">
sap.ui.getCore().attachInit(function () {
// create a mobile app and display page1 initially
var app = new sap.m.App("myApp", {
initialPage: "page1"
});
// create the first page
var page1 = new sap.m.Page("page1", {
title : "Hello World",
showNavButton : false,
content : new sap.m.Button({
text : "Go to Page 2",
press : function () {
// navigate to page2
app.to("page2");
}
})
});
// create the second page with a back button
var page2 = new sap.m.Page("page2", {
title : "Hello Page 2",
showNavButton : true,
navButtonPress : function () {
// go back to the previous page
app.back();
}
});
// add both pages to the app
app.addPage(page1).addPage(page2);
// place the app into the HTML document
app.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Create one sap.m.Page control and set its title. To keep this example simple, the content is just one button that navigates to the second page by calling app.to("page2") when the button is pressed. The parameter page2 is the ID of the second page. You could also specify the animation type for the navigation. The default is a slide animation from right to left.
sap.m.Page controls can be used for the aggregation pages of the app control, but other controls could be used as well. The page has a scrollable content section for displaying information and will create a header and an optional footer area.
Create the second page that displays the Back button. The property showNavButton is set to true to display a Back button. When it is pressed, the event handler function calls app.back(). This will bring the user back to the main page with an an inverse animation.
app.addPage(page1).addPage(page2); app.placeAt("content");