Учебное пособие по SAPUI5 для начинающих: что такое Fiori с примерами

Что такое SAPUI5?

SAPUI5 — это набор библиотек для создания адаптивных веб-приложений, которые работают на нескольких устройствах, таких как настольные, мобильные и планшеты. SAPUI5 работает на Концепция MVC ускорить цикл разработки за счет создания данных, бизнес-логики и представления данных отдельно в представлении. Таким образом, разработка представления и контроллера может происходить независимо для создания моделей (контейнеров данных).

SAPUI5 — новейшая технология разработки пользовательского интерфейса SAP. Чтобы обеспечить веб-интеграцию базовой системы SAP ERP, SAP разработала несколько технологий разработки пользовательского интерфейса, таких как BSP (страницы бизнес-сервера), PDK (комплект разработки портала), Web Dynpro Java, Web Dynpro ABAP. Преемником Web Dynpro ABAP является SAPUI5.

SAPUI5 Archiтекстура

SAPUI5 Archiтекстура
SAPUI5 Archiтекстура

SAPUI ArchiДиаграмма тектуры

В выше Archiтектура, первая box, т.е. «Устройства» указывают устройства, на которых запускаются приложения UI5. Доступ к приложениям UI5 можно получить через мобильное приложение или любой браузер на этих устройствах. Этот слой archiТехнология называется «Уровень представления».

Приложения SAPUI5 и службы oData располагаются на сервере шлюза SAP NetWeaver. Этот слой archiТехнология называется «Прикладной уровень».

Фактическая бизнес-логика реализуется в основных системах SAP, таких как ECC, CRM, BW и т. д.… Бизнес-логика может быть реализована с использованием программ и функциональных модулей SAP. Транзакционные и основные данные SAP находятся в системах SAP. Этот слой archiТехнология называется «Уровнем базы данных» или «Уровнем персистентности».

Компонент SAPUI5

Компонент — это часть рабочего кода, который используется повторно там, где это необходимо. SAPUI2 предоставляет два типа компонентов.

  1. Компоненты пользовательского интерфейса. Они представляют собой пользовательский интерфейс, содержащий элементы пользовательского интерфейса. Они основаны на классе SPAUI5 под названием sap.ui.core.UIComponent.
  2. Безликие компоненты. У них нет пользовательского интерфейса. Они основаны на классе SAPUI5 под названием sap.ui.core.Component.

По сути, компонент — это папка. Когда вы создаете новое приложение SAPUI5, вы сможете увидеть структуру папок, созданную в проводнике вашего проекта, как показано ниже.

Компонент SAPUI5

В этом приложении UI5 PassNum является компонентом. Файл Component.js является обязательным для того, чтобы приложение UI5 вело себя как компонент. Файл Component.js является контроллером компонента.

Далее в этом SAPUI5 Eclipse учебник, мы узнаем, как настроить SAPUI5.

Настройка SAPUI5

Прежде чем мы начнем, вам необходимо убедиться, что —

  1. Eclipse (версия Luna) установлена ​​на вашем ноутбуке
  2. Инструменты разработки SAP для Eclipse Luna и установлен на вашем eclipse (Инструменты разработки SAP для Eclipse Луна - https://tools.hana.ondemand.com/luna/)
  3. Панель входа в систему SAP установлена, и у вас есть доступ к системе SAP NetWeaver Gateway для развертывания и тестирования этого приложения, которое мы собираемся создать в этом блоге.

После полной сборки приложения оно должно выглядеть так:

Настройка SAPUI5

В этом руководстве по SAPUI5 мы создадим 2 компонента, а именно родительский компонент и дочерний компонент. Сначала мы создадим дочерний компонент, а затем используем его в родительском компоненте.

Начнем пачкать руки.

Часть 1) Создание дочернего приложения

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

Шаг 1) Создайте проект пользовательского интерфейса

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

Создайте проект пользовательского интерфейса

Создайте проект приложения для SAPUI5, выполнив следующие действия.wing мастер, который открывает. Смотрите скриншот ниже.

Создайте проект пользовательского интерфейса

Введите Имя проекта, остальные параметры останутся такими же, как предложено мастером.

Создайте проект пользовательского интерфейса

На приведенном выше снимке экрана в виде переключателей отображаются два типа библиотек.

  1. сап.м
  2. sap.ui.commons

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

Далее в этом руководстве по SAP FIORI вы увидите раздел мастера ниже, в котором вам необходимо создать исходное представление. Начальное представление — это представление, которое будет отображаться первым при доступе к приложению.

Создайте проект пользовательского интерфейса

Здесь вам нужно указать имя представления и выбрать тип представления. SAPUI5 поддерживает 4 типа представления, как показано на экране выше. Таким образом, пользовательский интерфейс приложения SAPUI5 может быть построен с использованием 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>

После вставки приведенного выше кода ваше представление должно выглядеть так, как показано ниже:

Код DisplayMonthView.view.xml

Шаг 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. На этом этапе ваш проект приложения должен выглядеть, как показано ниже.

Сервер шлюза SAP Netweaver

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

Теперь пришло время создать новый компонент (родительский компонент), который будет использовать компонент, который мы создали в этом уроке.

Шаг 1) Создайте новое приложение SAPUI5.

Перейдите в Файл->Создать->Другое->Разработка приложений SAPUI5->Проект приложения. Затем следуйте инструкциям мастера, чтобы создать новый проект приложения SAPUI5. Это было подробно описано в шаге 1 части 1 данного руководства выше.

Имя проекта родительского компонента: PassNum. А техническое имя приложения BSP, созданного после развертывания компонента SAPUI5 на внешнем сервере ABAP: zpassnum. Структура проекта будет выглядеть так, как показано ниже.

Создайте новое приложение SAPUI5.

Давайте теперь напишем код в файлах 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>

После того, как вы используете приведенный выше код в своем представлении, ваше представление должно выглядеть так, как показано ниже.

Исходный код файла PassNum.view.xml

Шаг 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».

Развертывание родительского компонента на сервере шлюза SAP Netweaver

URL-адрес ниже откроется через eclipse браузер.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Скопируйте URL-адрес и запустите его в реальном браузере. В приведенном выше имени хоста, отмеченном желтым цветом, указано имя хоста вашего внешнего сервера ABAP.

Результат

Вывод сервера шлюза SAP Netweaver

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

Вывод сервера шлюза SAP Netweaver

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

Итоги

В этом руководстве по SAPUI5 мы узнали:

  • Исследование SAPUI5: SAPUI5 — это новейшая технология разработки пользовательского интерфейса SAP.
  • Что такое SAP UI5: SAPUI5 — это набор библиотек, который используется для создания адаптивных веб-приложений.
  • Компоненты SAPUI5 archiтектуры: Устройства, Клиент, Шлюз NetWeaver, Уровень сохраняемости.
  • Компонент SAPUI5 — это часть рабочего кода, который повторно используется там, где это необходимо.
  • Типы компонента SAPUI5: 1) компоненты пользовательского интерфейса, 2) безликие компоненты.
  • Мы узнали, как использовать один компонент sapui5 в другом компоненте sapui5 и передавать данные между двумя компонентами.