En esta lección exploraremos los componentes básicos que puedes utilizar en JavaFX para construir interfaces gráficas más interactivas y funcionales. Veremos cómo crear botones, cuadros de texto, menús desplegables (ComboBox), etiquetas de texto y cómo mostrar mensajes de alerta. ¡Empecemos!

Botón

Los botones son esenciales para capturar la interacción del usuario. Se crean con la clase Button y pueden tener un texto asociado.

Button btn = new Button("Calcular");

¿Qué hace este código?

• Crea un botón con el texto "Calcular".
• Puedes añadir eventos con setOnAction, como vimos en lecciones anteriores.

Cuadro de texto

Un cuadro de texto (TextField) permite al usuario introducir información. Es muy útil para formularios o cálculos dinámicos.

TextField n2 = new TextField ();

Características principales:

• Se pueden obtener y establecer valores con los métodos getText() y setText().
• Puedes definir un texto de ayuda inicial con setPromptText.

Ejemplo:

javaCopyEditn2.setPromptText("Introduce un número");

ComboBox

El ComboBox es un menú desplegable que permite al usuario seleccionar una opción de una lista.

ComboBox op = new ComboBox(options);

Para llenar el ComboBox con opciones:

1. Con código Java:

ObservableList<String> options = FXCollections.observableArrayList("+", "-", "*", "/");
ComboBox op = new ComboBox(options);

2. Desde FXML:

<ComboBox fx:id="op" prefWidth="150.0">
    <items>
        <FXCollections fx:factory="observableArrayList">
            <String fx:value="+" />
            <String fx:value="-" />
            <String fx:value="*" />
            <String fx:value="/" />
        </FXCollections>
    </items>
</ComboBox>

Ventaja del FXML: Separa el diseño de la lógica, facilitando el mantenimiento del código.

Texto

La clase Text permite mostrar etiquetas o mensajes estáticos en la interfaz.

Text txt = new Text("Ha ganado el jugador " + color);

Características:

• Se puede estilizar con CSS (setStyle).
• Útil para mostrar mensajes dinámicos.

Mensaje de alerta

Los mensajes de alerta son ventanas emergentes que muestran información importante o mensajes al usuario.

Stage stage = (Stage)((Button)e.getSource()).getScene().getWindow();

final Stage dialog = new Stage();
dialog.initModality(Modality.APPLICATION_MODAL);
dialog.initOwner(stage);
VBox dialogVbox = new VBox();
            
Text txt = new Text("Ha ganado el jugador " + color);
dialogVbox.setAlignment(Pos.CENTER);
VBox.setVgrow(txt, Priority.ALWAYS);
dialogVbox.getChildren().add(txt);
Scene dialogScene = new Scene(dialogVbox, 300, 200);
dialog.setScene(dialogScene);
dialog.show();  

¿Qué hace este código?

1. Obtiene la ventana principal donde se mostrará el mensaje.
2. Crea un nuevo Stage (ventana).
3. Configura el contenido del mensaje (Text) y lo coloca en un VBox.
4. Muestra la ventana con el método show().

Resumen

• Botón: Interacción básica del usuario.
• Cuadro de texto: Entrada de datos.
• ComboBox: Selección de opciones.
• Texto: Mensajes o etiquetas dinámicas.
• Mensajes de alerta: Ventanas emergentes para información importante.

Con estos componentes, puedes empezar a construir interfaces más completas y útiles. En la próxima lección, aprenderemos a trabajar con documentos FXML para separar el diseño de la lógica. ¡Sigue aprendiendo! 🎉