Layout trouble with CUBA screen designer - cuba-platform

Question

I am testing the Cuba-Platform and I have trouble understanding the layout options within the screen designer.
I am trying to spread tables and twincolumns evenly and aligned over the screen. (And add a label on top of each)
The simplest task of stretching the containers (vbox and hbox) is difficult.
When I set height/width to 100% the items within are evenly distributed within the space. When I now try to set the height of the table within the vbox to 100% (hoping it would stretch) it gets reset to 100px.
I also tried the grid component, but when I set it to 100% the columns are have all the same hight (no good for label)
Maybe my understanding (coming from xaml/c# and the ms-components) is completely wrong. Please tell me, how can I create a view and ensure:
that the components are at the same height (stretched if need be)
that the components are aligned
that the whole screen is filled
label label
table twincolum
okcancel
As requested a simple image - of what by now drives me crazy..
Id like to add some code I eventually came up with - Its not yet the ideal thing:
<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>
Please note: When I use the designer the **** part width=auto will be reset to 200px every time! I can only change that in the xml designer

Answer 1

Table does not have full support of AUTO width because width of columns can be adjusted by content, so I would recommend using fixed or relative width for a 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>
If you want to set headers for TwinColumn columns you can use unwrap methods and Vaadin API of TwinColSelect:
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");
}
}
We need to align our headers of the Table and TwinColumn. Table caption does not have padding-bottom 0.3em that TwinColumn headers have. We can add padding using stylename for the 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>
Then we create theme extension using Studio and add CSS definition to halo-ext.scss file:
.v-caption.v-caption-padding {
padding-bottom: 0.3em;
}
Now restart the application and our headers are aligned!
CUBA Team are planning to add caption and leftColumnCaption/rightColumnCaption attributes for components in the next minor release and you will be able to assign them from XML/Screen Designer.
See also:
https://doc.cuba-platform.com/manual-6.2/webComponentsHelper.html
https://vaadin.com/api/com/vaadin/ui/TwinColSelect.html