SAPПідручник UI5 для початківців: що таке Fiori з прикладами

Що таке 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діаграма текстури

У вищесказаному Architecture, перше поле, тобто «Пристрої» вказують на пристрої, на яких працюють програми UI5. До програм UI5 можна отримати доступ через мобільний додаток або будь-який браузер на цих пристроях. Цей рівень архітектури називається «Рівень презентації».

SAPПрограми UI5 і служби oData знаходяться на SAP Шлюзовий сервер NetWeaver. Цей рівень архітектури називається «Рівень додатків».

Справжня бізнес-логіка реалізована в SAP основні системи, такі як ECC, CRM, BW тощо… Бізнес-логіка може бути реалізована за допомогою SAP програми та функціональні модулі. SAP транзакції та основні дані знаходяться на SAP системи. Цей рівень архітектури називається «рівнем бази даних» або «рівнем стійкості».

SAPКомпонент UI5

Компонент — це частина робочого коду, яка повторно використовується скрізь, де це необхідно. Є 2 типи компонентів, які надає SAPIU5

Компоненти інтерфейсу користувача – вони представляють інтерфейс користувача, що містить елементи інтерфейсу користувача. Вони засновані на класі SPAUI5 під назвою sap.ui.core.UIComponent
Безликі компоненти – вони не мають інтерфейсу користувача. Вони засновані на SAPКлас UI5 називається sap.ui.core.Component

По суті, компонент – це папка. Коли ви створюєте новий SAPUI5, ви зможете побачити структуру папок, створену у вашому провіднику проекту, як показано нижче.

У цій програмі UI5 PassNum є компонентом. Файл Component.js є обов’язковим, щоб програма UI5 працювала як компонент. Файл Component.js є контролером компонентів.

Далі в цьому SAPIU5 Eclipse навчальний посібник, ми навчимося налаштовувати SAPUI5.

SAPНалаштування UI5

Перш ніж почати, вам потрібно переконатися, що:

Eclipse (версія Luna) встановлено на вашому ноутбуці
SAP Засоби розробки для Eclipse Luna і встановлений на ваш eclipse (SAP Засоби розробки для Eclipse Місяць - https://tools.hana.ondemand.com/luna/)
SAP Панель входу встановлена, і ви маєте до неї доступ SAP Система NetWeaver Gateway для розгортання та тестування цієї програми, яку ми збираємося створити в цьому блозі.

Після повного створення програми вона має виглядати так:

В цьому SAPІнтерфейс посібника користувача 5, ми створимо 2 компоненти, а саме батьківський компонент і дочірній компонент. Спочатку ми створимо дочірній компонент, а потім використаємо його в батьківському компоненті.

Почнемо бруднити руки.

Частина 1) Створення дочірньої програми

Наша мета — створити дочірній компонент, який прийматиме числа від 1 до 12 і відображатиме назву місяця. Наприклад, він отримує 3; має відображатися «березень».

Крок 1) Створіть проект інтерфейсу користувача

Перейдіть до Файл->Створити->Інше->SAPРозробка додатків UI5->Проект додатків.

Створіть проект програми для SAPUI5, виконавши вказівки майстра, що відкриється. Дивіться знімок екрана нижче.

Введіть назву проекту, нехай інші параметри залишаться такими ж, як запропоновано майстром.

На наведеному вище знімку екрана є 2 типи бібліотек, які відображаються як перемикачі

сап.м
sap.ui.commons

Коли ви вибираєте sap.m, ви повідомляєте майстру створити проект програми UI5, у розділі початкового завантаження якого автоматично включатиметься бібліотека sap.m, яка призначена для створення адаптивної веб-програми.

Далі в цьому SAP Підручник FIORI, ви побачите нижче розділ майстра, де вам потрібно створити початкове представлення. Початкове подання – це подання, яке відображатиметься першим під час доступу до програми.

Тут вам потрібно вказати назву перегляду та вибрати тип перегляду. SAPUI5 підтримує 4 типи перегляду, як видно на екрані вище. Отже, інтерфейс користувача a SAPДодаток UI5 можна створити за допомогою Javascript або 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 SAPUI5, коли доступ до програми здійснюється з браузера. Тому напишіть код нижче у файлі 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(). Решта файлу згенерована фреймворком.

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 цього підручника вище.

Назва проекту батьківського компонента: PassNum. І технічна назва програми BSP, створена після розгортання SAPКомпонент UI5 для зовнішнього сервера ABAP є zpassnum. Структура проекту матиме такий вигляд

Давайте тепер напишемо код у файлах index.html, Component.js і PassNum.view.xml і PassNum.controller.js

Крок 2) Вихідний код 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».

У браузері Eclipse відкриється наведена нижче URL-адреса.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Скопіюйте URL-адресу та запустіть її в реальному браузері. У наведеному вище імені хоста, позначеному жовтим, є ім’я хоста вашого зовнішнього сервера ABAP.

Вихід

Натисніть кнопку «Перший», січень має відобразитися в дочірньому компоненті.

Насолоджуйтесь створенням красивих, адаптивних веб-додатків за допомогою SAPUI5.

Підсумки

В цьому SAPПідручник UI5, ми дізналися:

SAPДосліджено UI5: SAPUI5 є останнім у серії SAP Технології розробки UI.
Що таке SAP UI5: SAPUI5 — це набір бібліотек, які використовуються для створення адаптивних веб-додатків
Компоненти SAPАрхітектура UI5: пристрої, клієнт, шлюз NetWeaver, рівень стійкості
A SAPКомпонент UI5 — це частина робочого коду, яка повторно використовується скрізь, де це необхідно
Види SAPКомпонент UI5 — це 1) компоненти інтерфейсу користувача, 2) безликі компоненти
Ми дізналися про використання одного компонента sapui5 в іншому компоненті sapui5 і передачу даних між двома компонентами