SAPUI5 应用程序中具有单独控制器的自定义卡组件

Question

我想使用 SAPUI5 1.84 创建一个 FIORI 概述页面，我按照此 教程 将自定义卡添加到应用程序。添加第一张自定义卡后，一切正常。它显示了带有自定义 UI 元素的卡片并使用了自定义控制器。 Component.js 看起来像这样：

(function () {
    "use strict";

    jQuery.sap.declare("myApp.ext.customcard1.Component");
    jQuery.sap.require("sap.ovp.cards.generic.Component");

    sap.ovp.cards.generic.Component.extend("myApp.ext.customcard1.Component", {
        metadata: {
            properties: {
                "contentFragment": {
                    "type": "string",
                    "defaultValue": "myApp.ext.customcard1.customcard1"
                }
            },
            version: "1.44.10",
            library: "sap.ovp",
            includes: [],
            dependencies: {
                libs: ["sap.m"],
                components: []
            },
            config: {},
            customizing: {
                "sap.ui.controllerExtensions": {
                    "sap.ovp.cards.generic.Card": {
                        controllerName: "myApp.ext.customCard1.customcard1"
                    }
                }
            }
        }
    });
})();

自定义卡片文件如下所示：

webapp
-ext
--customcard1
---Component.js
---customcard1.controller.js
---customcard1.fragment.xml

然后我想向应用程序添加第二张自定义卡。我创建它就像第一张定制卡一样。启动应用程序时，显示第二张卡，但我很快意识到这两张卡使用相同的控制器类。 customcard1.controller.js 也用作 customcard2 的控制器，而不是 customcard2.controller.js。 Chrome 调试工具中的“源”选项卡还显示，仅执行文件 customcard1/Component.js、customcard2/Component.js 和 customcard1.controller.js 中的代码。

我尝试调试框架，很快意识到在代码中的某个位置，它通过类名 sap.ovp.cards.generic.Card 查找自定义组件的控制器，该类名返回 customcard1.controller 的实例。 js 对于两张自定义卡。

然后我找到了自定义卡的示例代码，并意识到控制器链接到自定义组件的方式与我最初使用的教程中的不同。

代替定制：

customizing: {
  "sap.ui.controllerExtensions": {
    "sap.ovp.cards.generic.Card": {
      controllerName: "myApp.ext.customCard1.customcard1"
    }
  }
}

他们将控制器设置为 Component.js 中的元数据属性：

metadata: {
  properties: {
    "controllerName": {
      "type": "string",
      "defaultValue": "test.testovp.ext.myCustomCard.MyCustomCard"
}

我尝试更改我的 Component.js 并删除自定义部分，并在元数据中添加控制器名称，如下所示：

(function () {
    "use strict";

    jQuery.sap.declare("myApp.ext.customcard2.Component");
    jQuery.sap.require("sap.ovp.cards.generic.Component");

    sap.ovp.cards.generic.Component.extend("myApp.ext.customcard2.Component", {
        metadata: {
            properties: {
                "contentFragment": {
                    "type": "string",
                    "defaultValue": "myApp.ext.customcard2.customcard2"
                },
                "controllerName": {
                    "type": "string",
                    "defaultValue": "myApp.ext.customcard2.customcard2"
                },
            },
            version: "1.44.10",
            library: "sap.ovp",
            includes: [],
            dependencies: {
                libs: ["sap.m"],
                components: []
            },
            config: {},
        }
    });
})();

通过这样的 Component.js 设置，两个自定义卡都使用其正确的单独控制器。

但是，我现在意识到我不再扩展通用自定义卡类sap.ovp.cards.generic.Card。这意味着我无权访问自定义控制器中此类的任何属性。

我做错了什么？如何使用多个自定义卡设置我的应用程序，每个卡都使用各自的控制器，该控制器仍然继承通用卡类的所有功能和属性？

Answer 1

我通过在控制器中手动扩展父类来使其工作。您需要调用父类的 onInit() 函数来访问所有相关属性。

不要像这样定义控制器：

组件.js

sap.ovp.cards.generic.Component.extend("myapp.ext.customcard.Component", {
    metadata: {
        ...
        customizing: {
            "sap.ui.controllerExtensions": {
                "sap.ovp.cards.generic.Card": {
                    controllerName: "myapp.ext.customCard.customcard"
                }
            }
        }
    }
});

customcard.controller.js

(function () {
    "use strict";

    sap.ui.controller("myapp.cards.customcard.customcard", {
        
        onInit: function() 
        {
            
        }
    });
})();

这是获得尽可能多的带有自定义控制器的自定义卡的方法：

组件.js

sap.ovp.cards.generic.Component.extend("myapp.ext.customcard.Component", {
    metadata: {
        properties: {
            "controllerName": {
                "type": "string",
                "defaultValue": "myapp.ext.customcard.customcard"
            }
        }
    });

customcard.controller.js

(function () {
    "use strict";

    sap.ui.define(["sap/ovp/cards/generic/Card.controller"], function (CardController) 
    {
        return CardController.extend("myapp.ext.customcard.customcard", 
        {
            onInit: function() 
            {
                //Call parent class onInit()
                CardController.prototype.onInit.apply(this, arguments);
            },
        }
    });
})();