javascript - SAPUI5 如何通过扩展现有控件来创建自定义控件

Question

我必须自定义现有控件 (FacetFilter) 的功能。我无法自定义 FacetFilter 渲染器的功能。你能帮我一下吗？

我在xml中的代码是

<FacetFilter
    id="idFacetFilter"
    type="Simple"
    showPersonalization="true"
    showReset="true"
    reset="handleFacetFilterReset"
    lists="{/ProductCollectionStats/Filters}">
    <lists>
      <FacetFilterList
        title="{type}"
        key="{key}"
        active="false"
        multiselect="true"
        listClose="handleListClose"
        items="{values}" >
        <items>
          <FacetFilterItem
            text="{text}"
            key="{key}"
            count="{data}" />
        </items>
      </FacetFilterList>
    </lists>
 </FacetFilter>

我尝试扩展控制，我尝试的代码如下，

jQuery.sap.declare("control.CustomFacetFilter");
sap.m.FacetFilter.extend("control.CustomFacetFilter", {});

我只是扩展了，因为我想要那个控件的所有功能。我不想修改任何东西。我有如下渲染器文件。

/*
* @copyright
*/

sap.ui.define(['jquery.sap.global'],
function(jQuery) {
"use strict";


/**
 * FacetFilter renderer. 
 * @namespace
 */
var CustomFacetFilterRenderer = {
};


/**
 * Renders the HTML for the given control, using the provided {@link     sap.ui.core.RenderManager}.
 * 
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.render = function(oRm, oControl){
    switch (oControl.getType()) {

    case sap.m.FacetFilterType.Simple:
        CustomFacetFilterRenderer.renderSimpleFlow(oRm, oControl);
        break;

    case sap.m.FacetFilterType.Light:
        CustomFacetFilterRenderer.renderSummaryBar(oRm, oControl);
        break;
    }
};

/**
 * 
 * 
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.renderSimpleFlow = function(oRm, oControl) {

    oRm.write("<div");
    oRm.writeControlData(oControl);
    oRm.addClass("sapMFF");

    if (oControl.getShowSummaryBar()) {

        oRm.write(">");
        CustomFacetFilterRenderer.renderSummaryBar(oRm, oControl);
    } else {

        if (oControl._lastScrolling) {

            oRm.addClass("sapMFFScrolling");
        } else {

            oRm.addClass("sapMFFNoScrolling");
        }

        if (oControl.getShowReset()) {

            oRm.addClass("sapMFFResetSpacer");
        }
        oRm.writeClasses();
        oRm.write(">");


        if (sap.ui.Device.system.desktop) {
            oRm.renderControl(oControl._getScrollingArrow("left"));
        }
/*          // dummy after focusable area.
        oRm.write("<div tabindex='-1'");
        oRm.writeAttribute("id", oControl.getId() + "-before");
        oRm.write("></div>");*/
        // Render the div for the carousel
        oRm.write("<div");
        oRm.writeAttribute("id", oControl.getId() + "-head");
        oRm.addClass("sapMFFHead");
        oRm.writeClasses();
        oRm.write(">");

        var aLists = oControl._getSequencedLists();
        for (var i = 0; i < aLists.length; i++) {

            oRm.renderControl(oControl._getButtonForList(aLists[i]));
            if (oControl.getShowPersonalization()) {

                oRm.renderControl(oControl._getFacetRemoveIcon(aLists[i]));
            }
        }

        if (oControl.getShowPersonalization()) {
            oRm.renderControl(oControl.getAggregation("addFacetButton"));
        }
        oRm.write("</div>"); // Close carousel div
        if (sap.ui.Device.system.desktop) {
            oRm.renderControl(oControl._getScrollingArrow("right"));
        }

        if (oControl.getShowReset()) {

            oRm.write("<div");
            oRm.addClass("sapMFFResetDiv");
            oRm.writeClasses();
            oRm.write(">");
            oRm.renderControl(oControl.getAggregation("resetButton"));
            oRm.write("</div>");
        }
    }
    oRm.write("</div>");
};


/**
 * 
 * 
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.renderSummaryBar = function(oRm, oControl) {

    // We cannot just render the toolbar without the parent div.  Otherwise it is
    // not possible to switch type from light to simple.
    oRm.write("<div");
    oRm.writeControlData(oControl);
    oRm.addClass("sapMFF");
    oRm.writeClasses();
    oRm.write(">");
    var oSummaryBar = oControl.getAggregation("summaryBar");
    oRm.renderControl(oSummaryBar);
    oRm.write("</div>");
};


return CustomFacetFilterRenderer;

}, /* bExport= */ true);

我简单地复制粘贴了代码，我修改了渲染器中的代码 当我运行此代码时，未找到其显示的 lists.js，但这里的列表是 FacetFilter 中的聚合。如果我们在 xml 中观察，FacetFilter 是最顶层的父项，它有一个子项 (FacetFilterList)，而后者又有另一个子项 (FacetFilterItem)。我已经在这里扩展了控件 FacetFilter，这意味着我将 FacetFilter 的所有属性都添加到了我的 CustromFilter 中，是吗？，但仍然找不到它的显示 lists.js。我对如何在这种情况下创建自定义控件感到困惑，请你帮我解决这个问题。

Answer 1

sap.ui.define(['./HerePathToFacetFilterRenderer', 'sap/ui/core/Renderer'],
function(FacetFilterRenderer, Renderer) {
"use strict";

    var CustomFacetFilterRenderer = Renderer.extend(FacetFilterRenderer);

    //... here your custom implementation, overwrite of base methods or hooks


return CustomFacetFilterRenderer;

}, /* bExport= */ true);

查看继承自 InputBase 的 TextAreaRenderer https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/TextAreaRenderer.js

实际上 docu 应该通过另一种扩展现有控件的方式提供更多帮助 https://openui5.hana.ondemand.com/#docs/guide/bcee26a4801748f39bf5698d83d903aa.html