【SAPUI5】Component.js와 manifest.json

소개

SAPUI5를 배우고 응용 프로그램을 구성하는 다양한 파일의 역할을 이해할 필요가 있다고 느꼈습니다. 그래서 이번에는 Component.js와 manifest.json의 역할을 정리합니다.

이전 폴더 구성

지난번 까지 작성한 어플리케이션에서는, 폴더 구성은 다음과 같이 되어 있었습니다. Component.js와 manifest.json은 없어도 움직였습니다.

Component.js와 manifest.json의 역할은?

Component.js와 manifest.json은 index.html에서 기능을 세분화하고 독립적으로 만든 것으로 이해했습니다. 그렇다면 구체적으로 어떤 역할 분담이 되고 있습니까?


파일
역할


index.html
Bootstrap 정의, 콘텐츠를 배치할 위치(body) 정의

Component.js
초기 처리 정의

manifest.json
라이브러리 버전, 모델 등 애플리케이션에 필요한 설정 정의


Component.js는 로직을 쓰는 곳으로, manifest.json은 각종 파라미터를 지정하는 곳이라고 말할 수 있을 것 같습니다.
원래 이들은 Component.js 1개로 기술하고 있었습니다만, SAPUI5 version 1.30부터 웹 앱 매니페스트 를 참고로 manifest.json를 밖에 내게 되었다고 합니다.
각 파일의 관계에 대해서는, SAP 공식 문서 다이어그램 를 알기 쉽기 때문에 참고로 해 주세요.

구현해보기

목표

실행 결과의 외형은 이전과 다르지 않습니다.
폴더 구성은 다음과 같습니다.

단계

Component.js 만들기

manifest.json 만들기

index.html 변경

앱 실행

1. Component.js 만들기

index.html과 동일한 계층 구조에 새 Component.js 파일을 만듭니다.
다음 코드를 입력합니다.

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";

    return UIComponent.extend("test.helloworld.Component", {

        metadata : {
            manifest: "json"
        },

        init : function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            // additional initialization can be done here
        }

    });
});

여기서 하고 있는 것은, 이하의 2점입니다.

manifest.json을 참조하는 것을 선언 (metadata : 부분)

초기 처리 정의

2. manifest.json 만들기

index.html과 동일한 계층 구조에 manifest.js 파일을 새로 만듭니다.
다음 코드를 입력합니다.
※이하는 일례로, 실장 내용은 어플리케이션에 의해 바뀝니다

{
    "_version": "1.3.0",
    "sap.app": {
        "_version": "1.3.0",
        "id": "test.helloworld",
        "type": "application",
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "applicationVersion": {
            "version": "1.0.0"
        }
    },
    "sap.ui": {
        "_version": "1.3.0",
        "technology": "UI5",
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        },
        "supportedThemes": [
            "sap_bluecrystal"
        ]
    },
    "sap.ui5": {
        "_version": "1.2.0",
        "rootView": {
            "viewName": "test.helloworld.view.App",
            "type": "XML",
            "id": "app"
        },
        "autoPrefixId": true,
        "dependencies": {
            "minUI5Version": "1.34",
            "libs": {
                "sap.ui.core": {
                    "minVersion": "1.34.0"
                },
                "sap.m": {
                    "minVersion": "1.34.0"
                },
                "sap.ui.layout": {
                    "minVersion": "1.34.0"
                }
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        }
    }
}

여기에서는 크게 나누어 3개의 것을 정의하고 있습니다. 공통점은 응용 프로그램을 실행하는 데 필요한 버전을 지정한다는 것입니다.

sap.app 관련 설정 : 응용 프로그램 ID, 제목 등

sap.ui 관련 설정 : 지원할 장치 유형, UI 테마 등

sap.ui5에 관한 설정 : 최초로 표시하는 뷰(rootView), 종속하는 라이브러리의 버젼 등

각 속성에 대한 자세한 내용은 아래 도움말을 참조하십시오.
Descriptor for Applications, Components, and Libraries

3. index.html 변경

attachInit 메소드를 다음과 같이 변경합니다.
원래 뷰를 직접 표시했지만 Component.js를 호출하는 설정으로 변경합니다. 초기 표시하는 뷰는 manifest.json에서 지정했습니까?

        <script>
           sap.ui.getCore().attachInit(function () {
            /* コメントアウト
              sap.ui.xmlview({
                 viewName : "test.helloworld.view.App"
            */
                new sap.ui.core.ComponentContainer({
                    name : "test.helloworld"
              }).placeAt("content");
           });
        </script>

4. 앱 실행

실행 결과는 다음과 같습니다.

(보충) 파일 호출 순서 정보

디버깅 도구를 살펴보면 index.html⇒Component.js⇒manifest.json 순서로 호출되는 것을 볼 수 있습니다. 반면에 Fiori Launchpad에서 실행하는 경우 index.html을 사용하지 않고 Component.js를 직접 호출합니다. (즉, Component.js가 필수라는 것)