¿Cómo crear y personalizar un javafx.scene.control.Button en JavaFX?

| Última modificación: 14 de enero de 2025 | Tiempo de Lectura: 4 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

No es que yo sea un nerd o un obsesionado con mis aplicaciones, pero cuando hago los botones quiero que sean realmente funcionales y atractivos. Por eso es que me gusta personalizarlos, añadirles iconos y también manejar eventos. Todo eso lo hago con javafx.scene.control.Button, porque tiene unas opciones avanzadas que me han ayudado a mejorar la experiencia de los usuarios en mis aplicaciones. Te mostraré entonces cómo crear y personalizar este componente gráfico de forma fácil.

javafx.scene.control.Button qué es

¿Qué es javafx.scene.control.Button?

Esta clase es la representación de un botón en JavaFX. Haz de cuenta que es un control por medio del cual los usuarios pueden interactuar con tu aplicación al hacer clic en él. Recuerda que los botones pueden contener texto, gráficos o ambos, y responden a eventos como clics o pulsaciones de teclas.

Tipos de botones en JavaFX:

  1. Botón normal: El botón básico que responde a clics del mouse.
  2. Botón por defecto: Responde automáticamente al presionar la tecla Enter.
  3. Botón de cancelación: Responde al presionar la tecla Esc.

Características:

  • Texto: Puedes agregar texto al botón para indicar la acción que realiza.
  • Gráficos: Además del texto, puedes agregar imágenes o iconos al botón.
  • Eventos: Cuando un usuario hace clic en el botón, se genera un evento. Puedes programar tu aplicación para que realice una acción específica cuando se produzca este evento.
  • Estilos: Puedes personalizar la apariencia del botón cambiando su color, tamaño, fuente, etc.

¿Cómo usar javafx.scene.control.Button?

Crea un botón en JavaFX

La clase javafx.scene.control.Button tiene varios constructores para crear botones según las necesidades de tu interfaz.

Ejemplo básico: botón con texto

Button btn = new Button("Haz clic aquí");

Ejemplo avanzado: botón con texto e ícono

ImageView icon = new ImageView("icono.png"); // Ruta a la imagen
Button btn = new Button("Descargar", icon);

En este ejemplo, el botón muestra un texto junto con un ícono. Me gusta porque hace que los botones sean visualmente atractivos y fáciles de entender.

Añade botones al gráfico de escena

Como necesitamos que el botón se pueda ver, debes añadirlo al gráfico de escena, junto con un contenedor y una ventana.

Ejemplo práctico: botón dentro de un StackPane

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class ButtonExample extends Application {
@Override
public void start(Stage primaryStage) {
Button btn = new Button("Presiona aquí");

StackPane root = new StackPane();
root.getChildren().add(btn);

Scene scene = new Scene(root, 300, 200);
primaryStage.setScene(scene);
primaryStage.setTitle("Ejemplo de Button en JavaFX");
primaryStage.show();
}

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

Como ves, este código crea un botón básico dentro de un contenedor StackPane.

Manejo de eventos con botones

Los botones en JavaFX son interactivos y pueden responder a diversos eventos, como clics del mouse o pulsaciones de teclas.

Ejemplo: botón que cambia un mensaje al hacer clic

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ButtonEventExample extends Application {
@Override
public void start(Stage primaryStage) {
Label label = new Label("No has presionado el botón");
Button btn = new Button("Presionar");

btn.setOnAction(e -> label.setText("¡Botón presionado!"));

VBox root = new VBox(10, label, btn);
Scene scene = new Scene(root, 300, 200);
primaryStage.setScene(scene);
primaryStage.setTitle("Manejo de Eventos con Button");
primaryStage.show();
}

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

En este ejemplo, al hacer clic en el botón, el texto de la etiqueta cambia dinámicamente.

¿Cómo personalizar los botones?

Como te dije antes, los botones en JavaFX pueden personalizarse mediante propiedades y estilos CSS.

Configuración básica

  • Botón por defecto: btn.setDefaultButton(true);
  • Botón de cancelación: btn.setCancelButton(true);

Personalización con CSS

btn.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white; -fx-font-size: 14px;");

Esto aplica un fondo verde, texto blanco y tamaño de fuente personalizado.

Botones con diferentes estilos y acciones

Button btn1 = new Button("Guardar");
Button btn2 = new Button("Cancelar");

btn1.setOnAction(e -> System.out.println("Guardando..."));
btn2.setOnAction(e -> System.out.println("Cancelando..."));

Este ejemplo muestra cómo asignar acciones específicas a diferentes botones.

Ejemplo avanzado: botón con ícono y evento

Mira que este ejemplo combina un botón con un ícono y un evento que imprime un mensaje en la consola.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class ButtonWithIcon extends Application {
@Override
public void start(Stage primaryStage) {
ImageView icon = new ImageView(new Image("file:descargar.png"));
icon.setFitHeight(16);
icon.setFitWidth(16);

Button btn = new Button("Descargar", icon);
btn.setOnAction(e -> System.out.println("Descargando archivo..."));

HBox root = new HBox(10, btn);
Scene scene = new Scene(root, 300, 100);
primaryStage.setScene(scene);
primaryStage.setTitle("Botón con Ícono y Evento");
primaryStage.show();
}

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

javafx.scene.control.Button me gusta bastante para crear interfaces gráficas interactivas en JavaFX. Desde botones básicos hasta diseños personalizados con gráficos y estilos avanzados, tienes todo lo necesario para mejorar la experiencia del usuario.

Apúntate al Bootcamp de Java Full Stack de KeepCoding y domina JavaFX desde lo básico hasta lo avanzado. Aprende a construir aplicaciones profesionales y lleva tus habilidades al siguiente nivel. ¡El futuro de la programación te espera!

Ramón Maldonado

Full Stack Developer y Responsable de Formación base en KeepCoding.

Posts más leídos