Ключевое понятие

Маршрутизация и навигация на основе хэштегов позволяют ссылаться на ракурсы приложений посредством URL с добавлением в конце символа хэштега #.

Для приложений SAPUI5 маршрутизация и навигация являются важными темами. Разработчики часто сталкиваются с трудностями при изучении понятия маршрутизации. Теперь SAP рекомендует определять конфигурацию маршрутизации в файле manifest.json. В SAPUI5 предоставляется ряд классов (с соответствующими методами). Несмотря на сложности в освоении, концепция маршрутизации позволяет разработчикам создавать удобные в использовании приложения с простой навигацией в кратчайшие сроки.

Целью данной статьи является описание концепции маршрутизации и способов ее использования в SAPUI5. Вы получит ответы на следующие вопросы:

• Что представляет собой механизм маршрутизации и как его реализовать?
• Каковы преимущества использования маршрутизации?
• Какие наиболее важные классы и методы доступны в SAPUI5 для реализации маршрутизации?

Примечание. 

Термины «хэштег» и «хэш» означают одно и то же.

Начнем с краткого обзора сути маршрутизации и ее преимуществ. Далее рассмотрим классы (и методы), доступные в библиотеке SAPUI5 для реализации маршрутизации в приложениях. Наконец, я представлю вам полностью работоспособное приложение, которое выводит список продуктов на основе Open Data Protocol (OData) из services.odata.org.

Статья предназначена для разработчиков на ABAP и разработчиков SAPUI5. Предполагается, что читатели владеют базовыми навыками программирования в SAPUI5. При создании примера для данной статьи я использовал Web Integrated Development Environment (Web IDE).

Маршрутизация: обзор

SAPUI5 поддерживает маршрутизацию и навигацию на основе хэштегов. При использовании маршрутизации и навигации на основе хэштегов изменение значения хэштега инициирует навигацию из одного ракурса в другой. Другими словами, браузеру не приходится перезагружать все приложение. Обратный вызов релевантного приложения SAPUI5 выполняется в фоновом режиме на основе значения, переданного после символа хэштега (#) в URL.

Приложения SAPUI5 могут использовать маршрутизатор для вызова одного или нескольких ракурсов на основе URL с хэштегом. Маршрутизатор должен уметь интерпретировать URL и выводить ракурсы. Начиная с версии SAPUI5 1.30 компания SAP рекомендует определять маршрутизацию в файле дескриптора (webapp/manifest.json) через маршруты и цели. Базовые шаги для реализации маршрутизации:

• Для приложения на базе SAPUI5 маршрутизацию (все маршруты и цели) следует указывать в файле дескриптора приложения (webapp/manifest.json).
• В качестве точки ввода для всех запросов маршрутизации укажите ракурс-оболочку. Также для активации механизма маршрутизации необходимо инициализировать объект маршрутизатора.
• Определите ракурсы маршрутов и целей на основе текстового шаблона, введенного пользователем после хэштега в URL. Например, если пользователь ввел http:___ #/Productdetail/2, необходимо указать ракурс для вызова и передачи значения 2 с целью просмотра необходимых данных.

Если пользователь щелкает по продукту номер 2 в списке, URL должен автоматически измениться на http:___ #/Productdetail/2.

Важные классы и методы

Теперь вы имеете базовое представление о механизме маршрутизации. Рассмотрим основные классы и методы. Основные классы, участвующие в реализации маршрутизации в приложениях SAPUI5:

• sap.ui.core.routing.Router. Это один из наиболее важных классов. Он содержит несколько методов для создания инстанций и инициализации инстанции маршрутизатора в вашем приложении, навигации по конкретному маршруту и определения цели по сопоставлению с шаблоном. Имя класса sap.ui.core.routing.Router указывается в конфигурации маршрутизатора в manifest.json как routerclass. (Мы рассмотрим это более подробно ниже.) В табл. 1 указаны некоторые важные методы класса sap.ui.core.routing.Router.
• sap.ui.core.routing.Route. Помимо sap.ui.core.routing.Router очень важным классом является sap.ui.core.routing.Route. Некоторые полезные методы, предоставляемые этим классом, указаны в табл. 2.
• sap.ui.core.UIComponent. Класс sap.ui.core.UIComponent также предоставляет ряд методов для маршрутизации и навигации. Некоторые из них представлены в табл. 3.

Табл. 1. Методы класса sap.ui.core.routing.Router

Табл. 2. Методы класса sap.ui,core.routing. Маршрут

Табл. 3. Методы класса sap.ui,core.UIComponent

Полезные методы и функции

getRoute

Этот метод относится к классу sap.ui.core.routing.Router. Он возвращает ссылку на маршрут на основе класса sap.ui.core.routing.Route. Этот метод использует параметр имени релевантного маршрута, например, как показано здесь: myRouter.getRoute(«toProductDetail»).

attachMatched

Метод attachMatched класса sap.ui.core.routing.Route используется для привязки данного маршрута к функции обработчика событий, которая вызывается в случае соответствия события. Он использует в качестве параметр функцию, которую требуется вызвать.

navTo

Относится к классу sap.ui.core.routing.Router. Используется для вызова конкретного маршрута. Первым параметром является имя маршрута, определенное в manifest.json. Другой дополнительный параметр используется для передачи значений в маршрут из значения хэштега, введенного пользователем.

getRouterFor

Этот статистический метод относится к классу sap.ui.core.UIComponent и является одним из наиболее важных методов. Он предоставляет ссылку на инстанцию маршрута из данного контроллера или ракурса. Вот простой пример:

var myRouter = sap.ui.core.UIComponent.getRouterFor(this);.

Здесь он указывает на контроллер или ракурс.

getRouter

Это еще один метод для получения инстанции маршрута. Он относится к классу sap.ui.core.UIComponent и возвращает ссылку на маршрутизатор, созданный UIComponent при указании маршрутов в метаданных маршрута.

initialize

Как ясно из названия, этот метод используется для инициализации маршрутизатора в компоненте. Этот метод относится к классу sap.ui.core.routing.Router.