티스토리 뷰

SAPUI5

Step 7: JSON Model

선즈반 2018. 12. 5. 11:27

Step 설명

view와 controller를 설정했으니 이제는 MVC 중에서 M에 대해 생각해 보자.


Preview

input 필드와 입력값 보여주기

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});
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
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   // JSONModel을 사용하기 위해 JSONModel의 경로를 등록합니다
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      // onInit 함수는 controller가 생성될 때 framework에 의해 실행되는 
      // SAPUI5의 lifecycle methods 중의 하나입니다. control의 생성자 함수와 비슷합니다.
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});
cs

onInit 함수에 JSON Model을 인스턴스화 합니다. 이 Model은 'recipient'라는 하나의 프로퍼티만 가지고 있습니다. 그리고 'recipient' 프로퍼티에는 'name'이라는 하나의 프로퍼티만 존재합니다.

XML view에서 이 Model을 사용하기 위해 view에서 setModel이라는 함수를 호출하고 새로 생성된 Model을 할당합니다.

MessageToast control은 정적인 "Hello World" 메세지를 보여주고 있습니다. 다음 step에서 번역된 글자를 어떻게 읽어들이는지 보여주려고 합니다.


webapp/view/App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press="onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

sap.m.Input control을 view에 추가합니다. 이를 통해 사용자는 인사말을 받을 사람을 입력할 수 있습니다. XML 뷰에 대한 선언적 바인딩 구문을 사용하여 SAPUI5 모델에 해당 값을 바인딩합니다.
    - 중괄호는 'recipient' 객체에서 'name' 프로퍼티의 값으로부터 얻어진 데이터를 가리킵니다. 이를 데이터바인딩이라고          부릅니다.                                                                                                                                                  - /recipient/name는 모델의 경로를 선언한 것입니다.                                                  


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-compatVersion="edge"   
         data-sap-ui-preload="async" 
	 data-sap-ui-resourceroots='{
		"sap.ui.demo.walkthrough": "./"
	}' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
			sap.ui.xmlview({
				viewName: "sap.ui.demo.walkthrough.view.App"
			}).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

value 속성의 바인딩은 단순한 바인딩 패턴만 포함된 간단한 바인딩 예제입니다. description 속성에서 볼 수 있듯이 text와 바인딩 패턴을 더 복잡한 바인딩 결과에 결합할 수 있습니다. 복잡한 바인딩 구문을 사용하기 위해 bootstrap parameter data-sap-ui-compatVersion를 edge로 설정해 전역적으로 이것을 활성화해야 합니다. 이 설정이 생략되면 표준 바인딩 구문만 사용가능한데 {/recipient/name}"는 사용가능 하고 "Hello {/recipient/name}"는 사용불가능한 것을 의미합니다.


이번 단계에서는 매우 중요한 부분이 나옵니다. SAPUI5의 핵심 기능인 Model 바인딩입니다. 제가 알기론 Model의 바인딩은 default로 양방향 바인딩으로 알고 있습니다. view(화면)에서 수정하건 controller에서 수정하건 양쪽 모두에게 영향을 미치는 겁니다. 이게 처음 이해하기가 어렵지 매우 편리한 기능입니다. angularjs나 vue.js에서도 동일한 개념으로 사용하고 있습니다.



이전 내용 - Step 6: Modules

다음 내용 - Step 8: Translatable Texts



저작자표시 비영리

'SAPUI5' 카테고리의 다른 글

Step 9: Component Configuration  (0) 2018.12.06
Step 8: Translatable Texts  (0) 2018.12.05
Step 5: Controllers  (0) 2018.12.05
Step 6: Modules  (0) 2018.12.05
Step 4: XML Views  (0) 2018.12.05
댓글