Una vez que hemos aprendido cómo organizar nuestra interfaz con Layout Panes, el siguiente paso es poblarla con elementos interactivos que permitan al usuario ver información y realizar acciones. Estos elementos son los Controles (Controls) de JavaFX. Son los bloques de construcción fundamentales de cualquier aplicación de escritorio.

Los controles son nodos especializados que proporcionan una funcionalidad específica de interfaz de usuario. Vamos a explorar los más comunes y cómo se utilizan.

Label (Etiqueta)

¿Qué es?
Un Label se utiliza para mostrar texto no editable. Puede también mostrar un icono gráfico.

Características Clave:

• Muestra texto estático o dinámico (que puede cambiar programáticamente).
• Puede contener un Node gráfico (como una ImageView) además del texto.
• Soporta ajuste de texto (wrapText) si el texto es muy largo.

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>

<Label text="Nombre de Usuario:" wrapText="true">
    <graphic>
        <ImageView>
            <image>
                <Image url="@user_icon.png" />
            </image>
        </ImageView>
    </graphic>
</Label>

Uso Típico: Mostrar títulos, descripciones, mensajes de estado, etiquetas para otros controles.

Button (Botón)

¿Qué es?
Un Button es un control que el usuario puede pulsar para disparar una acción.

Características Clave:

• Puede mostrar texto y/o un gráfico.
• La acción principal se define mediante el evento onAction.
• Puede ser un botón «por defecto» (se activa con Enter) o «cancelar» (se activa con Esc).

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>

<Button fx:id="guardarButton" text="Guardar" onAction="#handleGuardarAccion"/>

Uso Típico: Confirmar acciones (Guardar, Enviar, Aceptar), cancelar operaciones, navegar.

TextField (Campo de Texto)

¿Qué es?
Un TextField permite al usuario introducir una única línea de texto.

Características Clave:

• Se puede obtener y establecer su contenido mediante la propiedad textProperty().
• Puede tener un promptText (texto de ayuda que desaparece al escribir).
• PasswordField es una subclase especializada para contraseñas (muestra bullets en lugar de caracteres).

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.PasswordField?>

<VBox spacing="10" xmlns:fx="http://javafx.com/fxml/1">
    <TextField fx:id="nombreUsuarioField" promptText="Introduce tu nombre"/>
    <PasswordField fx:id="contrasenaField" promptText="Introduce tu contraseña"/>
</VBox>

Uso Típico: Entradas de nombre de usuario, contraseñas, búsquedas cortas, cualquier dato de una sola línea.

TextArea (Área de Texto)

¿Qué es?
Un TextArea permite al usuario introducir o ver múltiples líneas de texto.

Características Clave:

• Soporta ajuste de línea (wrapText).
• Puede ser editable o no editable.
• Permite barras de desplazamiento si el contenido excede el área visible.

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TextArea?>

<TextArea fx:id="descripcionArea" promptText="Escribe aquí una descripción detallada..." wrapText="true"/>

Uso Típico: Editores de texto simples, campos de comentarios, visualización de logs o descripciones largas.

CheckBox (Casilla de Verificación)

¿Qué es?
Un CheckBox representa una opción que puede estar en uno de dos estados: seleccionada o no seleccionada. También puede tener un tercer estado «indeterminado».

Características Clave:

• Tiene una etiqueta de texto.
• Su estado se gestiona con la propiedad selectedProperty().

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.CheckBox?>

<CheckBox fx:id="aceptoTerminosCheck" text="Acepto los términos y condiciones"/>

Uso Típico: Aceptar términos, activar/desactivar opciones, selecciones múltiples (ej. «Recordarme»).

6. RadioButton (Botón de Opción) y ToggleGroup

¿Qué es?
Los RadioButton se usan para permitir al usuario seleccionar una única opción de un grupo de opciones mutuamente excluyentes.

Características Clave:

• Para que funcionen como un grupo, deben estar asociados a un ToggleGroup.
• Solo un RadioButton dentro de un ToggleGroup puede estar seleccionado a la vez.

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="5" xmlns:fx="http://javafx.com/fxml/1">
    <fx:define>
        <ToggleGroup fx:id="grupoDificultad"/>
    </fx:define>
    <RadioButton text="Fácil" toggleGroup="$grupoDificultad" selected="true"/>
    <RadioButton text="Medio" toggleGroup="$grupoDificultad"/>
    <RadioButton text="Difícil" toggleGroup="$grupoDificultad"/>
</VBox>

Uso Típico: Seleccionar dificultad, género, tipo de cuenta, cualquier escenario donde solo una opción es válida.

ChoiceBox y ComboBox (Cuadro de Selección / Cuadro Combinado)

¿Qué son?
Ambos permiten al usuario seleccionar un ítem de una lista desplegable.

• ChoiceBox: Muestra una lista simple de opciones.
• ComboBox: Más potente, permite una lista desplegable y, opcionalmente, un campo de texto editable para buscar o añadir nuevos ítems.

Características Clave:

• Se pueblan con una lista de ítems (ObservableList).
• El ítem seleccionado se accede mediante valueProperty() o selectionModelProperty().

Ejemplo FXML (ComboBox):

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.collections.FXCollections?>
<?import java.lang.String?>

<ComboBox fx:id="selectorPais">
    <items>
        <FXCollections fx:factory="observableArrayList">
            <String fx:value="España"/>
            <String fx:value="Francia"/>
            <String fx:value="Alemania"/>
            <String fx:value="Italia"/>
        </FXCollections>
    </items>
    <promptText>Selecciona un país</promptText>
</ComboBox>

Uso Típico: Seleccionar un país, una categoría, una opción de una lista predefinida.

ListView (Vista de Lista)

¿Qué es?
Un ListView muestra una lista de ítems (vertical u horizontalmente) de la cual el usuario puede seleccionar uno o varios.

Características Clave:

• Se puebla con una ObservableList de ítems.
• Permite configurar el modo de selección (simple, múltiple).
• Puede personalizar la forma en que se muestra cada celda (cellFactory).

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.collections.FXCollections?>
<?import java.lang.String?>

<ListView fx:id="listaTareas">
    <items>
        <FXCollections fx:factory="observableArrayList">
            <String fx:value="Comprar leche"/>
            <String fx:value="Estudiar JavaFX"/>
            <String fx:value="Hacer ejercicio"/>
        </FXCollections>
    </items>
</ListView>

Uso Típico: Listas de correos, tareas pendientes, archivos, cualquier colección de ítems.

ImageView (Vista de Imagen)

¿Qué es?
Un ImageView se usa para mostrar una imagen.

Características Clave:

• La imagen se carga en un objeto Image.
• Puede preservar la relación de aspecto (preserveRatio) y ajustar el tamaño (fitWidth, fitHeight).

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>

<ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
   <image>
      <Image url="@/imagenes/logo_app.png" /> <!-- Asume logo_app.png en resources/imagenes -->
   </image>
</ImageView>

Uso Típico: Mostrar logotipos, avatares, imágenes de productos, iconos.

Barras de Progreso y Deslizadores

• ProgressBar y ProgressIndicator: Muestran el progreso de una tarea (0.0 a 1.0). ProgressBar es una barra horizontal, ProgressIndicator suele ser circular. Pueden ser determinados (progreso conocido) o indeterminados (espera).
• Slider: Permite al usuario seleccionar un valor de un rango deslizando un control.

Ejemplo FXML (Conceptual):

<VBox spacing="10" xmlns:fx="http://javafx.com/fxml/1">
    <ProgressBar fx:id="barraProgreso" progress="0.5"/>
    <ProgressIndicator fx:id="indicadorProgreso" progress="0.75"/>
    <Slider fx:id="controlVolumen" min="0" max="100" value="50"/>
</VBox>

Uso Típico: Indicadores de carga, controles de volumen o brillo, selección de rangos.

Menús (MenuBar, Menu, MenuItem)

¿Qué son?
Permiten crear las típicas barras de menú de las aplicaciones de escritorio.

• MenuBar: La barra principal que contiene los menús.
• Menu: Un menú desplegable dentro de la MenuBar (ej. «Archivo», «Editar»).
• MenuItem: Una opción individual dentro de un Menu que realiza una acción. También existen CheckMenuItem y RadioMenuItem.

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SeparatorMenuItem?>

<MenuBar>
  <menus>
    <Menu text="Archivo">
      <items>
        <MenuItem text="Nuevo" onAction="#handleNuevo"/>
        <MenuItem text="Abrir..." onAction="#handleAbrir"/>
        <SeparatorMenuItem />
        <MenuItem text="Salir" onAction="#handleSalir"/>
      </items>
    </Menu>
    <Menu text="Ayuda">
      <items>
        <MenuItem text="Acerca de..." onAction="#handleAcercaDe"/>
      </items>
    </Menu>
  </menus>
</MenuBar>

Uso Típico: Prácticamente todas las aplicaciones de escritorio para organizar acciones comunes.

TableView (Vista de Tabla)

¿Qué es?
Un TableView se utiliza para mostrar datos en una estructura tabular (filas y columnas).

Características Clave:

• Define TableColumn para cada columna.
• Cada TableColumn necesita un cellValueFactory para saber qué dato del objeto mostrar.
• Se puebla con una ObservableList de objetos (cada objeto representa una fila).
• Soporta ordenación por columnas.

Ejemplo FXML (Conceptual, requiere un modelo de datos):

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TableColumn?>

<TableView fx:id="tablaUsuarios">
    <columns>
        <TableColumn text="Nombre" fx:id="columnaNombre"/>
        <TableColumn text="Email" fx:id="columnaEmail"/>
        <TableColumn text="Activo" fx:id="columnaActivo"/>
    </columns>
</TableView>

Uso Típico: Mostrar listas de usuarios, productos, registros de una base de datos.

Tabla Resumen de Controles Comunes

Dominar estos controles te permitirá construir interfaces ricas y funcionales. La clave está en elegir el control adecuado para cada tarea y combinarlos eficazmente dentro de tus Layout Panes. ¡A practicar!