Search code examples
vaadin7

unable to align components properly


I want to align my components in the window like this

enter image description here

The problem is that no matter how I try using layouts and setting widths and heights - it's either on the top of the window(almost in the border) or too far from the center.

Currently it looks like this

enter image description here

My code for the window looks like this

public MakeChoiceWindow(TextPage page) {
    setHeight("300");
    setWidth("550");

    VerticalLayout windowLayout = new VerticalLayout();
    windowLayout.setSizeFull();


    VerticalLayout wrapped = new VerticalLayout();
    wrapped.setWidth("520");
    wrapped.setHeight("250");

    HorizontalLayout textAndChoiceLayout = new HorizontalLayout();
    textAndChoiceLayout.setWidth("400");

    wrapped.addComponent(new Label(" "));

    choiceMessageArea = new TextArea();
    choiceMessageArea.setValue(page.getTextMessage());
    choiceMessageArea.setWidth("250");
    choiceMessageArea.setHeight("150");
    textAndChoiceLayout.addComponent(choiceMessageArea);
    textAndChoiceLayout.setComponentAlignment(choiceMessageArea, Alignment.TOP_LEFT);

    choiceRadioGroup = new OptionGroup("Your choice");
    for(int i = 0; i < page.numberOfChoices(); i++) {
        choiceRadioGroup.addItem(page.getChoice(i));
    }
    choiceRadioGroup.select(page.getChoice(0));
    choiceRadioGroup.setHeight("100");
    textAndChoiceLayout.addComponent(choiceRadioGroup);
    textAndChoiceLayout.setComponentAlignment(choiceRadioGroup, Alignment.TOP_RIGHT);

    wrapped.addComponent(textAndChoiceLayout);
    wrapped.setComponentAlignment(textAndChoiceLayout, Alignment.MIDDLE_CENTER);

    makeChoiceButton = new Button();
    makeChoiceButton.setWidth("100");
    makeChoiceButton.setIcon(FontAwesome.CHECK);
    makeChoiceButton.addClickListener(new ClickListener() {

        @Override
        public void buttonClick(ClickEvent event) {
            MakeChoiceWindow.this.close();
        }

    });

    wrapped.addComponent(makeChoiceButton);
    wrapped.setComponentAlignment(makeChoiceButton, Alignment.BOTTOM_RIGHT);

    windowLayout.addComponent(wrapped);
    windowLayout.setComponentAlignment(wrapped, Alignment.TOP_CENTER);

    setContent(windowLayout);
    center();
    setModal(true);
    setResizable(false);
}

What should I fix?


Solution

  • Well I was able to align components somehow.

    Thus not perfect (maybe I should play with components` sizes)

    public MakeChoiceWindow(TextPage page) {
        setCaption("Suddenly!");
        setHeight("300");
        setWidth("550");
    
        VerticalLayout windowLayout = new VerticalLayout();
        windowLayout.setWidth("500");
        windowLayout.setHeight("230");
    
        HorizontalLayout horizontalLayout = new HorizontalLayout();
        horizontalLayout.setWidth("480");
        horizontalLayout.setHeight("200");
    
        TextArea textMessageArea = new TextArea();
        textMessageArea.setValue(page.getTextMessage());
        textMessageArea.setWidth("360");
        textMessageArea.setHeight("180");
        textMessageArea.setEnabled(false);
    
        horizontalLayout.addComponent(textMessageArea);
        horizontalLayout.setComponentAlignment(textMessageArea, Alignment.MIDDLE_LEFT);
    
        OptionGroup choiceRadioGroup = new OptionGroup("Your choice");
        for(int i = 0; i < page.numberOfChoices(); i++) {
            choiceRadioGroup.addItem(page.getChoice(i));
        }
        choiceRadioGroup.select(page.getChoice(0));
        horizontalLayout.addComponent(choiceRadioGroup);
        horizontalLayout.setComponentAlignment(choiceRadioGroup, Alignment.MIDDLE_RIGHT);
    
        windowLayout.addComponent(horizontalLayout);
        windowLayout.setComponentAlignment(horizontalLayout, Alignment.TOP_CENTER);
    
        Button makeChoiceButton = new Button();
        makeChoiceButton.setWidth("100");
        makeChoiceButton.setIcon(FontAwesome.CHECK);
        makeChoiceButton.addClickListener(new ClickListener() {
    
            @Override
            public void buttonClick(ClickEvent event) {
                MakeChoiceWindow.this.close();
            }
    
        });
        windowLayout.addComponent(makeChoiceButton);
        windowLayout.setComponentAlignment(makeChoiceButton, Alignment.BOTTOM_RIGHT);
    
        setContent(windowLayout);
        center();
        setModal(true);
        setResizable(false);
    } 
    

    Now it looks like this

    enter image description here