Question

我使用其他一些控件扩展了一个“CustomTile”，并计划在TileContainer中使用它。新Tile的示例代码：

jQuery.sap.declare("xyz.control.MySpecialTile");
jQuery.sap.require("sap.m.CustomTile");
sap.m.CustomTile.extend("xyz.control.MySpecialTile", {

    metadata : {
        properties : {
            "icon" : {
                type : "string",
                defaultValue : "sap-icon://shipping-status"
            }
        },
    },

    // will be called during creation time
    init : function() {
        this.addStyleClass("someStyle");
        var oCont = ... some content build with other controls ...      
        this.setContent(oCont);
    },
    renderer: {},
    onAfterRendering : function() {
    }
});

var oFunctions = new sap.m.TileContainer({
    width : "100%", // sap.ui.core.CSSSize
    height : "100%", // sap.ui.core.CSSSize
    tiles : [oCustomTile1, oCustomTile2, oMySpecialTile], // sap.ui.core.Control
});

其中： oCustomTile1和oCustomTile2是一些标准的CustomTiles，oMySpecialTile是我自己的tile的一个实例。

如果我在页面的某处放置“oMySpecialTile”，它将会显示，但如果我将它放在TileContainer中（如在代码中），则该图块将被隐藏。

问题是，我的代码中是否有任何问题，或者它是TileContainer中的错误？我可以假设，TileContainer检查元素的类型，它不知道我的“新”类？

我的一般想法是，构建一个带有一些已定义内容结构的CustomTile，并且可以通过绑定来定义一些属性。

Answer 1

您需要调用onAfterRendering的基本sap.m.CustomTile函数：

onAfterRendering : function() {
    sap.m.CustomTile.prototype.onAfterRendering.call(this);
}

请检查并运行代码段。

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script>
    jQuery.sap.declare("xyz.control.MySpecialTile");
    jQuery.sap.require("sap.m.CustomTile");
    sap.m.CustomTile.extend("xyz.control.MySpecialTile", {

        metadata: {
            properties: {
                "icon": {
                    type: "string",
                    defaultValue: "sap-icon://shipping-status"
                }
            },
        },

        // will be called during creation time
        init: function() {
            sap.m.CustomTile.prototype.init.call(this);
            this.addStyleClass("someStyle");
            var oCont = new sap.m.Button({
                text: "My Custom Tile 2"
            });
            //... some content build with other controls ...      
            this.setContent(oCont);
        },
        renderer: {},
        onAfterRendering: function() {
            sap.m.CustomTile.prototype.onAfterRendering.call(this);
        }
    });

    var container1 = new sap.m.TileContainer({
        width: "100%", // sap.ui.core.CSSSize
        height: "100%", // sap.ui.core.CSSSize
        tiles: [new sap.m.CustomTile({
            content: new sap.m.Button({
                text: "Custom Tile 1"
            })
        }), new xyz.control.MySpecialTile(), new sap.m.CustomTile({
            content: new sap.m.Button({
                text: "Custom Tile 3"
            })
        })],
        

    });




    new sap.m.App({
        pages: new sap.m.Page({
            enableScrolling: false,
            title: "Tile Container",
            content: [container1]
        })
    }).placeAt("content");
</script>

<body id="content">

</body>

如何实现SAPUI5中sap.m.TileContainer可以使用的CustomTile？

1 个答案: