이 단계에서는 UI에 보여줄 data Model을 만들어보자.📝📝📝
📌 Model type
다양한 model 형식을 통해 데이터를 정의할 수 있다.
- Javascript Object Notation(JSON)
- Extensible Markup Language(XML)
- OData
- Your own custom format (not converted in this tutorial)
Client-Side Model
JSON, XML 및 resource model이 생성되면, 여기에 포함된 데이터가 single request로 로드된다.(클라이언트에 로컬로 저장된 파일에서 또는 웹 서버에서 요청하여). 즉, model의 데이터가 요청된 후 전체 모델이 애플리에케이션에 알려진다. 이러한 모델을 클라이언트 측 모델이라고 하며 필터링 및 정렬과 같은 작업은 클라이언트에서 로컬로 수행된다.
Server-Side Model
OData model은 server-side model이다. 이는 애플리케이션의 모델의 데이터를 필요로 할 때마다 서버에서 요청해야 함을 의미한다. 이러한 요청은 모델의 모든 데이터를 거의 반환하지 않는다. 일반적으로 클라이언트 애플리케이션에서 요구하는 것보다 훨씬 더 많은 데이터가 필요하기 때문이다. 따라서 정렬 및 필터링과 같은 작업은 항상 서버에 위임되어야 한다. ex) 현재 이 게시글에서 생성된 애플리케이션이 odata model을 이용하고 있다. 참고하길 바란다.
📌 JSON Model을 통한 databinding
하단의 이미지처럼 "Hello World!"라는 데이터를 Text element에 databinding을 해서 UI에 표시해보자.
- MainView.view.xml
<mvc:View
controllerName="databinding.controller.MainView"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
>
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<VBox class="sapUiSmallMargin">
<!-- 1. 현재 View에 설정한 데이터모델에 바인딩할 경로를 설정해주면 된다. -->
<Text text="{jsonModel>/greetingText}"/>
<!-- 2. 해당 text element를 가져와서 binding 시켜주면 된다.-->
<Text id="textbinding"/>
</VBox>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
- MainView.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller, JSONModel) {
"use strict";
return Controller.extend("databinding.controller.MainView", {
onInit: function () {
// object literal을 JSONModel에 전달하고 생성된 JSONModel 인스턴스를 oModel 변수에 저장
const oModel = new JSONModel({
greetingText: 'Hello World!'
});
// 현재 view에 model을 설정
this.getView().setModel(oModel, 'jsonModel');
// model data를 text property에 binding
const oBindingInfo = {path: 'jsonModel>/greetingText'}
this.byId('textbinding').bindText(oBindingInfo);
}
});
});
MainView.view.xml에 binding path를 묶는 {}는 자동으로 binding으로 해석된다. 이러한 binding instance를 PropertyBindings라 한다. 이 경우 바인딩 경로의 시작 부분에 있는 / 가 absolute binding을 나타내므로 control's text property는 기본 Model root에 있는 greetingText에 바인딩된다.
📌 번외 (메소드)
이 글을 작성하기위해 찾아본 class들과 해당 클래스에 속한 메소드들이다. 위에서 사용된 메소드들의 정의는 아래 사이트를 참고해주길 바란다.
