Vaadin의 레이아웃에서 구성 요소 위치

Question

다음 문제가 있습니다. 제목 (페이지 상단)과 메뉴 (페이지 중앙)로 페이지를 만들고 싶습니다. 내 코드는 다음과 같습니다.

package org.crabar.views; 

import com.vaadin.annotations.Theme; 
import com.vaadin.navigator.View; 
import com.vaadin.navigator.ViewChangeListener; 
import com.vaadin.ui.*; 
import org.crabar.ViewController; 

/** 
* Created by Crabar on 01.11.2014. 
*/ 
@Theme("mytheme") 
public class StartView extends VerticalLayout implements View { 

    public StartView() { 
     setSizeFull(); 
     setMargin(true); 
     createTitle(); 
     createMenu(); 
    } 

    private void createMenu() { 
     VerticalLayout menu = new VerticalLayout(); 
     menu.setSpacing(true); 
     menu.setWidth(150, Unit.PIXELS); 
     menu.setHeightUndefined(); 
     addComponent(menu); 
     setComponentAlignment(menu, Alignment.MIDDLE_CENTER); 
     Button startGameButton = new Button("Start game", new Button.ClickListener() { 
      @Override 
      public void buttonClick(Button.ClickEvent event) { 
       ViewController.getInstance().changeView(ViewController.GAME_VIEW); 
      } 
     }); 
     startGameButton.setWidth(100, Unit.PERCENTAGE); 
     menu.addComponent(startGameButton); 

     Button achievementsButton = new Button("Achievements", new Button.ClickListener() { 
      @Override 
      public void buttonClick(Button.ClickEvent event) { 
       // 
      } 
     }); 
     achievementsButton.setEnabled(false); 
     achievementsButton.setDescription("The achievements will be soon..."); 
     achievementsButton.setWidth(100, Unit.PERCENTAGE); 
     menu.addComponent(achievementsButton); 
    } 

    private void createTitle() { 
     Label label = new Label("Craberoid 2.0"); 
     label.setStyleName("title-style"); 
     addComponent(label); 
     label.setWidth(null); 
     label.setHeight(null); 
     setComponentAlignment(label, Alignment.TOP_CENTER); 
    } 
} 

화면의 메뉴 위치를 제외하고 모두 괜찮습니다. 그것은 다음 같습니다 그래서

그렇지를 화면 중앙에 있지만 중앙과 하단 사이. 나는 몇 시간을 보냈지 만 중앙에 메뉴를 설정하고 맨 위에 제목을 설정하는 방법을 찾지 못했습니다.

Answer 1

정렬만으로는 충분하지 않습니다. 줄 바꿈 세로 배치는 두 항목을 각각 50 % 높이로 유지합니다. 레이아웃을 말하면 콘텐츠를 확장 할 수 있습니다. 다음에 setExpandRatio(menu, 1)을 호출하여 레이아웃에 메뉴를 추가하면됩니다. 이것은 Vaadin에게 레이아웃 내에서 메뉴를 100 % 제공하도록합니다.

https://vaadin.com/api/7.3.3/com/vaadin/ui/AbstractOrderedLayout.html#setExpandRatio%28com.vaadin.ui.Component,%20float%29에서이 방법은 구성 요소 사이에 어떻게 분배되는지를 초과하는 공간 레이아웃을 제어하는 ​​데 사용됩니다. 레이아웃 크기가 크고 상대적으로 크기가 작은 구성 요소가 포함되어 있으면 사용 가능한 공간을 모두 소비하지 않는 경우 초과 공간이있을 수 있습니다.

예 1의 분배 방식 없음 비율이 설정되어 있지 않은 경우, 과잉 공간 모두 골고루 분포

layout.setExpandRatio(component1, 1); 
layout.setExpandRatio(component2, 2); 

: 컴포넌트 2에 대한 3 (67 %) : 컴포넌트 1을위한 3 (33 %) 및 2- 구성 요소.

참고 :이 방법이 효과를 가지려면 방향에 따라 너비 또는 높이를 정의해야합니다.