Factory Function

8502 ワード
SAPUI5 sapui5 factory function テキストリンク

📌 Factory Function


factory関数は、モデルデータからコントロールを作成する強力な方法です.factory関数は、コントロール集約内の各プロジェクトを呼び出し、開発者は、各プロジェクトが異なる属性を持つ同じコントロールとして表示されるべきかどうか、または各プロジェクトに対して異なるコントロールとして表示されるべきかどうかを決定します.
factory関数には、エントリにアクセスするためのモデルデータのoContextと、新しい制御IDとして使用する必要があるパラメータsIdが含まれる.返されるオブジェクトはsap.ui.core.Elementタイプです.Aggregation BindingのJSONモデルデータを使用してXMLビューとコントローラでこのスキームを実装する方法は、次のとおりです.

📌 例


  • 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ビューでバインド集約を表示しない方法
  • 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
    • ワークコードクリップ-boost::asio
    HttpWebRequestとHttpWebResponseの例