4. SAP UI5 JSON Model Apply

SAP UI5 JSON Model Apply

이번 단계에서는 화면에 JSON 형태의 data를 담을 수 있는 JSONModel 변수를 사용하여 화면에 Text 문구를 표시하는 방법을 작성한다. 
(In this step, a method of displaying text phrases on the screen is created using the JSONModel variable that can contain JSON-type data on the screen.)

실행 결과(Results of this step)

실행 순서(Order of execution of this step):

1. Controller에 JSON Model 선언 및 Data를 할당한다.
   (Assign JSON Model Declaration and Data to Controller.)
2. View에서 JSON Model을 참조하여 UI 표시할 수 있도록 처리한다.
   (Process to display UI by referring to JSON Model in View.)

1. Controller에 JSON Model 선언 및 Data를 할당한다.
    (Assign JSON Model Declaration and Data to Controller.)

• webapp/controller/App.controller.js 에 JSON Model 선언 및 Data를 할당한다.
  (Assign JSON Model declaration and Data to webapp/controller/app.controller.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

sap.ui.define([     "sap/ui/core/mvc/Controller" ,     "sap/m/MessageToast",     "sap/ui/model/json/JSONModel"  ], (Controller , MessageToast, JSONModel) => {     "use strict";       return Controller.extend("ui5_tutorial.controller.App", {         onInit() {             const oData = {                recipient : {                   name : "World"                }             };             const oModel = new JSONModel(oData);             this.getView().setModel(oModel);          },          onShowHello() {           MessageToast.show("Hello World");        }     });  });

cs

• 코드 해석(Code description)

• ,"sap/ui/model/json/JSONModel"
  : sap.ui.model.json 라이브러리의 JSONModel을 Import 하기 위한 선언이다.
  (A declaration to import JSONModel from the sap.ui.model.json library.)
  
  
• ], (Controller , MessageToast, JSONModel) => {
  : 위에서 JSONModel을 3번째로 선언 및 Import 했으므로, 3번째 인자의 이름을 JSONModel로 지정하여 import된 라이브러리 할당한다.
  (Since JSONModel was declared and imported for the third time above, the third factor is named JSONModel and the imported library is assigned.)
  
  
• onInit() { ………………………… },
  : onInit() 함수는 Controller가 최초 UI5 framework에 의해서 구조화 호출될 때 1번만 실행되는 UI5 lifecycle 함수이다.
  (The onInit() function is a UI5 lifecycle function that runs only once when the controller is initially called structured by the UI5 framework.)
  
  : 참고(Reference) - UI5 Lifecycle Type
      + onInit: Function is called by the framework during constructor execution. Do your initialization stuff here.
  
      + onBeforeRendering : Controller가 렌더링(화면 생성) 시작되기 전에 프레임워크에 의해 호출된다. 렌더링할 때마다 트리거된다.
  (Called by the framework before the rendering of the control is started. Triggers before every (re)rendering.)
  
      + onAfterRendering : Controller가 렌더링(화면 생성)이 완료된 후 프레임워크에서 호출된다. 렌더링이 완료될 때마다 트리거된다.
  (Called by the framework after the rendering of the control has completed. Triggers after every (re)rendering.)
  
      + onExit : 화면 전환 등으로 Controller가 종료될 때 프레임워크에서 호출된다. 
  (It is called in the framework when the controller shuts down due to screen change, etc.)
  
  
• const oData = {recipient : { name : "World"}};
  : oData 이름의 변수에 JSON 구조의 data를 할당한다.
  (Assign data of JSON structure to variables in the oData name.)
  
  
• const oModel = new JSONModel(oData);
  : oModel 이름의 JSONModel 변수를 선언하고, oModel에 oData 변수를 값으로 할당한다.
  (Declare the JSONModel variable of the oModel name and assign the oData variable to the oModel as a value.)
  
  
• this.getView().setModel(oModel);
  : Controller와 연결된 View(여기서는 App.view.xml)에 JSONModel을 할당하여 Data를 화면에 Mapping한다.
  (The data is mapped to the screen by assigning JSONModel to View (where App.view.xml) connected to the controller.)
  
  : 참고(Reference) - Controller에서 View(UI)를 control(UI 변경, Data 할당 등)하기 위해서는 this.getView() 함수를 통해서 가능하다. 즉, This.getView()를 통해 현재 화면을 불러오고 setModel()을 통해 Data를 화면에 Mapping 한다.
  (In order to control (UI change, Data allocation, etc.) from the controller, it is possible through this.getView() function. That is, the current screen is retrieved through This.getView() and Data is mapped to the screen through setModel().)
  
  

2. View에서 JSON Model을 참조하여 UI 표시할 수 있도록 처리한다.
   (Process to display UI by referring to JSON Model in View.)

• webapp/view/App.view.xml 에 controller에서 할당 받은 JSONModel의 Data를 화면에 표시하도록 로직 수정한다.
  (Modify webapp/view/App.view.xml to display the data of JSONModel assigned by the controller on the screen.)

1 2 3 4 5 6 7 8 9 10 11 12

<mvc:View    controllerName="ui5_tutorial.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>

cs

• 코드 해석(Code description)

• <Input ....... />
  : sap.m 라이브러리에 포함되어 있는 Input Module을 화면에 표시하기 위한 선언이다.
  (A declaration to display the "Input" Module included in the "sap.m" library on the screen.)
  
  
• value="{/recipient/name}"
  : "value" property는 "input" Module에 Text 표시될 값을 setting할 때 사용된다.
  (The value property is used to set the value to be displayed text in the "input" module.)
  
  : "{/ .............. }"은 해당 View에 Mapping되어 있는 JSONModel을 사용하기 위해 약속된 문법이다. 즉,  “{/recipient/name}" 는 View에 할당된 JSOMModel에서 "recipient" 하위에 id가 "name"인 값(value)을 "value" property에 "data binding" 한다는 의미이다.  
  ("{/ ................}" is a promised grammar to use JSONModel mapped to the View. "{/recipient/name}" means "data binding" to "value" property to a JSOMModel assigned to View, where id is "name" below "recipient".)
  
  
• description="Hello {/recipient/name}"
  : Input 모듈 위에 설명 Text의 값을 제어할 때 "description" property를 사용한다.
  (Use the "description" property to control the value of the Description Text on top of the Input module.)
  
  : "Hello"는 고정으로 표시되는 Text이며, "{/recipient/name}"는 View에 할당된 JSOMModel을 사용하여 변화하는 값을 화면에 "data binding" 한다는 의미이다.
  즉, Controller에서 JSONModel의 "/recipient/name" 값을 바꾸면 즉시 화면에도 함께 값이 바뀌게 된다.
  ("Hello" is a fixed text, and "{/recipient/name}" means "data binding" to the screen the changing value using JSOMModel assigned to View. In other words, if you change the "/recipient/name" value of JSONModel in the controller, the text changes immediately on the screen as well.)
  
  
• valueLiveUpdate="true"
  : "Input" Module 안의 "value"를 JSONModel로 할당했으므로, Input Module의 값이 변경되면, 즉시 화면에 할당된 JSONModel의 값이 변경된다.
  따라서, valueLiveUpdate="true" 일때 "Input" Module에 값을 변경하면 바로 "description" 값도 변경된다.
  (Since the "value" in the "Input" module is allocated as JSONModel, when the value of the input module changes, the value of the JSONModel allocated to the screen changes immediately. Therefore, if you change the value to the "Input" module when valueLiveUpdate="true", the "description" value also changes immediately.)
  
  
  
  : 참고(Reference) - valueLiveUpdate="false"이면, "Input" Module에 값을 변경해도 "description" 값은 변경되지 않는다.
  (If valueLiveUpdate="false", changing the value in the "Input" module does not change the "description" value.)
  
  
  
  
• width="60%"
  : CSS 속성을 위한 property로 "Input" Module의 width를 60% 크기로 지정한다.
  (Specify the width of the "Input" module as a property for CSS properties as 60% size.)