使用Vaadin的布局中的组件位置

Question

I have next problem. I want to create page with title (at top of page) and menu (at center of page). There is my code:

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);
    }
}

All fine except menu's position at screen. It looks next:

So it not in center of the screen but between center and bottom. I spent few hours but didn't find how to set the menu at center and the title at top.

Answer 1

Alignment alone is not enough. The wrapping vertical layout will keep your two items at 50% height each. So you have to tell the layout, you allow the content to expand. You do this by calling setExpandRatio(menu, 1) after adding the menu to the layout. This will tell Vaadin to give the menu 100% within the layout.

From https://vaadin.com/api/7.3.3/com/vaadin/ui/AbstractOrderedLayout.html#setExpandRatio%28com.vaadin.ui.Component,%20float%29

This method is used to control how excess space in layout is distributed among components. Excess space may exist if layout is sized and contained non relatively sized components don't consume all available space.

Example how to distribute 1:3 (33%) for component1 and 2:3 (67%) for component2 :

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

If no ratios have been set, the excess space is distributed evenly among all components.

Note, that width or height (depending on orientation) needs to be defined for this method to have any effect.