SAPUI5 Урок за начинаещи
Джесика Блейк
⚡ Умно обобщение
SAPUI5 е SAPадаптивната HTML5 рамка, която захранва корпоративни уеб приложения на настолни компютри, мобилни устройства и таблети. Това ръководство обяснява MVC архитектурата, компонентния модел, библиотеките и как да се изградят родителски и дъщерни компоненти вътре. Eclipse.
Какво е SAPUI5?
SAPUI5 е набор от библиотеки за изграждане на адаптивни уеб приложения, които работят на множество устройства като настолен компютър, мобилно устройство и таблет. SAPUI5 работи MVC концепция за ускоряване на цикъла на разработка чрез създаване на данни, бизнес логика и представяне на данни отделно в изгледа. Така че разработването на изглед и контролер може да се осъществи независимо за създаване на модели (контейнери за данни).
SAPUI5 е най-новият от поредицата SAP Технологии за разработка на UI. За да се осигури уеб интеграция за основния SAP ERP система, SAP излезе с множество технологии за разработка на UI като BSP (страници на бизнес сървър), PDK (комплект за разработка на портал), Web Dynpro Java, Web Dynpro ABAP. И наследникът на Web Dynpro ABAP е SAPUI5.
SAPUI5 Archiтекстура
SAPUI Archiтектурна диаграма
В горното ArchiВ текстурата първото поле „Устройства“ показва устройствата, на които работят UI5 приложенията. UI5 приложенията могат да бъдат достъпни чрез мобилно приложение или всеки браузър. Този слой се нарича „Представителен слой“.
SAPUI5 приложенията и oData услугите се намират на SAP NetWeaver Gateway Server. Този слой от архитектурата се нарича „слой на приложението“.
Действителната бизнес логика е внедрена в SAP основни системи като ECC, CRM и BW. Бизнес логиката може да бъде реализирана с помощта на SAP програми и функционални модули. SAP се намират транзакционните и основните данни SAP системи. Този слой се нарича „слой на базата данни“ или „слой за постоянство“.
SAPUI5 компонент
Компонентът е част от код за многократна употреба. Съществуват 2 вида компоненти, предоставени от SAPUI5:
- Компоненти на потребителския интерфейс – Те представляват потребителски интерфейс, съдържащ елементи на потребителския интерфейс. Те са базирани на SAPUI5 клас, наречен sap.ui.core.UIComponent
- Безлични компоненти – Те нямат потребителски интерфейс. Базирани са на SAPUI5 клас, наречен sap.ui.core.Component
По същество компонентът е папка. Когато създавате нов SAPПриложение UI5, ще можете да видите структура на папки, създадена във вашия изследовател на проекти, както е показано по-долу.
В това UI5 приложение, PassNum е компонент. Файлът Component.js е задължителен, за да може едно UI5 приложение да се държи като компонент.
Следващият в това SAPUI5 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) Създайте UI проекта
Отидете на Файл->Нов->Други->SAPРазработка на UI5 приложения -> Проект за приложения.
Създайте проект за приложение за SAPUI5, като следвате инструкциите на помощника. Вижте екранната снимка по-долу.
Въведете името на проекта и оставете останалите селекции да останат такива, каквито са предложени от съветника.
На горната екранна снимка има 2 вида библиотеки, показани като радио бутони:
- сап.м
- sap.ui.commons
Когато изберете sap.m, вие казвате на съветника да създаде проект за UI5 приложение, чийто раздел за първоначално зареждане автоматично ще включва библиотеката 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.
Кодът е написан само в метода hook 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 Gateway сървър
Разгръщайте проекта и дайте техническото име на BSP приложението, генерирано на ABAP frontend сървъра. Нека името бъде zdisplaymonthВашият проект трябва да изглежда както е показано по-долу.
ЧАСТ 2) Създаване на родителски компонент
Сега е време да създадем нов компонент (родителски компонент), който ще използва компонента, който създадохме досега в този урок.
Стъпка 1) Създайте нов SAPUI5 приложение
Отидете на Файл->Нов->Други->SAPРазработка на UI5 приложения -> Проект за приложения. След това следвайте инструкциите на съветника, за да създадете нов SAPПроект за UI5 приложение. Това е описано подробно в стъпка 1 от част 1 в този урок по-горе.
Името на родителския проект Component е Номер на паролаТехническото име на 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 Gateway сървър
Разположите приложението на ABAP frontend сървъра и го стартирайте. Би трябвало да можете да го стартирате, като щракнете с десния бутон върху проекта и изберете опцията „Стартирай на ABAP сървър“.
В по-долу URL ще се отвори в Eclipse браузър.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Копирайте URL и го стартирайте в действителния браузър. В горното име на хост (отбелязано в жълто) е името на ��оста на вашия ABAP frontend сървър.
Продукция
Кликнете върху бутона „Първи“ и януари трябва да се покаже в детския компонент.
Насладете се на създаването на красиви, отзивчиви уеб приложения, като използвате SAPUI5.
