CUBA 屏幕设计器的布局问题

Question

我正在测试 Cuba 平台，我无法理解屏幕设计器中的布局选项。

我试图在屏幕上均匀分布 table 和双列并对齐。（并在每个顶部添加标签）

最简单的拉伸容器（vbox 和 hbox）的任务很困难。当我将 height/width 设置为 100% 时，其中的项目在 space 中均匀分布。当我现在尝试将 vbox 中 table 的高度设置为 100%（希望它会拉伸）时，它会重置为 100px。

我也尝试了网格组件，但是当我将它设置为 100% 时，列的高度都相同（不适合标签）

也许我的理解（来自 xaml/c# 和 ms-components）是完全错误的。请告诉我，如何创建视图并确保：

组件处于相同高度（如果需要则拉伸）
组件对齐
满屏

标签标签
table双列
确定取消

根据要求提供一张简单的图片 - 现在让我发疯的东西..

我想添加一些我最终想出的代码——它还不是理想的东西：

<layout>
    <hbox id="hboxexpand"
          expand="assignTwinCol"
          height="100%"
          spacing="true"
          width="80%">
        <table id="userTable"
               height="100%"
               **width="auto"**>
            <columns>
                <column id="value1"
                        caption="msg://1"/>
                <column id="firstName"
                        description="msg://firstNameHeader"/>
                <column id="lastName"
                        caption="msg://nameHeader"/>
                <column id="active"
                        caption="msg://activeHeader"/>
            </columns>
            <rows datasource="userDs"/>
        </table>
        <twinColumn id="assignTwinCol"
                    addAllBtnEnabled="true"
                    height="100%"
                    optionsDatasource="myDs"/>
    </hbox>
</layout>

请注意：当我使用设计器时，**** 部分 width=auto 每次都会重置为 200px！我只能在 xml 设计器

中更改它

Answer 1

Table 不完全支持 AUTO 宽度，因为列的宽度可以根据内容调整，所以我建议对 table.

使用固定或相对宽度

<layout>
    <hbox expand="twinColumn"
          height="100%"
          spacing="true"
          width="100%">

        <table id="userTable"
               height="100%"
               width="400px">
            <columns>
                <column id="firstName"/>
                <column id="lastName"/>
                <column id="active"/>
            </columns>
            <rows datasource="usersDs"/>
        </table>

        <twinColumn id="twinColumn"
                    addAllBtnEnabled="true"
                    optionsDatasource="usersSelectDs"
                    height="100%"/>
    </hbox>
</layout>

如果您想为 TwinColumn 列设置 headers，您可以使用解包方法和 TwinColSelect 的 Vaadin API:

public class Screen extends AbstractWindow {

    @Inject
    private TwinColumn twinColumn;
    @Inject
    private Table<User> userTable;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        TwinColSelect colSelect = twinColumn.unwrap(TwinColSelect.class);

        colSelect.setLeftColumnCaption("Header Left");
        colSelect.setRightColumnCaption("Header Left");

        Layout tableComposition = userTable.unwrapComposition(Layout.class);
        tableComposition.setCaption("Table Header");
    }
}

我们需要对齐 Table 的 headers 和 TwinColumn。 Table 标题没有 TwinColumn headers 有的 padding-bottom 0.3em。我们可以使用 stylename 为 table:

添加填充

<table id="userTable"
       height="100%"
       width="400px"
       stylename="padding">
    <columns>
        <column id="firstName"/>
        <column id="lastName"/>
        <column id="active"/>
    </columns>
    <rows datasource="usersDs"/>
</table>

然后我们使用 Studio 创建主题扩展并添加 CSS 定义到 halo-ext.scss 文件：

.v-caption.v-caption-padding {
    padding-bottom: 0.3em;
}

现在重启应用程序，我们的headers就对齐了！

CUBA 团队计划在下一个次要版本中为组件添加标题和 leftColumnCaption/rightColumnCaption 属性，您将能够从 XML/Screen 设计器中分配它们。

另请参阅：

CUBA 屏幕设计器的布局问题

Layout trouble with CUBA screen designer

cuba-platform