SAP초보자를 위한 UI5 튜토리얼
제시카 블레이크
⚡ 스마트 요약
SAPUI5는 SAP이 프레임워크는 데스크톱, 모바일, 태블릿 등 다양한 기기에서 기업용 웹 애플리케이션을 지원하는 반응형 HTML5 프레임워크입니다. 이 가이드에서는 MVC 아키텍처, 컴포넌트 모델, 라이브러리, 그리고 부모 및 자식 컴포넌트를 구축하는 방법을 설명합니다. Eclipse.
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 게이트웨이 서버. 아키텍처의 이 계층을 '애플리케이션 계층'이라고 합니다.
실제 비즈니스 로직은 다음과 같이 구현됩니다. SAP ECC, CRM, BW와 같은 핵심 시스템. 비즈니스 로직은 다음을 사용하여 구현할 수 있습니다. SAP 프로그램 및 기능 모듈. SAP 트랜잭션 및 마스터 데이터는 다음 위치에 상주합니다. SAP 시스템의 계층입니다. 이 계층을 '데이터베이스 계층' 또는 '영구 저장 계층'이라고 합니다.
SAPUI5 구성요소
컴포넌트는 재사용 가능한 코드 조각입니다. 제공되는 컴포넌트에는 두 가지 유형이 있습니다. SAPUI5:
- UI 구성 요소 – 사용자 인터페이스를 구성하는 UI 요소를 나타냅니다. 이는 다음을 기반으로 합니다. SAPsap.ui.core.UIComponent라는 UI5 클래스
- 사용자 인터페이스가 없는 컴포넌트 - 이러한 컴포넌트는 사용자 인터페이스를 가지고 있지 않습니다. 이러한 컴포넌트는 다음을 기반으로 합니다. SAPUI5 클래스는 sap.ui.core.Component라고 합니다.
기본적으로 구성 요소는 폴��입니다. 새로 만들 때 SAPUI5 애플리케이션을 실행하면 아래와 같이 프로젝트 탐색기에 생성된 폴더 구조를 볼 수 있습니다.
이 UI5 애플리케이션에서 PassNum은 컴포넌트입니다. UI5 애플리케이션이 컴포넌트처럼 작동하려면 Component.js 파일이 필수적입니다.
이 다음으로 SAP유닉스 Eclipse 튜토리얼, 설정 방법을 배우겠습니다. SAPUI5.
SAPUI5 설정
시작하기 전에 다음 사항을 확인해 주십시오.
- Eclipse (Luna 버전)이 노트북에 설치되어 있습니다.
- SAP 개발 도구 Eclipse Luna는 귀하의 기기에 설치되어 있습니다. Eclipse (SAP 개발 도구 Eclipse 루나 - https://tools.hana.ondemand.com/luna/)
- SAP Logon Pad가 설치되었으며, 다음 권한으로 접속할 수 있습니다. SAP 이 블로그에서 소개할 애플리케이션의 배포 및 테스트를 위해 NetWeaver 게이트웨이 시스템을 사용할 예정입니다.
애플리케이션이 완전히 빌드되면 다음과 같아야 합니다.
이번에 SAPUI5 튜토리얼 가이드에서는 부모 컴포넌트와 자식 컴포넌트라는 두 개의 컴포넌트를 생성합니다. 먼저 자식 컴포넌트를 생성한 다음 부모 컴포넌트에서 이를 사용합니다.
손을 더럽히기 시작합시다.
1부) 하위 애플리케이션 생성
우리의 목표는 1부터 12까지의 숫자를 입력받아 해당 월의 이름을 표시하는 자식 컴포넌트를 만드는 것입니다. 예를 들어, 3을 입력받으면 'March'를 표시해야 합니다.
1단계) UI 프로젝트 생성
파일->새로 만들기->기타->로 이동합니다.SAPUI5 애플리케이션 개발 -> 애플리케이션 프로젝트.
위한 애플리케이션 프로젝트 생성 SAP마법사를 따라 UI5를 설치하세요. 아래 스크린샷을 참조하세요.
프로젝트 이름을 입력하고, 나머지 설정은 마법사가 제시하는 대로 두십시오.
위 스크린샷에는 라디오 버튼으로 표시된 라이브러리 유형이 두 가지 있습니다.
- 수액.m
- sap.ui.commons
sap.m을 선택하면 마법사에게 UI5 애플리케이션 프로젝트를 생성하도록 지시하는 것이며, 해당 프로젝트의 부트스트랩 섹션에는 반응형 웹 애플리케이션 생성을 위한 sap.m 라이브러리가 자동으로 포함됩니다.
이 다음으로 SAP FIORI 튜토리얼에서 마법사의 아래 섹션을 보시면 초기 뷰를 생성해야 하는 부분이 있습니다. 초기 뷰는 애플리케이션에 처음 접속했을 때 가장 먼저 렌더링되는 뷰입니다.
여기서는 뷰의 이름을 지정하고 뷰 유형을 선택해야 합니다. SAPUI5는 위 화면에서 알 수 있듯이 4가지 유형의 보기를 지원합니다. 그래서 UI는 SAPUI5 애플리케이션은 다음을 사용하여 구축할 수 있습니다. Java스크립트 또는 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 코드
다음으로, index.html 파일에서 애플리케이션에 접속할 때 Component.js 파일을 로드하도록 설정해 보겠습니다. 아래 코드를 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 : 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 애플리케이션의 기술적 이름은 다음과 같습니다. zpassnum프로젝트 구조는 아래와 같습니다.
이제 index.html, Component.js, PassNum.view.xml 및 PassNum.controller.js 파일에 코드를 작성해 보겠습니다.
2단계) 출처 Code 부모 컴포넌트의 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 프런트엔드 서버의 호스트 이름입니다.
산출
'첫 번째' 버튼을 클릭하면 하위 구성 요소에 1월이 표시됩니다.
다음을 사용하여 아름답고 반응성이 뛰어난 웹 애플리케이션을 만들어 보세요. SAPUI5.
