sapUI5 5/OpenUI5 5叶型自定义控件
sapUI5 5/OpenUI5 5叶型自定义控件
提问于 2018-10-17 08:29:16
我正在使用库中的自定义控件openUI5和Leafletjs来解决这个问题。
错误：
“类demo.map.SimpleMap的呈现器未定义或未定义呈现函数！将跳过__map0的呈现！”
library.js
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/library'],
function(jQuery){
"use strict";
sap.ui.getCore().initLibrary({
name: 'demo.map',
version: '1.0.0',
dependencies: ['sap.ui.core'],
types: [],
interfaces: [],
controls:[
'demo.map.SimpleMap'
],
elements:[]
});
return demo.map;
});SimpleMap.js
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/Control',
'./library'], function(jQuery, Control, library){
"use strict";
let SimpleMap = Control.extend('demo.map.SimpleMap',{
metadata:{
library: 'demo.map',
properties:{}
}
});
SimpleMap.prototype.drawMap = function(){
this.controlAspect = parseInt(450) / parseInt(350);
let map = L.map('map').setView([39.7166700,-8],8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
}
SimpleMap.prototype.onAfterRendering = function(){
this.drawMap();
}
return SimpleMap;
}, true);SimpleMapRenderer.js
sap.ui.define(['jquery.sap.global'], function(jQuery){
"use strict";
let SimpleMapRenderer = {};
SimpleMapRenderer.renderer = function(oRm, oControl){
oRm.write('<div ');
oRm.writeControlData(oControl);
oRm.write('>');
oRm.write('</div>');
}
return SimpleMapRenderer;
});Startpage.view.xml
<mvc:View controllerName="sap.ui.demo.fiori.controllers.Startpage" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout">
<Page title="Fiori Tile Demo">
<layout:VerticalLayout class="sapUiResponsiveMargin">
<Title titleStyle="H2" text="Launchpad Menu" class="sapUiTinyMarginBegin"/>
<layout:HorizontalLayout allowWrapping="true" id="layout">
</layout:HorizontalLayout>
</layout:VerticalLayout>
</Page>
</mvc:View>Startpage.controller.js
sap.ui.define(['sap/ui/demo/fiori/controllers/BaseController'], function(Controller){
"use strict";
return Controller.extend('sap.ui.demo.fiori.controller.Startpage',{
onInit:function(){
console.log('Startpage loaded');
let map = new demo.map.SimpleMap();
//console.log(map);
let oLay = this.getView().byId('layout');
oLay.addContent(map);
},
gotoUserList: function(){
this.getRouter().navTo('listUsers');
},
getRouter: function(){
return this.getOwnerComponent().getRouter();
}
});
});另外，我尝试在没有自定义控件的情况下直接从控制器中添加map对象，但是我得到了以下错误
“'Map容器找不到”来自Leafletjs框架的错误。
希望有人能帮帮我。我对如何使用openUI5渲染传单感到迷惑不解。
回答 2
Stack Overflow用户
发布于 2018-10-17 13:35:54
错误消息非常准确地告诉您问题:您的SimpleMapRenderer.js没有定义一个名为render的函数。相反，您已经将其命名为呈现器，如果您将它留在SimpleMap.js中，它将被称为呈现器。(同样，请参阅下面的编辑，需要导出SimpleMapRenderer对象，即您需要向定义()调用添加一个真正的参数。)
另一个问题(“Map容器找不到”来自Leafletjs框架的错误)。一旦修复函数名，可能会再次出现。这是因为您的drawMap函数直接引用id 'map‘的元素。然而，OpenUI5将使用控件的id。你应该把你的电话改为
let map = L.map(this.getDomRef()).setView([39.7166700,-8],8); 这将在ui5呈现程序创建的div中创建映射。
编辑:我在plnkr：http://plnkr.co/edit/BTDfwegfvO4iR4T3Mod0?p=preview中构建了代码，它表明我应该使用getDomRef()而不是$()。固定在上面。它还显示，您忘记导出呈现类定义(我没有注意到)。在向div添加一个高度(并加载css)之后，它现在正确地绘制了一个映射。
Stack Overflow用户
发布于 2018-10-18 08:17:31
好吧，这就是我能让它工作的方法：
SimpleMap.js
sap.ui.define(['jquery.sap.global','sap/ui/core/Control', './library'], function(jQuery, Control, library){
"use strict";
let SimpleMap = Control.extend('demo.map.SimpleMap',{
metadata:{
library: 'demo.map',
properties:{
"width":{type: 'sap.ui.core.CSSSize', defaultValue:'300px'},
"height":{type: 'sap.ui.core.CSSSize', defaultValue:'300px'}
}
}
});
SimpleMap.prototype._drawMap = function(){
this.controlAspect = parseInt(300) / parseInt(300);
/* using: L.map(this.$()).setView(...); << trown an error:
"Cannot read property 'baseVal' of undefined", which seems that is a jQuery object instead of a DOM element. Ref:
https://github.com/Leaflet/Leaflet/issues/2302
I couldn't how to get current DOM element.
*/
let map = L.map('map').setView([39.7166700,-8],8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
}
SimpleMap.prototype.onAfterRendering = function(){
this._drawMap();
}
return SimpleMap;
}, true);SimpleMapRenderer.js
sap.ui.define(['jquery.sap.global'], function(jQuery){
"use strict";
let SimpleMapRenderer = {};
SimpleMapRenderer.render = function(oRm, oControl){
oRm.write('<div ');
oRm.write('id="map"'); // set it hardcoded
oRm.writeControlData(oControl);
oRm.addStyle('height',oControl.getHeight());
oRm.addStyle('width',oControl.getWidth());
oRm.writeStyles();
oRm.write('>');
oRm.write('</div>');
}
return SimpleMapRenderer;
}, true); // notice this: last version i did not export it...谢谢你的帮助。
PS.- -而不是使用oRm.write('id="map"')；<<，以及如何使用这个.$()获取dom元素？我试过了:这个。$()但是没有.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52850450
复制相关文章
相似问题
腾讯云开发者
