Mano programando en un dispositivo del que surge el logo de JavaFX

Iniciación a JavaFX: crea tu primera ventana interactiva


Vamos a dar nuestros primeros pasos con JavaFX, la librería que nos permitirá crear interfaces gráficas de usuario (GUI) flexibles y atractivas para nuestras aplicaciones Java. JavaFX es el sucesor natural de Swing, y permite desarrollar aplicaciones con un diseño más profesional, limpio y moderno. En esta sesión aprenderás:

  • Qué es JavaFX y para qué sirve
  • Cómo se estructura una aplicación JavaFX
  • Cómo crear tu primera ventana
  • Diferencias básicas entre JavaFX y Swing

¿Qué es JavaFX?

JavaFX es un conjunto de paquetes y APIs para desarrollar aplicaciones cliente enriquecidas. Nació como el sucesor de Swing y AWT, ofreciendo un enfoque más moderno y permitiendo crear interfaces de usuario más flexibles y visualmente atractivas, con soporte para multimedia, gráficos 2D y 3D, y una forma más declarativa de construir interfaces mediante FXML. Se usa para desarrollar aplicaciones de escritorio, móviles o incluso embebidas.

Características destacadas de JavaFX

CaracterísticaExplicación breve
Basado en escenasUsa un sistema de nodos y escenas muy visual
Compatible con CSSPuedes usar estilos con CSS, como en diseño web
Soporta animacionesCrear animaciones es muy fácil
MVC amigableFacilita una separación clara entre lógica, interfaz y datos
Compatible con FXMLPuedes diseñar interfaces con archivos XML (FXML)

Conceptos Clave en JavaFX

  1. Stage (Escenario): Imagina que es la ventana principal de tu aplicación. Es el contenedor de más alto nivel. Una aplicación JavaFX tiene al menos un Stage primario, que nos lo proporciona la propia plataforma JavaFX.
  2. Scene (Escena): Dentro de un Stage, colocamos una Scene. La Scene es el contenedor para todo el contenido visible, como botones, etiquetas, campos de texto, etc. Solo puede haber una Scene activa en un Stage a la vez, pero podemos cambiarla dinámicamente.
  3. Node (Nodo): Son los elementos individuales que componen una Scene. Un Button, un Label, un TextField, un VBox (un layout para organizar otros nodos verticalmente)… ¡todo es un Node! Los nodos se organizan en una estructura de árbol llamada grafo de escena.

Estructura básica de una App en JavaFX

Toda aplicación JavaFX debe tener una clase principal que extienda de javafx.application.Application. Esta clase debe implementar el método abstracto start(Stage primaryStage), que es el punto de entrada visual de la aplicación.

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

public class MiPrimeraAppFX extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Crear un nodo raíz
        Label etiqueta = new Label("¡Hola, JavaFX!");
        StackPane root = new StackPane(); // Nodo contenedor
        root.getChildren().add(etiqueta); // Añadimos etiqueta

        // Crear la escena
        Scene escena = new Scene(root, 300, 200); // Nodo raíz, ancho, alto

        // Configurar el escenario (ventana)
        primaryStage.setTitle("Mi primera app JavaFX");
        primaryStage.setScene(escena);
        primaryStage.show(); // Mostrar ventana
    }

    public static void main(String[] args) {
        launch(args); // Lanzar aplicación
    }
}

Explicación paso a paso:

  • extends Application: Indica que esta clase es una aplicación JavaFX.
  • start(Stage primaryStage): Es el punto de entrada principal para todas las aplicaciones JavaFX. El primaryStage es la ventana principal que nos da la plataforma.
  • Label etiqueta = new Label(...): Creamos una etiqueta de texto.
  • StackPane root = new StackPane(): Creamos un panel de diseño simple. Los layouts o panes son contenedores que nos ayudan a organizar los nodos.
  • root.getChildren().add(holaLabel): Añadimos nuestra etiqueta al panel.
  • Scene scene = new Scene(root, 300, 200): Creamos la escena, indicando qué nodo es su raíz (el StackPane) y sus dimensiones.
  • primaryStage.setTitle(...), primaryStage.setScene(...), primaryStage.show(): Configuramos el título de la ventana, le asignamos la escena y, finalmente, la hacemos visible.
  • main(String[] args) y launch(args): El método main es el punto de entrada estándar de Java. launch(args) es un método de la clase Application que inicializa el toolkit de JavaFX y luego llama al método start().

Comparación entre JavaFX y Swing

CaracterísticaJavaFXSwing
Moderno y visual✅ Diseño más limpio y personalizable❌ Estilo visual más anticuado
CSS✅ Compatible con hojas de estilo❌ No compatible
Animaciones✅ Soporte nativo❌ Muy limitado o manual
Curva de aprendizajeMediaBaja
Escalable✅ Ideal para apps más complejas❌ Mejor para apps pequeñas

Buenas prácticas iniciales

  • Siempre extiende Application en tu clase principal.
  • Usa layouts como VBox, HBox, StackPane, etc., para organizar componentes.
  • Asigna siempre una escena al Stage.
  • Usa launch() solo desde el método main.
  • Mantén la lógica de la interfaz separada de la lógica del programa (MVC).

¿Y después qué?

Una vez que entiendes la estructura básica, puedes empezar a explorar:

  • Elegir y gestionar Layouts, contenedores para organizar visualmente nuestros nodos
  • Cómo añadir botones, campos de texto y otros componentes
  • Cómo manejar eventos (clics, teclado, etc.)
  • Cómo usar CSS y FXML
  • Cómo hacer validaciones y animaciones

¿Listo para crear tus propias interfaces modernas con JavaFX? ¡En la siguiente sesión lo veremos con botones, texto y eventos! 🎉

Si quieres, puedo prepararte también ejercicios, actividades guiadas o más ejemplos para practicar.


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.