Imageview inside Hbox in FXML file

Question

I’m trying to insert an image into a HBox through a ImageView but I’m not getting it.

Fxml code:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane fx:id="borderPane" stylesheets="@../css/botoes.css" id="BorderPane" xmlns:fx="http://javafx.com/fxml/1" fx:controller="teste.FXMLDocumentController">
    <left>
        <HBox fx:id="hbox" alignment="CENTER">
            <Button fx:id="btnIniciar" onAction="#acaoIniciar" />
            <Button fx:id="btnPausar" onAction="#acaoPausar" />
            <Button fx:id="btnParar" onAction="#acaoParar" />
            <Button fx:id="btnSubirFila" onAction="#acaoSubirFila" />
            <Button fx:id="btnDescerFila" onAction="#acaoDescerFila" />
            <Button fx:id="btnRemover" onAction="#acaoRemover" />
            <Button fx:id="btnAdicionarArquivo" onAction="#acaoAdicionarArquivo" />
            <Button fx:id="btnLinkMagnetico" onAction="#acaoLinkMagnetico" />
            <Button fx:id="btnGerarTorrent" onAction="#acaoGerarTorrent" />
        </HBox>
    </left>
    <right>
        <HBox fx:id="hbox2" alignment="CENTER">
            <ImageView fx:id="image" disable="false" fitHeight="60" fitWidth="60" pickOnBounds="true" preserveRatio="true" />
            <TextField fx:id="txtPesquisar" />
        </HBox>
    </right>
</BorderPane>

To test, I removed the line where I inserted the ImageView in fxml and added the image via the controller in the following snippet:

this.image = new ImageView(new Image("/imagens/iniciar.png"));
this.image.setFitHeight(TAMANHO_IMAGEM_X);
this.image.setFitWidth(TAMANHO_IMAGEM_Y);
this.hbox2.getChildren().add(image);

And miraculously no error occurred!

I also tried to insert the image into the ImageView within the fxml file, without creating any object in the controller:

<ImageView fx:id="image" disable="false" fitHeight="60" fitWidth="60" pickOnBounds="true" preserveRatio="true">
    <image>
        <Image url="@../imagens/iniciar.png" />
    </image>
</ImageView>

But it didn’t work either.

Detail: in this last test appeared, among several others, the following line in the output:

Caused by: javafx.fxml.LoadException: ImageView is not a valid type.

My biggest problems with javafx are like this, I try to use fxml and a controller and start sprouting errors.

Answer 1

Your FXML code lacks the tag <children></children> within Hbox (No Borderpane also):

// Supondo que sua pasta images está dentro da pasta src
<HBox>
   <children> // Esta tag está faltando
      <ImageView fitHeight="275.0" fitWidth="603.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../images/exemplo.jpg" />
         </image>
      </ImageView>
   </children>
</HBox>

Scenebuilder also gives you the option to use the absolute path to the image in this way:

<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ImageView fitHeight="275.0" fitWidth="603.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="file:/home/usuario/Documents/NetBeansProjects/JavaFXApp/src/images/exemplo.jpg" />
            // Observe o file:
         </image>
      </ImageView>
   </children>
</HBox>

Kubuntu 16.04 tested with Netbeans 8.2, Java 1.8.0_131 and Scenebuilder 8.3.0 (07/17/2017)

Answer 2

Try to mount fxml this way, I used Javafx Scene Builder 8.3.0.

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="951.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
<right>
  <HBox alignment="CENTER" prefHeight="400.0" prefWidth="606.0" BorderPane.alignment="CENTER">
     <children>
        <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
           <image>
              <Image url="@../Pictures/987-proteam-xx1_2015.png" />
           </image>
        </ImageView>
        <TextField prefHeight="25.0" prefWidth="231.0" />
     </children>
  </HBox>
</right>
<left>
  <HBox alignment="CENTER" prefHeight="400.0" prefWidth="356.0" BorderPane.alignment="CENTER">
     <children>
        <Button mnemonicParsing="false" text="Iniciar" />
        <Button layoutX="164.0" layoutY="198.0" mnemonicParsing="false" text="Pausar" />
     </children>
  </HBox>
</left>
</BorderPane>