1

I'm new on coding, especialy in java, and i've tryed to use JavaFx with scene builder. My issue today is that i've done that menu with scene builder:

https://i.stack.imgur.com/FvSbN.jpg

And when I run it the images doesn't show. I've try with other scenes i've made, same issue.

https://i.stack.imgur.com/3BaeD.jpg

Here is my Main :

package com.doki;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MainRpg extends Application {

    private Stage stage;
    private BorderPane fenetre;

    @Override
    public void start(Stage stage) {
        this.stage = stage;
        this.stage.setTitle("Xar'Saroth");

        initFenetre();

        showMenu();
    }

    /**
     * Initializes the root layout.
     */
    public void initFenetre() {
        try {
            // Load root layout from fxml file.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainRpg.class.getResource("view/Fenetre.fxml"));
            fenetre = (BorderPane) loader.load();

            // Show the scene containing the root layout.
            Scene scene = new Scene(fenetre);
            stage.setScene(scene);
            stage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Shows the person overview inside the root layout.
     */
    public void showMenu() {
        try {
            // Load person overview.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainRpg.class.getResource("view/Menu.fxml"));
            AnchorPane personOverview = (AnchorPane) loader.load();

            // Set person overview into the center of root layout.
            fenetre.setCenter(personOverview);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Returns the main stage.
     * @return
     */
    public Stage getStage() {
        return stage;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

And my scene code :

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="600.0" prefWidth="900.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ImageView fitHeight="600.0" fitWidth="900.0" pickOnBounds="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <image>
            <Image url="@../menuImage.jpg" />
         </image>
      </ImageView>
      <ImageView fitHeight="186.0" fitWidth="489.0" layoutX="206.0" layoutY="343.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="150.0">
         <image>
            <Image url="@../xarSaroth.png" />
         </image>
      </ImageView>
      <ButtonBar layoutX="295.0" layoutY="518.0" prefHeight="40.0" prefWidth="281.0" AnchorPane.bottomAnchor="50.0">
        <buttons>
          <Button mnemonicParsing="false" prefHeight="25.0" text="Continuer" />
            <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="134.0" text="Nouvelle Partie" />
        </buttons>
      </ButtonBar>
   </children>
</AnchorPane>

I've read thoses posts :

Why isn't my background image being displayed in FXML

Images imported in scene builder is not getting displayed while executed in netbeans

But the solutions didn't work on me, or i'm just a bit too stupid.

By the way i've gor this error message when I launch, I don't think that is the issue : WARNING: Loading FXML document with JavaFX API of version 9.0.1 by JavaFX runtime of version 8.0.121

Thanks!

EDIT :

I have done this change : ((Image)loader.getNamespace().get("image1")).getException().printStackTrace(System.err);

and it makes that kind of error. I understand that there is a path issue no?

    java.io.FileNotFoundException: C:\Users\Stagiaire ACI\Desktop\Java\XarSaroth\bin\com\doki\menuImage.jpg (Le fichier spécifié est introuvable)
at java.io.FileInputStream.open0(Native Method)
at java.io.FileInputStream.open(Unknown Source)
at java.io.FileInputStream.<init>(Unknown Source)
at java.io.FileInputStream.<init>(Unknown Source)
at sun.net.www.protocol.file.FileURLConnection.connect(Unknown Source)
at sun.net.www.protocol.file.FileURLConnection.getInputStream(Unknown Source)
at java.net.URL.openStream(Unknown Source)
at com.sun.javafx.iio.common.ImageTools.createInputStream(ImageTools.java:486)
at com.sun.javafx.iio.ImageStorage.loadAll(ImageStorage.java:311)
at com.sun.javafx.tk.quantum.PrismImageLoader2.loadAll(PrismImageLoader2.java:127)
at com.sun.javafx.tk.quantum.PrismImageLoader2.<init>(PrismImageLoader2.java:71)
at com.sun.javafx.tk.quantum.QuantumToolkit.loadImage(QuantumToolkit.java:720)
at javafx.scene.image.Image.loadImage(Image.java:1065)
at javafx.scene.image.Image.initialize(Image.java:807)
at javafx.scene.image.Image.<init>(Image.java:695)
at com.sun.javafx.fxml.builder.JavaFXImageBuilder.build(JavaFXImageBuilder.java:47)
at com.sun.javafx.fxml.builder.JavaFXImageBuilder.build(JavaFXImageBuilder.java:37)
at javafx.fxml.FXMLLoader$ValueElement.processEndElement(FXMLLoader.java:763)
at javafx.fxml.FXMLLoader.processEndElement(FXMLLoader.java:2823)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2532)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2441)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2409)
at com.doki.MainRpg.showMenu(MainRpg.java:56)
at com.doki.MainRpg.start(MainRpg.java:24)
at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$162(LauncherImpl.java:863)
at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$175(PlatformImpl.java:326)
at com.sun.javafx.application.PlatformImpl.lambda$null$173(PlatformImpl.java:295)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.application.PlatformImpl.lambda$runLater$174(PlatformImpl.java:294)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$148(WinApplication.java:191)
at java.lang.Thread.run(Unknown Source)
  • Are those images are located in the `com.doki` package? Are those included in the classpath at runtime? – fabian Feb 23 '18 at 11:46
  • Yes they are, i've tried to put them on their onw folder, but now they are in dom/doki. – Atra Wanderer Feb 23 '18 at 12:44
  • I don't understand what did you mean by "Are those included in the classpath at runtime?". – Atra Wanderer Feb 23 '18 at 12:53
  • The image urls are resolved relative to the fxml and if there is no image to be found at the location (e.g. if the IDE does not copy the resource to the build folder) the image displayed is empty. Adding a `fx:id` to the images could give you access to the error btw: `` `... loader.load(); ((Image)loader.getNamespace().get("image1")).getException().printStackTrace(System.err);` – fabian Feb 23 '18 at 12:59
  • The error indicates thant now your fxml is broken. You need to just add the `fx:id="image1"` attribute to one of the images that fails to load. `Unable to coerce /> to class javafx.scene.image.Image` however means that there is a string `/>` that fxmlloader attempts to assign to a property of type `javafx.scene.image.Image`... Also this code should be used when loading the fxml containing the images that are not loaded which is afaik `Fenetre.fxml` not `Menu.fxml`. – fabian Feb 23 '18 at 14:35
  • The thing is that i've followed this tutorial : http://code.makery.ch/library/javafx-8-tutorial/fr/part1/ And i've learned that we need to put our anchors on a border pane. so Fenetre.fxml is My borderPane and Menu.fxml is an anchor that I put on Fenetre.fxml. Also i have edit the code for the `\>` so i have eddit on my main message the error code. – Atra Wanderer Feb 23 '18 at 14:52
  • In the first screenshot I don't see the image in the correct package. I don't see any other resource folder either which means probably you need to do something like this to add the image to the project: https://stackoverflow.com/questions/5657469/how-do-i-go-about-adding-an-image-into-a-java-project-with-eclipse – fabian Feb 23 '18 at 15:11
  • Finaly! It works! Thank you verry much Fabian! I'm new in StackOverflow, should I add the answer in my main post? – Atra Wanderer Feb 23 '18 at 15:21
  • No. You could answer your own question or close it as a duplicate of the other one, if you think the other question/answer already covers everything in your question. Alternatively you could simply delete the question but the latter 2 options afaik have some repercussions, if done too often. – fabian Feb 23 '18 at 15:26

1 Answers1

1

OK, I think that when you write code for the url path of the image in imageView, you should not refer to the file tree structure of the IDE, but should refer to the file tree structure of the compiled directory.

For example, here is the wrong code. I have marked the "image" folder as Resource Folder in IDEA. The picture will show when you preview in the scene builder, but it does not show when you run the program.

the wrong example

According to the picture, the url path is absolutely correct but it fails to show. Why? I think you should refer to the file tree structure of the compiled directory "out" and you will understand.

the correct example

So in this case, you can change the code as:

<image>
    <Image url="@../desk.jpg" />
</image>

It will work although it fails to preview in scene builder.

And the following code also works, because the "BallGame" is the root directory:

<image>
    <Image url="@/desk.jpg" />
</image>

Another way, to keep in the same form before and after compiling. You can place the image folder in the src folder. For example;

another way

It also works.

CG Wei
  • 31
  • 2