为sapui5中的自定义控件创建多个聚合的布局

Question

我创建了两个自定义控件。第一个自定义控件包括另一个作为倍数。我想在我的 XML 视图中使用它们，如下所示：

<foo:Foo>
    <foo:FooItem>
    </foo:FooItem>
    <foo:FooItem>
    </foo:FooItem>
</foo:Foo>

然后我创建了我的父自定义控件 Foo 来创建 FlexBox 来容纳我的子控件。

我的 Foo 元数据：

metadata: 
{
    properties:
    {
        "title": {type : "string", group : "Misc", defaultValue : ""}
    },
    aggregations : 
    {
        content: {singularName: "content"}
    },
    defaultAggregation: "content"
}

和我的 Foo 渲染器：

renderer : 
{

    render : function(oRm, oControl) {
        console.log("inoart.controls.Gauge.render()");


        var layout = oControl.createLayout();//creates FlexBox
        oRm.write("<div");
        oRm.writeControlData(oControl); 
        oRm.writeClasses();
        oRm.write(">");
        oRm.renderControl(layout);

        var aChildren = oControl.getContent();
        for (var i = 0; i < aChildren.length; i++) 
        { // loop over all child Controls, 

            oRm.write("<div>");
            oRm.writeStyles();

            layout.addItem(aChildren[i]);
            // I tried to add my child controls to this layout!!!

            oRm.renderControl(aChildren[i]);
            oRm.write("</div>");

        }

        oRm.addClass('verticalAlignment');
        oRm.write("</div>");
    }
}

我的观点是这样的：

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
    <controls.FooItem id="__fooItem0">
        <sap.m.VBox id="__vbox0">
        <sap.m.FlexBox id="__box1">
    <controls.FooItem id="__fooItem1">
        <sap.m.VBox id="__vbox1">
        <sap.m.FlexBox id="__box2">

但我希望它是这样的:

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
        <controls.FooItem id="__fooItem0">
            <sap.m.VBox id="__vbox0">
            <sap.m.FlexBox id="__box1">
        <controls.FooItem id="__fooItem1">
            <sap.m.VBox id="__vbox1">
            <sap.m.FlexBox id="__box2">

Answer 1

您对 oRm.renderControl 进行一次调用以呈现 FlexBox，然后在循环中对 oRm.renderControl 进行一些调用以获取聚合内容。由于所有这些 renderControl-Calls 都在同一级别，因此所有内容都在同一级别上呈现。

将内容聚合中的项目添加到循环内的 FlexBox 内容聚合中为时已晚，因为 flexbox 已经呈现。在每次重新渲染时向 Flexbox 添加项目也不是一个好主意。

您可以从 sap.m.FlexBox 派生 Foo-Control 并覆盖渲染器以执行一些特殊操作。
您可以覆盖 addContent、removeContent、getContent... 方法以委托给您的内部 flexbox addItem、removeItem、getItems 方法，所以你添加到内容聚合的后缀实际上是添加到你的内部 flexbox 的项目聚合中。
您可以在 Foo 控件上使用 beforeRendering 方法将其所有内容添加到其内部 FlexBox 的项目聚合中。

希望对您有所帮助。

为sapui5中的自定义控件创建多个聚合的布局

Creating layout for multiple aggregations for custom controls in sapui5

javascript

custom-controls

sapui5