안녕하세요
[SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step10(Descriptor for Applications)
에 대해 알아보겠습니다!
manifest.json 파일 소스추
파일을 생성합니다.
mani.fest.json은모든 글로벌 애플리케이션 설정과 매개변수를 포함하는 JSON형식의 구성 객체이다.
위치는 webapp폴더 밑에 만들면 됩니다.
{
"_version": "1.58.0",
"sap.app": {
"id": "ui5.walkthrough",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.108.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "ui5.walkthrough.i18n.i18n",
"supportedLocales": [""],
"fallbackLocale": ""
}
}
},
"rootView": {
"viewName": "ui5.walkthrough.view.App",
"type": "XML",
"id": "app"
}
}
}
소스 설명
1. sap.app
id : 필수, 애플리케이션 구성 요소의 네임스페이스
70자를 넘을 수 없다.
type : 구성하는 내용들
i18n : 리소스 번들 파일에 대한 경로 정의
title : 앱의 리소스 번들에서 참조되는 핸들바 구문의 애플리케이션 제목
description : 앱의 리소스 번들에서 참조되는 핸들바 구문으로 애플리케이션이 수행하는 작업에 대한 짧은 설명 텍스트이다.
applicationVersion : 나중에 애플리케이션을 쉽게 업데이트할 수 있는 버전
2. sap.ui
technology : UI 기술을 지정 -> 위에 소스의 경우 SAP UI5이다.
deviceTypes : 앱에서 지원하는 기기들 여기서는 데스크톱, 태블릿, 휴대전화가 가능
3. sap.ui5
SAP UI5에서 자동으로 처리되는 SAP UI5특정 구성 매개변수를 추가한다.
rootView : 매개변수를 지정시 구성 요소가 자동으로 뷰를 인스턴스화하고 이를 구성 요소의 루트로 사용한다.
dependencies : 애플리케이션에서 사용하는 라이브러리 선언
model : SAP UI5에서 자동으로 인스턴스화되는 모델을 정의
index.html 소스 추
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="ui5.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>
이렇게 되면 이벤트가 실행될 때 컴포넌트가 인스턴스화 된다.
i18n.propertise 파일에 소스 추
showHelloButtonText=클릭 버튼입니다.
helloMsg=Hello {0}
# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5
Component.js 소스추가
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], (UIComponent, JSONModel) => {
"use strict";
return UIComponent.extend("ui5.walkthrough.Component", {
metadata : {
interfaces: ["sap.ui.core.IAsyncContentCreation"],
manifest: "json"
},
init() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
const oData = {
recipient : {
name : "World"
}
};
const oModel = new JSONModel(oData);
this.setModel(oModel);
}
});
});
Step10정도가 되니깐 이해하기가 너무 어려워지네영.. ㅠ
그래도 공부한다치고 포스팅해야하겠습니다.!
틀리거나 아는 부분이 있으면 알려주세요!