Какую макет Vaadin следует использовать?

Question

мне нужно создать что-то вроде этого:

Text1: Text2 Text7: Text8 Text11: Text12 Text3: Text4 Text9: Text10 Text13: Text14 Text5: Text6 Text15: Text16 Text17: Text18

Я попытался с помощью GridLayout и, очевидно, вы не можете добавить границы с ним, и это невероятно жесткой, чтобы работать. Например, перемещение одного из полей или добавление поля потребует реконфигурации матрицы сетки.

Я подумал об использовании комбинации разных макетов и панелей, но я, похоже, не понимаю понятия о том, кто является родителем, а какой является ребенком. Если вы не возражаете, можете ли вы изложить его в иерархии для меня с надлежащим синтаксисом/вызовами/методами?

Например (я предполагаю, что в структуре): mainLayout headerLayout panel1 Layout1 Name, Date Layout2 Copyright panel2 Layout3 Nav, Contact Info, Logout

HTML легко понять, потому что является частью иерархия кода, но я делаю это в Java, и я не знаю, что должно быть связано/внутри чего.

Как вы могли бы создать пример выше, используя макет, отличный от GridLayout?

Заранее благодарен!

Answer 1

У меня было так много проблем с сеткой/вертикальными/горизонтальными макетами, когда у моего босса были идеи о том, сколько пикселей должно иметь определенные границы и т. Д. Поэтому я сбросил все «удобные» макеты и использовал только CssLayouts (https://vaadin.com/book/-/page/layout.csslayout.html), которые являются просто простыми div, в которые все элементы загружаются. Затем я использовал Css для создания магии. Также CssLayout создает меньше HTML, чем другие макеты, поэтому писать Css становится легче, потому что конфликтов меньше и так далее. Но моим новым фаворитом является CustomLayout (https://vaadin.com/book/-/page/layout.customlayout.html), который дает мне полную мощность HTML :). Это позволяет вам работать с чистым HTML, и вы оставляете только текстовые поля и компоненты vaadin в определенных местах. Я бы попросил их;)

Answer 2

Его не так сложно, как может показаться. Вам просто нужен один HorizontalLayout, чтобы разместить ваши три 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); 
}