Создаём простое UI5-приложение в Web-среде разработки

    image

    Привет Хабр!

    В начале мая я упомянул, что покажу процесс создания простого 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 в левой части экрана.

    image

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

    image

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

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

    image

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

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

    image

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

    image

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

    image

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

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

    image

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

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

    image

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

    image

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

    image

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

    image

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

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

    image

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

    image

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

    image

    И изменим её код, чтобы он выглядел вот так:
    <IconTabFilter icon="sap-icon://inspection" id="iconTabFilter1" key="selfInfo">
    <content>
    		<f:SimpleForm maxContainerCols="2" minWidth="1024" editable="false">
    			<f:content>
    			<core:Title text="Данные о системе"/>
    			<Label text="Всего пользователей в системе"/>
    			<Text text="{Total_users}"/>
    			<Label text="Активные пользователи"/>
    			<Text text="{Active_users}"/>
    			<Label text="Системных ошибок"/>
    			<Text text="{System_errors}"/>
    			<Label text="Ошибок пользователей" required="false"/>
    			<Text text="{User_errors}"/>
    			<Label text="ТОП ошибок"/>
    			<Text text="{Top_Error_tr}"/>
    			<Label text="ТОП транзакция"/>
    			<Text text="{Top_used_tr}"/>
    			<Label text="ТОП пользователь"/>
    			<Text text="{Top_prod_user}"/>
    			<Label text="Время отклика"/>
    			<Text text="{Response_time} мс"/>
    			<core:ExtensionPoint name="extIconTabFilterForm1"/>
    			</f:content>
    		</f:SimpleForm>
    


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

    image

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

    image

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

    image

    Переключая размер экрана на панели инструментов в верхней части окна, можно посмотреть, как наше 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

    На сладкое полезные бесплатные ресурсы по разработке UI5-приложений:
    • +7
    • 19,4k
    • 2
    SAP 50,19
    Лидер рынка корпоративных приложений
    Поделиться публикацией
    Комментарии 2
    • 0
      Пробовали стандартный odata-интерфейс от 1с прикрутить? v8.1c.ru/o7/201312rest/index.htm
      • 0
        Добрый день! С 1С ещё не пробовали, экспериментировали с нашими и партнерскими софтами: работало.

        Если поделитесь ссылкой на OData сервис 1С, к которому можно подключиться, почему бы и нет?

        Хорошая инструкция по настройке OData сервисов находится на SCN. Ссылка

        Например, так выглядит в WebIDE модель данных партнерского софта для проведения опросов и интервью Questionmark, к которому мы подключились через OData Connector.

        image

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

      Самое читаемое