FormLayout in GridLayout

Vaadin 6 / 7 / 8 Framework UI
1

I used GridLayout in a form in order to have two columns of fields.
The problem is that in grid layout, the field titles appear above the field, but not on the left side as in form layout.

Any ideas how to achieve that?
Thanks in advance
Tim

2

How about a FormLayout inside each of the GridLayout cells?

3

Thanks for the good idean, but how to do that?

I’m setting the gridlayout like this form.setLayout(gridLayout); and then the form is populating the grid layout using a beanitem datasource. How can I set a formlayout for each cell?

4

Making a separate FormLayout for every cell in the GridLayout would probably cause a bad permormance issue, but having two of them might work. You could have a HorizontalLayout as the form’s layout, and add two FormLayouts to it. You would have to override the Form’s attachField-method and inside that method decide if the field in question should go to the left or right formlayout, with formLayoutLeft.addComponent(field);

Another similar solution is to have two separate forms with the same data and just have different fields visible in the different forms to create two columns

One issue with both solutions that if the fields are not all of same height, the fields will not align row by row.

A third possibility is to have the gridlayout as you do, and just have no caption at all in the fields. Make the grid 4 columns wide - fields in column 2 and 4 while you have seperate labels in 1 and 3 which contains the caption text. Then they will also align.

5

Thanks a lot! A gridlayout with 4 columns solved it. I also had to override attachField and removeItemProperty methods though.

6

Perhaps the
FormBinder add-on
 would help make that simpler.

I’m just now trying that myself, for the same purpose as you (nicely arranged layout using GridLayout, with data-binding features of a Form). FormBinder seems a good way to accomplish that goal, while waiting for such features in the future Vaadin 7.

–Basil Bourque

7

Hi, I read your discussion and I have the same problem. I need to create a form with 25 fields each bound to a table (both bounds a datasource). Unfortunately I can’t use the form-binder add-on, because of my project manager doesn’t want. How can I do a workaround in order to have the caption fields to te left of all fields? Thank you for your response.

P.s. sorry for my horrible english. :slight_smile:

Mario

8

See e.g.
this example
 of using GridLayout with a form - not exactly the layout you want but can give a starting point. You’ll want to copy the captions of the fields to Labels in the first column and then remove the captions (setCaption(null)) to avoid having them twice.

9

Thanks Henri,
I tried to do what you told me. Is a good solution, but fields are not at the same label’s level within the layout. Labels and fields are staggered. Now I’ll continue with your solution, because it is the best method I tried until now. But I’m sure that I’ll have to change soon. Thank you very much.

Mario.

10

for Columnar layout I use CustomLayout to render . using

(instead div…I use table for meeting the deadline :frowning: )




String WIDTH = "200px";
 final String TABLE_HEAD = "<table>";
 String TABLE_END = "</table>";


if (properties == null) {
            return;
        }

        StringBuffer sb = new StringBuffer();
        sb.append(TABLE_HEAD);
        for (int i = 0; i < properties.length; i++) {
            if (i % columnCount == 0) {

                sb.append("</tr><tr>");
            } else if (i == 0) {
                sb.append("<tr>");
            }
            sb.append("<td style=\"width:").append(WIDTH).append(";margin-right:5px;margin-bottom:5px;\" nowrap>");

            String caption = captionMap.get(properties[i]
);

            if(CommonUtil.isStringArrayMember(hiddenProperties, properties[i]
)){
              sb.append("<span style=\"color:#ccc;\">") ;
            }else{
              sb.append("<span>");
            }
                if (caption != null) {
                    sb.append(caption).append(":");
                } else {
                    sb.append(DefaultFieldFactory.createCaptionByPropertyId(properties[i]
)).append(":");
                }
            sb.append("</span>");

            sb.append("</td>");
            sb.append("<td width=\"10\"><div style=\"width:10px\"/></td>");
            sb.append("<td style=\"width:").append(WIDTH).append(";margin-right:5px;margin-bottom:5px;\" nowrap>");

            if (CommonUtil.isStringArrayMember(hiddenProperties, properties[i]
)) {
                sb.append("<span/>");
            } else {
                sb.append("<span location=\"").append(properties[i]
).append("\"/>");
            }

            sb.append("</td>");


        }
        sb.append("</tr>");
        sb.append(TABLE_END);
        setTemplateContents(sb.toString());
11

I created a customLayout, with an html template, but not in this way. Now I have another problem: the validator. How can I do to see error messages within the footer of my customLayout form? FormLayout usually handle itself validators…I would something like that. Help me.

Mario

12

The error message is created (based on the fields of the form) by Form.getErrorMessage() and then painted by AbstractComponent.paintComponent().

You cannot modify components in the paint phase, but you could call getErrorMessage() before the paint phase in some suitable listener (e.g. listening for modifications of the fields) and then use the message to display error information elsewhere.

13

Thank you Henri,
Your help is always appreciated. I’m new in vaadin word and I’m learning its feautures. But I hope that the new versions improve some problems.

Mario