CODEWITHSUNDEEP
cuba-platform
smack
smack

Reputation: 113

Layout trouble with CUBA screen designer

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:

label label
table twincolum
okcancel

As requested a simple image - of what by now drives me crazy.. enter image description here

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

Upvotes: 2

Views: 914

Answers (1)

jreznot
jreznot

Reputation: 2773

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:

Upvotes: 2

Related Questions