Routing from full to split screen
Here, we will implement routing in a full screen to a split
screen, hence clearing all aspects of routing. The scenario is, there would be
4 Pages, out of which 1st three are full screen pages and last one
is a split screen.
Follow these simple
steps:
1.
Create a SAPUI5 Project, name it accordingly.
Here, I have named it as “route”, you can
choose your own project name.
2.
Create 4 views and 4 controllers, for full pages
and 3 views and 3 controllers for split screen, since we are showing navigation
among these pages.
Here, I have created 4 views and 4
controllers with the name App.view.js which describe the full screen, page1.view.js,
page2.view.js, page3.view.js and oapp.view.js which describe the split screen, omasterpage.view.js,
odetailpage.view.js, similarly there controllers.
3. Start
coding in the component.js file for the adding the routes.
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"
data-sap-ui-resourceroots='{
"com.tutorial":"./",
"route":"./route"}'
data-sap-ui-preload=''>
</script>
<!-- only load the mobile lib
"sap.m" and the "sap_bluecrystal" theme -->
<script>
new sap.m.Shell("Shell",{
title:"Routing",
app:
new
sap.ui.core.ComponentContainer({
name
: 'com.tutorial'
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody"
role="application">
<div id="content"></div>
</body>
</html>
4.
Create buttons in each Page, for navigating from
one Page to another.
App.view.js
sap.ui.jsview("route.App", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf route.App
*/
getControllerName
: function() {
return "route.App";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf route.App
*/
createContent
: function(oController) {
this.setDisplayBlock(true);
return new sap.m.App("navContainer");
}
});
Page1.view.js
sap.ui.jsview("route.page1", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf route.page1
*/
getControllerName
: function() {
return "route.page1";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf route.page1
*/
createContent
: function(oController) {
var button = new sap.m.Button("sas", {
text
: "to
view 2",
press
: function(oEvent) {
var router =
sap.ui.core.routing.Router.getRouter("appRouter"); // Get
instance of router
router.navTo("page2", null, false);// Call
navTo() method of Router class to trigger the navigation
}
});
return new sap.m.Page({
title
: "Page
1",
content
: [ button ]
});
}
});
Page2.view.js
sap.ui.jsview("route.page2", {
/**
* Specifies the Controller belonging to this View. In the case that it is
* not implemented, or that "null" is returned, this View does not have a
* Controller.
*
* @memberOf route.page2
*/
getControllerName
: function() {
return "route.page2";
},
/**
* Is initially called once after the Controller has been instantiated. It
* is the place where the UI is constructed. Since the Controller is given
* to this method, its event handlers can be attached right away.
*
* @memberOf route.page2
*/
createContent
: function(oController) {
var button1 = new sap.m.Button("sasx",
{
text
: "to
view 3",
press
: function(oEvent) {
var oRouter =
sap.ui.core.routing.Router
.getRouter("appRouter");
oRouter.navTo("page3");
}
});
var button2 = new sap.m.Button("zxxx",
{
text
: "to
view 1",
press
: function(oEvent) {
var oRouter =
sap.ui.core.routing.Router
.getRouter("appRouter");
oRouter.navTo("page1");
}
});
return new sap.m.Page({
title
: "Page
2",
content
: [ button1, button2 ]
});
}
});
Page3.view.js
sap.ui.jsview("route.page3", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf route.page3
*/
getControllerName
: function() {
return "route.page3";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf route.page3
*/
createContent
: function(oController) {
var button2 = new sap.m.Button({
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("page2"));
}
}) ;
var button3 = new sap.m.Button({
text: "to split
view",
press: function (oEvent){
var router =
sap.ui.core.routing.Router.getRouter("appRouter"); // Get
instance of router
router.navTo("omasterpage", null, false);
}});
return new sap.m.Page({
title:
"Page
3",
content:
[
button2,button3
]
});
}
});
Oapp.view.js
sap.ui.jsview("route.oapp", {
/**
* Specifies the Controller belonging to this View. In the case that it is
* not implemented, or that "null" is returned, this View does not have a
* Controller.
*
* @memberOf route.oapp
*/
getControllerName
: function() {
return "route.oapp";
},
/**
* Is initially called once after the Controller has been instantiated. It
* is the place where the UI is constructed. Since the Controller is given
* to this method, its event handlers can be attached right away.
*
* @memberOf route.oapp
*/
createContent
: function(oController) {
this.setDisplayBlock(true);
var oapp = new sap.m.SplitApp("SplitApp", {});
return oapp;
}
});
Omasterpage.view.js
sap.ui.jsview("route.omasterpage", {
getControllerName
: function() {
return "route.omasterpage";
},
createContent
: function(oController) {
return new sap.m.Page(
{
title
: "Title",
showNavButton
: true,
navButtonTap
: function() {
var oRouter =
sap.ui.core.routing.Router
.getRouter("appRouter");
window.history.go(-1);
},
content
: []
});
}
});
Odetailpage.view.js
sap.ui.jsview("route.odetailpage", {
getControllerName
: function() {
return "route.odetailpage";
},
createContent
: function(oController) {
return new sap.m.Page({
title
: "Title",
content
: [
]
});
}
});
Cmponent.js
jQuery.sap.declare("com.tutorial.Component");
sap.ui.core.UIComponent.extend("com.tutorial.Component",{
metadata
: {
rootView
: "com.tutorial.route.App",
routing
: {
config
: {
viewType:"JS", // viewType
defines type of the target views
viewPath:"route",
// targetControl:"navContainer", // targetControl refers to the id of control
where all the target views are to be placed
// this is defined in
'MainView' createcontent method
targetAggregation:"pages", //
targetAggregation refers to aggregation namw of targetControl. For
splitApp
// control there are two
Aggregations, 'detailPages' and 'masterPages'
clearTarget
: false//The clear
target parameter defines a boolean that is used to specify if the
aggregation
//should be cleared before
adding the view to it.
},
routes
: [
{
pattern : "",
name:"page1",
view:"page1",// This is the
target view, to where navigation happens
targetControl:"navContainer",
targetAggregation:"pages",
},
{
pattern : ["new2","page2"],
name
: "page2",
view : "page2",
targetControl:"navContainer",
targetAggregation:"pages",
},
{
pattern : ["new3","page3"],
name : "page3",
view : "page3",
targetControl:"navContainer",
targetAggregation:"pages",
},
{
pattern:"splitApp",
name:"oapp",
view:"oapp",
targetControl:"navContainer",
targetAggregation:"pages",
subroutes:[{
pattern:"splitApp/",
name:"omasterpage",
view:"omasterpage",
targetControl:"SplitApp",
targetAggregation:"masterPages",
subroutes:[
{
pattern:"splitApp/",
name:"odetailpage",
view:"odetailpage",
targetControl:"SplitApp",
targetAggregation:"detailPages"
}],
}]
}],
}}
});
com.tutorial.Component.prototype.init
= function(){
jQuery.sap.require("sap.ui.core.routing.History");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
sap.ui.core.UIComponent.prototype.init.apply(this);
var router = this.getRouter();
this.routeHandler = new
sap.m.routing.RouteMatchedHandler(router);
router.register("appRouter"); // Assign a name to Router, so that we
can access it in all controllers by using this name
router.initialize();
//
Initialise the Router
};
com.tutorial.Component.prototype.createContent
= function(){
var view =
sap.ui.view({viewName:"route.App",type:sap.ui.core.mvc.ViewType.JS});
return view;
};
Output
Page 1
Page 2
Page 3
Page 4
Hope it Helped!!! Thanks…..
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
3 comments
Click here for commentsAwesome post! Just what i was looking for. Thanks!
ReplyHi,
ReplyWhat is the difference between oHashChanger.setHash(oRouter.getURL("page2")) & oRouter.navTo("page2")?
Hi, both serves the same purpose here, i.e for navigating.In hashChanger, we are expliitly setting the URL, in the second case, we have mention the roots, and "page2" is the name given in the roots, which matches the pattern and then the navigation is done. Hope it helps, and if someone has a better explanation, please comment down ;)
ReplyConversionConversion EmoticonEmoticon