使用Popover作爲工具提示的SAPUI5

我試圖使用sap.m.Popover作爲一些控件的「豐富工具提示」。這是SAP推薦的，因爲sap.ui.commons庫現在已被棄用。我們有太多的文本要添加到標準字符串工具提示中。我還沒有想出一種方法直接將popover用作工具提示，這就是爲什麼我已將TooltipBase控件擴展爲處理彈出窗口的原因。使用Popover作爲工具提示的SAPUI5

我有酥料餅的工作正常，但是當我跟我的控制交互，我得到以下錯誤：

Uncaught Error: failed to load 'myNewToolTip/controls/TooltipBaseRenderer.js' from ../controls/TooltipBaseRenderer.js: 404 - Not Found

我從這些threads，這是因爲看到了TooltipBase類是一個抽象類因此沒有渲染器。但是，因爲我已經在使用popover，所以我不需要渲染任何內容。我試着添加TooltipBaseRenderer.js，只是有一個空的渲染類。但UI5真的不喜歡這一點。

我的問題是我該怎麼辦，我看到兩個選項：

有可能是用酥料餅的提示，這只是我太愚蠢找出（熊以簡單的方式記住，我寧願直接在XML視圖中綁定它）。
找出一種抑制渲染器調用的方法，因爲我不需要它。

這是自定義控制我的電流源代碼：

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

    return sap.ui.core.TooltipBase.extend("myNewToolTip.TooltipBase", { 
    metadata: { 
     properties: { 
     title : {} 
     }, 
     events: { 
     "onmouseover" : {}, 
     "onmouseout" : {} 
     } 
    }, 

    oView: null, 
    setView: function(view) { 
     this.oView = view; 
    }, 

    onmouseover : function(oEvent) { 
     var that = this; 
     if (!this.delayedCall){ 
     this.delayedCall = setTimeout(function() { 
      if (!that.oPopover){ 
      that._createQuickView(); 
      } 
     }, 500); 
     } 
    }, 

    onmouseout: function(oEvent) { 
     if (this.oPopover){ 
     this.closePopover(); 
     this.delayedCall = undefined; 
     } 
     else{ 
     clearTimeout(this.delayedCall); 
     this.delayedCall = undefined; 
     } 
    }, 

    _createQuickView: function() { 
     var sTitle = this.getTitle(); 
     this.oPopover = new Popover({ 
     title: sTitle 
     }); 
     this.oPopover.openBy(this.getParent()); 
    }, 

    closePopover: function(){ 
     this.oPopover.close(); 
     this.oPopover = undefined; 
    } 
    }); 
});

來源

2017-08-03 Jakob Marius Kjær

沒有必要創建一個自定義的控制只是爲了顯示在鼠標懸停一酥料餅。正如你所說，有一個更簡單的方法：Adding event delegates。

其中events that delegates can listen to的是onmouseover其可以這樣來實現：

targetControl.addEventDelegate({ 
    onmouseover: function() { 
    // open popover 
    } 
});

這裏是一個酥料餅表現得像一個工具提示的示例：https://embed.plnkr.co/jAFIHK/

Bear in mind, I'd prefer to bind it directly in the XML view.

爲了直接在XMLView中添加彈出窗口，我們可以在目標控件的dependents aggregation中定義它，它有一些積極的副作用CTS：

的酥料餅當視圖被加載不會立即呈現..
但仍然繼承了父母的所有數據綁定。
另外它的生命週期將由父控件自動管理（不需要明確地銷燬它）。

但是，事件代表仍然必須通過JS添加。

來源

2017-08-03 16:45:16 boghyon

感謝您的建議。有用。但是，當我將此添加到組合框並單擊下拉列表時，會發生意外行爲。也發現這個鏈接，解釋我的痛苦 https://github.com/SAP/openui5/issues/1612 –

對於組合框，我會問一個單獨的問題，因爲彈出窗口已經在mouseover上工作。在那裏用你的代碼和屏幕截圖徹底解釋你的問題。我會看一看。關於TooltipBase：我瞭解情感，但以我的經驗，這是Fiori說「不要再使用*富*工具提示」的方式 - 我猜是因爲[可訪問性原因]（https://medium.com/salesforce- ux/7-things-every-designer-needs-know-about-accessibility-64f105f0881b＃8e05）和[缺乏可發現性]（https://experience.sap.com/fiori-design-web/using-tooltips /＃響應性和適應性）。 – boghyon

@JakobMariusKjær如果你仍然考慮擴展TooltipBase（不使用Popover），看看這個最簡單的例子：https：//embed.plnkr.co/33zFqa/ – boghyon

使用Popover作爲工具提示的SAPUI5

回答

相關問題