Modo Debug

Ejecuta, falla, aprende…

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

JavaFX y FXML: una combinación profesional para tus interfaces gráficas

Programación > Java > JavaFX > JavaFX y FXML: una combinación profesional para tus interfaces gráficas

Hoy vamos a sumergirnos en una herramienta esencial para construir interfaces gráficas de usuario (GUI) en Java de forma eficaz y organizada: FXML. Si estás trabajando con JavaFX, entender FXML te abrirá un mundo de posibilidades para diseñar aplicaciones más limpias y fáciles de mantener. Además, veremos cómo configurar un proyecto Maven en IntelliJ IDEA para empezar con buen pie.

¿Qué es FXML y por qué deberías usarlo?

Imagina que estás construyendo una casa. Podrías intentar ir poniendo cada ladrillo y cada viga directamente (código Java puro para la UI), o podrías tener un plano detallado que te muestre la estructura de forma clara. Eso es FXML. FXML es un lenguaje basado en XML específico para definir interfaces de usuario en JavaFX. En lugar de crear cada botón, etiqueta y panel de diseño escribiendo código Java, describes la estructura de tu interfaz en un archivo .fxml.

Ventajas de usar FXML:

  1. Separación Clara entre Diseño y Lógica (MVC/MVP):
    • Vista (View): El archivo FXML define qué componentes hay y cómo se ven.
    • Controlador (Controller): Una clase Java asociada maneja qué sucede cuando interactúas con esos componentes (la lógica).
    • Esta separación es una práctica fundamental en el desarrollo de software, facilitando el mantenimiento y la colaboración.
  2. Legibilidad y Mantenimiento:
    • Las interfaces definidas en FXML son, por lo general, más fáciles de leer y entender que el código Java equivalente, especialmente para interfaces complejas. Modificar el diseño se vuelve más intuitivo.
  3. Compatibilidad con Herramientas Visuales:
    • FXML es el formato que utiliza Scene Builder. Esta herramienta te permite diseñar tus interfaces gráficamente arrastrando y soltando componentes, y genera el código FXML por ti. ¡Una gran ayuda para prototipar y diseñar!
  4. Facilita la Colaboración:
    • En equipos, un diseñador podría enfocarse en el FXML mientras un programador trabaja en el controlador Java.

¿Cómo se relaciona con JavaFX?
JavaFX es el framework gráfico, y FXML es una forma de declarar la interfaz que JavaFX renderizará y gestionará. FXMLLoader es una clase de JavaFX que se encarga de leer tu archivo FXML, crear los objetos Java correspondientes y enlazarlos con su controlador.

Configurando tu Entorno: Proyecto Maven con JavaFX en IntelliJ IDEA

Puede facilitarte mucho el manejo de archivos de recursos como los FXML que vamos a crear si gestionas tu proyecto con Maven. Maven es una herramienta poderosa para gestionar las dependencias de tu proyecto (librerías externas) y para construirlo (compilar, empaquetar, etc.). Si tienes dudas sobre Maven puedes empezar con esta Introducción a Maven aunque aquí vamos a crear un proyecto Maven estándar paso a paso para que no te pierdas.

Prerrequisitos:

  • JDK 1.8 (o superior, pero esta guía se enfoca en la configuración para JDK 8 donde JavaFX está incluido).
  • IntelliJ IDEA Community Edition (o Ultimate).

1: Crear un Nuevo Proyecto Maven en IntelliJ IDEA

  1. Abre IntelliJ IDEA.
  2. Haz clic en «New Project» (o «File» > «New» > «Project…»).
  3. En el panel izquierdo, selecciona «Maven«.
  4. Asegúrate de que el «Project SDK» esté configurado a tu JDK 1.8.
  5. No selecciones ningún arquetipo (archetype) por ahora.
  6. Haz clic en «Next«.
  7. Información del Proyecto Maven:
    • Name: TuProyectoJavaFX (Este será el nombre de la carpeta del proyecto).
    • Location: Elige dónde quieres guardar el proyecto.
    • GroupId: Identificador único de tu organización o grupo, usualmente en formato de dominio inverso. Ejemplo: com.tudominio o org.tuinstituto.dam.
    • ArtifactId: Es el nombre de tu proyecto/módulo. Ejemplo: tuproyectojavafx (en minúsculas es convención).
    • Version: 1.0-SNAPSHOT es un buen comienzo.
  8. Haz clic en «Finish«. IntelliJ generará la estructura básica del proyecto Maven.

2: Configurando el pom.xml

El archivo pom.xml es el corazón de tu proyecto Maven. Aquí definimos la información del proyecto, dependencias y cómo se construye.

Abre tu pom.xml y asegúrate de que tenga una estructura similar a esta (o modifícalo para que la tenga):

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <!-- Sustituye estos valores por los tuyos -->
    <groupId>com.tudominio</groupId>
    <artifactId>tuproyectojavafx</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging> <!-- Importante para aplicaciones de escritorio -->

    <name>Tu Proyecto JavaFX</name> <!-- Nombre descriptivo -->

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

    <dependencies>
        <!-- Para Java 8, JavaFX está incluido en el JDK, por lo que no necesitas
             dependencias explícitas de OpenJFX aquí.
             Si usaras Java 11+, sí necesitarías añadir las dependencias de OpenJFX.
        -->

        <!-- Ejemplo: Dependencia para JUnit 5 (pruebas unitarias) -->
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <version>5.8.2</version> <!-- O la última versión estable -->
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <version>5.8.2</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- Plugin para compilar el código -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version> <!-- O más reciente compatible -->
                <configuration>
                    <source>${maven.compiler.source}</source>
                    <target>${maven.compiler.target}</target>
                </configuration>
            </plugin>
            <!-- Plugin para crear un JAR ejecutable (configuración básica) -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <version>3.2.0</version> <!-- O más reciente compatible -->
                <configuration>
                    <archive>
                        <manifest>
                            <!-- CAMBIAR por tu clase principal con el paquete completo -->
                            <mainClass>com.tudominio.tuproyectojavafx.App</mainClass>
                        </manifest>
                    </archive>
                </configuration>
            </plugin>
            <!-- Plugin para ejecutar pruebas de JUnit 5 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.22.2</version> <!-- O más reciente compatible -->
            </plugin>
        </plugins>
    </build>
</project>

Explicación de los puntos clave del pom.xml:

  • <groupId>, <artifactId>, <version>: Tus identificadores de proyecto.
  • <packaging>jar</packaging>: Indica que el resultado será un archivo JAR.
  • <properties>:
    • maven.compiler.source y maven.compiler.target: Especifican que usaremos Java 1.8.
  • <dependencies>: Aquí se listan las librerías externas. Por ahora, solo JUnit 5 para pruebas.
  • <build><plugins>:
    • maven-compiler-plugin: Asegura que se use la versión correcta de Java.
    • maven-jar-plugin: Configura cómo se crea el JAR ejecutable, incluyendo la mainClass (la clase que tiene el método main para iniciar tu aplicación JavaFX). ¡Recuerda cambiar com.tudominio.tuproyectojavafx.App por el nombre completo de tu clase principal!
    • maven-surefire-plugin: Para ejecutar las pruebas unitarias.

Después de editar el pom.xml, IntelliJ te mostrará una notificación o un icono de Maven para «Load Maven Changes«. Haz clic para que aplique la nueva configuración.

3: Estructura de Carpetas Recomendada

Maven define una estructura estándar:

  • src/main/java: Aquí va tu código fuente Java.
    • Dentro de java, crea tus paquetes. Por ejemplo:
      • com.tudominio.tuproyectojavafx (paquete raíz para la clase App)
      • com.tudominio.tuproyectojavafx.controladores
      • com.tudominio.tuproyectojavafx.modelo
  • src/main/resources: Aquí van los archivos que no son código Java pero que tu aplicación necesita.
    • Crea una carpeta vistas aquí para tus archivos FXML.
    • Podrías tener también carpetas para css, imagenes, etc.
    • Importante: En IntelliJ, haz clic derecho en la carpeta resources -> «Mark Directory as» -> «Resources Root».

Tu Primera Vista con FXML: ¡Manos a la Obra!

Vamos a crear una ventana simple con una etiqueta y un botón.

1: Crear el Archivo FXML (MiPrimeraVista.fxml)

  1. Dentro de src/main/resources, crea una nueva carpeta llamada vistas.
  2. Haz clic derecho en la carpeta vistas -> «New» -> «FXML File».
  3. Nómbralo MiPrimeraVista.fxml.
  4. Pega el siguiente contenido:
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.171"
      fx:controller="com.tudominio.tuproyectojavafx.controladores.MiPrimeraVistaController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
    </padding>

    <Label fx:id="mensajeLabel" text="¡Hola desde FXML!"/>
    <Button fx:id="miBoton" text="Haz clic aquí" onAction="#handleMiBotonAction"/>
</VBox>
  • fx:controller: Enlaza este FXML con la clase controladora MiPrimeraVistaController que crearemos a continuación. Asegúrate de que el nombre del paquete y la clase coincidan.
  • fx:id=»mensajeLabel»: Da un identificador al Label para poder acceder a él desde el controlador.
  • onAction=»#handleMiBotonAction»: Cuando se pulse el botón, se ejecutará el método handleMiBotonAction en el controlador.

2: Crear la Clase Controladora (MiPrimeraVistaController.java)

  1. Dentro de src/main/java, crea el paquete com.tudominio.tuproyectojavafx.controladores.
  2. Haz clic derecho en ese paquete -> «New» -> «Java Class».
  3. Nómbrala MiPrimeraVistaController.
  4. Pega el siguiente contenido:
package com.tudominio.tuproyectojavafx.controladores; // Asegúrate que el paquete es correcto

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

public class MiPrimeraVistaController {

    @FXML // Anotación para inyectar el Label del FXML
    private Label mensajeLabel;

    @FXML // Anotación para inyectar el Button del FXML
    private Button miBoton;

    // Este método se llama automáticamente después de que el FXML se carga
    @FXML
    public void initialize() {
        System.out.println("MiPrimeraVistaController inicializado.");
        // Puedes configurar elementos aquí si es necesario
        // mensajeLabel.setText("Controlador listo.");
    }

    // Este método se llama cuando se pulsa el botón (definido en onAction del FXML)
    @FXML
    private void handleMiBotonAction(ActionEvent event) {
        System.out.println("¡Botón pulsado!");
        mensajeLabel.setText("¡Has pulsado el botón! Genial.");
        miBoton.setDisable(true); // Deshabilitamos el botón después de pulsarlo
    }
}
  • @FXML: Esta anotación mágica enlaza las variables de tu clase Java (mensajeLabel, miBoton) con los componentes que tienen el mismo fx:id en el archivo FXML.
  • initialize(): Se ejecuta después de que la vista FXML se haya cargado.
  • handleMiBotonAction(ActionEvent event): La lógica que se ejecuta al pulsar el botón.

3: Crear la Clase Principal Application (App.java)

  1. Dentro de src/main/java, en tu paquete raíz (ej: com.tudominio.tuproyectojavafx), crea una clase llamada App.java.
  2. Pega el siguiente contenido:
package com.tudominio.tuproyectojavafx; // Asegúrate que el paquete es correcto

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;

public class App extends Application {

    @Override
    public void start(Stage primaryStage) {
        try {
            // Ruta al archivo FXML (desde la raíz de 'resources')
            URL fxmlUrl = getClass().getResource("/vistas/MiPrimeraVista.fxml");
            if (fxmlUrl == null) {
                System.err.println("Error: No se pudo encontrar MiPrimeraVista.fxml");
                return;
            }

            Parent root = FXMLLoader.load(fxmlUrl); // Carga el FXML
            Scene scene = new Scene(root, 300, 200); // Crea la escena

            primaryStage.setTitle("Mi Primera App FXML");
            primaryStage.setScene(scene);
            primaryStage.show(); // Muestra la ventana

        } catch (IOException e) {
            e.printStackTrace();
            // Considera mostrar un diálogo de error al usuario aquí
        }
    }

    public static void main(String[] args) {
        launch(args); // Lanza la aplicación JavaFX
    }
}
  • getClass().getResource(«/vistas/MiPrimeraVista.fxml»): Obtiene la URL del archivo FXML. El / al principio indica que la ruta es desde la raíz de la carpeta resources.
  • FXMLLoader.load(fxmlUrl): Carga la jerarquía de nodos definida en el FXML.

4: ¡Ejecutar y Ver la Magia!

  1. Abre la clase App.java.
  2. Haz clic derecho en el editor y selecciona «Run ‘App.main()’» (o usa el icono de la flecha verde).

Deberías ver una ventana con el título «Mi Primera App FXML», una etiqueta que dice «¡Hola desde FXML!» y un botón. Al pulsar el botón, el texto de la etiqueta cambiará y el botón se deshabilitará. ¡También verás mensajes en la consola de IntelliJ!

Conclusión

¡Felicidades! Has configurado un proyecto JavaFX con Maven y FXML, y has creado tu primera interfaz gráfica separando el diseño de la lógica. FXML es una herramienta poderosa que te ayudará a construir aplicaciones más robustas y fáciles de gestionar. A partir de aquí, puedes explorar más componentes de JavaFX, aprender sobre Scene Builder y empezar a construir interfaces más complejas para tus proyectos.

, ,
, , , ,

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.