SapUI5. Переход между страницами с использованием Routers.

Обычный переход между страницами, с помощью прямого вызова представления по ID, не меняет строку адреса в браузере, что иногда просто необходимо.

Для этой цели будем использовать объект sap.ui.core.routing.Router

Создадим второе представление с контроллером и проинициализируем его в 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>
		<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

		<script>
				sap.ui.localResources("sapui5_routers");
				var app = new sap.m.App("appId", {initialPage:"idmain_view1"});
				var page = sap.ui.view({id:"idmain_view1", viewName:"sapui5_routers.main_view", type:sap.ui.core.mvc.ViewType.JS});
				var page1 = sap.ui.view({id:"idmain_view2", viewName:"sapui5_routers.second_view", type:sap.ui.core.mvc.ViewType.JS}); //добавили
				app.addPage(page).addPage(page1); //добавили addPage(page1)
				app.placeAt("content");
		</script>
		
		<script src="sapui5_routers/routing.js"></script>
	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal">

</script>

sap.ui.localResources("sapui5_routers");

var app = new sap.m.App("appId", {initialPage:"idmain_view1"});

var page = sap.ui.view({id:"idmain_view1", viewName:"sapui5_routers.main_view", type:sap.ui.core.mvc.ViewType.JS});

var page1 = sap.ui.view({id:"idmain_view2", viewName:"sapui5_routers.second_view", type:sap.ui.core.mvc.ViewType.JS}); //добавили

app.addPage(page).addPage(page1); //добавили addPage(page1)

app.placeAt("content");

</script>

</head>

</body>

</html>

Так же у нас появился новый скрипт, который будет отвечать за переход между страницами

строка :

<script src="sapui5_routers/routing.js"></script>

1	<script src="sapui5_routers/routing.js"></script>

Разберем его текст

//создаем объект с маршрутами
var viewRouters = [ 
	{ //первый
		pattern: "", //тут задается паттерн для перехода между страницами
		name: "view1", //имя представления
		view: "sapui5_routers.main_view", //полный путь до представления, начиная  с ресурса
		view_type: sap.ui.core.mvc.ViewType.JS, //тип представления (JS в моем случае)
		targetControl: "appId", //id приложения (задается на index.html)
		clearTarged: true,
		callback: function() {  //функция, которая осущ-т переход м-у страницами
			myCallback(this);
		}
	},
	
	{ //второй
		pattern: ["second_view", "second_view"], //первый аргумент - ссылка, которую мы увидим в браузере (условная), второй - имя представления
		name: "view2",
		view: "sapui5_routers.second_view",
		view_type: sap.ui.core.mvc.ViewType.JS,
		targetControl: "appId",
		clearTarged: true,
		callback: function() {
			myCallback(this);
		}
	}
];

//функция, которая динамически формирует имя представления и переходит на него
myCallback = function($this) {
        var viewId = "idmain_" + $this.name; //формируем ИД представления (динамически для удобства)
	var app = sap.ui.getCore().byId("appId");
	app.to(viewId); // переходим по ссылке
	        
};

var oRouter = new sap.ui.core.routing.Router(viewRouters); //создаем объект

oRouter.register("routerId"); //регистрируем его ИД
oRouter.initialize();

//создаем объект с маршрутами

var viewRouters = [

{ //первый

pattern: "", //тут задается паттерн для перехода между страницами

name: "view1", //имя представления

view: "sapui5_routers.main_view", //полный путь до представления, начиная с ресурса

view_type: sap.ui.core.mvc.ViewType.JS, //тип представления (JS в моем случае)

targetControl: "appId", //id приложения (задается на index.html)

clearTarged: true,

callback: function() { //функция, которая осущ-т переход м-у страницами

myCallback(this);

}

{ //второй

pattern: ["second_view", "second_view"], //первый аргумент - ссылка, которую мы увидим в браузере (условная), второй - имя представления

name: "view2",

view: "sapui5_routers.second_view",

view_type: sap.ui.core.mvc.ViewType.JS,

targetControl: "appId",

clearTarged: true,

callback: function() {

myCallback(this);

}

];

//функция, которая динамически формирует имя представления и переходит на него

myCallback = function($this) {

var viewId = "idmain_" + $this.name; //формируем ИД представления (динамически для удобства)

var app = sap.ui.getCore().byId("appId");

app.to(viewId); // переходим по ссылке

};

var oRouter = new sap.ui.core.routing.Router(viewRouters); //создаем объект

oRouter.register("routerId"); //регистрируем его ИД

oRouter.initialize();

Итак, нам остается только добавить в функцию перехода между страницами соответствующий вызов.

Для перехода на вторую страницу

var oRouter = sap.ui.core.routing.Router.getRouter("routerId"); 
var oHashChanger = new sap.ui.core.routing.HashChanger();
oHashChanger.setHash(oRouter.getURL("view2"));

var oRouter = sap.ui.core.routing.Router.getRouter("routerId");

var oHashChanger = new sap.ui.core.routing.HashChanger();

oHashChanger.setHash(oRouter.getURL("view2"));

Для перехода на первую

var oRouter = sap.ui.core.routing.Router.getRouter("routerId");
var oHashChanger = new sap.ui.core.routing.HashChanger();
oHashChanger.setHash(oRouter.getURL("view1"));

var oRouter = sap.ui.core.routing.Router.getRouter("routerId");

var oHashChanger = new sap.ui.core.routing.HashChanger();

oHashChanger.setHash(oRouter.getURL("view1"));