Навигация между страницами в SAPUI5 приложении

Задача не сложная, но при этом имеет свои тонкости. Эта статья скорее гайд для начинающих или просто шпаргалка.

Начнем по этапам.

Для начала не плохо бы создать 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

Зайдем в manifest.json, проверим что root страница прописана корректно.

В том же 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 прописываем следующую строку

Должно получиться что-то подобное

Далее открываем Component.js и в конце init прописываем строчку this.getRouter().initialize();

Настройка навигации на этом этапе завершена.

Переходим на первую страницу, добавим там поле ввода и кнопку, повесим на нее ивент onPress.

В контроллере возьмем значение инпута и вызовем созданный нами ранее router с передачей параметра.

На второй странице создадим поле вывода и стандартную кнопку назад с ивентом navButtonPress

В контроллере извлечем параметр из router’а и поместим его в поле вывода, так же пропишем логику кнопки «назад»

Все готово, запускаем приложение. Вводим текст в поле ввода

Нажимаем на кнопку. Открывается следующая страница

При нажатии на кнопку назад (сверху слева), мы вернемся на первую страницу.

Если посмотреть на URL, то в конце можно увидеть наш паттерн со входящем параметром.

…&sap-ui-appCacheBuster=..%2F&sap-ui-xx-componentPreload=off#/secondPageHello%20World

Соответственно, если прописать входящий параметр вручную в URL после /secondPage, то откроется вторя страница с этим параметром.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *