Проблемы с Vaadin с размером пользовательского интерфейса и полосой прокрутки

Question

Я совершенно новый для vaadin, и сейчас я боюсь этих проблем в течение 2 дней, и я в отчаянии. Я изменил пример оригинала addressbook, и это было прекрасно до тех пор, пока мне не пришлось расширять ContactForm с помощью других контролей. Проще показать, чего я хочу достичь. Было бы хорошо, если бы я мог прокрутить направо, но я не могу. Я покажу, что, возможно, некоторые из вас заметят мою ошибку. Я не буду публиковать весь код, просто необходимые части.

Здесь я создаю основной макет.

public class VaadinKoliUI extends UI { 
@Override 
protected void init(VaadinRequest request) { 
    TabSheet tabsheet = new TabSheet(); 
    HorizontalLayout residentalsTab = new ResidentalsUI(); 
    residentalsTab.setSizeFull(); 
    tabsheet.addTab(residentalsTab,"Lakók"); 
    tabsheet.setSizeFull(); 
    setContent(tabsheet); 
} 

}

public class ResidentalsUI extends HorizontalLayout implements View{ 

private Grid residentalsList = new Grid(); 
ResidentalFormTest residentalForm = new ResidentalFormTest(this); 

public ResidentalsUI(){ 
    buildLayout(); 
} 
private void buildLayout(){ 
    HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental); 
    actions.setWidth("100%"); 
    filter.setWidth("100%"); 
    actions.setExpandRatio(filter, 1); 

    VerticalLayout left = new VerticalLayout(actions, getResidentalsList()); 
    left.setSizeFull(); 
    getResidentalsList().setSizeFull(); 
    left.setExpandRatio(getResidentalsList(), 1); 

    HorizontalLayout mainLayout = new HorizontalLayout(left, residentalForm); 

    mainLayout.setSizeFull(); 
    mainLayout.setExpandRatio(left, 1); 

    this.setSizeFull(); 
    this.addComponent(mainLayout); 

} 

}

public class ResidentalFormTest extends Panel{ 
FormLayout content = new FormLayout(); 
Button save = new Button("Save", this::save); 
//more buttons and controlls 
public ResidentalFormTest(ResidentalsUI rUI) { 
    this.rUI = rUI; 
    buildLayout(); 
} 
private void buildLayout() { 
    this.setSizeUndefined(); 

    content.setMargin(true); 
    HorizontalLayout actions = new HorizontalLayout(save, cancel); 
    actions.setSpacing(true); 

    content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode, 
      roomNumber, rfidCode,comment,equipment,equipment1,equipment2); 
    actions.setSizeUndefined(); 

    this.setContent(content); 
} 

}

Так от того, что я понял еще, что я должен использовать панель, потому что FormLayout не способен показать полоса прокрутки. Я должен установить свой корень в полном объеме с помощью .setSizeFull(), а childs - неопределенным с .setSizeUndefined(), поэтому это будет размер окна браузера, и если что-то будет больше, оно отобразит полосу прокрутки. Если я изменю класс VaadinKoliUI следующим образом, у меня есть полоса прокрутки, но ui сжимается.

public class VaadinKoliUI extends UI { 
@Override 
protected void init(VaadinRequest request) { 
    TabSheet tabsheet = new TabSheet(); 
    HorizontalLayout residentalsTab = new ResidentalsUI(); 
    residentalsTab.setSizeUndefined(); 
    tabsheet.addTab(residentalsTab,"Lakók"); 
    tabsheet.setSizeFull(); 
    setContent(tabsheet); 
} 

}

Как это:

И теперь я не знаю, что делать.

Но если у кого-то есть более простая и быстрая идея, чтобы прокрутить ContactForm, пожалуйста, скажите мне.

Заранее спасибо Балаж

Answer 1

я должен установить свой корень в полном объеме с .setSizeFull() и Чайлдс неопределенных ...

В вашем случае вы должны увидеть корень как ваш Panel и FormLayout, как ребенок. Согласно Vaadin book:

Обычно, если панель имеет неопределенный размер в направлении, так как она имеет по умолчанию вертикально, она будет соответствовать размеру содержания и расти как содержание растет. Однако, если он имеет фиксированную или percentual размер и его содержание становится слишком большой, чтобы поместиться в области контента, полоса прокрутки появится в определенном направлении

Изображение ниже является наивным попытка визуальное представление:

Это, как говорится, с того момента, вы изменили ResidentalFormTest расширить Panel и установить FormLayout, как это содержание, для того, чтобы сделать вашу панель иметь свиток:

• установить размер панели до 100%, в ResidentalFormTest.buildLayout(): this.setSizeFull()
• установить размер контента к неопределенным, поэтому он может "расширить" за пределы размера панели: в ResidentalFormTest.buildLayout(): content.setSizeUndefined()

Чтобы зафиксировать распределение пространства между сеткой и панелью, я считаю, что соотношение 3: 1 должно быть достаточным. в ResidentalsUI.buildLayout():

• mainLayout.setExpandRatio (левый, 3);
• mainLayout.setExpandRatio (residentalForm, 1);

ПРИМЕЧАНИЕ: Иногда это может пригодиться для проверки (или поэкспериментировать с изменениями) свойствами Визуализированного элементов, стилями и т.д. Некоторые браузерами (chrome, firefox) имеет встроенную поддержку для такого разработчика инструменты, доступные через меню или сочетание клавиш, таких как CTRL +SHIFT + I

Answer 2

Я думаю, что вы должны иметь

• VaadinKoliUI.setSizeFull
• ResidentalsUI.setSizeFull
• ResidentalsUI.residentalsList.setSizeFull
• ResidentalFormTest.setSizeFull
• ResidentalFormTest.content.setSizeUndefined
• ResidentalsUI.left.setSizeFull

Я также предлагаю, чтобы устранить HorizontalLayout mainLayout в ResidentalsUI, так как это горизонтальное расположение себя (и, если это возможно, чтобы переименовать его, поскольку он не является UI и удалить implements View, так как не покажется Посмотреть).

Ваши отношения расширяющие выглядит хорошо, вот классы я бы написал:

public class VaadinKoliUI extends UI { 
@Override 
protected void init(VaadinRequest request) { 
    TabSheet tabsheet = new TabSheet(); 
    ResidentalsLayout residentalsTab = new ResidentalsLayout(); 
    residentalsTab.setSizeFull(); 
    tabsheet.addTab(residentalsTab,"Lakók"); 
    tabsheet.setSizeFull(); 
    setContent(tabsheet); 
} 

public class ResidentalsLayout extends HorizontalLayout { 

    private Grid residentalsList = new Grid(); 
    ResidentalFormTest residentalForm = new ResidentalFormTest(this); 

    public ResidentalsLayout(){ 
     buildLayout(); 
    } 

    private void buildLayout(){ 
     HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental); 
     actions.setWidth("100%"); 
     filter.setWidth("100%"); 
     actions.setExpandRatio(filter, 1); 

     VerticalLayout left = new VerticalLayout(actions, getResidentalsList()); 
     left.setSizeFull(); 
     residentalsList.setSizeFull(); 
     left.setExpandRatio(residentalsList , 1); 

     addComponents(left, residentalForm); 
     setExpandRatio(left, 1); 

     setSizeFull(); 
    } 
} 

public class ResidentalFormTest extends Panel { 
    FormLayout content = new FormLayout(); 
    Button save = new Button("Save", this::save); 
    //more buttons and controlls 
    public ResidentalFormTest(ResidentalsLayout rUI) { 
     this.rUI = rUI; 
     buildLayout(); 
    } 

    private void buildLayout() { 
     setSizeFull(); 

     content.setMargin(true); 
     HorizontalLayout actions = new HorizontalLayout(save, cancel); 
     actions.setSpacing(true); 

     content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode, roomNumber, rfidCode, comment, equipment, equipment1, equipment2); 
     content.setSizeUndefined(); 

     setContent(content); 
    } 
} 

Позвольте мне знать, если он работает, как ожидалось.