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); 

見TextAreaRenderer從InputBase 繼承https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/TextAreaRenderer.js

其實實況應該幫助更多以擴展現有的控制 的其他方式https://openui5.hana.ondemand.com/#docs/guide/bcee26a4801748f39bf5698d83d903aa.html