6. SAP UI5 Component.js Configuration
SAP UI5 Component.js Configuration
이번 단계에서는 Component.js를 활용하여 application 전체에 공통으로 사용 가능한 Model, Function 등을 관리하여 Application의 동작을 더욱 유연하게 할 수 있다. 추가적으로 이 단계에서 모든 UI 자산을 index.html 파일과 독립적인 구성 요소로 캡슐화 한다. 이 아키텍처 변경을 통해 Application은 정적 인덱스.html 페이지보다 더 유연한 환경에서 사용할 수 있다.
(In this step, you can use Component.js to manage models and functions that can be used in common throughout the application to make the application more flexible. Additionally, at this step, all UI assets are encapsulated into independent components of the index.html file. This architectural change allows the application to be used in a more flexible environment than a static index.html page.)
실행결과(Results of this step)
이전 단계의 결과와 동일한 UI와 동작을 보여준다. 단, 이번 단계는 Application 내부적인 동작을 좀 더 유연하게 관리하기 위한 단계이다.
(It shows the same UI and operation as the result of the previous step. However, this step is to manage the internal operation of the application more flexibly.)
실행 순서(Order of execution of this step):
- Component.js 파일 생성한다.
(Create the Component.js file.) - Manifest.json 파일 내용 수정한다.
(Modify the contents of the Manifest.json file.) - Index.html 파일 수정한다.
(Modify the Index.html file.) - Index.js 파일 삭제한다.
(Delete the Index.js file.) - i18n.properties에 내용 추가한다.
(Add content to i18n.properties.) - App.controller.js에 내용 수정한다.
(Modify the content in App.controller.js.)
1. Component.js 파일 생성한다.
(Create the Component.js file.)
- webapp/Component.js 파일을 신규 생성한다.
(Create a new webapp/Component.js file.) - Component.js 파일의 init()에서 Application 전체에서 사용할 Model을 선언하고, Data를 바인딩한다.
(Declare the model to be used throughout the application in init() of the Component.js file and bind the Data.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel" ], (UIComponent, JSONModel) => { "use strict"; return UIComponent.extend("ui5_tutorial.Component", { metadata : { interfaces: ["sap.ui.core.IAsyncContentCreation"], manifest: "json" }, init() { UIComponent.prototype.init.apply(this, arguments); const oData = { recipient : { name : "World" } }; const oModel = new JSONModel(oData); this.setModel(oModel); } }); }); |
- 코드 해석(Code description)
- return UIComponent.extend("ui5_tutorial.Component", { .......... }
: Component는 실제로는 sap.ui.core에 UIComponent 모듈을 의미하며, {.....}에 Application 전체에서 사용할 코드를 작성한다. 예: Global 변수, Global 함수
(Component actually means the UICcomponent module in sap.ui.core, write the code for use throughout the application in {...}. (e.g., Global variable, Global function).) - metadata : {……………}
: UIComponent 동작에 필요한 값을 Setting 한다.
(Set the values required for the operation of the UIComponent.) - interfaces: ["sap.ui.core.IAsyncContentCreation"],
: UIComponent를 비동기식으로 동작하게 한다는 의미이다.
(It means that UIComponent operates asynchronously.) - manifest: "json"
: descriptor(여기서는 manifest.json 파일)를 사용하여 추가적인 Setting 정보를 Json 형식으로 관리하고 UI5Component가 인스턴스화 될 때 해당 정보를 사용한다.
(Additional setting information is managed in Json format using descriptor (where the manifest.json file) and is used when UI5Component is instantiated.) - UIComponent.prototype.init.apply(this, arguments);
: UIComponent의 초기화를 위해 약속된 구문이다.
(It is a promised phrase to initialize UIComponent.) - const oData = {
recipient : {
name : "World"
}
};
: oData 이름의 변수에 Json 구조로 recipient 하위의 name에 "World" 값을 할당한다.
(Assign a "World" value to the "name" below the "recipient" with a Json structure to the variable in the "oData" name.) - const oModel = new JSONModel(oData);
: oModel 이름의 JSONModel을 선언하고 Json 구조의 oData를 data로 할당한다.
(Declare the JSONModel of the "oModel" name and assign the "oData" of the Json structure as data.) - this.setModel(oModel);
: "oModel"을 Application 전체에서 사용 가능하도록 바인딩한다.
(Bind "oModel" to be available throughout the application.)
2. Manifest.json 파일 내용 수정한다.
(Modify the contents of the Manifest.json file.)
- Component.js에서 사용할 추가 정보를 작성한다.
(Write additional information for use in Component.js.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | { "_version": "1.12.0", "sap.app": { "id": "ui5_tutorial", "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_tutorial.i18n.i18n", "supportedLocales": [""], "fallbackLocale": "" } } }, "rootView": { "viewName": "ui5_tutorial.view.App", "type": "XML", "id": "app" } } } |
- 코드 해석(Code description)
- "sap.app": {
"id": "ui5_tutorial",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
},
: application configuration setting - id: 해당 application의 고유 id
(Unique id for that application) - i18n: resource bundle file이 모여 있는 경로
(The path where the resource bundle file is gathered) - title: application의 title 정보로 i18n resource bundle과 연동하여 작성하는 방식으로 구현됨
(It is implemented in conjunction with the i18n resource bundle as the title information of the application) - description: application에 description 정보로 i18n resource bundle과 연동하여 작성하는 방식으로 구현됨
(It is implemented in the application in a way that is written in conjunction with the i18n resource bundle as description information.) - type: 어떤 type의 configuration인지 작성 – 실습에서는 application의 configuration이기에 application으로 작성
(Create what type of configuration it is – in practice, it is an application configuration, so write it as an application.) - applicationVersion: 해당 application의 현재 Version 정보를 작성
(Create current version information for that application.) - "sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
: UI configuration Setting - technology: 우리는 SAPUI5를 사용하므로 UI5로 작성
(We use SAPUI5 so write with UI5.) - deviceTypes: 해당 Application에 제공할 호환되는 Device 정보를 작성
(Create compatible device information for that application.) - "sap.ui5": {
"dependencies": {
"minUI5Version": "1.108.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "ui5_tutorial.i18n.i18n",
"supportedLocales": [""],
"fallbackLocale": ""
}
}
},
"rootView": {
"viewName": "ui5_tutorial.view.App",
"type": "XML",
"id": "app"
}
}
:UI5 configuration setting - dependencies: 해당 Application에서 사용할 라이브러리 정보 관리
(Manage library information for use by that application.) - minUIVersion: 라이브러리의 최소 필요한 Version 정보
(Minimum required version information for the library.) - libs: 해당 application에서 사용할 라이브러리 List 작성
(Create a library list for use by that application.) - models: application에서 사용할 model 정의
(Defining the model to use with the application.) - i18n: “i18n” 이름으로 하위에 Setting된 Model 을 사용
(Use a set model under the name "i18n") - supportedLocales: application이 지원할 다국어 List 작성.
(Create a multilingual list that the application supports.)
예: “”은 i18n.properties 파일을, “en”은 i18n_en.properties 파일을, “ko”는 i18n_ko.properties 파일과 mapping되어 다국어 처리함
(For example, " " is mapped to the i18n.properties file, "en" is mapped to the i18n_en.properties file, and "ko" is mapped to the i18n_ko.properties file for multilingual processing.) - fallbackLocale: application에서 지원하는 언어 외의 언어로 호출이 되었을 때 기본으로 보여질 언어
(Language to be viewed as default when called to a language other than the one supported by the application) - rootView: application에 최상위 View 정보 Setting
(Setting top-level information in application.)
3. Index.html 파일 수정한다.
(Modify the Index.html file.)
- Component.js를 활용할 수 있도록 초기화 부분 수정한다.
(The initialization is partially modified to allow Component.js to be utilized.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI5 Tutorial</title> <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_horizon" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-async="true" data-sap-ui-onInit="module:sap/ui/core/ComponentSupport" data-sap-ui-resourceroots='{ "ui5_tutorial": "./" }'> </script> </head> <body> <body class="sapUiBody" id="content"> <div data-sap-ui-component data-name="ui5_tutorial" data-id="container" data-settings='{"id" : "ui5_tutorial"}'></div> </body> </body> </html> |
- 코드해석(Code description)
- data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
: Component.js를 초기화에 사용하겠다는 선언이다.
(Declaration to use Component.js for initialization.) - <div data-sap-ui-component data-name="ui5_tutorial" data-id="container" data-settings='{"id" : "ui5_tutorial"}'></div>
: Compenent.js의 내용을 해당 영역에 인스턴스화 한다.
(Instance the content of Compent.js to the corresponding area.)
4. Index.js 파일 삭제한다.
(Delete the Index.js file.)
- 초기화에 사용하던 index.js 파일 내용을 component.js와 manifest.json 파일로 대체하여 index.js는 불필요하다. 이에, webapp/index.js 파일을 삭제한다.
("Index.js" is unnecessary by replacing the contents of the "index.js" file used for initialization with "Component.js" and "manifest.json" files. Thus, delete the "webapp/index.js" file.)
5. i18n.properties에 내용 추가한다.
(Add content to i18n.properties.)
- "manifest.json"에서 활용한 {appTile}. {appDescription} 내용 추가한다.
(Add {appTile}.{appDescription} utilized in "manifest.json".)
1 2 3 4 5 6 7 8 | # App Descriptor appTitle=Hello World appDescription=A simple tutorial app that explains the most important concepts of SAPUI5 # Hello Panel showHelloButtonText=Hello helloMsg=Hello {0} |
6. App.controller.js에 내용 수정한다.
(Modify the content in App.controller.js.)
- "Component.js"와 "manifest.json"으로 옮겨간 Model 관련 구문을 삭제한다.
(Delete the Model-related phrases moved to "Component.js" and "manifest.json".) - JSONModel은 Component.js로 ResourceModel은 manifest.json으로 옮겨갔다.
(JSONModel moved to "Component.js" and ResourceModel moved to "manifest.json".)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | sap.ui.define([ "sap/ui/core/mvc/Controller" , "sap/m/MessageToast" ], (Controller , MessageToast) => { "use strict"; return Controller.extend("ui5_tutorial.controller.App", { onShowHello() { const oBundle = this.getView().getModel("i18n").getResourceBundle(); const sRecipient = this.getView().getModel().getProperty("/recipient/name"); const sMsg = oBundle.getText("helloMsg", [sRecipient]); MessageToast.show(sMsg); } }); }); |
댓글
댓글 쓰기