Question

我对UI5中的自定义控件有疑问。假设我要在自定义控件中使用格式化程序功能（请参见下面的代码段）。我的一位同事坚持认为，自定义控件应尽可能通用（例如，能够以任何需要的方式指定带有逗号，空格和换行符的文本）。因此，我的想法是将格式化程序功能传递给自定义控件。有可能吗？如果可以，怎么办？

sap.ui.define([
  "pr/formatter/Formatter",
  "sap/m/Popover",
  "sap/m/Text"
], function(Formatter, Popover, Text) {
  "use strict";

  return Text.extend("pr.control.TextWithPopover", {
    metadata: {
      aggregations: {
        _popover: {
          type: "sap.m.Popover",
          multiple: false,
          visibility: "hidden"
        }
      }
    },

    init: function() {
      const popover = new Popover({});
      this.setAggregation("_popover", popover);
    },

    setText: function(text) {
      if (this.getProperty("text") !== text) {
        // How to make it generic? 
        const formattedText = Formatter.formatCommaListToNewLine(text);
        const contentToAdd = new Text({ text: formattedText });
        contentToAdd.addStyleClass("popoverContent");
        // ...
      }
    },

    renderer: "sap.m.TextRenderer",
  });
});

Answer 1

UI5在1.46 ^(Commit)中向"function"引入了标准类型sap/ui/base/DataType至return ControlToExtend.extend("MyControl", { metadata: { properties: { /** * This function will contain foo and bar as parameters. * Applications should return xyz. */ doSomethingWith: { type: "function", }, }, }, // ... getXYZ: function(/*...*/) { const doSomethingWith = this.getDoSomethingWith(); // function from the application if (typeof doSomethingWith == "function") { const [foo, bar] = [/*...*/]; return doSomethingWith(foo, bar); } else { /*default behavior*/; } }, });，该类型允许ManagedObject属性将函数作为值接收。

控件

<MyControl doSomethingWith=".myControllerMethod" /> <!-- or -->
<MyControl doSomethingWith="some.globally.available.function" /> <!-- or -->
<!-- Since 1.69: -->
<MyControl
  xmlns:core="sap.ui.core"
  core:require="{
    'myRequiredFunction': 'mynamespace/myApplicationFunction'
  }"
  doSomethingWith="myRequiredFunction"
/>

应用程序

XMLTemplateProcessor

^{注意： myApplicationFunction: function(foo, bar) {
// create and return xyz however the application wants;
},
（XML视图/-片段）仅从1.56开始支持 function 属性。 (Commit)}

MenagedObjectMetadata

通过这种方式，控件对应用程序没有硬依赖性，同时保留了允许更改默认输出或行为的灵活性。

以上选项是减少UI5中紧密耦合的众多解决方案之一。另一个解决方案是添加控件属性，然后应用程序可以通过绑定和格式化程序对其进行操作。

通常，控件（或控件库）和控件使用者（例如应用程序）应始终独立开发；界面之间（例如const data = await fetch(url, { method: 'post', body: body, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' // this does not work when run locally } });），并且控件仍对扩展开放，而没有公开它们在内部的实现方式。

如何将功能传递给自定义控件

1 个答案:

控件

应用程序