Walkthrough #7

7단계: JSON 모델

이제 뷰와 컨트롤러를 설정했습니다.

앱에 입력 필드를 추가하고, 해당 값을 모델에 바인딩하고, 동일한 값을 입력 필드의 설명에 바인딩합니다.

입력 필드 및 입력 필드의 값을 표시

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

컨트롤러에 onInit 기능을 추가합니다. 컨트롤이 생성될 때 프레임워크에서 호출되는 SAPUI5의 메서드 중 하나입니다.

함수 내부는 JSON 모델을 인스턴스화합니다. 모델의 데이터에는 "받는 사람"에 대한 단일 속성만 포함되어 있으며 이 안에는 이름에 대한 하나의 추가 속성도 포함됩니다.

XML 뷰 내에서 이 모델을 사용할 수 있도록 뷰의 함수를 호출하고 새로 만든 모델을 전달합니다. 이제 모델이 뷰에 설정됩니다.

메시지 토스트는 정적 "헬로 월드" 메시지를 표시합니다. 다음 단계에서 번역된 텍스트를 로드하는 방법을 보여 드리겠습니다.

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>

뷰에 컨트롤을 추가합니다. 이를 통해 사용자는 인사말을 위해 받는 사람을 입력할 수 있습니다. XML 뷰에 대한 선언적 바인딩 구문을 사용하여 해당 값을 SAPUI5 모델에 바인딩합니다.

The curly brackets {…}은 데이터가 recipient 속성값에서 가져온다는 것을 나타냅니다. 이를 "데이터 바인딩"이라고 합니다.
/recipient/name declares the path in the model.

webapp/index.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>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

값 특성의 바인딩은 바인딩 패턴만 포함하는 간단한 바인딩 예제입니다. 또한 설명 특성에서 볼 수 있듯이 텍스트 및 바인딩 패턴을 보다 복잡한 바인딩 결과에 결합할 수도 있습니다. 소위 복잡한 바인딩 구문을 사용할 수 있도록 하려면 부트스트랩 매개 변수를 설정하여 전역적으로 활성화해야 합니다. 이 설정이 생략되면 표준 바인딩 구문만 허용되므로 "Hello"는 더 이상 작동하지 않습니다.

메모❗
스크립트에서 사용하거나 사용할 수 있습니다. "edge" 호환성 모드를 설정하면 복잡한 바인딩 구문이 자동으로 활성화됩니다. 이 모드를 사용하면 수동으로 활성화해야 하는 호환성 기능을 자동으로 사용할 수 있습니다. 자세한 내용은 호환성 버전 정보를 참조해야합니다.

규칙

가변 이름에 대해 헝가리어 표기를 사용합니다.
표기법 출처 : https://myeonguni.tistory.com/1595

Author And Source

이 문제에 관하여(UI5 Walkthrough #7), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@racetam_noey/UI5-Walkthrough-7

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

UI5 Walkthrough #7