如何在vaadin中向右推我的按钮？

Question

So I know I could do this with css, but I'm trying not to write any css outside of what ships with the theme, because I'm prototyping.

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

}

I want all of the buttons in the action bar to be right aligned in the layout. When looking at the dom I can see that the actionBarWrapper is full width, and the components are grouped together, but the alignment doesn't seem to be doing its job

Answer 1

A solution is to add a spacer before first element.

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