jeudi 11 juin 2015

Vaadin - How to have two columns of data (Gridlayout with field and Label data with wrapping text)

I'm trying to create a CustomComponent where I have two columns (possibly four) where the two columns are rows of Labels. The first column is the identifier such as "Firstname: ", "Lastname: ", etc. and the second column is the actual value for the identifier such as "John", "Smith", etc.

I'm using a GridLayout so that the data is all line up nicely (for example John is lined up with Smith on the next line).

The problem I'm having is that I want the second column to take the remainder of the space width wise and have the text wrap to the next line when it's too long. So for example if I have a Comments Label that is a paragraph long I want the text to wrap but it just keeps going off the screen.

Now I understand that the Label needs to have a defined width to be able to wrap the text however I can't figure out how to use this to make the text in the labels in a grid wrap. I've tried everything I could think of.

My code is:

GridLayout gridLayout = new GridLayout();
gridLayout.setColumns(2);
gridLayout.setColumnExpandRatio(0, 1f);

gridLayout.addComponent(new Label("Firstname"));
gridLayout.addComponent(firstnameValueLabel);
gridLayout.addComponent(new Label("Lastname"));
gridLayout.addComponent(lastnameValueLabel);
// and so on.

VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.addComponent(myHeaderComponent);
verticalLayout.addComponent(gridLayout);

I've tried everything I could think of to have the valueLabel (firstnameValueLabel, etc.) text wrap but nothing seems to work. I've tried to assign specific sizes to the GridLayout, the VerticalLayout, rather than 100%, and so on but without any success. I am using a VerticalLayout because I have additional stuff above the data.

Perhaps using a GridLayout isn't the best option, maybe there's a better way to line up forms that aren't fields. Although FormLayout would be perfect it only seems to work with input fields.

In any case how should I implement this so that the Label text wraps?

Aucun commentaire:

Enregistrer un commentaire