Не удалось открыть приложение так как не удалось загрузить компонент sap ui5

Обновлено: 07.01.2025

Тема о SAP UI5 давно витает в кулуарах у SAP консультантов и разработчиков. На сегодняшнее число мнения об этой технологии разделились на два лагеря: кто-то топит за то, что она не нужна и налегает на старый добрый Z*, ну и какой-нибудь ALV, а кто-то уверен в необходимости идти если не в cloud, то точно в web (при этом не отрицая необходимости старого доброго Z*). Второй лагерь нам интересен как класс, и, как следствие, интересны технологии, которые применяются для реализации проектных задач.

Итак, SAP UI5

Одна их таких технологий - SAP UI5. Я не буду пока выступать в качестве адепта данной технологии, оставив это для соответствующих специалистов. Выступлю в роли закадрового дилетанта.

SAP UI5 - это фреймворк, применяющийся для разработки пользовательских интерфейсов (причем как для мобильных устройств, так и для рабочих станций), в котором активно используется симбиоз технологий HTML5 и JavaScript. По самому фреймворку и указанным технологиям представлено довольно много информации в сети. Что до темы данной заметки, то для начала сошлюсь на официальную документацию на портале вендора

О чем будешь здесь писать, блогер?

В этой заметке пойдет речь о настройке рабочего места консультанта, который собирается работать с SAP UI5. И да, сам SAP нам здесь еще не понадобится.

Под настройкой рабочего места консультанта, в данном конкретном случае, я понимаю установку редактора, который на какое-то время станет основным.

SAP предлагает использование, как минимум двух платформ, с которыми вы можете попытаться подружиться:

Как вы догадываетесь, далее речь пойдет об Eclipse.

Prerequisites

Убедитесь, что на вашей рабочей машине установлены:

В зависимости от имеющейся на вашем лэптопе операционной системы, для JAVA необходимо выполнить ряд обязательных настроек.

Установка

Перейдите на ресурс SAP Development Tools и обратите внимание на раздел SAPUI5

Здесь представлена информация о средах разработки Web IDE и Eclipse. Что до Eclipse, то в нашем распоряжении две его версии под наименованиями Oxygen или Photon. Таблица со сравнительным анализом также представлена на SAP Development Tools. Я выбрал версию Oxygen, для чего скачал соответствующий дистрибутив Eclipse IDE for Java EE Developers

После запуска редактора, выберите в меню Help -> Install New Software.

Установите дополнительные плагины/библиотеки, которые сделают возможной работу с SAPUI5 в среде Eclipse, скопировав URL, указанный на ресурсе SAP Development Tools

Отметьте для установки два компонента

ABAP Development Tools for SAP NetWeaver
UI Development Toolkit for HTML5

После их установки перезапустите Eclipse и проверьте, что теперь стало возможным запилить новый SAP UI5 проект, выбрав в меню File -> New -> Other

В поле Wizards введите ui5 -> Application Project

Первый шаг выполнен.

Установка Web сервера Apache TomCat

Для тестирования SAP UI5 приложений на локальном компьютере консультанта/разработчика необходим установленный web сервер

Для этих целей прекрасно подходит Apache Tomcat.

На время написания данной заметки, актуальной версией веб сервера является версия под номером 9.0.12

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

Результат успешных манипуляций будет выглядеть следующим образом

Настройка web сервера в Eclipse

Выберите в контекстном меню Eclipse File -> New -> Other

В поле Wizards введите Server

Выберите из списка версию вашего веб сервера и нажмите на ссылку Configure runtime environments.

Определите путь до дистрибутива

Готово. Веб сервер для среды разработки Eclipse в операционной системе Windows определен!

О том, как все это использовать, я постараюсь рассказать в последующих заметках. Жму вашу руку.

Sign up for more like this.

Использование Function Import в oData сервисе

Small SAP Talk. VSCode и SAPUI5

ABAP CDS. Коротко о главном (3)

Обзор вариантов добавления ABAP CDS к существующему или новому oData сервису, а также создания нового oData сервиса на основе ABAP CDS

В начале мая я упомянул, что покажу процесс создания простого UI5 приложения в Web-среде разработки, которую предоставляет SAP Hana Cloud Platform (SAP HCP). Что такое UI5 в двух словах: это новая философия создания интерфейсов для приложений SAP, которые одинаково хорошо будут смотреться и на десктопе, и на любом мобильном устройстве, потому что используют HTML5 и Java. То есть мы берем данные из таблиц SAP через OData и строим на их основе привлекательные web-приложения для различных групп пользователей. Да-да, SAP действительно давно отходит от своих «квадратиш-практиш» в сторону sexy интерфейсов. На этом маркетинг заканчиваем, и перейдём непосредственно к делу.

Создаём бесплатный аккаунт на SAP HCP, функций которого будет достаточно для разработки приложений. Для этого переходим по этой ссылке.

После регистрации отобразится панель управления сервисами, предоставляемыми HANA Cloud Platform. Для входа в Web-среду разработки Web IDE откройте меню Subscriptions в левой части экрана.

И проверьте, что в числе ваших подписок есть приложение webide. Если его нет, то добавьте через New Subscriptions.

После того, как среда разработки появилась в списке у всех, щёлкните на webide в колонке applications. Отобразится информация о приложении, нас же больше всего будет интересовать прямая ссылка на Web IDE, которую добавим в закладки браузера. Да, для работы с Web IDE настоятельно рекомендуем использовать Google Chrome.

Мы зашли в Web IDE. Стартовая страница выглядит так, как показано на картинке ниже. Я не буду останавливаться на описании интерфейса, благо есть подробная документация (меню Help -> Documentation). Для создания приложения из уже имеющегося шаблона выберем New Project from Template.

У SAP есть продукт SAP UEM by Knoa, который собирает данные о взаимодействии с интерфейсом SAP-приложений (запуск транзакций, взаимодействие с объектами, пользовательские и системные ошибки), а также служебные данные о SAP такие как время отклика транзакции, приложения и др.
Все эти данные KNOA заботливо хранит в таблицах базы данных MS SQL либо Oracle.
Стандартное средство, которое использует KNOA для визуализации хранимой информации в виде отчётов или дашбордов, — SAP Business Objects.
Сотрудника службы поддержки SAP отчётность, предоставляемая KNOA, устраивает, т.к. даёт полную картину о том, как пользователи используют систему, где делают ошибки и т.п.

Выберем тип приложения SAP Fiori Master Detail Application, затем укажем имя будущего приложения. В этом примере назовём его тривиально KNOA_application.

Service Catalog – в случае ссылки на источник данных (Odata), настроенный в стартовой странице консоли управления SAP HANA Cloud Platform на вкладке Destinations
Workplace – ссылка на файл модели данных (.edmx), размещенный в рабочей области Web IDE
File System — ссылка на файл модели данных (.edmx), размещенный на вашей рабочей станции
Service URL – ссылка на сервис OData в Интернет

Так как у нас заготовлена модель данных, в File System выберите нужный .edmx файл.
На следующем шаге останется только распределить данные из модели по объектам выбранного шаблона приложения.

После нажатия на кнопку Finish на следующем экране откроется окно, отображающее структуру только что созданного нами приложения.

Перед тем, как продолжить работать с ним, предлагаю загрузить тестовые данные (SAP_system.json), которые вы скачали вместе с .edmx файлом вначале. Для этого вызовите контекстное меню папки model и выберите Import – Import File from System

После загрузки файла в контекстном меню файла metadata.xml выберите Edit Mock Data.

Отобразились тестовые данные, которые будет использовать наше приложение. Теперь займемся непосредственно редактированием стандартного приложения, добавив в его представление данные по системам SAP, которые собираются с помощью KNOA. Для этого в контекстном меню файла Detail.view.xml выберем Open With – Layout Editor. Layout Editor на сегодняшний момент запускается только в браузере Google Chrome.

После того, как наш файл Detail.view.xml откроется в редакторе, дополнительно откроем панель Outline, для удобства работы с объектами интерфейса.

Используя Outline, найдем в иерархии объектов второй IconTabFilter и удалим его, т.к. на второй вкладке мы не планируем размещать данные.

Затем выделим объект sap.m.ObjectHeader и в его атрибутах (sap.m.ObjectAttribute) параметру Text вместо значения по умолчанию (i18n…) присвойте значение Responsible: –

Теперь изменим значок вкладки на более подходящий (на наш взгляд). Для этого выделим её в диспетчере объектов (sap.m.IconTabFilter) и заменим свойство Icon, которое сейчас имеет вид sap-icon://hint на sap-icon://inspection.

Откуда взять значения? Из библиотеки значков SAP UI5: просто выберите понравившийся вам значок и укажите его название в значении свойства Icon. Если вам не нравится значок inspection, выберите любой другой.

Теперь изменим стандартную форму, которая отображается в нашей единственной вкладке. Для этого откроем файл Detail.view.xml в редакторе кода.

И изменим её код, чтобы он выглядел вот так:

Теперь последний штрих: чуть изменим оформление в области выбора систем, чтобы статус отображался серым шрифтом чуть выше имени системы. Для этого откроем Master.view.xml с помощью Layout Editor и поменяем значение параметра Intro на

На этом разработка нашего самого простенького приложения завершена. Чтобы посмотреть, как оно будет работать с использованием тестовых данных вызовите контекстное меню файла index.html и выберите пункт Run with Mock data.

Если всё на предыдущих шагах было сделано верно, вы увидите простое приложение, отображающее показатели по системам SAP, их статус, а также контакты ответственных сотрудников.

Переключая размер экрана на панели инструментов в верхней части окна, можно посмотреть, как наше UI5-приложение будет адаптироваться для просмотра на различных устройствах.
Для публикации приложения в HANA Cloud Platform вызовите контекстное меню для папки UI5-приложения и выберите Deploy -> Deploy to SAP HANA Cloud Platform. После этого приложение станет доступно его пользователям.

На этом процесс разработки простого UI5-приложения прошу считать законченным. По сложности оно, конечно, же недалеко ушло от всем известного Hello, World, но более-менее представление о возможности разработки в Web IDE даёт.

Где узнать больше про UI5 и разработку приложений?

26 июня с 10:00 до 18:00 в SAP Labs будет проходить бесплатный семинар по разработке приложений с использованием SAP Mobile Platform. регистрация здесь.

Официальная программа обучения SAP Fiori User Experience от Учебного центра SAP

Облачные вычисления*,
Веб-разработка*,
Блог компании SAP

Создаём бесплатный аккаунт на SAP HCP, функций которого будет достаточно для разработки приложений. Для этого переходим по этой ссылке.

И проверьте, что в числе ваших подписок есть приложение webide. Если его нет, то добавьте через New Subscriptions.

Теперь немного о нашем будущем UI5-приложении. Предыстория:

У SAP есть продукт SAP UEM by Knoa, который собирает данные о взаимодействии с интерфейсом SAP-приложений (запуск транзакций, взаимодействие с объектами, пользовательские и системные ошибки), а также служебные данные о SAP такие как время отклика транзакции, приложения и др.
Все эти данные KNOA заботливо хранит в таблицах базы данных MS SQL либо Oracle.
Стандартное средство, которое использует KNOA для визуализации хранимой информации в виде отчётов или дашбордов, — SAP Business Objects.
Сотрудника службы поддержки SAP отчётность, предоставляемая KNOA, устраивает, т.к. даёт полную картину о том, как пользователи используют систему, где делают ошибки и т.п.

А руководителю Департамента ИТ стандартная отчётность кажется излишней, потому что он хочет видеть лишь отдельные, интересующие его показатели, и хочет, чтобы они отображались нормально на любом устройстве, которое может оказаться в его руках. Такая вот задачка со «звездочкой».

Вот поэтому мы и решили написать для этого небольшое UI5-приложение. Сначала определяемся, какие показатели нам нужны и сообщаем это парням, ответственным за базы данных, чтобы они настроили соответствующим образом OData-источник на БД KNOA. А сами начнём создавать приложение, используя модель данных (.edmx) и тестовые данные.

На следующей странице необходимо указать источник данных для приложения. Здесь всё просто:

Service Catalog – в случае ссылки на источник данных (Odata), настроенный в стартовой странице консоли управления SAP HANA Cloud Platform на вкладке Destinations
Workplace – ссылка на файл модели данных (.edmx), размещенный в рабочей области Web IDE
File System — ссылка на файл модели данных (.edmx), размещенный на вашей рабочей станции
Service URL – ссылка на сервис OData в Интернет

Так как у нас заготовлена модель данных, в File System выберите нужный .edmx файл.

На следующем шаге останется только распределить данные из модели по объектам выбранного шаблона приложения.

После загрузки файла в контекстном меню файла metadata.xml выберите Edit Mock Data.

И изменим её код, чтобы он выглядел вот так:

Для публикации приложения в HANA Cloud Platform вызовите контекстное меню для папки UI5-приложения и выберите Deploy -> Deploy to SAP HANA Cloud Platform. После этого приложение станет доступно его пользователям.

Где узнать больше про UI5 и разработку приложений?

Официальная программа обучения SAP Fiori User Experience от Учебного центра SAP

SAPUI5 поддерживает схему Model View Controller. Мы разделяем данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель (Model), представление (View) и контроллер (Controller) — таким образом, мы можем делать изменения в одном компоненте, не изменяя другой компонент (модификация каждого компонента может осуществляться независимо).

Главная задача MVC — отделении бизнес-логики (модели) от её визуализации (представления).

Модель (Model) предоставляет данные и методы работы с ними: запросы в базу данных, проверка на корректность.
Модель не зависит от представления — не знает как данные визуализировать — и контроллера — не имеет точек взаимодействия с пользователем — просто предоставляя доступ к данным и управлению ими.
Представление (View) отвечает за получение необходимых данных и визуализацию (отображение на экране пользователю) данных модели, реагируя на изменения модели.
Контроллер (Controller) отвечает за обработку действий пользователя, оповещая модель о необходимости изменений.

Пользователь использует контроллер, который управляет моделью, которая обновляет представление, которое визуализирует данные для пользователя. Круг замкнулся :).

Хватит теории, перейдем к делу!

Вспомним нашу первую программу.
В ней мы все части уместили в одном файле.
Давайте разделим и реализуем архитектурный паттерн MVC (Model, View, Controller) в SapUI5!

Создадим 3 файла:

index.html:

<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta charset = "UTF-8" />
<title> sap.hello </title>

/controller/main.controller.js:

sap.ui.define([
"sap/ui/core/mvc/Controller" ,
"sap/ui/Device" ,
"sap/hello/lib/MessageManager"
], function (Controller, Device, MessageManager) "use strict" ;

return Controller.extend( "sap.hello.controller.main" , onInit: function () this.getView().addStyleClass(
Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact" );
>,

onPressBtn: function () MessageManager.reportSuccess( "привет sap!" , "приветствие" );
>,

onPressBtn_2: function () sap.ui.require([ "sap/hello/lib/MessageManager" ], function(MessageManager_2) MessageManager_2.reportSuccess( "привет мир" , "заголовок" );
>);
>
>);
>);

/view/main.view.xml:

<mvc:view controllerName = "sap.hello.controller.main" xmlns:html = "http://www.w3.org/1999/xhtml" displayBlock = "true" xmlns = "sap.m" xmlns:mvc = "sap.ui.core.mvc" >

Так же создадим папку lib и в ней два файла, о назначении которых мы поговорим позже:

/lib/Formatter.js:

/lib/MessageManager.js:

sap.ui.define ([ "sap/m/MessageBox" , "sap/hello/lib/Formatter" ], function ( MessageBox , Formatter ) return reportSuccess: function ( sMsg , sTitle ) MessageBox.show(Formatter.capitalizeFirstLetter( sMsg ), title: Formatter.capitalizeFirstLetter( sTitle )
>);
>
>;
>);

Попробуем запустить:

Разберем пример более подробно!

В index.html загружаем sapui5.
Видим новую опцию при загрузки sapui5:
data-sap-ui-resourceroots = ''
Этой записью мы сообщаем ядру SapUI5, что ресурсы в пространстве имен «sap.hello» находятся в той же папке, что и index.html.

Что такое "пространство имен в SapUI5"?

Пространство имен в SapUI5 — это своеобразный ярлык (ссылка) на папку.

Например, если мы напишем:
data-sap-ui-resourceroots = ''
мы обозначим, что ресурсы в пространстве имен sap.test2 находятся в корневой папке work.

Там же появляется новая конструкция:
<script>
var oView = sap.ui.view( id: "idMain" ,
viewName: "sap.hello.view.main" ,
type: sap.ui.core.mvc.ViewType.XML
>);

oView.placeAt( "content" );
</script>

Мы сообщаем SapUI5, что наше представление (View) имеет название sap.hello.view.main (sap.hello — пространство имен, которое ссылается на корень. view.main — папка view, файл main.view).

Тип представления — sap.ui.core.mvc.ViewType.XML. То есть SapUI5 будет искать файл view/main.view.xml.
В SapUI5 можно задавать представления не только в виде JavaScript (как мы познакомились в первом уроке), но и в XML, JSON, HTML.

Перейдем к представлению view/main.view.xml.

<mvc:view controllerName = "sap.hello.controller.main" xmlns:html = "http://www.w3.org/1999/xhtml" displayBlock = "true" xmlns = "sap.m" xmlns:mvc = "sap.ui.core.mvc" >

Мы говорим, что у данного представления будет контроллер sap.hello.controller.main (который в пространстве имен sap.hello и находиться в папке /controller/main.controller.js).
xmlns="sap.m" означает, что элементы, которые мы используем в представлении, а в данном примере button и label, мы будем брать из библиотеки sap.m.

И вводим "ссылку на библиотеку" mvc="sap.ui.core.mvc".
Говоря другими словами, исходная запись должна выглядеть следующим образом:
<sap.ui.core.mvc.view controllerName = "sap.hello.controller.main" …
но мы решили сократить запись и ввели "ссылку mvc": mvc="sap.ui.core.mvc":
<mvc:view controllerName = "sap.hello.controller.main" …

И два Button с иконками и событиями press (нажатие на кнопку).

Оба элемента мы брали из библиотеки sap.m (помните атрибут xmlns="sap.m").

Если есть необходимость обратиться к элементам из другой библиотеки. Например, к table из библиотеки sap.ui.table, то либо делаем xmlns:t="sap.ui.table" и в представлении обращаемся как t:Table, либо обращаемся к полному имени sap.ui.table.Table.

Перейдем к контроллеру controller/main.controller.js.

sap.ui.define([
"sap/ui/core/mvc/Controller" ,
"sap/ui/Device" ,
"sap/hello/lib/MessageManager"
], function (Controller, Device, MessageManager) "use strict" ;

При помощи sap.ui.define (jQuery.sap.declare — синхронная загрузка) мы определяем сам контроллер. Cообщаем ему, какие модули мы планируем асинхронно загрузить и использовать:

sap/ui/core/mvc/Controller -> Controller
sap/ui/Device -> Device
sap/hello/lib/MessageManager -> MessageManager (самописный модуль, файл lib/MessageManager.js в пространстве имен sap/hello)

Функция обратного вызова (Callback):
function (Controller, Device, MessageManager)
сработает сразу после успешной загрузки перечисленных модулей.

Объявили три функции:
onInit: function () this.getView().addStyleClass(
Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact" );
>,

onPressBtn: function () MessageManager.reportSuccess( "привет sap!" , "приветствие" );
>,

onPressBtn_2: function () sap.ui.require([ "sap/hello/lib/MessageManager" ], function(MessageManager_2) MessageManager_2.reportSuccess( "привет мир" , "заголовок" );
>);
>

onInit — содержимое отработает при инициализации.
onPressBtn — нажатие на первую кнопку.
onPressBtn_2 — нажатие на вторую кнопку, в котором вызываем sap.ui.require (подгружаем модуль lib/MessageManager.js пространства имен sap/hello)

Кнопки с событиями onPressBtn и onPressBtn_2 делают одно и то же: Вызывают метод reportSuccess, который описан в sap/hello/lib/MessageManager.
Только для onPressBtn мы описали модуль MessageManager глобально. В onPressBtn_2 описали модуль локально, внутри события.

Посмотрим что делает lib/MessageManager.js.

sap.ui.define ([ "sap/m/MessageBox" , "sap/hello/lib/Formatter" ], function ( MessageBox , Formatter )

Определяем модуль и асинхронно загружаем стандартную sap/m/MessageBox и еще один самописный модуль sap/hello/lib/Formatter.

После загрузки содержимое функции
function ( MessageBox , Formatter ) <
отработает.

Читайте также: