sapui5 Documentation을 참조해서 내가 이해한 databinding tutorial을 정리해본다.📝📝📝

📌 개요

Model에 데이터가 있는 경우 UI element에 data binding을 적용해서 데이터를 동기화 상태로 유지하고 UI에서 데이터 조작을 할 수 있다. 즉, data binding은 Model과 View가 서로 통신하는 방법을 정의한다.
data binding의 경우 Model과 binding intance가 필요하다.

• Model 인스턴스는 데이터를 가지고 있고 데이터를 설정하거나 서버에서 데이터를 검색하는 메소드를 제공한다. 또한 데이터에 대한 바인딩을 만드는 방법을 제공한다.
• binding 인스턴스는 binding information을 가지고 데이터가 변경될 때 마다 발생하는 이벤트를 제공한다.

  

📌 코드 작성(예제)

data binding에 대한 개념을 간단히 숙지했다. 그럼 이제 sapui5 docmantation에서 제공해주는 예제를 통해 직접 코드를 치면서 알아가보자. (작성하는 예제 코드들은 git 주소에 있으므로 참고하길 바란다.)

프로젝트 셋팅

해당 예제는 vscode로 작성되있으며 초기 ui5 세팅은 vscode 셋팅을 참조해주길 바란다. 초기 프로젝트를 셋팅하고 프로그램을 실행시키면 다음의 화면처럼 보이게 될 것이다.

resourceBundle Model

manifest.json 에 기본적으로 i18n이라는 model이 정의되어있으며 해당 model의 경로, type, 속성들이 명시되어있다.
<- model의 데이터를 UI(View)에 표시하기 위해서 databinding이 필요하며 이를 위해서는 표시할 데이터와 속성의 경로를 알아야 하기 때문이다!

  "sap.app": {
  	...
    "i18n": "i18n/i18n.properties",
    ...
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "databinding.i18n.i18n"
        }
      }
    },

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>
            	<!-- i18n Model에서 title이라는 propertyName으로 databinding이 되어있음 -->
				<Page id="page" title="{i18n>title}">
					<content />
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

i18n.properties에는 다음과 같이 세팅되어져 있으며 title이라는 property의 데이터를 "databinding"으로 바꿔줘보자.

#title=Title 
title=databinding
appTitle=MainView
appDescription=App Description

변경된 model의 데이터가 반영됨을 알 수 있다.

🔗 참조 주소
data binding tutorial (sdk)
data binding 개념 (blog)
Model (sdk)
View (sdk)