<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
data-sap-ui-xx-componentpreload="off"
></script>
</head>
<body id="content" class="sapUiBody">
<div
data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{"id": "rootComponent"}'
></div>
</body>
</html>
{
"_version": "1.53.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"title": "foo",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.98.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {},
"sap.ui.unified": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"ui": {
"type": "sap.ui.model.json.JSONModel"
}
},
"rootView": {
"id": "rootView",
"viewName": "demo.view.App",
"type": "XML"
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"type": "View",
"viewType": "XML",
"path": "demo.view",
"controlId": "myApp",
"controlAggregation": "pages",
"bypassed": {
"target": "notFound"
}
},
"routes": [
{
"name": "home",
"pattern": "",
"target": "parentTarget"
},
{
"name": "childRoute1",
"pattern": "child1",
"target": "childTarget1"
},
{
"name": "childRoute2",
"pattern": "child2",
"target": "childTarget2"
}
],
"targets": {
"parentTarget": {
"name": "Parent",
"level": 1
},
"childTarget1": {
"path": "demo.view.children",
"name": "Child1",
"parent": "parentTarget",
"controlId": "parentNavContainer",
"transition": "flip",
"level": 2
},
"childTarget2": {
"path": "demo.view.children",
"name": "Child2",
"parent": "parentTarget",
"controlId": "parentNavContainer",
"transition": "slide",
"level": 3
},
"notFound": {
"name": "Parent",
"transition": "flip",
"level": 0
}
}
}
}
}
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
>
<App id="myApp" autoFocus="false">
<pages>
<!-- The "Parent" view will be added here by the routing mechanism -->
</pages>
</App>
</mvc:View>
<mvc:View controllerName="demo.controller.Parent"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
>
<Page id="parentPage"
class="sapUiResponsivePadding--header sapUiResponsivePadding--footer"
title="Parent View"
>
<headerContent>
<SegmentedButton
width="100%"
selectionChange=".onSegmentedButtonSelectionChange"
selectedKey="{
path: 'ui>/selectedRoute',
events: { change: '.onSelectedRouteBindingChange' }
}"
>
<items>
<SegmentedButtonItem
key="childRoute1"
text="Child View 1"
icon="sap-icon://sap-ui5"
/>
<SegmentedButtonItem
key="childRoute2"
text="Child View 2"
icon="sap-icon://hello-world"
/>
</items>
</SegmentedButton>
</headerContent>
<NavContainer id="parentNavContainer" autoFocus="false"> <!--
Avoid sap.m.App here. Instead, use sap.m.NavContainer:
https://github.com/SAP/openui5/issues/1282#issuecomment-280575439
-->
<pages>
<!-- Child views will be added here by the routing mechanism -->
</pages>
</NavContainer>
<footer>
<Bar design="Footer">
<contentMiddle>
<Title text="Parent Footer" />
</contentMiddle>
</Bar>
</footer>
</Page>
</mvc:View>
<mvc:View controllerName="demo.controller.children.Child1"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%"
>
<MessagePage
showHeader="false"
icon="sap-icon://sap-ui5"
text="Child View 1"
description=""
/>
</mvc:View>
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%"
>
<MessagePage
showHeader="false"
icon="sap-icon://hello-world"
text="Hello Child View 2"
description=""
/>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation"
],
manifest: "json",
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.getModel("ui").setData({ selectedRoute: "" });
this.getRouter().initialize();
},
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/UIComponent",
], function(Controller, UIComponent) {
"use strict";
return Controller.extend("demo.controller.Parent", {
onInit: function() {
const router = UIComponent.getRouterFor(this);
router.attachRoutePatternMatched(this.onPatternMatched, this);
},
onPatternMatched: function(event) {
const key = event.getParameter("name");
const uiModel = this.getOwnerComponent().getModel("ui");
if (key === "home") {
uiModel.setProperty("/selectedRoute", "childRoute1");
} else {
uiModel.setProperty("/selectedRoute", key);
}
},
onSegmentedButtonSelectionChange: function(event) {
this.navTo(event.getParameter("item").getKey());
},
onSelectedRouteBindingChange: function(event) {
this.navTo(event.getSource().getValue());
},
navTo: function(routeName) {
if (routeName) {
const router = this.getOwnerComponent().getRouter();
router.navTo(routeName);
}
},
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.children.Child1", {
onInit: function() {
this._navContainerDelegate = { onBeforeShow: this.onBeforeShow };
this.getView().addEventDelegate(this._navContainerDelegate, this);
},
onBeforeShow: function() {
// For https://stackoverflow.com/q/48097675/5846045
console.log("onBeforeShow was called");
},
onExit: function() { // Don't forget to deregister the delegate on exit.
this.getView().removeEventDelegate(this._navContainerDelegate);
this._navContainerDelegate = null;
},
});
});