티스토리 뷰

SAPUI5

Step 9: Component Configuration

선즈반 2018. 12. 6. 10:24

Step 설명

Model-View-Controller(MVC) 개념의 세 부분 모두를 소개 한 후에 SAPUI5의 다른 중요한 구조적 측면을 보겠습니다.


** 이 단계에서는 모든 UI assets(자산)을 index.html 파일과 독립적인 컴포넌트에  캡슐화 합니다. 컴포넌트들은 SAPUI5 application에서 사용되는 독립적이고 재사용이 가능한 'parts'입니다. resources에 접근할 때마다 index.html  대신에 컴포넌트와 수행할 것입니다. 이러한 구조적 변화는 SAP Fiori 런치패드와 같은 전방위적 컨테이너와 같이 정적인 index.html보다 좀 더 유영한 환경에서 app을 사용할 수 있도록 합니다. 


webapp/Component.js (New)

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

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

application 설정을 저장할 webapp 폴더에 Component.js 파일을 만듭니다. component 'init' 함수는 component가 초기화 될 때 SAPUI5에 의해 자동을 실행됩니다. component는 기본 클래스인 sap.ui.core.UIComponent부터 상속되고 오버라이드된 init 메소드에서 기본 클래스의 init 함수에 'super call'을 해야 합니다.


webapp/Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
      metadata : {
         rootView: {
            "viewName": "sap.ui.demo.walkthrough.view.App",
            "type": "XML",
            "async": true,
            "id": "app"
         }
      },
      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);

         // set i18n model
         var i18nModel = new ResourceModel({
            bundleName : "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.setModel(i18nModel, "i18n");
      }
   });
});

Component.js 파일은 두개의 영역으로 구성됩니다. root view에 대한 참조를 간단히 정의하는 '새로운 metadata 부분 '과 index.html에서 직적접으로 root view를 보여주는 대신에 component가 초기화될 때 호출되는 init 함수를 소개합니다. component는 app view의 표시를 관리하게 됩니다.

init 함수에서 전에 app controller에서 했던것처럼 데이터 모델과 i18n 모델을 인스턴스화(초기화)합니다. 모델은 component의 root view가 아닌 component에 직접 설정된다는 점에 유의합니다. 그러나 중첩된 컨트롤들은 부모 컨트롤로부터 모델을 자동으로 상속하므로 그 모델은 view에서 사용가능 합니다.


webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});

App.controller.js 파일에서 oninit 함수와 필수 모듈을 삭제합니다. 이제 이건 component에서 실행됩니다. 위의 코드에서 보여집니다. 


webapp/index.html

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_belize"
         data-sap-ui-libs="sap.m"
         data-sap-ui-bindingSyntax="complex"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async"
         data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
         }' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            new sap.ui.core.ComponentContainer({
         name: "sap.ui.demo.walkthrough",
         settings : {
            id : "walkthrough"
         }
            }).placeAt("content");

         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

index 페이지에서 app view 대신에 component를 인스턴스화합니다. helper 메소드 sap.ui.core.ComponentContainer는 인자로 전달되는 네임스페이스에서 Compinent.js 파일을 검색해서 component를 인스터스화 합니다.component는 자동으로 위에서 정의한 root view를 로드하고 화면에 표시합니다. index.html파일을 호출하면 app은 여전히 똑같이 보이지만 내부에서는 UI component가 패키징 된 것입니다.


Conventions

- component는 Component.js로 생성합니다.
- app의 모든 UI assets(자산)과 component는 webapp 폴더에 위치합니다.
- index.html 파일은 생산적으로 사용되는 경우 webapp 폴더에 위치합니다.



저작자표시 비영리

'SAPUI5' 카테고리의 다른 글

Step 11: Pages and Panels  (0) 2018.12.06
Step 10: Descriptor for Applications  (0) 2018.12.06
Step 8: Translatable Texts  (0) 2018.12.05
Step 7: JSON Model  (0) 2018.12.05
Step 5: Controllers  (0) 2018.12.05
댓글