SAP UI5 Week 1 - Unit 4. App Component 만들기
페이지 정보
본문
Week 1 - Unit 4: App Component 만들기
목차
- App Component 만들기
1. App Component 만들기
Component란, SAPUI5 application에 사용되는 독립적이고 재사용 가능한 코드입니다. 즉, Component를 사용하면 application의 요소를 구성할 때 이에 대응하는 코드들을 하나의 view나 controller에 모두 집어 넣어 사용하는 것이 아닌, 각각의 코드를 각각의 Component에 담아 Application을 보다 체계적으로 구성할 수 있게 됩니다. 또한, 각각의 Component들을 독립적으로 재사용할 수 있게 되어 추후 코드의 유지 보수가 더욱 쉽게 됩니다.
webapp 폴더 안에 Component.js 파일을 만들고 다음 코드를 작성하십시오.
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("opensap.myapp.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
}
});
}); Component.js 파일은 metadata 섹션과 init function 섹션으로 구분되어 있습니다. metadata 섹션의 경우 우리가 추가적으로 구현해야 하는 application descriptor를 참조할 수 있도록 하는 부분이며, init function 섹션의 경우 component가 실행될 때 자동으로 실행되는 부분입니다.
해당 Component를 사용하게 되면 index.html 파일에서 뷰를 관리하지 않고 Component가 application의 뷰를 관리하게 됩니다.
다음으로 index.html 파일에서 해당 부분을 추가하십시오.
<!DOCTYPE html>
<html>
<head>
…
<script>
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer({
name : "opensap.myapp"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
이제 index.html에서는 app view가 아닌 component를 인스턴스화 합니다. sap.ui.core.ComponentContainer 함수가 Component.js 파일을 찾아 이를 고유의 namespace인 opensap.myapp에서 인스턴스화 시킵니다.
다음으로 webapp 폴더 안에 manifest.json 파일을 만들고 다음 코드를 작성하십시오.
{
"_version": "1.3.0",
"sap.app": {
"_version": "1.3.0",
"id": "opensap.myapp",
"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": "opensap.myapp.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
}
}
} 모든 application 관련 설정은 manifest.json 파일에 들어갑니다. 다시 말해, application에서 사용하기 위한 각종 라이브러리나 컴포넌트 등이 있다면 이에 대해 manifest.json에서 모두 설정을 해주어야 합니다. SAPUI5 application의 경우, sap.app, sap.ui 그리고 sap.ui5라는 중요한 세 가지 namespace에 대한 설정 작업이 반드시 이루어져야 합니다.
- 이전글SAP UI5 Week 1 - Unit 5. Data Model과 Internationalization 21.08.13
- 다음글SAP UI5 Week 1 - Unit 3. Controller와 Module 설계하기 21.08.13
댓글목록
