Сервис OData и SAP Fiori:

пошаговое руководство по
созданию пользовательского
приложения UI5 с помощью MM
Data
Процесс разработки при создании приложения SAP Fiori (SAPUI5)
состоит из двух частей. В бэкэнде выполняется создание, внедрение и
публикация сервиса Open Data Protocol (OData). Во фронтэнде
выполняется сборка приложения SAPUI5 и его развертывание в системе
SAP Gateway. Далее приложение извлекает из бэкэнда SAP данные в
реальном времени и выводит их на экран.

В статье приводится пример сборки приложения SAP Fiori (с помощью

пользовательского интерфейса SAPUI5/HTML5). В основе этого примера
лежит реальный запрос пользователя. “Комплектовщику заказов на
складе требуется возможность проверять запас и его доступность по всем
складским материалам в реальном времени. Такую проверку необходимо
выполнять немедленно, пока комплектовщик подбирает позиции для
различных поставок. Требуется мобильное решение, чтобы получать
информацию для каждого комплектовщика без использования бумажной
описи груза/запасов.”

Этот запрос является отправной точкой для данной статьи, в которой

дается вся информация, необходимая для создания рабочего
приложения.

Получение доступа к критической во времени информации по управлению

материальными потоками (MM), например, к информации о запасах в

1
 реальном времени, полученных и отпущенных материалах повышает
эффективность управления бизнес-процессами. В статье показано, как
разработать приложение SAP Fiori, извлекающее основные данные MM из
бэкэнд-системы SAP Gateway. Далее эти данные можно просмотреть в
виде списка материалов на экране в приложении SAP Fiori. Пользователь
может осуществлять поиск конкретного материала по его описанию. Такой
мобильный подход открывает новые возможности работы с данными MM.

В моем примере этого процесса основное внимание уделяется простой

для понимания информации MM: данным материала с описанием.

SAP Gateway позволяет создать сервис Open Data Protocol (OData),

который отображает информацию из одной или нескольких систем.
Источниками могут являться системы SAP (например, SAP ERP/SAP
Customer Relationship Management [CRM], SAP ERP Central Component
[ECC]) или сторонние системы.

Приложение SAP Fiori работает на базе стандартных протоколов: OData и

SAPUI5. OData — это протокол открытого стандарта для обмена (запроса
и обновления) данных через сеть по стандартным проколам (HTTP, XML
или Simple Object Access Protocol [SOAP]). Он предоставляет веб-
интерфейс прикладного программирования (API), который полностью
соответствует принципам проектирования Representational State Transfer
(REST). Информацию приложения можно извлечь через JavaScript Object
Notation (JSON) или XML.

В системе SAP Gateway выполняются следующие шаги:

 создание и генерация модели OData;

 внедрение сервиса OData;
 публикация и тестирование сервиса. Далее создается приложение SAP
Fiori, использующее новый сервис SAP Gateway.
На рис. 1 представлен обзор процесса для примера приложения SAP Fiori.

2
Рис. 1. Обзор процесса для примера приложения SAP Fiori
Обратите внимание на то, что на рис. 1 InA означает набор инструментов
инфодоступа для HTML5 (InA). Набор инструментов InA представляет
собой набор шаблонов HTML5 и элементов управления
пользовательского интерфейса (UI), с помощью которых можно
сконфигурировать современный высокоинтерактивный пользовательский
интерфейс, работающий в браузере. Технической предпосылкой для
этого является наличие Eclipse Luna, SAP Gateway, модуля SAP ERP MM
и SAP Fiori.
Для разработки сервиса SAP Gateway выполните вход в бэкэнд-систему
SAP. Выполните транзакцию SEGW (построитель сервисов SAP Gateway),
а затем щелкните по пиктограмме создания проектов , чтобы начать
создание нового проекта. После этого появится всплывающее окно
«Создание проекта», показанное на рис. 2.

3
Рис. 2. Всплывающее окно «Создание проекта»

Присвойте проекту имя и описание. В примере используется имя

z_material_list. Изменить тип проекта или стратегию создания здесь
невозможно. В данном примере используется стандартный подход.

Нажмите кнопку «Локальный объект» или присвойте проект

транспортному пакету. В данном случае я создал локальный объект.
Локальные объекты в другие системы не переносятся. Если в ландшафте
SAP присутствует несколько систем и инстанций SAP, следует выбрать
транспортный пакет для переноса разработок в связанные системы. Но в
данном случае для упрощения мы будем работать локально.

На экране, представленном на рис. 2, пользователь может ввести

подробные данные проекта: имя, описание, подробные атрибуты и
подробные данные записи каталога объектов. Для сохранения в виде
локального объекта нажмите кнопку «Локальный объект». В некоторых
системах можно выбрать выделенный пакет для его сохранения в другом
местоположении, но в данном случае в целях упрощения сохраним объект
локально.

4
После нажатия кнопки «Локальный объект» появится экран, показанный
на рис. 3. Н нем отображается структура созданного проекта
Z_MATERIAL_LIST.

Рис. 3. Структура проекта Z_MATERIAL_LIST

Теперь создадим новый тип сущности. Типами сущностей являются

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

Щелкните правой кнопкой мыши по папке «Типы сущностей», а затем

выберите опцию «Создать». Появится экран, показанный на рис. 4. В
целях упрощения мой пример «Модель Gateway» содержит один новый
тип сущности для материала.

5
Рис. 4. Всплывающее окно «Создание типа сущности»

Во всплывающем окне «Создание типа сущности» присвойте имя типа

сущности («Материал») и имя набора сущностей («Материалы»). В
наборах сущностей сгруппированы инстанции типа сущности с любым
типом инстанции, полученные из определенного типа сущности. Типы
сущностей описывают структуру данных, а наборы сущностей содержат
инстанции данной структуры. В моем примере имя набора сущностей
«Материалы» представляет все данные материалов, извлеченные из
базы данных. В более сложных случаях сущностей может быть несколько.

Убедитесь, что выбрана опция «Создать связанный набор сущностей».

Щелкните по пиктограмме с зеленой галочкой . Откроется папка
«Свойства» для Z_MATERIAL_LIST, см. Рис. 5.

Рис. 5. Папка свойств в пути по меню к проекту Z_MATERIAL_LIST

Разверните структуру под новой сущностью «Материал». Затем дважды
щелкните по папке «Свойства» для сущности «Материал». Появится
экран справа, см. Рис. 6.

Рис. 6. Пустой обзор свойств сущности

Соответствующие свойства/поля добавляются только к сущности
«Материал». Чтобы начать добавление данных свойств/полей
(см. Табл. 1) к типу сущности, щелкните по пиктограмме создания на
6
ленте, показанной на рис. 6. После заполнения всех данных
согласно табл. 1, экран с Рис. 6 должен выглядеть так, как показано
на рис. 7 (рис. 6 со значениями).

Табл. 1. Информация мэппинга

Рис. 7. Заполненные поля свойств «Номер материала», «Описание

материала», «Тип материала», «Группа материала» и «Единица
материала»
В табл. 1 отображаются критерии данных свойств/полей для
отображаемого имени (SAPUI5), имени поля ABAP и максимальной длины
по типу поля. Базовые типы OData определяют, какой тип модели данных
объекта (EDM) разрешен в OData для данного свойства во время
выполнения. Организация OData определяет типы так называемых
простых данных. Каждый член этой организации применяет при обмене
данными обязательные стандарты. Определение приводится по ссылке
http://www.odata.org/documentation/odata-version-2-0/overview/.
Необходимо предоставить информацию мэппинга из свойства SAPUI5 с
внутренними типами и полями данных SAP (Табл. 1). Ключом для этой
сущности является номер материала. Проверьте, что все эти записи
имеют тип Edm.String, который представляет собой обязательный
префикс согласно определению Odata.org.
Отображаемое имя (SAPUI5) — это имя поля для внешнего мира
(например, «Приложение SAPUI5»). Имя поля ABAP используется во

7
время внедрения сервиса OData. Все поля являются строковыми, поэтому
важно соблюдать максимальную длину значений. Максимальная длина
указана в соответствующих таблицах. Для просмотра подробных данных
соответствующих таблиц и характеристик их столбцов используйте
транзакцию SE11 или SE16N.

В рассматриваемом примере используется таблица MARA (номер

материала/код типа/код группы/код единицы) и таблицы MAKT (описание
материала), T134T (описание типа материала), T023T (описание группы
материала) и T006A (описание единицы).

После добавления всех строк свойств из табл. 1 появятся поля,

показанные на рис. 7. В данном случае все значения, полученные из
сервиса OData, изначально относились к строковому типу данных. Таким
образом, укажите имя согласно Табл. 1 и вставьте Edm.String в поле
«Базовый тип EDM». Далее укажите длину для типа данных
(согласно Табл. 1) и, наконец, выполните мэппинг поля данных SAP для
каждой добавленной строки.
Пример

Шаг 1: В столбце «Имя» ключевым полем является «Номер

материала». Оно должно быть помечено галочкой в столбце
«Ключ», как видно на рис. 7.
Шаг 2: В столбце «Базовый тип EDM» введите тип Edm.String и
укажите длину 18 символов.
Шаг 3: Выполните мэппинг нового поля OData с его столбцом в
таблице SAP. Для поля «Номер материала» соответствующим
столбцом таблицы SAP является MATNR. Он должен
отображаться в той же строке в столбце «Имя поля ABAP».

8
Пример

Повторите эти три шага для каждого поля/столбца («Номер

материала», «Описание материала», «Тип материала», «Группа
материала» и «Единица материала»).

Снова убедитесь в том, что все поля относятся к типу Edm.String. Важно
указать в столбце «Макс…» максимальное разрешенное число символов
для каждого поля. На рис. 7 отображаются поля свойств, которые теперь
содержат указанные свойства для полей «Номер материала», «Описание
материала», «Тип материала», «Группа материала» и «Единица
материала».

Щелкните по пиктограмме сохранения (не показана). Обработка модели

SAP Gateway завершена. При редактировании сущности (добавлении
новых полей, переименовании или обновлении типа) требуется повторная
генерация модели.

На экране, появившемся после выбора пиктограммы сохранения (не

показана), щелкните по пиктограмме создания динамических объектов .
Появится всплывающее окно, показанное на рис. 8. Здесь показано
всплывающее окно «Определение модели и сервиса», содержащее
подробные данные класса провайдера модели, класса провайдера
данных и регистрации сервиса.

9
Рис. 8. Всплывающее окно «Определение модели и сервиса»

Оставьте предложенные имена без изменений. При необходимости их все

же можно изменить. Классы ZCL_Z_MATERIAL_LIST_MPC и
ZCL_Z_MATERIAL_LIST_MPC_EXT являются классами провайдера
модели. Классы ZCL_Z_MATERIAL_LIST_DPC и
ZCL_Z_MATERIAL_LIST_DPC_EXT являются классами провайдера
данных. Большая часть работы для внедрения выполняется при
переопределении методов в классе ZCL_Z_MATERIAL_LIST_DPC_EXT
(методы содержатся в созданном классе провайдера данных
ZCL_Z_MATERIAL_LIST_MPC_EXT).

Щелкните по пиктограмме с зеленой галочкой. Появится всплывающее

окно «Создание записи каталога сущностей» (рис. 9). Здесь указаны
атрибуты объекта с возможностью сохранения объекта как локального
или его присвоения пакету. Сохраните объект с помощью кнопки
«Локальный объект».

10
Рис. 9. Сохранение объекта как локального
На рис. 10 показаны отображаемые системные сообщения.

Рис. 10. Отображаемые системные сообщения

Для каждого определенного типа сущности в модели OData создается ряд
стандартных методов сущности. Например, на рис. 11 показаны
стандартные методы сущности для сущности материала.

Рис. 11. Стандартные методы сущности для сущности материала

Теперь реализуем необходимые методы для приложения. Выберите
«Внедрение сервиса ▶ Материалы ▶ Получить набор сущностей

11
(запрос)» и щелкните правой кнопкой мыши по пункту «Получить набор
сущностей (запрос)». В контекстном меню выберите «Перейти к
инструментальным средствам ABAP». Появится всплывающее окно
«Информация», см. Рис. 12.

Рис. 12. Информационное всплывающее окно

Это всплывающее окно уведомляет пользователя о том, что операция
MATERIALS_GET_ENTITYSET еще не реализована. Для каждого типа
сущности модели OData создается несколько методов. Метод GetEntitySet
представляет собой автоматически создаваемый метод запроса для
получения набора материалов. Выберите пиктограмму с зеленой
галочкой (рис. 12). Появится папка «Унаследованные методы»,
см. Рис. 13.

12
Рис. 13. Опция переопределения для MATERIALS_GET_ENTITYSET

Теперь выберите и переопределите унаследованный метод

MATERIALS_GET_ENTITYSET. Для этого щелкните правой кнопкой мыши
по имени метода (MATERIALS_GET_ENTITYSET) и выберите опцию
«Переопределить». Метод MATERIALS_GET_ENTITYSET является
методом запроса для извлечения набора материалов (требуется для
создания списка материалов). После переопределения методы
сохраняются автоматически.

Регистрация сервиса Gateway

13
Следующим шагом является регистрация сервиса Gateway. Вернитесь к
транзакции SEGW. На появившемся экране (рис. 14) выберите папку
«Обслуживание сервиса» и нажмите кнопку «Зарегистрировать».

Рис. 14. Регистрация сервиса

На рис. 15 показано всплывающее предупреждение SAP. Это
предупреждение уведомляет пользователей о том, что они будут
перенаправлены в выбранную систему. Нажмите кнопку «Да» в этом
всплывающем окне для перехода к экрану «Выбор псевдонима системы»
(хаб к бэкэнду), представленному на рис. 16.

Рис. 15. Предупреждение в системе SAP

Рис. 16. Выбор псевдонима системы во всплывающем окне

Выберите псевдоним системы LOCAL (см. Рис. 16), а затем выберите
пиктограмму с зеленой галочкой. Появится экран «Добавление сервиса»,
представленный на рис. 17. Псевдоним системы может быть локальным
или иным псевдонимом в зависимости от параметров установки SAP
Gateway.
14
Рис. 17. Всплывающее окно «Добавление сервиса»

Во всплывающем окне «Добавление сервиса» пользователь может

выбрать опцию «Локальный объект», а также просмотреть подробные
данные сервиса, модели, информацию о создании, подробные данные
узла ICF и активации OAuth. Введите подробные данные сервиса по
вашему проекту и нажмите кнопку «Локальный объект». Для продолжения
и завершения процесса регистрации щелкните по пиктограмме с зеленой
галочкой.

Тестирование сервиса Gateway

15
После успешной регистрации сервиса в поле «Статус регистрации»
отображается зеленый сигнал светофора (рис. 18). Теперь протестируйте
сервис с помощью клиента Gateway. Далее пометьте сервис и нажмите
кнопку «Клиент Gateway» на панели инструментов. Появится
всплывающее окно с предупреждением (рис. 19).

Рис. 18. Нажатие кнопки «Клиент Gateway»

Рис. 19. Всплывающее окно с предупреждением о переадресации

Во всплывающем окне с предупреждением нажмите кнопку «Да».
Появится экран «Клиент SAP NetWeaver Gateway», см. Рис. 20, на котором
отображаются подробные данные текущего URI запроса. Нажмите кнопку
«Выполнить».

Рис. 20. Экран SAP NetWeaver Gateway Client и подробные данные

запроса URI
Экран «Ответ HTTP» содержит пример сгенерированного ответа
HTTP (рис. 21). Ответ поступает в формате Atom/XML.

16
Рис. 21. Сгенерированный ответ HTTP
Измените URI запроса для создания структуры сервиса OData (например,
измените суффикс кода с ?$format=xml на $metadata). Метаданные OData
доступны только в формате XML, но не JSON. На рис. 22 показан полный
URI запроса с требуемым суффиксом $metadata.

Рис. 22. Отредактированный URI запроса с суффиксом $metadata

Нажмите кнопку «Выполнить». Ответ появится в правой части экрана.
На рис. 23 представлен пример сгенерированного ответа HTTP.

17
Рис. 23. Сгенерированный ответ HTTP
Для извлечения материалов измените суффикс URI запроса на Materials.
Нажмите кнопку «Выполнить». На рис. 24 показан новый суффикс
Materials для поля «URI запроса».

Рис. 24. Новый запрос URI с новым суффиксом

На рис. 25 показана часть ответа HTTP, отображаемая в правой части
экрана. Каждая сущность представляет собой материал.

18
Рис. 25. Сгенерированный ответ HTTP
Последний ответ HTTP на рис. 25 представлен в формате XML. Измените
формат ответа на JSON. Это формат открытого стандарта, его проще
считать. Для этого щелкните по пиктограмме добавления заголовка на
экране «Клиент SAP NetWeaver Gateway» (рис. 26).

Рис. 26. Изменение формата ответа с XML на JSON

Появится всплывающее окно «Управление заголовком запроса
HTTP» (рис. 27).

19
Рис. 27. Всплывающее окно «Управление заголовком запроса HTTP»

Теперь разрешите принимать запросы JSON в запросе HTTP, указав

следующие значения:

Имя заголовка: accept

Значение заголовка: application/json

Щелкните по пиктограмме с зеленой галочкой. Новый запрос HTTP

добавлен. На рис. 28 показан пример имени и значения нового заголовка
запроса HTTP.

Рис. 28. Заголовок нового запроса HTTP

Нажмите кнопку «Выполнить». На рис. 29 показан пример раздела ответа,
представленного на экране. Это ответ при извлечении материалов в
формате JSON.

20
Рис. 29. Ответ при извлечении материалов в формате JSON

Сервис OData работает корректно.

Сборка приложения SAPUI5

Для сборки приложения SAPUI5 откройте систему SAP HANA Development

Eclipse. В меню выберите «Файл ▶ Создать ▶ Другое…». Появится мастер
Eclipse (рис. 30).

21
Рис. 30. Разработка приложения SAPUI5: опция «Проект приложения»
Выполните прокрутку вниз на экране мастера до проекта приложения в
папке «Разработка приложения SAPUI5». Выберите папку «Проект
приложения» и нажмите кнопку «Далее». Появится экран «Новый проект
приложения» (рис. 31).

Рис. 31. Всплывающее окно «Новый проект приложения»

22
 На рис. 31 отображаются опции Создание проекта приложения для
библиотеки SAPUI5. Присвойте проекту имя, в данном случае «Список
материалов». По умолчанию выбрана опция sap.m переключателя
«Библиотека пользовательского интерфейса». В настоящее время это
ведущая библиотека для разработки мобильных приложений для SAPUI5.
Для стандартных средств управления можно использовать опцию
«Библиотека sap.ui.commons». В примере для мобильного приложения
выбрана опция sap.m.
Удалите индикатор «Создать начальный ракурс» и нажмите кнопку
«Готово». Библиотека sap.m становится основной библиотекой SAPUI5
(адаптивной библиотекой). Структура проекта «Список материалов»,
показанная на рис. 32, создана в структуре проекта Eclipse.

Рис. 32. Созданная структура проекта «Список материалов»

В этой статье вся необходимая разработка структурирована в папке
WebContent. В зависимости от структуры проекта или группы могут
использоваться несколько папок или иерархия папок.
На рис. 32 отображается пример структуры проекта «Список материалов»
в папке WebContent.

Для предоставления эффективной структуры проекта создайте две новые

папки в папке WebContent:

1. папку view для всех ракурсов и контроллеров;

23
2. папку i18n для всех переводимых текстов, которые будут использоваться
в ракурсах.
Сначала создайте первую папку view. Щелкните правой кнопкой мыши по
папке WebContent и выберите «Создать ▶ Папку». Появится
всплывающее окно «Новая папка» (рис. 33). Присвойте новой папке имя
view. Позднее папка view будет содержать все ракурсы и контроллеры.
Приложение создается на основе парадигмы Model View Controller (MVC).
Нажмите кнопку «Готово». Новая папка view появится в папке WebContent.

Рис. 33. Создание новой папки view

24
В структуре проекта «Список материалов» повторите аналогичный
процесс для новой папки i18n. Папка i18n (краткое название для
интернационализации) содержит текстовые файлы (переводимые).

После создания двух новых папок отображается структура проекта.

На рис. 34 показан путь по меню к новой папке WebContent проекта
«Список материалов» с новой папкой i18n и папкой view.

Рис. 34. Добавление двух новых папок в папке WebContent проекта

«Список материалов»
Теперь, если требуется, можно изменить index.html проекта. Метатег X-
UA-Compatible необходим для использования веб-браузером последнего
режима визуализации. На рис. 35 показан пример контента index.html.

25
Рис. 35. Пример контента index.html
Код скрипта на рис. 36, также показанный на рис. 35, требуется для
начальной загрузки структуры SAPUI5.

Рис. 36. Скрипт

Теперь измените контент index.html на требуемую область имен. Пример
области имен показан на рис. 37.

Рис. 37. Пример области имен

Объекты области имен com.blackvard.materiallist находятся в той же папке,
что и index.html. SAPUI5 использует концепцию компонентов.
На рис. 38 показан пример нового index.html.< /p> после изменения.

26
 Рис. 38. Пример нового index.html

После загрузки всех ресурсов и библиотек, а также после завершения

подготовки SAPUI5 библиотека выдает событие глобальной
инициализации для сообщения о том, что библиотека готова к
использованию. Как было сказано выше, я использую библиотеку sap.m.
В ней содержатся средства управления и элементы для фронтэнда
мобильного устройства для обеспечения соответствия запрошенных
данных материала в примере размерам экранов разных мобильных
устройств.

Используются следующие ресурсы и библиотеки:

 resources/sap-ui-core.js: Это базовый JavaScript для SAPUI5.

 sap.m: Мобильная библиотека.
 Применяется тема sap_bluecrystal.
В примере на рис. 38 ссылка на ядро SAPUI5 была получена путем вызова
sap.ui.getCore(), а функция анонимного внешнего вызова была
зарегистрирована путем вызова calling attachInit(…) в ядре.

27
Также был инициализирован контейнер компонента, который является
оболочкой для приложения. Оболочная была использована для
корректных полей и заполнений. На рис. 39 показан пример index.html.

Рис. 39. Пример index.html

Теперь создайте файл Component.js в той же папке WebContent, в которой

находится index.html. Файл Component.js является контроллером
компонента и содержит динамические метаданные и методы.
Component.js инициализирует модели и маршрутизатор.

Щелкните правой кнопкой мыши по папке WebContent и выберите

«Создать ▶ Файл». Появится всплывающее окно «Новый файл»,
см. Рис. 40. Присвойте файлу имя Component.js и нажмите кнопку
«Готово».

28
Рис. 40. Новое всплывающее окно «Файл»
Файл Component.js добавлен к папке WebContent, как показано на рис. 41.

Рис. 41. Файл Component.js

29
В первой части файла Component.js компонент наследует от базового
класса sap.ui.core.UIComponent. Текст rootView относится к
автоматически загружаемому ракурсу. Создание этого ракурса
рассматривается ниже в данной статье.

На рис. 42 показан пример кода для базового класса

sap.ui.core.UIComponent.

Рис. 42. Конфигурация базового класса sap.ui.core.UIComponent

Маршрутизируемая часть Component.js файла показана на рис. 43.

Рис. 43. Маршрутизация Component.js

В маршрутизируемой части файла Component.js (рис. 43), viewType : XML
означает, что все ракурсы по умолчанию относятся к типу XML. viewPath :
com.blackvard.materiallist.view означает, что все ракурсы созданы в папке
view. Первым отображается ракурс «Материалы». Создание этого ракурса
рассматривается в статье ниже.
На рис. 44 показан пример метода инициализации Component.js.

30
 Рис. 44. Метод инициализации Component sample.js

Метод инициализации суперкласса sap.ui.core.UIComponent вызывается

при инициализации компонента. В методе инициализации установлены
две модели:

1. Модель пакета ресурсов будет иметь имя i18n. Эта модель ищет файлы
i18nproperties в папке i18n.
2. Основная модель для сервиса Gateway OData уже разработана.

Выполняется инициализация маршрутизатора. Теперь создайте файл

i18n. В этом шаге сохраните все использованные тексты для приложения
в центральном местоположении. При необходимости можно быстро
выполнить ведение текста и его перевод на другие языки.

Обработка i18n выполняется с помощью концепции модели ресурсов и

привязки данных в SAPUI5. В структуре проекта создайте новый файл в
папке i18n. Щелкните правой кнопкой мыши по папке i18n и выберите
«Создать ▶ Файл». Появится всплывающее окно «Новый файл» (рис. 45),
в котором можно присвоить файлу имя. Присвойте файлу имя
i18n.properties и нажмите кнопку «Готово».

31
Рис. 45. Новое всплывающее окно «Файл»
Файл i18n.properties содержит идентификаторы и значения текстов
согласно синтаксису <ид. текста >=< значение текста>. Идентификаторы
текста используются позднее в ракурсе «Материалы». Заполните
содержимое файла i18n.properties текстом (см. изображение требуемого
текста i18n.properties на рис. 46).

32
Рис. 46. Ввод требуемого текста i18n.properties
Сохраните файл с помощью пиктограммы сохранения на верхней панели
инструментов Eclipse. Теперь файл должен выглядеть так, как показано
на рис. 47. Слева отображаются подробные данные и папки проекта, а
справа — содержимое файла i18.properties.

Рис. 47. Экран проводника проектов SAP

Теперь создадим ракурсы и контроллеры. Как было сказано выше, все
ракурсы и контроллеры создаются в папке view. Приступим к созданию
первого ракурса. В структуре проекта щелкните правой кнопкой мыши по
папке view и выберите «Создать ▶ Другое…». Снова появится мастер,
показанный на рис. 48. Найдите папку «Разработка приложений SAPUI5»
и откройте ее. Выберите «Ракурс» и нажмите кнопку «Далее».

33
Рис. 48. Путь по меню: Разработка приложений SAPUI5 ▶ Ракурс ▶
Далее
Появится всплывающее окно «Новый ракурс» (рис. 49) с указанием
проекта, папки, имени и типа парадигмы. Присвойте ракурсу имя App
(оно должно совпадать с именем, определенным в Component.js, имя
метаданных — rootView). Выберите тип парадигмы разработки «XML» и
нажмите кнопку «Готово».

34
 Рис. 49. Всплывающее окно «Новый ракурс»
В папке ракурсов будут созданы два файла приложения (рис. 50):
1. App.view.xml: Собственно ракурс.
2. App.controller.js: Контроллер.

Рис. 50. Папка ракурсов с файлами App.controller.js и App.view.xml

Файл App.controller.js не требуется. Удалите этот файл. Для этого
щелкните правой кнопкой мыши по его имени и в контекстном меню
выберите «Удалить». Откроется всплывающее окно (рис. 51), в котором
необходимо подтвердить удаление с помощью кнопки «OK».

Рис. 51. Подтверждение удаления

После возврата к экрану, представленному на рис. 50, дважды щелкните
по файлу App.view.xml. На появившемся экране (не показан) измените
содержимое файла на код, представленный на рис. 52.

Рис. 52. Обязательный код displayBlock="true"

35
 Рис. 53. Код App.view.xml
Идентификатор приложения относится к важным данным и должен
совпадать с targetControl в Component.js. На рис. 53 показан пример кода
App.view.xml.

Сохраните файл с помощью пиктограммы сохранения на панели

инструментов экрана проводника проектов (не показан).

Теперь в папке ракурсов создадим следующий ракурс. Щелкните правой

кнопкой мыши по папке view и выберите «Создать ▶ Другое…». Появится
экран мастера (рис. 48). В разделе «Разработка приложений SAPUI5»
выберите «Ракурс». Нажмите кнопку «Дальше». Присвойте ракурсу имя:
«Материалы». В качестве парадигмы выберите ракурс
XML (рис. 49). Нажмите кнопку «Готово».
В папке view создано два файла Materials (рис. 54).
1. Materials.view.xml: Собственно ракурс.
2. Materials.controller.js: Контроллер.

36
Рис. 54. Добавление файлов Materials.controller.js и Materials.view.xml к
папке ракурсов
Теперь измените контент в ракурсе «Материалы». Дважды щелкните по
Materials.view.xml для просмотра кода в редакторе (рис. 55). Это пример
начального контента для кода Materials.view.xml.

Рис. 55. Код Materials.view.xml

Теперь откорректируйте области имен и отношение с контроллером. Вам

потребуются только библиотеки sap.ui.core и sap.m, остальные области
имен следует удалить. Измените имя контроллера на
com.blackvard.materiallist.view.Materials. Помните, что как и для index.html,

37
все объекты в папке WebContent должны начинаться с области имен
com.blackvard.materialist.

Новое содержимое ракурса «Материалы» показано на рис. 56.

Рис. 56. Содержимое кода Materials

Далее при анализе предварительного просмотра материалов обратите

внимание на то, что требуется два элемента контроля пользовательского
интерфейса: один для представления поля «Поиск» для ввода критериев
поиска, а другой для таблицы с пятью столбцами, которые будут
содержать найденные данные (номер материала, описание материала,
тип материала, группа материалов и единица измерения материала).

Для поля «Поиск» используйте средство контроля sap.m.SearchField. Для

таблицы используйте средство контроля sap.m.Table. Для текстов
используйте пакет ресурсов. Используйте идентификатор текста по схеме
{i18n>TEXT_ID}. Например, {i18n>MATERIAL_NUMBER} обозначает текст
«Номер материала».

Наконец, выполните поиск конкретного материала о его описанию. Для

этого присвойте метод, реагирующий на событие каждый раз при вводе
пользователем какого-либо текста в поле «Поиск». Вызовите метод
onSearch. Этот метод должен быть реализован в контроллере (шаблон
MVC).

Добавьте к средству контроля для поиска замещающий текст и назовите

метод. Метод onSearch будет инициирован при наступлении событий
liveChange. На рис. 57 показан пример кода для поля «Поиск» и таблицы.

38
Рис. 57. Пример кода поля и таблицы поиска
Вручную измените заголовок страницы и добавьте таблицу с пятью
столбцами в XML-коде, см. Рис. 58. Примечание. Для изменения
содержимого любого файла дважды щелкните по его имени, измените
содержимое и выберите пиктограмму сохранения.

Рис. 58. Окончательный код Materials

Редактирование заголовка страницы: У страницы должен быть

следующий заголовок <Page title=»{i18n>HEADER_MATERIAL_LIST}»>. В
данном случае установите в качестве заголовка страницы текстовый
элемент HEADER_MATERIAL_LIST, который уже определен в файле
i18n.properties (в папке i18n).

39
Редактирование таблицы: Присвойте таблице материалов
идентификатор. В данном случае используется идентификатор
materialsTable. Этот идентификатор будет использован позднее в
контроллере Materials. С его помощью пользователь может выбрать не
более одного элемента. Установите для таблицы режим
SingleSelectMaster.

Редактирование заголовков столбцов: Заголовкам столбцов

соответствует тег <columns>. Определите столбцы внутри тега <columns>.
См. текстовые элементы, определенные в файле i18n.properties (в папке
i18n).

Редактирование строк с применением данных: Строкам соответствует тег

<items>. Значения строк поступают из основной модели (модель Own
Gateway). Для каждого столбца определите правильное свойство.
Например, для первого столбца используется значение свойства
MaterialNumber.

Свойство элемента для таблицы определяется как /Materials. Это

значение инициирует отправку структурой SAPUI5 запроса в систему SAP
Gateway на извлечение материалов и их привязку к таблице.

На рис. 58 показан окончательный код ракурса «Материалы».

Ракурс «Материалы» готов. Перейдем к контроллеру Materials.
Контроллер Materials соответствует файлу Materials.controller.js.
На рис. 59 показан пример начального кода контроллера.

40
Рис. 59. Начальный код контроллера
Измените имя контроллера на com.blackvard.materiallist.view.Materials.
На рис. 60 показано изменение кода на
com.blackvard.materiallist.view.Materials.

Рис. 60. Изменение кода на com.blackvard.materiallist.view.Materials

Теперь реализуйте метод onSearch. Метод onSearch инициируется

каждый раз при вводе значения пользователем. Введенное значение
сохраняется в переменной: var sQuery = oEvt.getSource().getValue();.
Объект типа sap.ui.model.Filter создается в поле «Описание материала» и
добавляется к массиву aFilters только при пустом значении.

41
Наконец, обновите привязку таблицы для активации нового фильтра
(aFilters). Это инициирует запрос HTTP в систему SAP на извлечение
материалов с применением установленного фильтра. На рис. 61 показан
пример окончательного кода Materials.controller.js.

Рис. 61. Окончательный код Materials.controller.js

Для сохранения контроллера выберите пиктограмму сохранения на

панели инструментов в проводнике проектов SAP.

Развертывание приложения

Для развертывания приложения щелкните правой кнопкой мыши по имени

проекта «Список материалов» и выберите «Группа ▶ Опубликовать
проект». При публикации проекта устанавливается соединение между
проектом Eclipse и приложением SAP Gateway Business Server Pages. В
меню выберите «Список материалов ▶ Группа ▶ Опубликовать проект…».
Появится экран, представленный на рис. 62.

42
Рис. 62. Всплывающее окно «Публикация проекта»
Выберите репозиторий SAPUI5 ABAP и нажмите кнопку «Далее».
Репозиторий SAPUI5 ABAP подключаемый модуль, который необходимо
загрузить и установить с помощью инструментов установки SAPUI5.
Скачать этот подключаемый модуль можно по ссылке
https://tools.hana.ondemand.com/. Репозиторий SAPUI5 ABAP
используется при развертывании приложений из Eclipse в SAP. В
появившемся окне «Подключение к системе» (рис. 63) выберите опцию
«Обзор…» для поиска системы SAP на панели входа в систему.

43
Рис. 63. Всплывающее окно «Публикация подключения к системе
проектов»
После выбора правильной системы SAP отображается экран,
представленный на рис. 64. После проверки правильности этой
информации нажмите кнопку «Далее».

44
Рис. 64. Всплывающее окно «Совместное использование подключения к
системе проектов»
Появится окно входа в систему (рис. 65). Введите регистрационные
данные (клиент, пользователь и пароль) и нажмите кнопку «Далее».

45
Рис. 65. Всплывающее окно «Публикация данных проекта для входа в
систему»
На открывшемся экране (рис. 66) можно создать новое приложение BSP
или добавить его к существующему приложению BSP. Добавление
приложения к существующему приложению позволяет совместно
использовать фронтэнд-разработку и подключиться к другому
ландшафту. В данном случае простое приложение MM можно подключить
только к демо-системе, либо прикрепить/подключить/совместно
использовать его в другом ландшафте, если у вас есть соответствующие
полномочия.

46
Рис. 66. Ввод подробных данных приложения BSP
Укажите подробные данные приложения BSP (имя, описание и пакет) и
нажмите кнопку «Далее». На появившемся экране (рис. 67) выберите
запрос на перенос (если требуется), а затем нажмите кнопку «Готово».

47
Рис. 67. Выбор всплывающего окна «Запрос на перенос»
Публикация проекта аналогична установлению соединения между Eclipse
и системой SAP. После публикации проекта необходимо отправить
изменения в систему SAP. Стрелка (>) перед папкой
WebContent (рис. 68) обозначает, что изменения доступны в Eclipse и
ожидают отправки в систему SAP.

48
Рис. 68. Контекст index.html

После успешного подключения к системе SAP необходимо перенести в не

изменения. Щелкните правой кнопкой мыши по контекстному компоненту
(«Имя проекта») в папке WebContent. На появившемся экране (не показан)
выберите в меню «Список материалов ▶ Группа ▶ Отправить».

После нажатия кнопки «Отправить» Eclipse выводит список

изменений (рис. 69). Проверьте, что в системе отсутствуют конфликты
изменений, при необходимости устраните все проблемы. Если изменения
внесены корректно, нажмите кнопку «Готово» для переноса изменений в
систему SAP.

49
Рис. 69. Всплывающее окно «Отправка изменений — выбор ресурсов
для отправки изменений»

Тестирование приложения SAPUI5

Для тестирования приложения выполните транзакцию SICF (HTTP

Ведение иерархии сервисов). На открывшемся экране (рис. 70) в качестве
имени сервиса укажите *MATERIALLIST* и щелкните по пиктограмме
выполнения.

50
Рис. 70. Вызов экрана «Ведение сервисов»
Система возвращает список уже доступных сервисов (например,
предварительно определенных стандартных сервисов), см. Рис. 71.

Рис. 71. Возвращенный список сервисов

Для тестирования приложения напрямую из системы SAP щелкните
правой кнопкой мыши по приложению ze_materiallist и в контекстном меню
выберите опцию «Тестировать сервис». Появится экран, показанный
на рис. 72. Здесь показан пример окончательного вывода приложения.

51
Рис. 72. Окончательный вывод приложения
Теперь пользователь может выполнять поиск конкретных продуктов. При
вводе пользователем текста в поле «Поиск материала» отображаются
только продукты с соответствующей строкой. На рис. 73 показаны
результаты поиска строки продуктов.

Рис. 73. Результаты поиска строки продуктов

52