Step 7: JSON Model

opensapkr·2019년 7월 3일

Walkthrough ui5

ui5-Walkthrough

목록 보기

8/39

이전 단계에서 뷰와 컨트롤러를 설정 했으므로 이번 튜토리얼에선 Modeling에 대해서 알아보자

Preview

Coding

Walkthrough - Step 7.

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");
      }
   });
});

컨트롤러에 init 함수를 추가한다. onInit은 컨트롤러 생성시 프레임 워크에서 호출하는 SAPUI5의 라이프 사이클 메소드 중 하나이며 컨트롤의 생성자 함수와 유사하다.
함수 내부에서 JSON 모델을 인스턴스화한다. 모델의 데이터에는 "recipient"에 대한 단일 속성만 포함되며 내부에는 이름에 대한 하나의 추가 속성이 추가된다.

XML 뷰 내에서이 모델을 사용하려면 뷰에서 setModel 함수를 호출하고 새로 생성 된 모델을 전달하면 모델이 뷰에 설정된다.

Message toast는 정적 인 "Hello World"메시지를 보여준다. 다음 단계에서 번역 된 텍스트를 로드하는 방법을 알려준다.

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 컨트롤을 추가한다. XML 뷰에 대한 선언적 바인딩 구문을 사용하여 SAPUI5 모델에 해당 값을 바인딩한다.

중괄호 {...}안에 /recipient/name은 모델의 경로를 선언하면 데이터를 바인딩 할 수 있다.

webapp/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/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-async="true"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'
		data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
	</script>
	<script src="index.js"></script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

App.view xml 인풋 컨트롤의 value 속성은 바인딩 패턴만 포함하는 단순 바인딩이다.

App.view xml 인풋 컨트롤의 description 속성에서 텍스트와 바인딩 패턴을 더 복잡한 바인딩 결과에 결합 할 수 있다.

복잡한 바인딩 구문을 사용하려면 bootstrap 매개 변수 data-sap-ui-compatVersion=“edge”로 설정하여 전역으로 활성화 해야한다.

이 설정을 생략하면 표준 바인딩 구문 만 허용되며 "{/ recipient / name}"은 정상적으로 작동하지만 "Hello {/ recipient / name}"은 더 이상 작동하지 않는다.

note:
스크립트에서 data-sap-ui-compatVersion="edge" 또는 data-sap-ui-bindingSyntax="complex"를 사용할 수 있다.
"edge"호환 모드를 설정하면 complex binding 구문이 자동으로 활성화된다.
Edge 모드는 자동으로 다른 기능을 수동으로 활성화해야하는 호환성 기능을 활성화한다.
호환성 버전 정보 참조