come creare pulsanti immagine su java fxml usando scene builder?

Sto usando netbeans e voglio usare il file multimediale dal mio desktop per sostituire il pulsante noioso.

Quindi questo è il mio codice. Lo voglio in modo che l'immagine diventi il pulsante. 

<Button layoutX="252.0" layoutY="177.0" mnemonicParsing="false" prefHeight="57.0" prefWidth="135.0" text="Button!" textFill="BLUE">
     <font>
        <Font name="Avenir Next Regular" size="13.0" />
     </font>
  </Button>

Grazie in anticipo:)

Author: urviguglani, 2015-05-10
Source

3 answers

Nel file fxml, importa il pacchetto di immagini: 

<?import javafx.scene.image.*?>

Quindi poco prima del pulsante, assumendo immagine.png si trova nella directory "images/" e "images/" si trova nella stessa directory di .fxml: 

<fx:define>
   <Image fx:id="btnImage" url="images/image.png" />
</fx:define>

Quindi aggiungi quanto segue alla definizione del pulsante

<Button layoutX="252.0" layoutY="177.0" mnemonicParsing="false" prefHeight="57.0" prefWidth="135.0" text="Button!" textFill="BLUE">
     <font>
        <Font name="Avenir Next Regular" size="13.0" />
     </font>

     <graphic>
        <ImageView image="$btnImage" />
     </graphic>
  </Button>
 11
Author: AlmasB, 2015-05-10 09:10:32

Sopra la risposta è parzialmente corretta, senza specificare il simbolo ' @ 'e' url 'nell'url e in "ImageView" come

<Image fx:id="playbutImg" url="@image/image.png">
<ImageView image="$playbutImg" >

@ symbol è usato per diffrenziare tra stringa e directory relativa , se passiamo senza il simbolo @ prenderà come una stringa piuttosto che la directory relativa.

 2
Author: codeFreak, 2017-01-02 06:52:22 
    <fx:define>
            <Image fx:id="NewTracker" url="@resources/NewTracker.bmp"/>
        </fx:define>
        <Button layoutX="100.0" layoutY="100.0" mnemonicParsing="false" text="New Tracker" >
                <graphic>
                   <ImageView image="$NewTracker"/>
                </graphic>
        </Button>
 0
Author: , 2018-02-12 11:10:57