I am sure others will spot this instantly, but this problem is baffling me.
I have a simple test app using an App.
Within this application I have two htmlview pages: page1, and page2.
I have set up a router configured to switch between these two htmlviews.
On each htmlview I have a button that users the router.navTo( route) to take me to the other htmlview.
The problem is that although the buttons successfully navigate me to the 'other' htmlview, and this is confirmed by the change in the URL, the other view does not replace the first view.
The index.html is 'standard':
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-resourceroots='{
"navtest": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell("shell",{
app : new sap.ui.core.ComponentContainer({
height : "100%",
name : "navtest"
})
}).placeAt("content"); });
</script>
</head>
<body class="sapUiBody" >
<div id="content"></div>
</body>
</html>
I have configured the router as follows:
jQuery.sap.declare("navtest.Component");
jQuery.sap.require("navtest.Router");
sap.ui.core.UIComponent.extend("navtest.Component", {
metadata : {
name : "navtest",
version : "1.0",
includes : [],
dependencies : {
libs : [ "sap.m", "sap.ui.layout" ],
components : []
},
rootView : "navtest.view.app",
config : {
},
routing : {
config : {
routerClass : navtest.Router,
viewType : "XML",
viewPath : "navtest.view",
targetAggregation : "pages",
clearTarget : true
},
routes : [ {
pattern : "",
name : "page0",
view : "page1",
viewType : "HTML",
targetAggregation : "pages",
targetControl : "idAppControl"
},{
pattern : "1",
name : "page1",
view : "page1",
viewType : "HTML",
targetAggregation : "pages",
targetControl : "idAppControl"
}, {
pattern : "2",
name : "page2",
view : "page2",
viewType : "HTML",
targetAggregation : "pages",
targetControl : "idAppControl"
}]
}},init : function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var rootPath = jQuery.sap.getModulePath("navtest");
this.getRouter().initialize();
},
});
Each HTML view is as follows:
<template data-controller-name="navtest.view.page1">
<div data-sap-ui-type="sap.m.Page" data-title="page 1">
<div data-sap-ui-aggregation="content">
this is page 1
</div>
<div data-sap-ui-type="sap.m.Button" data-text="showPage2"
data-tap="showPage2"></div>
</div>
</template>
sap.ui.controller("navtest.view.page1", {
showPage2 : function(oItem) {
sap.ui.core.UIComponent.getRouterFor(this).navTo("page2");
},
onInit: function() {
sap.ui.core.UIComponent.getRouterFor(this)
.attachRouteMatched(this.onRouteMatched, this);
},
onRouteMatched : function(oEvent) {
}
});
The main app.xml is simply:
<?xml version="1.0" encoding="UTF-8"?><mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m" >
<App id="idAppControl" >
<Page id="navtest.page1"></Page><Page id="navtest.page2"></Page>
</App>
</mvc:View>
I know I will feel like an idiot when the problem is shown to be trivial, but I can live with that:-)
Message was edited by: Margot Wollny
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.