从视图调用 SAPUI5 控件可以,但嵌入 XMLComposite 控件则不行(全局外部库)
2019-12-28
289
我正在尝试构建一个 amCharts 容器控件,这是一个通过 amCharts 构建图表的 UI5 控件。一般来说,它是有效的,但我相信您可以发现很多可以做得更好的技巧。
我目前最大的问题是,当我在另一个 XMLComposite 控件中使用该控件时,我收到错误
Uncaught ReferenceError: am4core is not defined at f.onAfterRendering (AmChartContainer.js?eval:38)
调试代码证明 jQuery.sap.includeScript 之前已执行,但全局元素 am4core 仍然不可用。当我将控件直接嵌入到视图中时,它可以工作。
另一件我不满意的事情是事件顺序。很想在渲染方法中实例化 amchart,但当时没有 amchart 实例化所需的 htmlelement。同意吗?
任何指示都将不胜感激!
sap.ui.define([ 'sap/ui/core/Control', "jquery.sap.global" ], function(Control, jQuery) {
return Control.extend("io.rtdi.amChartContainer", {
metadata: {
properties: {
width: {
type: "sap.ui.core.CSSSize",
defaultValue: "100%"
},
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "100%"
},
plugin: {
type: "string"
}
},
aggregations : {},
},
renderer : function(oRm, oControl) {
oRm.write("<div");
oRm.write(" style=\"width: " + oControl.getWidth() +
"; height: " + oControl.getHeight() + ";\" ");
oRm.writeControlData(oControl);
oRm.write(">");
oRm.write("</div>");
},
onBeforeRendering : function() {
jQuery.sap.includeScript("https://www.amcharts.com/lib/4/core.js",
"amCharts.core", null, null);
jQuery.sap.includeScript("https://www.amcharts.com/lib/4/charts.js",
"amCharts.charts", null, null);
if (!!this.getPlugin()) {
jQuery.sap.includeScript(
"https://www.amcharts.com/lib/4/" + this.getPlugin(),
"amCharts.plugin", null, null);
}
},
onAfterRendering : function() {
// if I need to do any post render actions, it will happen here
if (sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this, arguments);
}
this._chart = am4core.create(this.getId(), am4plugins_forceDirected.ForceDirectedTree);
},
getChart: function() {
return this._chart;
}
});
});
2个回答
首先,请使用 sap/ui/dom/includeScript ,因为 jQuery.sap.includeScript 已被视为已弃用。
您没有定义任何 fnLoadCallback。当调用 onAfterRendering 时,您是否 100% 确定脚本已加载且 am4core 已定义?
A.vH
2020-01-17
看来开头的 global 关键字是缺失的部分:
/* global am4core:true */
/* global am4charts:true */
sap.ui.define([
"sap/ui/core/mvc/Controller",...
Werner Daehn
2020-05-19