Задача не сложная, но при этом имеет свои тонкости. Эта статья скорее гайд для начинающих или просто шпаргалка.
Начнем по этапам.
Для начала не плохо бы создать SAPUI5 приложение. Для этого я использую SAP Web IDE. Нажимаем File->New->Project from Template
Выбираем SAPUI5 Application и нажимаем Next.
Вводим имя проекта.
Далее вводим название первой страницы, назовем ее RootPage.
После нажатия кнопки Finish, приложение будет создано. В дереве проекта можно увидеть стандартный набор папок MVC фреймворка, controller, view, model, i18n и т.д.
После того, как приложение создано, добавим еще пару страниц, что бы было куда настраивать навигацию. Для этого необходимо нажать правой кнопкой мыши по папке webapp, затем New->SAPUI5 View. Вводим имя view, я назвал его FirstPage, затем Next и Finish. Повторяем эти действия и создаем view SecondPage.
Теперь структура моего проекта выглядит так.
Как видно на скрине, в месте с view создались и контроллеры. 2 новых страницы мы создали потому что, страница RootPage у нас ни где не будет отображаться, она нужна для навигации. Продолжим.
Открываем нашу корневую страницу при помощи code editor. У тега app необходимо добавить параметр id. Изначально его там нет. Я назвал его RootId
|
1 2 3 4 5 6 7 8 9 10 |
<mvc:View controllerName="NavigationExample.controller.RootPage" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"> <App id = "RootId" > <pages> <Page title="{i18n>title}"> <content></content> </Page> </pages> </App> </mvc:View> |
Зайдем в manifest.json, проверим что root страница прописана корректно.
|
1 2 3 4 5 6 |
"sap.ui5": { "rootView": { "viewName": "NavigationExample.view.RootPage", "type": "XML" }, ... |
В том же manifest.json переходим в Descriptor editor, открываем вкладку Routing. Первым делом настраиваем Default configuration.
Тут нужно прописать View Patch = <имя проекта>.<папка со страницами>. Папка со страницами , это та папка, где у нас находится root view. У меня получается NavigationExample.view . Далее еще несколько параметров — View level = 1, Control Aggregation = pages, Control ID = RootId (тот, что мы прописывали ранее).
В этой же вкладке переходим к блоку Manage Targets. Нажимаем плюсик (+), вводим имя target. Я назвал его TargetFirstPage.
Справа будут его параметры, необходимо заполнить View Name и View Level. Для моей первой страницы параметры будут следующие: View Name = FirstPage, View Level = 1.
Аналогично создаем target для второй страницы, только View Level будет равен 2
Далее переходим к блоку Routers
Нажимаем плюс (+). Вводим имя (Name), может быть любым, затем по этому имени в контроллере будет вызваться router для перехода на страницу. Для первой страницы назову его RouteFirstPage. Далее идет поле Pattern, данный параметр будет отображаться в URL строке, тут же настраивается передача параметров между страницами с помощью фигурных скобок. Для первой страницы pattern прописывать не нужно.
Затем идет поле Tatgets. Тут задается созданный Target (нажимаем на +), для первой страницы у меня он называется TargetFirstPage.
Зачем все это нужно и как это работает? А работает это по следующей цепочке, в js контроллере вызывается созданный нами router, он в свою очередь вызывает traget. Target смотрит свои настройки и переходит на страницу в соответствии с ними. Получается такой своеобразный мапинг.
Добавляем Router для второй страницы. Name = RouteSecondPage, pattern = secondPage{value} (буду передавать значение на вторую страницу), target = TargetSecondPage.
Открываем manifest.json через code editor и в routing -> config прописываем следующую строку
|
1 |
"routerClass": "sap.m.routing.Router" |
Должно получиться что-то подобное
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
"routing": { "config": { "viewPath": "NavigationExample.view", "viewLevel": 1, "controlAggregation": "pages", "controlId": "RootId", "routerClass": "sap.m.routing.Router" }, "targets": { "TargetFirstPage": { "viewType": "XML", "transition": "slide", "clearAggregation": true, "viewName": "FirstPage", "viewLevel": 1 }, "TargetSecondPage": { "viewType": "XML", "transition": "slide", "clearAggregation": true, "viewName": "SecondPage", "viewLevel": 2 } }, "routes": [{ "name": "RouteFirstPage", "pattern": "", "titleTarget": "", "greedy": false, "target": ["TargetFirstPage"] }, { "name": "RouteSecondPage", "pattern": "secondPage{value}", "titleTarget": "", "greedy": false, "target": ["TargetSecondPage"] }] } |
Далее открываем Component.js и в конце init прописываем строчку this.getRouter().initialize();
|
1 2 3 4 5 6 7 8 |
init: function() { // call the base component's init function UIComponent.prototype.init.apply(this, arguments); // set the device model this.setModel(models.createDeviceModel(), "device"); this.getRouter().initialize(); } |
Настройка навигации на этом этапе завершена.
Переходим на первую страницу, добавим там поле ввода и кнопку, повесим на нее ивент onPress.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="NavigationExample.controller.FirstPage" xmlns:html="http://www.w3.org/1999/xhtml"> <App> <pages> <Page title="Первая страница"> <content> <Input width="100%" id="inputID"/> <Button text="На следующую страницу" width="200px" id="__button0" press="onClick"/> </content> </Page> </pages> </App> </mvc:View> |
В контроллере возьмем значение инпута и вызовем созданный нами ранее router с передачей параметра.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller) { "use strict"; return Controller.extend("NavigationExample.controller.FirstPage", { onClick: function(oEvent) { var value = this.getView().byId("inputID").getValue(); var oRouter = sap.ui.core.UIComponent.getRouterFor(this); oRouter.navTo("RouteSecondPage", { value: value }); } }); }); |
На второй странице создадим поле вывода и стандартную кнопку назад с ивентом navButtonPress
|
1 2 3 4 5 6 7 8 9 10 11 |
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="NavigationExample.controller.SecondPage" xmlns:html="http://www.w3.org/1999/xhtml"> <App> <pages> <Page title="Вторая страница" showNavButton="true" navButtonPress="back"> <content> <Input width="100%" id="outID" editable="false"/> </content> </Page> </pages> </App> </mvc:View> |
В контроллере извлечем параметр из router’а и поместим его в поле вывода, так же пропишем логику кнопки «назад»
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) { "use strict"; return Controller.extend("NavigationExample.controller.SecondPage", { onInit: function() { var oRouter = sap.ui.core.UIComponent.getRouterFor(this); oRouter.getRoute("RouteSecondPage").attachMatched(this._onRouteFound, this); }, _onRouteFound: function(oEvt) { var oArgument = oEvt.getParameter("arguments"); this.getView().byId("outID").setValue(oArgument.value); }, back: function(oEvent) { var oRouter = sap.ui.core.UIComponent.getRouterFor(this); oRouter.navTo("", true); } }); }); |
Все готово, запускаем приложение. Вводим текст в поле ввода
Нажимаем на кнопку. Открывается следующая страница
При нажатии на кнопку назад (сверху слева), мы вернемся на первую страницу.
Если посмотреть на URL, то в конце можно увидеть наш паттерн со входящем параметром.
…&sap-ui-appCacheBuster=..%2F&sap-ui-xx-componentPreload=off#/secondPageHello%20World
Соответственно, если прописать входящий параметр вручную в URL после /secondPage, то откроется вторя страница с этим параметром.