Как нажимать кнопки вправо в ваадине?

Question

Так что я знаю, что могу сделать это с помощью css, но я стараюсь не писать какие-либо css за пределами того, что поставляется с темой, потому что я прототипирую.

@SpringComponent 
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE) 
class CharacterEditDialog extends VerticalLayout { 


private static final long serialVersionUID = -2755765492408272282L; 
private final transient CrudRepository<Character, Long> repository; 

private final TextField name = new TextField(); 
private final TextField concept = new TextField(); 
private final TextField apparentAge = new TextField(); 
private final RichTextArea description = new RichTextArea(); 
private final RichTextArea biography = new RichTextArea(); 
private final RichTextArea appearance = new RichTextArea(); 

private final Button save = new Button(FontAwesome.SAVE); 
private final Button cancel = new Button(); 
private final Button delete = new Button(FontAwesome.TRASH_O); 
private final HorizontalLayout actions = new HorizontalLayout(save, cancel, delete); 

@Autowired 
CharacterEditDialog(final CrudRepository<Character, Long> repository) { 
    this.repository = repository; 
    this.setMargin(true); 
    this.setSpacing(true); 
    this.save.setStyleName(ValoTheme.BUTTON_PRIMARY); 
    this.save.setClickShortcut(ShortcutAction.KeyCode.ENTER); 

    this.description.setWidth(100, Unit.PERCENTAGE); 
    this.biography.setWidth(100, Unit.PERCENTAGE); 
    this.appearance.setWidth(100, Unit.PERCENTAGE); 
} 

Component edit(final Character entity) { 
    BeanFieldGroup.bindFieldsUnbuffered(entity, this); 

    this.save.addClickListener(ComponentUtils.runAndCloseWindow(() -> repository.save(entity))); 
    this.delete.addClickListener(ComponentUtils.runAndCloseWindow(() -> repository.delete(entity))); 
    return this; 
} 

@PostConstruct 
void init() { 
    FormLayout layout = new FormLayout(); 
    layout.addComponent(createTopRow()); 
    layout.addComponents(appearance, description, biography); 

    HorizontalLayout actionBarWrapper = new HorizontalLayout(actions); 
    actionBarWrapper.setWidth(100, Unit.PERCENTAGE); 
    actionBarWrapper.setDefaultComponentAlignment(Alignment.MIDDLE_RIGHT); 

    this.addComponents(actionBarWrapper, layout); 
} 

Component createTopRow() { 
    HorizontalLayout topRow = new HorizontalLayout(name, concept, apparentAge); 
    topRow.setDefaultComponentAlignment(Alignment.MIDDLE_RIGHT); 
    topRow.setSpacing(true); 
    topRow.setWidth(100, Unit.PERCENTAGE); 
    return topRow; 
} 

} 

Я хочу, чтобы все кнопки в action панели должны быть выровнены по правому краю в макете. При взгляде на дом я вижу, что actionBarWrapper имеет полную ширину, а компоненты сгруппированы вместе, но выравнивание, похоже, не выполняет свою работу.

Answer 1

Решение состоит в том, чтобы добавить проставку перед первым элементом.

Component createTopRow() { 
    Label spacer = new Label(); 
    spacer.setWidthUndefined(); 
    HorizontalLayout topRow = new HorizontalLayout(spacer, name, concept, apparentAge); 
    topRow.setExpandRatio(spacer, 1); 
    topRow.setSpacing(true); 
    topRow.setWidth(100, Unit.PERCENTAGE); 
    return topRow; 
}