SAP초보자를 위한 UI5 튜토리얼: 예시가 포함된 Fiori란 무엇입니까?
제시카 블레이크
SAPUI5?
SAP유닉스 데스크톱, 모바일, 태블릿과 같은 여러 장치에서 실행되는 반응형 웹 애플리케이션을 구축하기 위한 라이브러리 세트입니다. SAPUI5는 작동합니다 MVC 개념 뷰에서 데이터, 비즈니스 로직, 데이터 표현을 별도로 생성하여 개발 주기를 가속화합니다. 따라서 모델(데이터 컨테이너)을 생성하기 위해 뷰와 컨트롤러의 개발이 독립적으로 이루어질 수 있습니다.
SAPUI5는 시리즈의 최신 버전입니다. SAP UI 개발 기술. 기본 웹 통합을 제공하기 위해 SAP ERP 시스템, SAP BSP(비즈니스 서버 페이지), PDK(포털 개발 키트), Web Dynpro 등 다양한 UI 개발 기술을 개발했습니다. Java, 웹딘프로아밥. 그리고 웹딘프로아밥(Web Dynpro ABAP)의 후속작은 SAPUI5.
SAP유닉스 Archi강의
SAPUI Archi강의 다이어그램
위의 Archi구조, 첫 번째 상자, 즉 '장치'는 UI5 애플리케이션이 실행되는 장치를 나타냅니다. UI5 애플리케이션은 모바일 앱이나 이러한 장치의 모든 브라우저를 통해 액세스할 수 있습니다. 이 아키텍처 계층을 '프레젠테이션 계층'이라고 합니다.
SAPUI5 애플리케이션과 oData 서비스는 다음 위치에 상주합니다. SAP NetWeaver Gateway Server. 이 아키텍처 계층은 '애플리케이션 계층'이라고 합니다.
실제 비즈니스 로직은 다음과 같이 구현됩니다. SAP ECC, CRM, BW 등 핵심 시스템… 비즈니스 로직은 다음을 사용하여 구현 가능 SAP 프로그램 및 기능 모듈. SAP 트랜잭션 및 마스터 데이터는 다음 위치에 상주합니다. SAP 시스템. 이 아키텍처 계층은 '데이터베이스 계층' 또는 '지속성 계층'이라고 합니다.
SAPUI5 구성요소
구성 요소는 필요한 곳이면 어디든 재사용되는 작업 코드의 일부입니다. 에서 제공하는 구성 요소에는 두 가지 유형이 있습니다. SAP유닉스
- UI 구성 요소 – UI 요소가 포함된 사용자 인터페이스를 나타냅니다. 이는 sap.ui.core.UIComponent라는 SPAUI5 클래스를 기반으로 합니다.
- 얼굴 없는 구성 요소 - 사용자 인터페이스가 없습니다. 이는 다음을 기반으로 합니다. SAPUI5 클래스는 sap.ui.core.Component라고 합니다.
기본적으로 구성 요소는 폴더입니다. 새로 만들 때 SAPUI5 애플리케이션을 실행하면 아래와 같이 프로젝트 탐색기에 생성된 폴더 구조를 볼 수 있습니다.
이 UI5 애플리케이션에서 PassNum은 구성 요소입니다. Component.js 파일은 UI5 애플리케이션이 구성요소처럼 작동하는 데 필수입니다. Component.js 파일은 구성 요소 컨트롤러입니다.
이 다음으로 SAP유닉스 Eclipse 튜토리얼, 설정 방법을 배우겠습니다. SAPUI5.
SAPUI5 설정
시작하기 전에 다음 사항을 확인해야 합니다.
- Eclipse (Luna 버전)이 노트북에 설치되어 있습니다.
- SAP 개발 도구 Eclipse Luna를 Eclipse에 설치(SAP 개발 도구 Eclipse 루나 - https://tools.hana.ondemand.com/luna/)
- SAP 로그온 패드가 설치되어 있으며 다음에 액세스할 수 있습니다. SAP 이 블로그에서 구축할 이 애플리케이션에 대한 배포 및 테스트를 위한 NetWeaver Gateway 시스템입니다.
애플리케이션이 완전히 빌드되면 다음과 같아야 합니다.
이번에 SAPUI5 튜토리얼 가이드에서는 상위 구성 요소와 하위 구성 요소라는 두 가지 구성 요소를 만듭니다. 먼저 Child Component를 생성한 후 Parent Component에서 사용하겠습니다.
손을 더럽히기 시작합시다.
1부) 하위 애플리케이션 생성
우리의 목표는 1부터 12까지의 숫자를 허용하고 월 이름을 표시하는 하위 구성 요소를 만드는 것입니다. 예를 들어, 3을 받습니다. 'XNUMX월'이 표시되어야 합니다.
1단계) UI 프로젝트 생성
파일->새로 만들기->기타->로 이동합니다.SAPUI5 애플리케이션 개발->애플리케이션 프로젝트.
위한 애플리케이션 프로젝트 생성 SAPUI5는 열리는 마법사를 따라갑니다. 아래 스크린샷을 참조하세요.
프로젝트 이름을 입력하고 다른 선택 사항은 마법사에서 제안한 것과 동일하게 유지합니다.
위 스크린샷에는 라디오 버튼으로 표시된 2가지 유형의 라이브러리가 있습니다.
- 수액.m
- sap.ui.commons
sap.m을 선택하면 부트스트랩 섹션에 반응형 웹 애플리케이션을 생성하기 위한 sap.m 라이브러리가 자동으로 포함되는 UI5 애플리케이션 프로젝트를 생성하도록 마법사에 지시하는 것입니다.
이 다음으로 SAP FIORI 튜토리얼에서는 초기 뷰를 생성해야 하는 마법사 섹션이 아래에 표시됩니다. 초기 보기는 애플리케이션에 액세스할 때 가장 먼저 렌더링되는 보기입니다.
여기에서 보기 이름을 지정하고 보기 유형을 선택해야 합니다. SAPUI5는 위 화면에서 알 수 있듯이 4가지 유형의 보기를 지원합니다. 그래서 UI는 SAPUI5 애플리케이션은 다음을 사용하여 구축할 수 있습니다. Javascript 또는 XML 또는 JSON 또는 HTML 중 편한 언어를 선택하세요.
마법사가 끝나면 새 프로젝트가 생성되어 프로젝트 탐색기 창에 표시됩니다. 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 코드
다음으로 Component.js를 로드하기 위한 index.html 파일을 알려드리겠습니다. SAP브라우저에서 애플리케이션에 액세스할 때 UI5입니다. 따라서 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의 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 넷위버 게이트웨이 서버
프로젝트를 배포하고 ABAP 프런트엔드 서버에서 생성될 BSP 애플리케이션의 기술 이름을 제공합니다. 이름이 되기를 zdisplaymonth. 이 시점에서 애플리케이션 프로젝트는 다음과 같아야 합니다.
2부) 상위 구성요소 생성
이제 이 튜토리얼에서 지금까지 생성한 구성 요소를 사용할 새 구성 요소(상위 구성 요소)를 생성할 차례입니다.
1단계) 새로 만들기 SAPUI5 애플리케이션
파일->새로 만들기->기타->로 이동합니다.SAPUI5 애플리케이션 개발->애플리케이션 프로젝트. 그런 다음 마법사 지침에 따라 새 항목을 만듭니다. SAPUI5 애플리케이션 프로젝트. 이에 대해서는 위 튜토리얼의 1부 1단계에서 자세히 설명했습니다.
상위 구성요소 프로젝트의 이름은 다음과 같습니다. 비밀번호 그리고 배포 후 생성된 BSP 애플리케이션의 기술적 이름은 다음과 같습니다. SAPABAP 프런트엔드 서버에 대한 UI5 구성 요소는 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단계) 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>
뷰에서 위 코드를 사용한 후 뷰는 다음과 같아야 합니다.
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 넷위버 게이트웨이 서버
ABAP 프런트엔드 서버에 애플리케이션을 배포하고 실행합니다. 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 'ABAP 서버에서 실행' 옵션을 클릭하여 실행할 수 있습니다.
아래 URL은 Eclipse 브라우저에서 열립니다.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
URL을 복사하여 실제 브라우저에서 실행해 보세요. 위의 노란색으로 표시된 호스트 이름은 ABAP 프런트엔드 서버의 호스트 이름입니다.
산출
'첫 번째' 버튼을 클릭하면 XNUMX월이 하위 구성 요소에 표시됩니다.
다음을 사용하여 아름답고 반응성이 뛰어난 웹 애플리케이션을 만들어 보세요. SAPUI5.
요약
이번에 SAPUI5 튜토리얼에서 우리는 다음을 배웠습니다:
- SAPUI5 탐색: SAPUI5는 시리즈의 최신 버전입니다. SAP UI 개발 기술.
- SAP UI5: SAPUI5는 반응형 웹 애플리케이션을 구축하는 데 사용되는 라이브러리 세트입니다.
- 구성 요소 SAPUI5 아키텍처는 장치, 클라이언트, NetWeaver 게이트웨이, 지속성 계층으로 구성됩니다.
- A SAPUI5 구성 요소는 필요한 곳마다 재사용되는 작업 코드입니다.
- 유형 SAPUI5 컴포넌트는 1) UI 컴포넌트, 2) Faceless 컴포넌트입니다.
- 하나의 sapui5 구성 요소를 다른 sapui5 구성 요소로 사용하고 두 구성 요소 간에 데이터를 전달하는 방법을 배웠습니다.