Question

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

我正在尝试均匀地传播桌子和双柱并在屏幕上对齐。（并在每个顶部添加标签）

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

我也尝试了网格组件，但是当我将它设置为100％时，列的高度相同（对标签没有好处）

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

组件处于相同高度（如果需要，可以拉伸）
组件已对齐
整个屏幕已填满

标签标签
表twincolum
艾伯塔省

根据要求提供一个简单的图像 - 现在让我发疯的事情......

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

<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>

请注意：当我使用设计器时，**** part width = auto将每次重置为200px！我只能在xml设计器中更改它

Answer 1

表格不完全支持AUTO宽度，因为列的宽度可以通过内容进行调整，因此我建议使用固定或相对宽度的表格。

<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列设置标题，可以使用解包方法和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和TwinColumn的标题。表格标题没有TwinColumn标题所具有的填充底部0.3em。我们可以使用stylename为表添加填充：

<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;
}

现在重启应用程序，我们的标题已对齐！

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

另见：

CUBA屏幕设计师

1 个答案: