SAPПідручник з UI5 для початківців
Джессіка Блейк
⚡ Розумний підсумок
SAPUI5 є SAPАдаптивний HTML5-фреймворк, що забезпечує роботу корпоративних веб-застосунків на настільних комп'ютерах, мобільних пристроях та планшетах. У цьому посібнику пояснюється архітектура MVC, модель компонентів, бібліотеки та спосіб створення батьківських та дочірніх компонентів всередині. Eclipse.
Що таке SAPUI5?
SAPIU5 це набір бібліотек для створення адаптивних веб-додатків, які працюють на кількох пристроях, таких як настільний комп’ютер, мобільний пристрій і планшет. SAPUI5 працює Концепція MVC для прискорення циклу розробки шляхом створення даних, бізнес-логіки та окремого представлення даних у поданні. Таким чином, розробка представлення та контролера може відбуватися незалежно для створення моделей (контейнерів даних).
SAPUI5 є останнім у серії SAP Технології розробки UI. Щоб забезпечити веб-інтеграцію для основного SAP система ERP, SAP винайшов кілька технологій розробки інтерфейсу користувача, таких як BSP (сторінки бізнес-сервера), PDK (набір для розробки порталу), Web Dynpro Java, Web Dynpro ABAP. А наступником Web Dynpro є ABAP SAPUI5.
SAPIU5 Archiтектура
SAPUI Archiдіаграма текстури
У вищесказаному ArchiУ текстурі перше поле «Пристрої» вказує на пристрої, на яких працюють додатки UI5. До додатків UI5 можна отримати доступ через мобільний додаток або будь-який браузер. Цей рівень називається «Рівень презентації».
SAPПрограми UI5 та сервіси oData знаходяться на SAP Сервер NetWeaver Gateway. Цей рівень архітектури називається «рівнем додатків».
Справжня бізнес-логіка реалізована в SAP основні системи, такі як ECC, CRM та BW. Бізнес-логіку можна реалізувати за допомогою SAP програми та функціональні модулі. SAP транзакції та основні дані знаходяться на SAP системи. Цей рівень називається «рівнем бази даних» або «рівнем стійкості».
SAPКомпонент UI5
Компонент — це фрагмент коду, який можна використовувати повторно. Існує 2 типи компонентів, що надаються SAPUI5:
- Компоненти інтерфейсу користувача – вони представляють собою інтерфейс користувача, що містить елементи інтерфейсу користувача. Вони базуються на SAPКлас UI5 під назвою sap.ui.core.UIComponent
- Безликі компоненти – вони не мають інтерфейсу користувача. Вони базуються на SAPКлас UI5 називається sap.ui.core.Component
По суті, компонент – це папка. Коли ви створюєте новий SAPUI5, ви зможете побачити структуру папок, створену у вашому провіднику проекту, як показано нижче.
У цьому застосунку UI5 PassNum є компонентом. Файл Component.js є обов'язковим для того, щоб застосунок UI5 поводився як компонент.
Далі в цьому SAPIU5 Eclipse навчальний посібник, ми навчимося налаштовувати SAPUI5.
SAPНалаштування UI5
Перш ніж ми почнемо, вам потрібно переконатися, що:
- Eclipse (версія Luna) встановлено на вашому ноутбуці
- SAP Засоби розробки для Eclipse Luna встановлено на вашому Eclipse (SAP Засоби розробки для Eclipse Місяць - https://tools.hana.ondemand.com/luna/)
- SAP Панель входу встановлено, і ви маєте доступ до SAP Система NetWeaver Gateway для розгортання та тестування застосунку, який ми збираємося створити в цьому блозі.
Після повного створення програми вона має виглядати так:
В цьому SAPУ посібнику з UI5 ми створимо 2 компоненти з назвами Батьківський компонент та Дочірній компонент. Спочатку ми створимо Дочірній компонент, а потім використаємо його в Батьківському компоненті.
Почнемо бруднити руки.
Частина 1) Створення дочірньої програми
Наша мета — створити дочірній компонент, який прийматиме числа від 1 до 12 та відображатиме назву місяця. Наприклад, коли він отримає значення 3, він повинен відображати «березень».
Крок 1) Створіть проект інтерфейсу користувача
Перейдіть до Файл->Створити->Інше->SAPРозробка UI5-застосунку->Проект застосунку.
Створіть проект програми для SAPUI5, виконавши інструкції майстра. Див. скріншот нижче.
Введіть назву проєкту та залиште інші вибрані параметри такими, як запропоновано майстром.
На наведеному вище скріншоті показано 2 типи бібліотек у вигляді радіокнопок:
- сап.м
- sap.ui.commons
Коли ви вибираєте sap.m, ви вказуєте майстру створити проект UI5-застосунку, розділ bootstrap якого автоматично включатиме бібліотеку sap.m, призначену для створення адаптивних веб-застосунків.
Далі в цьому SAP У посібнику FIORI ви побачите розділ майстра нижче, де вам потрібно створити початковий вигляд. Початковий вигляд – це вигляд, який буде відображатися першим під час доступу до програми.
Тут потрібно вказати назву подання та вибрати тип подання. SAPUI5 підтримує 4 типи перегляду, як видно на екрані вище. Отже, інтерфейс користувача a SAPДодаток UI5 можна створити за допомогою JavaСкрипт, XML або JSON або HTML, якою б мовою ви не користувалися.
Після завершення роботи майстра буде створено новий проект, який відобразиться у вікні Project Explorer. 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.
Вихід
Натисніть кнопку «Перший», і січень має відобразитися в дочірньому компоненті.
Насолоджуйтесь створенням красивих, адаптивних веб-додатків за допомогою SAPUI5.
