tutorial - Diseñar un botón JavaFX 2 usando solo FXML-¿Cómo agregar una imagen a un botón?

imagen a un boton javafx

Question

Quiero cambiar el estilo de un botón, la mayoría de los hilos aquí y los artículos en Internet muestran cómo hacerlo usando código Java, que no veo como una buena solución, ¿hay alguna manera, por ejemplo, de establecer un botón con texto y una imagen dentro de todo usando FXML solamente (sin Css)?

Answer 1

Un par de cambios que hice en el ejemplo de css (ref. #Btn {en el comentario n. ° 3):

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

Esto eliminó el contorno del botón y solo dejó la imagen. Pude cambiar el tamaño del selector de botones en Scene Builder como un ImageView y ver el cambio de la imagen en tiempo real. Agregué una información sobre herramientas para explicar la imagen ya que no había texto ni un contorno de botón. Planeo usar técnicas explicadas en otra parte y alterar la imagen cuando hago clic para dar más comentarios visuales de que la imagen es un botón.

También tenga en cuenta: Necesitaba especificar el id del botón en el ''Id de CSS'' (Constructor de Escenas) en lugar de ''fx: id'' para que se vinculen.

Agregar estos cambios a lo explicado anteriormente me permitió lograr mi objetivo: tener un botón que se parezca solo a la imagen (por ejemplo, forma redonda en el botón cuadrado).

Answer 2

FXML se usa solo para diseñar el diseño, para el estilo puede usar css y referenciarlo desde su archivo FXML :

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

Para agregar una imagen a un botón fx:id="btn" en su css :

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

Este repositorio de Github proporciona un ejemplo completo de ejecución:

Answer 3

Solución usando solo fxml

Como señala tarrsalah, css es la forma recomendada de hacerlo, aunque también puedes hacerlo en formato fxml si lo prefieres:

<?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>

Para obtener lo anterior en SceneBuilder , arrastre un ImageView sobre un Button y se establecerá automáticamente como un gráfico para el botón. A continuación, seleccione ImageView y escriba la URL de la imagen en el campo de imagen de ImageView en el panel de propiedades de SceneBuilder.

Abra el fxml anterior en SceneBuilder para ver la imagen a continuación.

Atributos alternativos de css

Alterna css a los atributos -fx-background* .

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

Estos son simplemente diferentes, no necesariamente mejores para lo que estás tratando de hacer. Es solo una preferencia sobre qué usar. Encuentro estas configuraciones más fáciles de usar que las configuraciones -fx-background* . Son más restrictivos, pero la sintaxis y las opciones son mucho más fáciles de entender y sus significados se relacionan con la API de JavaDoc para Labeled .

Una descripción detallada de los atributos se encuentra en la guía de referencia css .

Aquí hay un ejemplo con un estilo que establece el gráfico incrustado en el fxml, aunque siempre es mejor separar la información del estilo en una hoja de estilo css separada como en la muestra 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>

Soluciones relacionadas para agregar imágenes a botones usando solo código Java

• JavaFX - crea un botón personalizado con imagen
• Agregar imagen a un botón en una posición específica JavaFX