Display Image on imageview JavaFx

Question

I have a .fxml file with some empty rectangules inside a grind

<AnchorPane id="AnchorPane" prefHeight="700.0" prefWidth="650.0"     styleClass="fondo2" stylesheets="@tablerolote.css"     xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"     fx:controller="juegoloto.CartonController">


    <children>
          <GridPane gridLinesVisible="true" layoutX="11.0" layoutY="44.0"     prefHeight="614.0" prefWidth="474.0" styleClass="fondo">
            <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0"    />    
             <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
               <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
            </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <ImageView id="1" fitHeight="127.0" fitWidth="93.0" pickOnBounds="true" preserveRatio="true" />
            <ImageView id="2" fitHeight="127.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" />
            <ImageView id="3" fitHeight="126.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" />
            <ImageView id="4" fitHeight="127.0" fitWidth="97.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" />

         </children>
      </GridPane>

   </children>
</AnchorPane>

it was created automatically with netbeans (drag and drop interface), how do i send and image to display in the ImageView id="2" /ImageView id="3" etc, from the .java file

public void start(Stage stage) throws Exception {
    Parent root = FXMLLoader.load(getClass().getResource("Carton.fxml"));

    Scene scene = new Scene(root);


    stage.setScene(scene);
    stage.show();
}

i also have a controller.java file but i dont know what to do with it

public class CartonController implements Initializable {

@FXML
private Label label;

@FXML


@Override
public void initialize(URL url, ResourceBundle rb) {
    // TODO
}    

}

Answer 1

You should do this in the controller class. How to use controllers is described in full in the FXML reference, but in short:

Put an fx:id on the ImageViews (you can do this in SceneBuilder):

<AnchorPane id="AnchorPane" prefHeight="700.0" prefWidth="650.0"     styleClass="fondo2" stylesheets="@tablerolote.css"     xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"     fx:controller="juegoloto.CartonController">


    <children>
          <GridPane gridLinesVisible="true" layoutX="11.0" layoutY="44.0"     prefHeight="614.0" prefWidth="474.0" styleClass="fondo">
            <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0"    />    
             <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
               <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"     prefWidth="100.0" />
            </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <ImageView id="1" fx:id="imageView1" fitHeight="127.0" fitWidth="93.0" pickOnBounds="true" preserveRatio="true" />
            <ImageView id="2" fx:id="imageView2" fitHeight="127.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" />
            <ImageView id="3" fx:id="imageView3" fitHeight="126.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" />
            <ImageView id="4"  fx:id="imageView4" fitHeight="127.0" fitWidth="97.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" />

         </children>
      </GridPane>

   </children>
</AnchorPane>

Then inject these into your controller and you can access them as needed:

public class CartonController implements Initializable {

@FXML
private ImageView imageView1 ;

@FXML
private ImageView imageView2 ;

@FXML
private ImageView imageView3 ;

@FXML
private ImageView imageView4 ;    

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        imageView1.setImage(new Image(...));
        // etc...
    }    

}

Answer 2

You can define a method to retrieve the ImageView:

public ImageView findById(AnchorPane root, String id) {
  for (Node child : root.getChildren()) {
    if (child instanceof ImageView && child.getId().equals(id)) {
      return (ImageView)child;
    }
  }
  return null;
}

This method will iterate through all direct children of the root AnchorPane and check the ImageView node for it's ID. If no matching node is found, null will be returned. From there you can use the setImage method on the returned ImageView.