Routing in Application
Here, we will implement routing in a full screen
application. The scenario is, there would be 3 Pages, and we will show
navigation to every page through buttons.
Follow these simple
steps:
1.
Create a SAPUI5 Project, name it accordingly.
Here, I have named it as “nav”, you can
choose your own project name.
2.
Create 3 views and 3controllers, since we are
showing navigation among these 3 pages.
Here, I have created 3 views and 3 controllers
with the name new.view.js, new2.view.js, new3.view.js and new.controller.js, new2.controller.js,
new3.controller.js.
3.
Start coding in the index.html file for the
adding the routes. This is not the best way for routing, since we add the routes in
component.js file, which is made separately. Still, in this project we will add
routes in index.html file.
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta http-equiv='Content-Type'
content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add
sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs'
if required -->
<script>
sap.ui.localResources("nav");//we have
provided the local path, //else we will
have to define the full path in the routes every time.
var app = new sap.m.App("appId");
app.placeAt("content");
var myroutes = [{
pattern: "",
name:"new",
view:"nav.new",
viewType:sap.ui.core.mvc.ViewType.JS,
targetControl: "appId",
clearTarget: true,
callback: function(){
myCallback(this);
}
},
{
pattern: ["new2","new2"],
name:"new2",
view:"nav.new2",
viewType:sap.ui.core.mvc.ViewType.JS,
targetControl: "appId",
clearTarget: true,
callback: function(){
myCallback(this);
}
},
{
pattern: ["new3","new3"],
name:"new3",
view:"nav.new3",
viewType:sap.ui.core.mvc.ViewType.JS,
targetControl: "appId",
clearTarget: true,
callback: function(){
myCallback(this);
}
}
];
var myCallback = function($this)
{
var viewId = "id" + $this.name;
var view =
sap.ui.getCore().byId(viewId);
if(view ==
undefined){
view = sap.ui.view({
id:viewId,
viewName:$this.view,
type: sap.ui.core.mvc.ViewType.JS
});
app.addPage(view);
}
app.to(viewId);
};
var router = new
sap.ui.core.routing.Router(myroutes);
router.register("appRouter");
router.initialize();
</script>
</head>
<body class="sapUiBody"
role="application">
<div id="content"></div>
</body>
</html>
·
Here callback function defines the default view,
or if the view is not found then what viewhas to be loaded.
·
We define the router using the class sap.ui.core.routing.Router(myroutes)
·
Then we register the router, so that it could be used anywhere
within the application.
·
Then we Initialise the router.
4.
Create buttons in each Page, for navigating from
one Page to another.
new.view.js
sap.ui.jsview("nav.new", {
getControllerName
: function() {
return "nav.new";
},
createContent
: function(oController) {
var button = new sap.m.Button({
text: "to view
2",
press: function (oEvent){
var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
oRouter.navTo("new2");
}
}) ;
return new sap.m.Page({
title:"Page
1",
content:
[
button
]
});
}
});
new2.view.js
var button1 = new sap.m.Button("button1", {
text: "to view
3",
press: function (oEvent){
var oRouter =
sap.ui.core.routing.Router.getRouter("appRouter");
oRouter.navTo("new3");
}
}) ;
var button2 = new sap.m.Button("button2", {
text: "to view
1",
press: function (oEvent){
var oRouter =
sap.ui.core.routing.Router.getRouter("appRouter");
oRouter.navTo("new");
}
}) ;
Place
the buttons in page’s content.
new3.view.js
var button3 = new sap.m.Button("button3" ,{
text: "to view
2",
press: function (oEvent){
var oRouter =
sap.ui.core.routing.Router.getRouter("appRouter");
var oHashChanger = new
sap.ui.core.routing.HashChanger();
oHashChanger.setHash(oRouter.getURL("new2"));
}
}) ;
Output
Page 1
Page 2
Page 3
Hope it Helped!!! Thanks…..
ConversionConversion EmoticonEmoticon