📌 Factory Function

factory function은 model data에서 control들을 만드는 강력한 접근 방식이다. factory function은 control의 aggregation의 각 항목을 호출하며 개발자는 각 항목이 서로 다른 속성을 가진 동일한 control로 나타내야 하는지 또는 각 항목에 대해 다른 control로 표현되어야 하는지를 결정할 수 있다.
factory function은 새 control ID로 사용해야 하는 파라미터 sId와 엔트리의 모델 데이터에 접근하기 위한 oContext가 함께 제공된다. 반환된 객체는 sap.ui.core.Element type이어야 한다. Aggregation Binding의 JSON Model Data를 사용하여 XML view 및 controller에서 이 시나리오를 실현 할 수 있는 방법은 다음과 같다.

📌 예제

• MainView.view.xml

<mvc:View
	controllerName="com.sdk.practice.controller.MainView"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc">
	<l:VerticalLayout
		content="{ path: '/companies', factory: '.createContent'}"
		class="sapUiContentPadding"
		width="100%"/>
</mvc:View>

• MainView.controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
  "sap/ui/model/type/String",
  "sap/ui/model/type/Float",
  "sap/m/Input",
  "sap/m/Text",
  "sap/m/CheckBox"
], function (Controller, JSONModel, StringType, Float, Input, Text, CheckBox) {
  "use strict";

  return Controller.extend("com.sdk.practice.controller.MainView", {
    onInit: function () {
      const oModel = new JSONModel();
      const oView = this.getView();
      oModel.loadData("./model/Company.json");
      oView.setModel(oModel);
    },
    createContent: function (sId, oContext) {
      const oRevenue = oContext.getProperty("revenue");
      switch (typeof oRevenue) {
        case "string":
          return new Text(sId, {
            text: {
							parts: [
								{path: 'name', type: new StringType()},
								{path: 'revenue', type: new StringType()}
							]
            }
          });
        case "number":
          return new Input(sId, {
            value: {
              path: "revenue",
              type: new Float()
            }
          });

        case "boolean":
          return new CheckBox(sId, {
            selected: {
              path: "revenue"
            }
          });
      }
    }
  });
});

• webapp/model/Company.json

{
  "companies": [
    {
      "name": "samsung",
      "revenue": "1조"
    },
    {
      "name": "lg",
      "revenue": "1000"
    },
    {
      "name": "hyuendai",
      "revenue": 10000000000
    },{
      "name": "apple",
      "revenue": 13213000000000
    },{
      "name": "benq",
      "revenue": 100
    },{
      "name": "dyson",
      "revenue": true
    },{
      "name": "sap",
      "revenue": "10조"
    }
  ]
}

---

📌 xml view에 binding aggregation을 나타내지않고 controller에서 하는법

• MainView.view.xml

<mvc:View
	controllerName="com.sdk.practice.controller.MainView"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc">
	<l:VerticalLayout id="companyPage"/>
</mvc:View>

• MainView.controller.js

    onInit: function () {
      const oModel = new JSONModel();
      const oView = this.getView();
      oModel.loadData("./model/Company.json");
      oView.setModel(oModel);

     const oCompoanyVerticalPage = this.byId('companyPage');
	 oCompoanyVerticalPage.addStyleClass('sapUiContentPadding');
	 oCompoanyVerticalPage.setWidth('100%');
	 oCompoanyVerticalPage.bindAggregation('content', {
				path: '/companies',
				factory: this.createCompanyContent
			});
    },

   createCompanyContent: function(sId, oContext) {
      const oRevenue = oContext.getProperty("revenue");
      switch (typeof oRevenue) {
        case "string":
          return new Text(sId, {
            text: {
			parts: [
				{path: 'name', type: new StringType()},
				{path: 'revenue', type: new StringType()}
				]
            }
          });
        case "number":
          return new Input(sId, {
            value: {
              path: "revenue",
              type: new Float()
            }
          });

        case "boolean":
          return new CheckBox(sId, {
            selected: {
              path: "revenue"
            }
          });
      }
		},

🔗 참조

• SAPUI5 SDK Using Factory Function