library.js

Question

使用库中的自定义控件，我面临着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: '&copy; <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();
                        }
                });
        });

此外，我尝试直接从控制器中添加地图对象而没有自定义控件，但是我遇到了以下错误

Leafletjs框架中的“找不到地图容器”错误。

希望有人请帮助我。我对如何使用openUI5呈现传单非常迷茫。

Answer 1

错误消息可以准确地告诉您问题所在：您的SimpleMapRenderer.js没有定义名为render的函数。相反，您将其称为渲染器，如果将其放在SimpleMap.js中，它将被调用。（另外，请参见下面的编辑，SimpleMapRenderer对象需要导出，即，您需要为define（）调用添加一个真实参数。）

修复函数名称后，另一个问题（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）之后，现在可以正确绘制地图了。

Answer 2

好吧，这就是我要让它工作的方式：

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: '&copy; <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”'）; <<并且从控件中如何使用this。$（）获取dom元素？我试过了：this。$（）[0]但什么都没有...

sapUI5 / OpenUI5 Leafletjs自定义控件

library.js

SimpleMap.js

SimpleMapRenderer.js

Startpage.view.xml

Startpage.controller.js

2 个答案:

SimpleMap.js

SimpleMapRenderer.js