I extended sap.ui.core.TooltipBase with mouseover event handling which is attached to some sap.ui.core.Icon in the ChartContainer:
sap.ui.define(function () {
"use strict";
return sap.ui.core.TooltipBase.extend("dvd.rl.component.ChartContainer.parts.TooltipBase.TooltipBase", {
metadata: {
events: {
"onmouseover" : {}
}
},
oView: null,
setView : function(view){
this.oView = view;
},
// the hover event handler, it is called when the Button is hovered - no event registration required
onmouseover : function() {},
});
Everythink works well, but when I click on the Icon in the ChartContainer I got this error from the TooltipBaseRenderer.js (This happens before handling of press event.):
In the TooltipBaseRenderer.js it is this line:
I have no idea what is going on there. If you will have I will be happy to hear it.
This is how I added TooltipBase to sap.ui.core.Icon:
// Add custom Icon for filter
var oFilterIcon = new sap.ui.core.Icon("filterButton", {
tooltip : "{i18n>filter}",
src : "sap-icon://filter",
press : [this.onHandleLocalFilterOpen,this]
});
// Add Icon to chart component
oChartContainer.addCustomIcon(oFilterIcon);
var oTooltipBase = new TooltipBase();
// set new TooltipBase to Icon
oFilterIcon.setTooltip(oTooltipBase);
EDITED 12:15 100117:
When I use renderer in the TooltipBase.extend:
//just inherit the renderer as it is
renderer: {},
I got this error:
So I removed renderer, and TooltipBase works when I hover over Icon. The problem is when I click on the Icon as I described higher.
Here is a working sample custom tooltip extended from sap/ui/core/TooltipBase.
Make sure that your renderer has the render method. Otherwise UI5 will look for it at the parent. Also TooltipBase already handles the mouse events. No need to handle them in your extension.
This is what happened:
Your renderer had no render function (renderer: { }).
UI5 looks for the render in the parent renderer (sap/ui/core/TooltipBaseRenderer).
There is no TooltipBaseRenderer.js since TooltipBase is an abstract control. Abstract controls have no renderer (renderer: null // not undefined in their definition).
Usually, UI5 bypasses fetching the renderer for abstract controls but the TooltipBase was unfortunately missing the renderer: null. So UI5 assumed that there must be a file named TooltipBaseRenderer.js which resulted in the 404 error. As of UI5 1.82, the TooltipBase has renderer: null, so the issue is no longer reproducible.
Related
I am trying to add a on click handler that will toggle the light attribute on an entity when a separate entity is clicked. However nothing is happening when I click the separate entity, and I have no errors in my console.
Here is my component:
AFRAME.registerComponent("lightsOut", {
schema: {
target : { type : "selector"}
},
init: function(){
this.el.addEventListener("click",function(){
this.data.target.removeAttribute("light");
}.bind(this));
}
})
And here are the two entities:
<a-entity id="streetLamp"
obj-model="obj:./models/streetlamp/StreetLamp.obj;mtl:./models/streetlamp/StreetLamp.mtl"
material="color:black"
scale="0.3 0.6 0.5"
position="-7.138 -1.499 -11.711"
lightsOut="target:#streetLight">
</a-entity>
<a-entity id="streetLight"
position="-4.961 6.205 -11.962"
rotation="-67.208 -112.987 87.548"
scale="0.657 0.612 0.718"
light="distance:15;decay:2;intensity:5a;angle:90;color:#ff8000;groundColor:#ffffff;penumbra:0.5;castShadow:true;type:point"
></a-entity>
When I click streetLamp, I would like to remove or hide streetLight. I am using cursor controls.
You can't have a uppercase letter in the component name, a-frame will try to make it lowercase, (...) in the end it won't work.
Try naming it lightsout or lights_out. Throw in a console.log() when clicked, to be sure it's properly working.
Also You need to refresh the raycaster manually, using raycaster.refreshObjects(), it's a bug, which is fixed by december 2017 in the master build.
We have to handle the event that is triggered when the cursor is hovered over a KPI Tile. So please can you help me to find the app i have to extend.
you find attached a screen shot of kpi generated using kpi workspace
enter image description here
Many thanks in advance,
EH
You can do it by extending sap.m.GenericTile:
sap.ui.define(function () {
"use strict";
return sap.m.GenericTile.extend("sample.ExtendedTile", {
metadata: {
events: {
"onmouseover" : {}
}
},
// the hover event handler, it is called when the GenericTile is hovered - no event registration required
onmouseover : function() {},
});
I'm trying to use the sap.m.Popover as a "rich tooltip" for some controls. This is as per recommendation from SAP because the sap.ui.commons library is now deprecated. We have too much text we want to add to the standard string tooltip. I haven't figured out a way to use the popover directly as a tooltip, which is why I've extended the TooltipBase control to handle the popover.
I've got the popover working fine, However when I interact with my control, I get the following error:
Uncaught Error: failed to load 'myNewToolTip/controls/TooltipBaseRenderer.js' from ../controls/TooltipBaseRenderer.js: 404 - Not Found
I see from these threads that it is because the TooltipBase class is an abstract class and therefore doesn't have a renderer. However, because I'm already using the popover, I don't need to render anything. I've tried to add the TooltipBaseRenderer.js and just have an empty render class. But UI5 really doesn't like that either.
My question is what should I do, I see two options:
There is probably a simple way to use the popover as a tooltip, which I'm just too stupid to figure out (Bear in mind, I'd prefer to bind it directly in the XML view).
Figure out a way to suppress the renderer call as I don't need it.
This is my current source code for the custom control:
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;
}
});
});
There is no need to create a custom control just to display a popover on mouseover. As you said, there is a simpler way: Adding event delegates.
One of the events that delegates can listen to is onmouseover which can be achieved like this:
this.byId("myTargetControl").addEventDelegate({
onmouseover: function () {
// Open popover here
}
});
Demo: https://embed.plnkr.co/jAFIHK
Extending sap.ui.core.TooltipBase
If you still consider extending TooltipBase (without Popover), take a look at this example: https://embed.plnkr.co/33zFqa?show=control/MyCustomTooltip.js,preview
Keep in mind, though, that tooltips in general shouldn't contain critical information due to its lack of discoverability as Fiori Design Guideline mentions
Tooltips (...) should never contain critical information. They should also not contain redundant information.
Just as a friendly reminder :) Don't make people hover to find things.
Is there any openui5 event Handler for orientationchange and window resize ?
onInit: function() {
var data;
this.drawChart(data); // working fine
$( window ).resize(function() {
this.drawChart(data); // not working
});
},
drawChart: function(data) {
//code for draw chart
}
OpenUI5 has built-in functionality for detecting orientation change as well as when there is a responsive size change (desktop->tablet for example).
Take a look at sap.ui.Device.orientation's attachHandler event:
Registers the given event handler to orientation change events of the
document's window.
Here is an example of using sap.ui.Device.orientation.attachHandler:
sap.ui.Device.orientation.attachHandler(function(mParams) {
if (mParams.landscape) {
alert('in landscape mode');
} else {
alert('in portrait mode');
}
});
Also of use is sap.ui.Device.media's attachHandler for detecting when the window is resized to a different range-set.
For directly listening to when the window is resized it looks like you already have a solution for that, just make sure you keep track of the correct scope to use:
var self = this;
$( window ).resize(function() {
self.drawChart(data);
});
I found the solution
this.* will not work inside jquery as this has a different meaning wherever its encapsulated...
in openui5 *.view.js this implies the view object
in *.controller.js this implies the controller object...
in jquery this implies the component in which it is placed or whatever it is referring to in that context...
you cannot simply mix "this" wherever you like
sap.ui.controller("oui5mvc.controllerName").drawChart(data);
I am migrating the AUI popup dialog window from liferay 6.1 to liferay 6.2. I see that there are some specific changes to be made. I had some problems with display of buttons but it is resolved now. But the problem is with the close icon (x) which should be on the top right corner. It disappeared suddenly as soon as I added a save button.
Here is my code:
myPopup = AUI().use('aui-base','liferay-util-window','aui-io-deprecated', 'event', 'event-custom', function(A) {
var buttons =[{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}}
}];
myPopup = Liferay.Util.Window.getWindow(
{
dialog: {
title : a + ' mytitle',
centered : true,
height : 600,
width : 500,
draggable : true,
resizable : true,
modal : true,
toolbars: {
footer:buttons
},
}}).plug(A.Plugin.IO, {
uri : url
}).render();
myPopup.show();
});
}
Please let me know if you have any idea on it..
on myPopupSubmit I have also written code to close the popup as:
top.document.getElementById('closethick').click();
Since there is no closethick button it returns null.
Using the modal dialog example as a comparison, the X close button is removed when using the toolbars property.
Reviewing the source code for the toolbars property (line 309 at time of writing this) indicates that if you use this property directly, you'll need to include your own X close in the header.
An alternative would be to use the addToolbar function (as seen in the example) to include your buttons while preserving the default toolbars.
modal.addToolbar([{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}
}
}]);
I would also consider making the instance of the dialog available to your myPopupSubmit function so that you would have direct access to perform dialog.hide() or calling dialog.hide() after myPopupSubmit versus using the X close approach.
If sticking with the current approach, the id being used will not work, you'll need to use a CSS selector as the YUI based id will change.