SAPUI5 Урок за начинаещи

Какво е 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тектурна диаграма

В горното Architecture, първото поле, т.е. „Устройства“ показват устройствата, на които работят UI5 приложения. Приложенията UI5 могат да бъдат достъпни чрез мобилно приложение или всеки браузър на тези устройства. Този слой на архитектурата се нарича „Презентационен слой“.

SAPUI5 приложенията и oData услугите се намират SAP NetWeaver Gateway сървър. Този слой на архитектурата се нарича „Приложен слой“.

Действителната бизнес логика е внедрена в SAP основни системи като ECC, CRM и BW и т.н.... Бизнес логиката може да бъде внедрена с помощта на SAP програми и функционални модули. SAP се намират транзакционните и основните данни SAP системи. Този слой на архитектурата се нарича „Слой на база данни“ или „Слой на устойчивост“.

SAPUI5 компонент

Компонентът е част от работещ код, който се използва повторно, когато е необходимо. Има 2 вида компоненти, предоставени от SAPUI5

UI компоненти – Те представляват потребителски интерфейс, съдържащ UI елементи. Те са базирани на SPAUI5 клас, наречен sap.ui.core.UIComponent
Безлични компоненти – Те нямат потребителски интерфейс. Те се основават на SAPUI5 клас, наречен sap.ui.core.Component

По същество компонентът е папка. Когато създавате нов SAPПриложение UI5, ще можете да видите структура на папки, създадена във вашия изследовател на проекти, както е показано по-долу.

В това UI5 приложение PassNum е компонент. Файлът Component.js е задължителен, за да може приложението UI5 да се държи като компонент. Файлът Component.js е контролерът на компонентите.

Следващият в това SAPUI5 Eclipse урок, ще научим как да настроим SAPUI5.

SAPНастройка на UI5

Преди да започнем, трябва да се уверите, че –

Eclipse (версия Luna) е инсталиран на вашия лаптоп
SAP Инструменти за разработка за Eclipse Luna и инсталиран на вашето затъмнение (SAP Инструменти за разработка за Eclipse Луна - https://tools.hana.ondemand.com/luna/)
SAP Панелът за влизане е инсталиран и имате достъп до него SAP Система NetWeaver Gateway за внедряване и тестване на това приложение, което ще изградим в този блог.

След като приложението е напълно изградено, то трябва да изглежда по следния начин:

В този SAPРъководство за уроци за UI5, ще създадем 2 компонента, а именно родителски компонент и дъщерен компонент. Първо ще създадем Child Component и след това ще го използваме в Parent компонент.

Да започнем да си цапаме ръцете.

Част 1) Създаване на дъщерно приложение

Нашата цел е да създадем дъщерен компонент, който да приема число от 1 до 12 и да показва името на месеца. Например получава 3; трябва да показва „март“.

Стъпка 1) Създайте UI проекта

Отидете на Файл->Нов->Други->SAPUI5 Разработка на приложения->Проект за приложения.

Създайте проект за приложение за 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 код

И накрая, нека напишем код на файла Controller на 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 Gateway сървър

Разположете проекта и дайте техническото име на BSP приложението, което ще бъде генерирано на ABAP фронтенд сървъра. Нека името бъде zdisplaymonth. В този момент вашият проект за приложение трябва да изглежда по-долу.

ЧАСТ 2) Създаване на родителски компонент

Сега е време да създадете нов компонент (родителски компонент), който ще използва компонента, който сме създали досега в този урок.

Стъпка 1) Създайте нов SAPUI5 приложение

Отидете на Файл->Нов->Други->SAPUI5 Разработка на приложения->Проект за приложения. След това следвайте инструкциите на съветника, за да създадете нов SAPПроект за UI5 приложение. Това е описано подробно в стъпка 1 от част 1 в този урок по-горе.

Името на проекта на родителския компонент е PassNum. И техническото име на приложението BSP, генерирано след внедряването на SAPUI5 компонент към 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 Gateway сървър

Разположете приложението на ABAP фронтенд сървър и го стартирайте. Трябва да можете да го стартирате, като щракнете с десния бутон върху проекта и щракнете върху опцията „Изпълни на ABAP сървър“.

URL адресът по-долу ще се отвори в браузъра Eclipse.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Копирайте URL адреса и го стартирайте в действителния браузър. В горното име на хост, маркирано в жълто, е името на хоста на вашия ABAP фронтенд сървър.

Продукция

Щракнете върху бутона „Първи“, януари трябва да се покаже в дъщерния компонент.

Насладете се на създаването на красиви, отзивчиви уеб приложения, като използвате SAPUI5.

Oбобщение

В този SAPUI5 урок, ние научихме:

SAPUI5 проучен: SAPUI5 е най-новият от поредицата SAP Технологии за разработка на UI.
Какво е SAP UI5: SAPUI5 е набор от библиотеки, които се използват за изграждане на адаптивни уеб приложения
Компоненти на SAPUI5 архитектурата е Devices, Client, NetWeaver Gateway, Persistence Layer
A SAPUI5 Component е част от работещ код, който се използва повторно, когато е необходимо
Видове SAPUI5 Component са 1) UI компоненти, 2) безлични компоненти
Научихме за консумирането на един sapui5 компонент в друг sapui5 компонент и предаването на данни между двата компонента