SAP UI5-주요 구성 요소

SAP UI5에는 UI5 애플리케이션에서 독립적이고 재사용 가능한 개체 인 여러 구성 요소가 있습니다. 이러한 구성 요소는 다른 사람이 개발할 수 있으며 다른 프로젝트에서 사용할 수 있습니다.

응용 프로그램은 다른 위치의 구성 요소를 사용할 수 있으므로 응용 프로그램의 구조를 쉽게 얻을 수 있습니다. SAP UI5 개발에서 다양한 유형의 구성 요소를 만들 수 있습니다.

얼굴없는 구성 요소

Faceless 구성 요소는 백엔드 시스템에서 데이터를 가져 오는 데 사용되며 사용자 인터페이스를 포함하지 않습니다.

Example− sap.ui.core.component 클래스의 일부입니다.

UI 구성 요소

UI 구성 요소는 렌더링 기능을 추가하고 사용자 인터페이스에서 화면 영역 또는 요소를 나타내는 데 사용됩니다.

Example− UI 컴포넌트는 일부 작업을 수행하기위한 설정이있는 버튼 일 수 있습니다. 클래스의 일부 : sap.ui.core.UIComponent

Note− sap.ui.core.component는 faceless 및 UI 구성 요소의 기본 클래스입니다. 확장 성 기능을 정의하기 위해 구성 요소는 기본 클래스 또는 UI 개발의 다른 구성 요소에서 상속 할 수 있습니다.

구성 요소의 모듈 이름을 패키지 이름이라고합니다. .component 여기서 패키지 이름은 구성 요소 생성자에 전달 된 매개 변수의 이름으로 정의됩니다.

SAP UI5 구성 요소는 시스템 환경에 따라 나눌 수도 있습니다.

클라이언트 측 구성 요소 : 여기에는 다음이 포함됩니다.
- 제어 라이브러리 sap.m, sap.ui.common 등
- 핵심 자바 스크립트
- HTML과 자바 스크립트가 포함 된 테스트
서버 측 구성 요소
- 테마 생성기
- Eclipse의 제어 및 애플리케이션 개발 도구
- 리소스 핸들러

구성 요소의 구조

각 구성 요소는 폴더 형식으로 표시되며 구성 요소의 이름과 구성 요소를 관리하는 데 필요한 리소스를 포함합니다.

각 구성 요소는 다음 파일을 포함해야합니다-

Component.json 디자인 타임에 대한 메타 데이터를 포함하고 디자인 타임 도구에만 사용되는 파일입니다.
Component.js 런타임 메타 데이터를 담당하는 속성, 이벤트 및 구성 요소 메서드를 정의하는 데 사용됩니다.

새 SAP UI5 구성 요소를 만드는 방법은 무엇입니까?

새 구성 요소를 만들려면 새 폴더를 만들어야합니다. 이름을 다음과 같이 지정하겠습니다.button.

다음은 component.js file

그런 다음 UI 구성 요소 기본 클래스 sap.ui.core.UIComponent.extend를 확장하고 구성 요소 이름과 패키지 경로를 입력해야합니다.

나중에 새 구성 요소를 정의하려면 require 다음과 같이 진술-

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

다음 단계는 다음과 같이 폴더에 component.json을 정의하는 것입니다.

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

구성 요소 사용 방법

구성 요소를 사용하려면 구성 요소 컨테이너에 구성 요소를 래핑해야합니다. placeAt 메서드를 사용하여 페이지에서 UI 구성 요소를 직접 사용할 수 없습니다. 또 다른 방법은 componentContainer 생성자에 구성 요소를 전달하는 것입니다.

placeAt 메서드 사용

컨테이너에 구성 요소를 추가하고 placeAt 페이지에 구성 요소를 배치하는 방법.

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

componentContainer 생성자 사용

구성 요소 컨테이너는 특정 설정을 전달하며 일반 컨트롤의 수명주기 메서드도 포함합니다. 다음 코드 세그먼트는 componentContainer 생성자에 구성 요소를 전달하는 방법을 보여줍니다.

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");