📌 개요

single template control을 하드 코딩하는 대신 factory function을 사용하여 runtime에 수신된 데이터를 기반으로 다른 control을 생성한다.
이 접근 방식은 훨씬 더 유연하며 복잡하거나 이질적인 데이터를 표시할 수 있다.

📌 예제

• view.xml

      <Panel headerText="{i18n>panel4HeaderText}" class="sapUiResponsiveMargin" width="auto">
        <List id="ProductList" headerText="{i18n>productListTitle}" items="{
									path: 'products>/Products',
									factory: '.productListFactory'}">
          <dependents>
            <core:Fragment fragmentName="databinding.view.ProductSimple" type="XML"/>
            <core:Fragment fragmentName="databinding.view.ProductExtended" type="XML"/>
          </dependents>
        </List>
      </Panel>

이전에 product list를 가지고 있던 List XML element는 이제 fragment로 축소되지만 그렇지 않으면 list는 비어 있다. 이 list를 채울 수 있는 factory function이 없으면 이 list는 항상 비어 있다.

• controller.js

'sap/m/ObjectAttribute'], function (..., ObjectAttribute) {
	"use strict";
	...
	ProductListFactory: function(sId, oContext) {
		let oUIControl;
		
		// clone에 의존하는 data를 기반으로 결정
		if (oContext.getProperty('UnitsInStock') === 0 && oContext.getProperty('Discontinued')) {
			// The item is discontinued, so use a StandardListItem
			oUIControl = this.byId('productSimple').clone(sId);
		} else {
			// The item is available, so we will create an ObjectListItem
			oUIControl = this.byId('productExtended').clone(sId);
			
			// The item is temporarily out of stock, so we will add a status
			if ( oContext.getProperty('UnitsInStock') < 1 ) {
				oUIControl.addAttribute(new ObjectAttribute({
					text : {
						path: 'i18n>outOfStock'
					}
				}));
			}
		}
		return oUIControl;
		
	}
}

factory function은 이전 단계에서 정의한 XML template과 유사한 관련 binding context에 대한 control을 반환한다.
이 factory function이 반환하는 control type은 sap.m.List 객체의 항목 aggregation에 적합해야 한다.
이 경우 생성할 항목의 context에 저장된 데이터를 기반으로 StandardListItem 또는 ObjectListItem을 반환한다.

현재 재고수준과 제품의 단종 여부를 확인하여 어떤 종류의 제어장치를 반품할지 결정한다. 두 옵션 모두 XML을 놓고
로드하여 뷰 로직을 선언적으로 정의하고 현재 컨트롤러에 할당할 수 있다. 재고 레벨이 0이고 단종된 경우 ProductSimple(sap.m.StandardListItem),
그렇지 않은 경우 ProductExtended(sap.m.ObjectListItem)를 사용한다.

XML 프래그먼트는 각 경우에 한 번만 로드하면 되므로 컨트롤러에 helper varaible을 저장하고 한 번만 로드하여
Singleton을 만든다. list의 각 항목에 대해 컨트롤러에 저장된 해당 control을 복제한다. 이 메소드는 list 항목의 context에 binding할 수 있는 control의 새 복사본을 만든다.
참고: facotry function에서는 생성한 control의 life cycle에 대한 책임이 있다.

단종된 제품은 아지만 재고가 0인 경우 일시적으로 품절된다. 이 경우 Javascript를 사용하여 control에 재고 없음 메시지를 추가하는 단일 ObjectAttribute를 추가한다.
XML view나 fragment에서 선언적 정의와 유사하게 data binding syntax을 사용하여 속성을 바인딩할 수 있다.
이 경우 텍스트를 리소스 번들의 속성에 바인딩한다.
속성은 목록 항목의 하위 항목이므로 할당된 모든 모델과 현재 바인딩 컨텍스트에 액세스할 수 있다.

• ProductSimple.fragement.xml
  이 XML은 재고 수준이 0이면서 제품도 단종된 경우 사용되는 StandardListItem을 정의한다.
  이것은 info 프로퍼티에서 경고 아이콘과 Product Discontinued 메시지를 정의하는 간단한 예이다.

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:core="sap.ui.core">
	<StandardListItem
		id="productSimple"

		icon="sap-icon://warning"
		title="{products>ProductName} ({products>QuantityPerUnit})"
		info="{i18n>Discontinued}"
		type="Active"
		infoState="Error"
		press=".onItemSelected">
	</StandardListItem>
</core:FragmentDefinition>

• ProductExtended.fragment.xml
  확장된 예에서는 제품에 대한 자세한 내용을 표시하기 위해 ObjectListItem을 만든다.
  프로퍼티는 현재 data binding context의 필드에 바인딩되므로 할당된 컨트롤러에 정의된 타입, 포맷터 및 모든 처리기를 사용할 수 있다.
  그러나 더 복잡한 로직은 XML에서 선언적으로 정의할 수 없다. 따라서 재고 수준이 0일 때 Javascript를 사용하여 컨트롤러에 재고 없음 메시지를 표시하는 단일 ObjectAttribute를 추가한다.

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:core="sap.ui.core">
	<ObjectListItem
		id="productExtended"
		title="{products>ProductName} ({products>QuantityPerUnit})"
		number="{
			parts: [
				{path: 'products>UnitPrice'},
				{path: '/currencyCode'}
			],
			type: 'sap.ui.model.type.Currency',
			formatOptions : {
				showMeasure : false
			}
		}"
		type="Active"
		numberUnit="{/currencyCode}"
		press=".onItemSelected">
	</ObjectListItem>
</core:FragmentDefinition>

• i18n.properties

# Product Details
outOfStock=Out of Stock

👋 databinding tutorial~

sapui5에서 제공하는 databinding에대해 큰 틀의 개념만 다루었습니다. 추후 databinding에 더 딥하게 알아보고 많은 예제 파일을 만들어 공유하겠습니다. databinding tutorial에서 내용이 잘못됐거나 설명이 부족한 부분은 댓글을 달거나 이메일을 보내주길 바랍니다~~ 최대한 빨리 보완해서 수정하겠습니다. 🙏🙏🙏

🔗 참조

• SAPUI5 SDK Aggregation factory function
• SAPUI5 SDK Factory Function
• SAPUI5 SDK Fragment
• github 따라하기 예제파일