SAPУчебник UI5 для начинающих
Джессика Блейк
⚡ Умное резюме
SAPUI5 — это SAPАдаптивный HTML5-фреймворк, используемый в корпоративных веб-приложениях на настольных компьютерах, мобильных устройствах и планшетах. В этом пошаговом руководстве объясняется архитектура MVC, компонентная модель, библиотеки и как создавать родительские и дочерние компоненты внутри Eclipse.
Что такое SAPUI5?
SAPUI5 — это набор библиотек для создания адаптивных веб-приложений, которые работают на нескольких устройствах, таких как настольные, мобильные и планшеты. SAPUI5 работает Концепция MVC ускорить цикл разработки за счет создания данных, бизнес-логики и представления данных отдельно в представлении. Таким образом, разработка представления и контроллера может происходить независимо для создания моделей (контейнеров данных).
SAPUI5 — последняя версия в серии SAP Технологии разработки пользовательского интерфейса. Чтобы обеспечить веб-интеграцию базового SAP ERP-система, SAP разработал несколько технологий разработки пользовательского интерфейса, таких как BSP (страницы бизнес-сервера), PDK (комплект разработки портала), Web Dynpro. Java, Веб-Динпро ABAP. И преемником Web Dynpro ABAP является SAPпользовательский интерфейс5.
SAPUI5 Archiтекстура
SAPUI ArchiДиаграмма тектуры
В выше ArchiВ первой части раздела «Устройства» указаны устройства, на которых работают приложения UI5. Доступ к приложениям UI5 можно получить через мобильное приложение или любой браузер. Этот слой называется «слой представления».
SAPПриложения UI5 и сервисы oData размещаются на SAP Сервер NetWeaver Gateway. Этот уровень архитектуры называется «прикладным уровнем».
Реальная бизнес-логика реализована в SAP основные системы, такие как ECC, CRM и BW. Бизнес-логика может быть реализована с использованием SAP программы и функциональные модули. SAP транзакционные и основные данные хранятся на SAP системы. Этот слой называется «слоем базы данных» или «слоем хранения данных».
SAPКомпонент UI5
Компонент — это фрагмент многократно используемого кода. Существует 2 типа компонентов, предоставляемых... SAPИнтерфейс 5:
- Компоненты пользовательского интерфейса — это элементы пользовательского интерфейса, представляющие собой структуру интерфейса. Они основаны на... SAPКласс UI5 называется sap.ui.core.UIComponent
- Компоненты без внешнего интерфейса — у них нет пользовательского интерфейса. Они основаны на SAPКласс UI5 называется sap.ui.core.Component
По сути, компонент — это папка. Когда вы создаете новый SAPUI5, вы сможете увидеть структуру папок, созданную в проводнике вашего проекта, как показано ниже.
В этом UI5-приложении PassNum является компонентом. Для того чтобы UI5-приложение функционировало как компонент, необходим файл Component.js.
Далее в этом SAPUI5 Eclipse учебник, мы научимся настраивать SAPпользовательский интерфейс5.
SAPНастройка UI5
Прежде чем начать, вам необходимо убедиться в следующем:
- Eclipse (версия Luna) установлена на вашем ноутбуке
- SAP Инструменты разработки для Eclipse Luna установлены на вашем Eclipse (SAP Инструменты разработки для Eclipse Луна - https://tools.hana.ondemand.com/luna/)
- SAP Панель входа в систему установлена, и у вас есть доступ. SAP Система NetWeaver Gateway для развертывания и тестирования приложения, которое мы собираемся разработать в этом блоге.
После полной сборки приложения оно должно выглядеть так:
В этом SAPВ этом руководстве по UI5 мы создадим два компонента: родительский и дочерний. Сначала мы создадим дочерний компонент, а затем используем его в родительском компоненте.
Начнем пачкать руки.
Часть 1) Создание дочернего приложения
Наша цель — создать дочерний компонент, который будет принимать число от 1 до 12 и отображать название месяца. Например, при получении числа 3 он должен отображать «Март».
Шаг 1) Создайте проект пользовательского интерфейса
Перейдите в Файл->Создать->Другое->.SAPРазработка приложений UI5 -> Проект приложения.
Создайте проект приложения для SAPUI5 создается с помощью мастера настройки. См. скриншот ниже.
Введите название проекта, а остальные параметры оставьте такими, какими их предложил мастер настройки.
На скриншоте выше в виде переключателей отображаются 2 типа библиотек:
- сап.м
- sap.ui.commons
Выбирая sap.m, вы указываете мастеру создать проект приложения UI5, в раздел Bootstrap которого автоматически будет включена библиотека sap.m, предназначенная для создания адаптивных веб-приложений.
Далее в этом SAP В этом руководстве по FIORI вы увидите раздел мастера, где необходимо создать начальное представление. Начальное представление — это представление, которое будет отображаться первым при обращении к приложению.
Здесь необходимо указать название представления и выбрать его тип. SAPUI5 поддерживает 4 типа просмотра, как показано на экране выше. Таким образом, пользовательский интерфейс SAPПриложение UI5 может быть создано с использованием JavaСкрипт или XML или JSON или HTML, в зависимости от того, какой язык вам удобнее использовать.
По завершении работы мастера будет создан новый проект, который отобразится в окне «Проводник проектов». Eclipse как показано ниже.
Шаг 2) Код Component.js
Далее создадим файл Component.js и напишем в нём следующий код.
sap.ui.core.UIComponent.extend("DisplayMonth.Component", { metadata: { "name": "DisplayMonth", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; var oView = sap.ui.view({ viewName: "DisplayMonth.displaymonth.DisplayMonthView", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(oView); }, init: function() { // call super init (will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // always use absolute paths relative to our own component // (relative paths will fail if running in the Fiori Launchpad) var sRootPath = jQuery.sap.getModulePath("DisplayMonth"); }, });
Шаг 3) Код Index.html
Далее, давайте укажем файлу index.html загружать Component.js при каждом обращении к приложению. Напишите следующий код в файле index.html.
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{"DisplayMonth": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "DisplayMonth" }) }).placeAt("content"); }); </script> </head> // start of body of SAPUI5 application. It contains a div element. <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
Шаг 4) Код DisplayMonthView.view.xml
Далее напишем код в нашем представлении displaymonth, чтобы отобразить месяц, номер которого получен от родительского компонента.
<html:style> #__xmlview1--id{ margin-left: 30rem; margin-top: 9rem; font-size: 6rem; font-style: italic; background-color: burlywood; } </html:style> <App id="fioricontent"> <Page title="Child Component"> <content> <Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text> </content> </Page> </App>
После вставки приведенного выше кода ваш интерфейс должен выглядеть следующим образом.
Шаг 5) Код DisplayMonthView.controller.js
И наконец, давайте напишем код файла контроллера DisplayMonthView.
Код написан только в методе-хуке onInit(), поэтому здесь приводится только он. Остальная часть файла сгенерирована фреймворком.
onInit : function() { sap.ui.getCore().getEventBus().subscribe("exchange", "data", function(channel, event, oEventData) { jsonModel = new sap.ui.model.json.JSONModel({ monthumber : oEventData, monthname : '' }); // derive month name from month number switch (jsonModel.oData.monthumber) { case "1": jsonModel.oData.monthname = 'January'; break; case "2": jsonModel.oData.monthname = 'February'; break; case "3": jsonModel.oData.monthname = 'March'; break; case "4": jsonModel.oData.monthname = 'April'; break; case "5": jsonModel.oData.monthname = 'May'; break; case "6": jsonModel.oData.monthname = 'June'; break; case "7": jsonModel.oData.monthname = 'July'; break; case "8": jsonModel.oData.monthname = 'August'; break; case "9": jsonModel.oData.monthname = 'September'; break; case "10": jsonModel.oData.monthname = 'October'; break; case "11": jsonModel.oData.monthname = 'November'; break; case "12": jsonModel.oData.monthname = 'December'; break; } this.getView().setModel(jsonModel, "myModel"); }, this); },
Шаг 6) Развертывание приложения на SAP Сервер шлюза NetWeaver
Разверните проект и присвойте ему техническое имя, указав, что BSP-приложение сгенерировано на ABAP-сервере. Пусть имя будет следующим: zdisplaymonthВаш проект должен выглядеть следующим образом.
ЧАСТЬ 2) Создание родительского компонента
Теперь пришло время создать новый компонент (родительский компонент), который будет использовать компонент, созданный нами ранее в этом уроке.
Шаг 1) Создайте новый SAPПриложение UI5
Перейдите в Файл->Создать->Другое->.SAPРазработка приложений UI5 -> Проект приложения. Затем следуйте инструкциям мастера для создания нового проекта. SAPПроект приложения UI5. Это было подробно описано в шаге 1 части 1 данного руководства выше.
Название родительского проекта компонента: ПарольТехническое имя приложения BSP, сгенерированное после развертывания, — это... zpassnumСтруктура проекта будет выглядеть следующим образом.
Теперь давайте напишем код в файлах index.html, Component.js, PassNum.view.xml и PassNum.controller.js.
Шаг 2) Источник Code из файла Index.html родительского компонента
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-resourceroots='{"PassNum": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "PassNum" }) }).placeAt("content"); }); </script> </head> // start of Body of SAPUI5 application, Contains a div tag, <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
Шаг 3) Исходный код файла Component.js родительского компонента.
sap.ui.core.UIComponent.extend("PassNum.Component", { metadata: { "name": "PassNum", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; // Creating Reference of a PassNum XML view var myView = sap.ui.view({ viewName: "PassNum.passnum.PassNum", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(myView); }, init: function() { // call super init (this will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // ensure to use absolute paths relative to own component // (running in the Fiori Launchpad, relative paths will fail) var sRootPath = jQuery.sap.getModulePath("PassNum"); }, });
Шаг 4) Исходный код файла PassNum.view.xml
<Page title="Parent Component"> <content> <VBox xmlns="sap.m" id="vboxid"> <items> <Button xmlns="sap.m" id="1" text="First" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="2" text="Second" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="3" text="Third" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <core:ComponentContainer id="conpcontid" name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer> </items> </VBox> </content> </Page>
После того, как вы используете приведенный выше код в своем представлении, оно должно выглядеть следующим образом.
Шаг 5) Исходный код PassNum.controller.js
Изменен только метод onInit(). Все остальное в этом файле осталось без изменений.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Шаг 6) Развертывание родительского компонента в SAP Сервер шлюза NetWeaver
Разверните приложение на ABAP-сервере и запустите его. Вы сможете запустить его, щелкнув правой кнопкой мыши по проекту и выбрав опцию «Запустить на ABAP-сервере».
Ниже URL откроется в Eclipse браузер.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Скопируйте URL и запустите его в реальном браузере. В приведенном выше имени хоста (выделено желтым) указано имя хоста вашего ABAP-сервера.
Результат
Нажмите на кнопку «Первое», и в дочернем компоненте должно отобразиться «Январь».
Наслаждайтесь созданием красивых, адаптивных веб-приложений с помощью SAPпользовательский интерфейс5.
