모든 응용 프로그램별 컴포넌트 설정은
manifest.json이라는 설명자 파일에 추가한다.
이를 활용하면 설정하는 부분을 응용 프로그램과 분리하여 더욱 유연하게 만든다.
예를 들어 모든 SAP Fiori 애플리케이션은 Component에서 구현되며 SAP Fiori lanuchpad에서 호스팅되기 위해 descriptor 파일이 제공한다.
SAP Fiori launchpad는 응용 프로그램 컨테이너 역할을하며 bootstrap에 대한 로컬 HTML 파일없이 응용 프로그램을 인스턴스화한다.
대신 descriptor(manifest.josn) file이 파싱되고 component 가 현재 HTML 페이지로 로드된다.
이렇게하면 각 앱은 언어 속성, 지원되는 기기 등의 로컬 설정을 정의 할 수 있다.
또한 descriptor file을 사용하여 추가 리소스를 로드하고 i18n 리소스 번들과 같은 모델을 인스턴스화 할 수 있다.
Preview
Coding
Caution: 자동 모델 인스턴스화는 SAPUI5 버전 1.30에서만 사용할 수 있다.
webapp/manifest.json (New)
{
"_version": "1.12.0",
"sap.app": {
"id": "sap.ui.demo.walkthrough",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "sap.ui.demo.walkthrough.view.App",
"type": "XML",
"async": true,
"id": "app"
},
"dependencies": {
"minUI5Version": "1.60",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
}
}
}
}
}manifest.json 파일의 내용은 전역 설정 및 parameters를 포함하는 JSON 형식의 구성 객체다.
manifest 파일은 응용 프로그램의 구성 요소 및 라이브러리에 대한 설명자라고하며 응용 프로그램에 사용될 때 "descriptor"또는 "app descriptor"라고도 한다.
이 파일은 webapp 폴더에 저장되고 SAPUI5에서 읽혀 component를 인스턴스화한다.
manifest.json 파일에는 네임 스페이스로 정의되는 세 가지 중요한 섹션이 있다.
1) sap.app : sap.app 네임 스페이스는 다음과 같은 응용 프로그램 별 특성을 포함
-
id (필수) : 애플리케이션 구성 요소의 네임 스페이스
-
type: 구성하려는 항목을 정의
-
i18n: 자원 번들 파일에 대한 경로를 정의
-
title: 앱의 리소스 번들에서 참조하는 핸들 바 구문의 애플리케이션 제목
-
description : 핸들 바 구문에서 응용 프로그램이 수행하는 간단한 설명 텍스트
-
applicationVersion: 응용 프로그램을 쉽게 업데이트 할 수 있는 응용 프로그램 버전
2) sap.ui : sap.ui 네임 스페이스는 다음과 같은 UI 관련 속성을 제공한다.
-
technology : 이 값은 UI 기술을 지정 우리의 경우 SAPUI5를 사용
-
deviceTypes : 앱에서 지원하는 기기 (데스크톱, 태블릿, 휴대 전화)를 지정 (기본값은 모두 true).
3) sap.ui5 :sap.ui5 네임 스페이스는 SAPUI5에 의해 자동으로 처리되는 SAPUI5 관련 구성 매개 변수를 추가
-
rootView : component가 자동으로 view 를 인스턴스화하고 이것을 루트로 사용
-
dependencies: 애플리케이션에 사용 된 UI 라이브러리를 선언
-
models: 설명자의 이 섹션에서는 앱이 시작될 때 SAPUI5에 의해 자동으로 인스턴스화 될 모델을 정의
로컬 리소스 번들을 정의 할 수 있다. 모델 "i18n"의 이름을 키로 정의하고 namespace로 번들 파일을 지정한다.
이전 단계에서와 마찬가지로 번역 된 텍스트가있는 파일은 i18n 폴더에 저장되고 i18n.properties로 이름이 지정된다.
우리는 단순히 파일의 경로 앞에 앱의 namespace를 접두사로 붙인다.
app 구성 요소의 init 메소드에서 수동 인스턴스화를 하는 경우 이 부분을 삭제한다.
호환성을 위해 루트 객체와 각 섹션은 내부 속성 _version에 설명자 버전 번호 1.1.0을 명시한다.
기능은 추후 버전의 설명자에서 추가되거나 변경 될 수 있으며 버전 번호는 설명자를 읽는 도구로 응용 프로그램 설정을 식별하는 데 도움이 된다.
note:
resource bundle의 등록 정보는 descriptor에서두 개의 중괄호로 묶인다.
이것은 SAPUI5 데이터 바인딩 구문이 아니라 핸들 바 구문의 설명자에서 resource bundle에 대한 variable reference이다.
언급 된 text는 응용 프로그램에는 표시되지 않지만 SAP Fiori launchpad와 같은 응용 프로그램 컨테이너에서 읽을 수 있다.
webapp\index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true">
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>index.html의 부스크립트에서 ComponentSupport 모듈을 활성화하고 sap.m 라이브러리를 제거한다.
앞으로 div 태그를 통해 본문의 구성 요소를 선언한다. 이것은 onInit 이벤트가 실행될 때 구성 요소를 인스턴스화한다.
따라서 더 이상 index.js가 필요없다.
webapp/i18n/i18n.properties
# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of OpenUI5
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}webapp/Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
}
});
});component의 메타 데이터 섹션에서 rootView 속성 키를 json 값으로 바꾼다.
이것은, component가 instance화 될 때 자동적으로 로드 되어 내용을 정의한다.
이제 resource bundle에 대한 Modeling관련 부분을 완전히 제거 할 수 있다.
SAPUI5는 descriptor의 구성 항목을 사용하여 자동으로 수행된다.
sap/ui/model/resource/ResourceModel 의존성 주입을 제거할 수 있다.
이제 익명 콜백함수로 내부에서 이것을 사용하지 않는다.
Conventions
-
설명자 파일의 이름은 manifest.json이며 webapp 폴더에 있다.
-
번역 가능한 문자열을 사용하여 앱의 제목과 설명을 정의한다.
Related Information
