Text field value returning Empty value on every call

Vaadin 6 / 7 / 8
1

Maven dependencies:
vaadin-spring 2.0.0
vaadin-server: 8.2.0
vaadin-spring-boot-starter: 1.0.0

I’m following a builder pattern for my project, But I’m running into an issue with my text fields, I’m a newbie to vaadin so any advice or relevant links will be appreciated. I started off by using the component out of the box i.e. not ValueChangeListeners, Binding. This is where I encountered the null value being returned the first time.

I then found some threads stating that I should just add a ValueChangeListeners to my text field and my trouble will be over. This did not work.

I then went on to read up on field binding and managed to manually bind my TextField and Player object, still to no avail. Te returned value is always empty. Please I have been sitting on this for a day and it is driving me crazy.

@Component
public class PlayerLayoutFactory implements UIComponentBuilder {

    private class RegisterPlayerLayout extends VerticalLayout {
        // ui objects
        TextField player1;
        Button lockPlayer1;
		
		Player p1 = new Player("foo");

        Binder<Player> fieldGroupP1 = new Binder<>(Player.class);

        public RegisterPlayerLayout init() {
            player1 = new TextField(BoardStringUtils.PLAYER_1.getString());
            player1.setWidth("50%");

            lockPlayer1 = new Button(BoardStringUtils.LOCK.getString());
            lockPlayer1.setWidth("50%");

            fieldGroupP1.forField(player1).withNullRepresentation ( "" ).bind(Player::getPlayerName, Player::setPlayerName);
            fieldGroupP1.bindInstanceFields(this);
            fieldGroupP1.setBean(p1);

            return this;
        }

        public RegisterPlayerLayout layout() {
            addComponent(player1);
            addComponent(lockPlayer1);
            
            setComponentAlignment(player1, Alignment.MIDDLE_CENTER);
            setComponentAlignment(lockPlayer1, Alignment.TOP_CENTER);

            return this;
        }

        public RegisterPlayerLayout setClickerListeners() {
            player1.addValueChangeListener(event -> event.getValue());
            
            lockPlayer1.addClickListener((ClickEvent event) -> {
                lockPlayer1.setCaption(p1.getPlayerName());

                System.out.println("text: "+player1.getValue());
                if (!player1.isEmpty()) {
                    boardService.assignPlayerNames(player1.getValue());
                    lockPlayer1.setEnabled(false);
                } else {
                    try {
                        throw new IOException("");
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }

            });

            return this;
        }
    }

    @Override
    public Component createComponent() {
        return new RegisterPlayerLayout().init().layout().setClickerListeners();
    }

    public Component createComponent(BoardService boardService) {
        this.boardService = boardService;
        return createComponent();
    }
}