JavaFX Label doesn't update

Question

I have a .fxml file with a <Label> tag and a <ImageView> in it. In my controller class there an event function that is called, the ImageView is updated but my label stays the same. All help is definetly appreciated.

My controller:

public class LayoutController implements BrowserPlaybackEvent {
    @FXML
    public ImageView currentTrack;

    @FXML
    public Label trackTitle;

    SpotySync spotySync;
    public LayoutController(){
        this.spotySync = Main.spotySync;
        spotySync.addBrowserPlaybackEventListerners(this);
    }



    @Override
    public void browserPlaybackEvent(JSONObject playBackState) {
        System.out.println("Layout controller handling browser event");
        Track track = new Track((JSONObject) ((JSONObject) playBackState.get("track_window")).get("current_track"));
        trackTitle.setText(track.name);
        currentTrack.setImage(track.tAlbum.image);

    }
}

.jfxml file:

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="729.0" prefWidth="861.0" styleClass="HBox" stylesheets="@stylesheet.css" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="nl.nothic.spotysync.ui.LayoutController">

   <children>
      <Pane prefHeight="200.0" prefWidth="617.0" />
      <Pane prefHeight="200.0" prefWidth="200.0" />
      <Pane id="currentlyPlaying" maxHeight="300.0" minHeight="300.0" prefHeight="300.0" prefWidth="200.0">
         <Label>
            <graphic>

               <ImageView fx:id="currentTrack">
                  <image>
                     <Image url="https://i.scdn.co/image/ab67616d00001e02eb9888357d422ff3e6bf0321" />
                  </image>
               </ImageView>

            </graphic>
         </Label>

         <Label fx:id="trackTitle" alignment="CENTER" layoutX="300.0" layoutY="14.0" prefHeight="45.0" prefWidth="550.0" text="Song title" textAlignment="CENTER" textFill="WHITE" wrapText="true">
            <font>
               <Font size="30.0" />
            </font>
         </Label>

      </Pane>
   </children>
</VBox>

Application class:

public class Gui extends Application{
    SpotySync spotySync = null;

    @Override
    public void start(Stage primaryStage) throws IOException {

        Parent root = FXMLLoader.load(Objects.requireNonNull(getClass().getClassLoader().getResource("nl/nothic/spotysync/ui/Layout.fxml")));


        Scene scene = new Scene(root,600,600);
        scene.getStylesheets().add(getClass().getClassLoader().getResource("nl/nothic/spotysync/ui/stylesheet.css").toExternalForm());

        primaryStage.setTitle("SpotySync");
        primaryStage.setScene(scene);
        primaryStage.show();


    }

    public static void launch(){
        Application.launch();
    }

}

The problem I am getting is in the controller. When the browserPlaybackEvent is called a new track is played and the application updated. The Imageview (currentTrack) is updated, also visually in the application itself. I have debugged the code and track.name is valid text and the object is also updated with new text. However in the application only the image gets updated.

I have spent about an hour trying to pinpoint the issue without results.

Thanks in advance

Answer 1

I am not sure why but I think the problem has to do that the event is called on a different Thread (I am no expert on threading so I might be wrong). The reason I didn't suspect this was because the ImageView element did update.

For the solution. To get the correct thread to update the text I used:

Platform.runLater(() -> {
    trackTitle.setText(track.name);
});

This (I think) moves the update to the correct Thread and updates the <Label> .