I want to align my components in the window like this
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
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?
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