초보자를 위한 SAPUI5 튜토리얼: 예시를 통해 Fiori란 무엇인가

SAPUI5란?

SAPUI5 데스크톱, 모바일, 태블릿과 같은 여러 장치에서 실행되는 반응형 웹 애플리케이션을 구축하기 위한 라이브러리 세트입니다. SAPUI5는 다음에서 작동합니다. MVC 개념 뷰에서 데이터, 비즈니스 로직, 데이터 표현을 별도로 생성하여 개발 주기를 가속화합니다. 따라서 모델(데이터 컨테이너)을 생성하기 위해 뷰와 컨트롤러의 개발이 독립적으로 이루어질 수 있습니다.

SAPUI5는 SAP UI 개발 기술 시리즈의 최신 버전입니다. 기본 SAP ERP 시스템에 대한 웹 통합을 제공하기 위해 SAP는 BSP(비즈니스 서버 페이지), PDK(포털 개발 키트), Web Dynpro Java, Web Dynpro ABAP와 같은 여러 UI 개발 기술을 내놓았습니다. 그리고 Web Dynpro ABAP의 후속작은 SAPUI5입니다.

SAPUI5 아키텍처

SAPUI5 아키텍처
SAPUI5 아키텍처

SAPUI 아키텍처 다이어그램

위의 아키텍처에서 먼저 box, 즉 '장치'는 UI5 애플리케이션이 실행되는 장치를 나타냅니다. UI5 애플리케이션은 모바일 앱이나 이러한 장치의 모든 브라우저를 통해 액세스할 수 있습니다. 이 아키텍처 계층을 '프레젠테이션 계층'이라고 합니다.

SAPUI5 애플리케이션과 oData 서비스는 SAP NetWeaver Gateway Server에 상주합니다. 이 아키텍처 계층을 '애플리케이션 계층'이라고 합니다.

실제 비즈니스 로직은 ECC, CRM, BW 등과 같은 SAP 핵심 시스템에 구현됩니다.… SAP 프로그램 및 기능 모듈을 사용하여 비즈니스 로직을 구현할 수 있습니다. SAP 트랜잭션 및 마스터 데이터는 SAP 시스템에 상주합니다. 이 아키텍처 계층을 '데이터베이스 계층' 또는 '지속성 계층'이라고 합니다.

SAPUI5 구성 요소

구성 요소는 필요할 때마다 재사용되는 작업 코드 조각입니다. SAPUI2에서 제공하는 컴포넌트는 5가지 유형이 있습니다.

  1. UI 구성 요소 – UI 요소가 포함된 사용자 인터페이스를 나타냅니다. 이는 sap.ui.core.UIComponent라는 SPAUI5 클래스를 기반으로 합니다.
  2. Faceless 구성 요소 – 사용자 인터페이스가 없습니다. 이는 sap.ui.core.Component라는 SAPUI5 클래스를 기반으로 합니다.

기본적으로 구성 요소는 폴더입니다. 새로운 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 튜토리얼 가이드에서는 상위 구성 요소와 하위 구성 요소라는 두 가지 구성 요소를 만듭니다. 먼저 Child Component를 생성한 후 Parent Component에서 사용하겠습니다.

손을 더럽히기 시작합시다.

1부) 하위 애플리케이션 생성

우리의 목표는 1부터 12까지의 숫자를 허용하고 월 이름을 표시하는 하위 구성 요소를 만드는 것입니다. 예를 들어, 3을 받습니다. 'XNUMX월'이 표시되어야 합니다.

1단계) UI 프로젝트 생성

파일->새로 만들기->기타->SAPUI5 응용 프로그램 개발->응용 프로그램 프로젝트로 이동합니다.

UI 프로젝트 생성

follo를 통해 SAPUI5용 애플리케이션 프로젝트 생성wing 열리는 마법사. 아래 스크린샷을 참조하세요.

UI 프로젝트 생성

프로젝트 이름을 입력하고 다른 선택 사항은 마법사에서 제안한 것과 동일하게 유지합니다.

UI 프로젝트 생성

위 스크린샷에는 라디오 버튼으로 표시되는 2가지 유형의 라이브러리가 있습니다.

  1. 수액.m
  2. sap.ui.commons

sap.m을 선택하면 부트스트랩 섹션에 반응형 웹 애플리케이션을 생성하기 위한 sap.m 라이브러리가 자동으로 포함되는 UI5 애플리케이션 프로젝트를 생성하도록 마법사에 지시하는 것입니다.

다음으로 이 SAP FIORI 튜토리얼에서는 초기 뷰를 생성해야 하는 마법사 섹션이 아래에 표시됩니다. 초기 보기는 애플리케이션에 액세스할 때 가장 먼저 렌더링되는 보기입니다.

UI 프로젝트 생성

여기에서 보기 이름을 지정하고 보기 유형을 선택해야 합니다. SAPUI5는 위 화면에서 알 수 있듯이 4가지 유형의 뷰를 지원합니다. 따라서 SAPUI5 애플리케이션의 UI는 Javascript나 XML을 사용하여 구축할 수 있습니다. JSON 또는 HTML 중 편한 언어를 선택하세요.

마법사가 끝나면 새 프로젝트가 생성되어 프로젝트 탐색기 창에 표시됩니다. Eclipse 아래처럼.

UI 프로젝트 생성

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 코드

다음으로, 브라우저에서 애플리케이션에 접근할 때 SAPUI5에서 Component.js를 로드하기 위한 index.html 파일을 알려드리겠습니다. 따라서 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의 Controller 파일 코드를 작성해 보겠습니다.

코드는 이 컨트롤러의 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 Server에 애플리케이션 배포

프로젝트를 배포하고 ABAP 프런트엔드 서버에서 생성될 BSP 애플리케이션의 기술 이름을 제공합니다. 이름이 되기를 zdisplaymonth. 이 시점에서 애플리케이션 프로젝트는 다음과 같아야 합니다.

SAP Netweaver 게이트웨이 서버

2부) 상위 구성요소 생성

이제 이 튜토리얼에서 지금까지 생성한 구성 요소를 사용할 새 구성 요소(상위 구성 요소)를 생성할 차례입니다.

1단계) 새로운 SAPUI5 애플리케이션 생성

파일->새로 만들기->기타->SAPUI5 응용 프로그램 개발->응용 프로그램 프로젝트로 이동합니다. 그런 다음 마법사 지침에 따라 새 SAPUI5 애플리케이션 프로젝트를 생성합니다. 이에 대해서는 위 튜토리얼의 1부 1단계에서 자세히 설명했습니다.

상위 구성요소 프로젝트의 이름은 다음과 같습니다. 비밀번호 그리고 ABAP 프론트엔드 서버에 SAPUI5 컴포넌트를 배포한 후 생성되는 BSP 애플리케이션의 기술명은 다음과 같습니다. 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단계) ​​Parent Component의 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 Gateway 서버에 상위 구성요소 배포

ABAP 프런트엔드 서버에 애플리케이션을 배포하고 실행합니다. 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 'ABAP 서버에서 실행' 옵션을 클릭하여 실행할 수 있습니다.

SAP Netweaver Gateway 서버에 상위 구성 요소 배포

아래 URL은 다음에서 열립니다. eclipse 브라우저.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

URL을 복사하여 실제 브라우저에서 실행해 보세요. 위의 노란색으로 표시된 호스트 이름은 ABAP 프런트엔드 서버의 호스트 이름입니다.

산출

SAP Netweaver Gateway 서버 출력

'첫 번째' 버튼을 클릭하면 XNUMX월이 하위 구성 요소에 표시됩니다.

SAP Netweaver Gateway 서버 출력

SAPUI5를 사용하여 아름답고 반응성이 뛰어난 웹 애플리케이션을 만들어 보세요.

요약

이 SAPUI5 튜토리얼에서는 다음을 배웠습니다.

  • SAPUI5 살펴보기: SAPUI5는 SAP UI 개발 기술 시리즈 중 최신 버전입니다.
  • SAP UI5란 무엇입니까? SAPUI5는 반응형 웹 애플리케이션을 구축하는 데 사용되는 라이브러리 세트입니다.
  • SAPUI5 아키텍처의 구성 요소는 장치, 클라이언트, NetWeaver 게이트웨이, 지속성 레이어입니다.
  • SAPUI5 구성 요소는 필요할 때마다 재사용되는 작업 코드입니다.
  • SAPUI5 컴포넌트의 종류는 1) UI 컴포넌트, 2) Faceless 컴포넌트입니다.
  • 하나의 sapui5 구성 요소를 다른 sapui5 구성 요소로 사용하고 두 구성 요소 간에 데이터를 전달하는 방법을 배웠습니다.