JavaFX如何从SceneBuilder设置ImageView

Question

As i see in SceneBuilder you can set graphic for ImageView (though that image will not work if you export the project as .jar and you have the image into the jar).

1) I want to set images for some fxml buttons through SceneBuilder but i can't find anything about that.

2) Also it will be usefull if you provide info on how to do with .fxml what i do with getClass().getResource("image.png"); ,so i have not to do this on the java file manually.

Edit:

Both answers from Fabian and are John Vernee are correct each one for question 1 and 2 but i can choose only one.

The structure of resources folder:

Answer 1

In SceneBuilder drag the graphic node you want to use (in this case ImageView ) from the Library to the Button in the Hierarchy view. Drop it there and you should see the graphic node displayed as a child of the Button .

This will result in a fxml like this

...
<Button mnemonicParsing="false" text="Button">
    <graphic>
        <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
    </graphic>
</Button>
...

By using the gear button next to the image property of the ImageView you can specify a image url starting with @ by selecting Switch to document relative path . Input image.png for the url @image.png . Saving the fxml to the correct location relative to the image will display the image in SceneBuilder.

Answer 2

You can set the url for an ImageView in FXML like this:

<ImageView>
    <image>
        <Image url="@my_image.png" />
    </image>
</ImageView>

It will look in the same folder as the FXML file for the image.

---

You could set the graphic of a Button by referencing it from FXML:

<!-- Define some ImageView -->
<fx:define>
    <ImageView fx:id="my_image">
        <image>
            <Image url="@my_image.png" />
        </image>
    </ImageView>
</fx:define>

<!-- Reference it here -->
<Button graphic="$my_image"/>

---

I'm building my jar using apache maven 's plugin for eclipse, using the javafx-jar-plugin .

If you've worked with maven before, you can use this plugin in pom.xml :

<build>
    <plugins>
        <plugin>
            <groupId>com.zenjava</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>8.5.0</version>
            <configuration>
                <mainClass>application.MainFXML</mainClass>
            </configuration>
        </plugin>
    </plugins>
</build>

---

I've put the FXML file and the image in the same folder under src/main/resources , so they get included into the jar.

Run maven build with the jfx:jar goal.