web-dev-qa-db-fra.com

Styliser un bouton JavaFX 2 à l'aide de FXML uniquement - Comment ajouter une image à un bouton?

Je veux changer le style d'un bouton, la plupart des discussions ici et les articles sur Internet montrent comment le faire en utilisant Java code, que je ne vois pas comme un vrai bien est-il possible, par exemple, de définir un bouton avec du texte et une image à l'intérieur en utilisant uniquement FXML (pas de Css)?

javanetbeansjavafx-2fxmlscenebuilder
26
AymenDaoudi

Solution utilisant uniquement fxml

Comme le souligne tarrsalah, css est la méthode recommandée pour le faire, bien que vous puissiez également le faire en fxml si vous préférez:

<?import Java.lang.*?>
<?import Java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.Paint.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Button layoutX="104.0" layoutY="81.0" mnemonicParsing="false" text="Love&#10;Potion">
      <font>
        <Font size="30.0" />
      </font>
      <graphic>
        <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
          <image>
            <Image url="http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png" />
          </image>
        </ImageView>
      </graphic>
    </Button>
  </children>
</AnchorPane>

Pour obtenir ce qui précède dans SceneBuilder , faites glisser un ImageView au-dessus d'un Button et il sera automatiquement défini comme un graphique pour le bouton. Sélectionnez ensuite ImageView et saisissez l'url de l'image dans le champ d'image d'ImageView dans le volet des propriétés de SceneBuilder.

Ouvrez le fxml ci-dessus dans SceneBuilder pour voir l'image ci-dessous.

lovepotion

Attributs CSS alternatifs

CSS alternatif au -fx-background* les attributs.

  • -fx-graphic
  • -fx-padding
  • -fx-content-display
  • -fx-graphic-text-gap

Ce sont simplement différents, pas nécessairement meilleurs pour ce que vous essayez de faire. C'est juste une chose de préférence à utiliser. Je trouve ces paramètres plus faciles à utiliser que le -fx-background* paramètres. Ils sont plus restrictifs, mais la syntaxe et les options sont beaucoup plus faciles à comprendre pour moi et leurs significations correspondent à l'API JavaDoc pour étiqueté .

Une description détaillée des attributs se trouve dans le guide de référence css .

Voici un exemple avec un style définissant le graphique incorporé dans le fxml, bien qu'il soit toujours préférable de séparer les informations de style dans une feuille de style CSS séparée comme dans l'exemple de tarrsalah.

<Button layoutX="138.0" layoutY="226.0" mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png')" text="Love&#10;Potion">
  <font>
    <Font size="20.0" />
  </font>
</Button>

Solutions associées pour ajouter des images aux boutons en utilisant uniquement Java

47
jewelsea

FXML est utilisé uniquement pour concevoir la mise en page, pour le style, vous pouvez utiliser css et le référencer à partir de votre FXML fichier :

 <stylesheets>
    <URL value="@main.css" />
  </stylesheets>

Pour ajouter une image à un fx:id="btn" bouton dans votre css:

#btn {          
    -fx-background-image: url("Add.png");
    -fx-background-size: 18 18;
    -fx-background-repeat: no-repeat;
    -fx-background-position:left;   
}

Ce référentiel Github fournit un exemple de fonctionnement complet:

enter image description here

10
tarrsalah

Quelques modifications que j'ai apportées à l'exemple css (réf. #Btn {dans le commentaire # 3):

-fx-background-size: 100% 100%;
-fx-background-color: transparent;

Cela a supprimé le contour du bouton et n'a laissé que l'image. J'ai pu redimensionner le sélecteur de bouton dans le Scene Builder comme une ImageView et voir la photo changer en temps réel. J'ai ajouté une info-bulle pour expliquer l'image car il n'y avait ni texte ni contour de bouton. Je prévois d'utiliser des techniques expliquées ailleurs et de modifier l'image lorsque vous cliquez dessus pour donner plus de commentaires visuels que l'image est un bouton.

Notez également: je devais spécifier l'ID du bouton dans le 'CSS Id' (Scene Builder) au lieu du 'fx: id' pour les lier.

L'ajout de ces modifications à ce qui a été expliqué ci-dessus m'a permis d'atteindre mon objectif: avoir un bouton qui ne ressemble qu'à l'image (par exemple, une forme ronde dans un bouton carré).

3
Vision9000