问题描述:

I need to set up something like this:

Text1: Text2 Text7: Text8 Text11: Text12

Text3: Text4 Text9: Text10 Text13: Text14

Text5: Text6 Text15: Text16

Text17: Text18

I've tried using GridLayout and apparently you can't add borders with it and it is incredibly stiff to work with. For example, moving one of the fields or adding a field would require reconfiguring the grid matrix.

I've thought about using a combination of different layouts and panels, but I don't seem to understand the concept of which is the parent and which is the child. If you don't mind, can you lay it out in a hierarchy for me with the proper syntax/calls/methods?

For example (I'm guessing at the structure):

mainLayout

headerLayout

panel1

Layout1

Name, Date

Layout2

Copyright

panel2

Layout3

Nav, Contact Info, Logout

HTML is easy to understand because the heirarchy is part of the code, but I'm doing this in java and I don't know what is supposed to be connected/inside of what.

How would you go about producing the above example using a layout other than GridLayout?

Thanks in advance!

网友答案:

i had so many problems with grid/vertical/horizontal layouts when my boss had ideas how many pixels certain borders should have and so on. So i dropped all of this "convenient" layouts and only used the CssLayouts (https://vaadin.com/book/-/page/layout.csslayout.html), which are only simple divs where all elements are thrown in. Then I used Css to do the magic. Also the CssLayout creates less HTML then the other layouts so writing Css gets easier because there are less conflicts and so on. But my new favorite is the CustomLayout (https://vaadin.com/book/-/page/layout.customlayout.html) which gives me full power of HTML :). This allows you to work with pure HTML and you only drop your text fields and vaadin components into the defined locations. I would give them a try ;)

网友答案:

Its not that hard as it may looks. You just need one HorizontalLayout to position your three VerticalLayouts next to each other. Then, position your components inside appropriate VerticalLayouts.

    @Override
    protected void init(VaadinRequest request) {
    final HorizontalLayout layout = new HorizontalLayout();
    layout.setSizeFull();
    VerticalLayout left = new VerticalLayout(), middle = new VerticalLayout(), right = new VerticalLayout();
    TextField a1 = new TextField(), b1 = new TextField(), c1 = new TextField();
    TextField a2 = new TextField(), b2 = new TextField();
    TextField a3 = new TextField(), b3 = new TextField(), c3 = new TextField();

    layout.addComponents(left, middle, right);
    left.addComponents(a1, b1, c1);
    middle.addComponents(a2, b2);
    right.addComponents(a3, b3, c3);

    setContent(layout);
}
相关阅读:
Top