Antes de escribir una sola línea de JavaFX, necesitas un entorno de trabajo configurado correctamente. En esta guía te enseñaré paso a paso cómo preparar Visual Studio Code para desarrollo JavaFX profesional, desde la instalación del JDK hasta un script automático que genera proyectos completos.

Requisitos Previos

Asegúrate de tener instalado lo siguiente:

• JDK 21 o superior — Puedes descargarlo desde Oracle JDK o Adoptium
• Visual Studio Code — Descárgalo desde code.visualstudio.com
• JavaFX SDK — Disponible en openjfx.io

Importante: Asegúrate de que la variable de entorno JAVA_HOME apunte a tu JDK y que java esté disponible en el PATH del sistema. Puedes verificarlo abriendo una terminal y ejecutando java --version.

Paso 1: Instalar las Extensiones de VS Code

Abre VS Code y ve a la pestaña de extensiones (Ctrl+Shift+X). Busca e instala las siguientes:

Extensiones Esenciales

• Extension Pack for Java (vscjava.vscode-java-pack) — Incluye soporte de lenguaje Java, debugging, testing y gestión de proyectos. Es el paquete más importante.
• JavaFX Support — Autocompletado y snippets específicos para JavaFX.

Extensiones Recomendadas

• Material Icon Theme — Iconos bonitos para tus archivos y carpetas.
• Error Lens — Muestra errores y warnings directamente en la línea de código.
• Bracket Pair Color DLW — Colorea los paréntesis para mejor legibilidad.
• GitHub Copilot / Antigravity — Asistente IA para generar código más rápido.

Una vez instaladas, reinicia VS Code para que todas las extensiones se activen correctamente.

Paso 2: Descargar el JavaFX SDK

1. Ve a openjfx.io y descarga la versión LTS del JavaFX SDK para tu sistema operativo
2. Extrae el archivo ZIP en una ubicación fija, por ejemplo:

E:\Java\javafx-sdk-24.0.1\

3. Dentro de esa carpeta encontrarás una subcarpeta lib/ con los archivos .jar que necesitarás:

javafx-sdk-24.0.1/
├── lib/
│   ├── javafx.base.jar
│   ├── javafx.controls.jar
│   ├── javafx.fxml.jar
│   ├── javafx.graphics.jar
│   ├── javafx.media.jar
│   ├── javafx.swing.jar
│   ├── javafx.web.jar
│   └── ... (archivos nativos .dll/.so)
└── ...

Tip: Usa una ruta sin espacios para evitar problemas de compilación. Evita rutas como C:\Program Files\JavaFX\.

Paso 3: Generar un Proyecto con el Script Automático

En lugar de crear manualmente carpetas y archivos, tenemos un script .bat que genera la estructura de proyecto completa automáticamente. Soporta 4 tipos de proyectos:

Descargar el Script

Código del Script

A continuación puedes ver el código completo del generador. Si prefieres, cópialo y guárdalo como crear_javafx.bat:

@echo off
setlocal EnableDelayedExpansion

title Creador de Proyectos JavaFX
color 0b

echo ==============================================================
echo       GENERADOR DE PROYECTOS JAVAFX DINAMICO by AI
echo ==============================================================
echo.

:ask_name
set /p PROJECT_NAME="1. Ingrese el nombre del proyecto (sin espacios, ej. miproyecto): "
if "%PROJECT_NAME%"=="" (
    echo El nombre no puede estar vacio.
    goto ask_name
)

:ask_type
echo.
echo 2. Seleccione el tipo de proyecto:
echo   [1] Empty (Proyecto base con App.java y mensaje de bienvenida)
echo   [2] MVC   (Estructura Modelo-Vista-Controlador puramente con codigo)
echo   [3] FXML  (Estructura MVC usando FXML y CSS base incorporado)
echo   [4] MVVM  (Patron Model-View-ViewModel con Properties)
echo.
set /p PROJECT_TYPE="Ingrese una opcion (1-4): "

El script completo tiene más de 500 líneas y genera automáticamente:

• Estructura de carpetas — src/main/java/, src/main/resources/, lib/, bin/, docs/, scripts/
• Archivos de configuración — .gitignore, README.md
• CSS base profesional — Estilos para botones, campos de texto, tarjetas, tablas y más
• Script run.bat — Para compilar y ejecutar tu proyecto con un solo clic
• Código fuente — Según el patrón elegido (Empty, MVC, FXML o MVVM)

Cómo Usarlo

1. Descarga o crea el archivo crear_javafx.bat
2. Colócalo en la carpeta donde quieres crear tus proyectos (ej. E:\Java\Proyectos\)
3. Haz doble clic en el archivo .bat
4. Ingresa el nombre de tu proyecto:

1. Ingrese el nombre del proyecto: miapp

5. Selecciona el tipo de arquitectura:

2. Seleccione el tipo de proyecto:
  [1] Empty
  [2] MVC
  [3] FXML
  [4] MVVM

Ingrese una opcion (1-4): 3

6. ¡Tu proyecto se genera automáticamente!

Paso 4: Configurar el Proyecto en VS Code

Una vez generado el proyecto, ábrelo en VS Code:

cd miapp
code .

Configurar la ruta del JavaFX SDK

Abre el archivo run.bat que se generó dentro del proyecto y edita la línea que dice JAVAFX_PATH:

REM === PEGA LA RUTA DE TU JAVAFX AQUI ABAJO ===
set JAVAFX_PATH=E:\Java\javafx-sdk-24.0.1\lib

Asegúrate de que la ruta apunte a la carpeta lib de tu JavaFX SDK.

Compilar y Ejecutar

Simplemente haz doble clic en run.bat o ejecútalo desde la terminal integrada de VS Code:

.\run.bat

Si todo está bien configurado, verás la ventana de tu aplicación JavaFX abrirse con el contenido del patrón que elegiste.

Estructura del Proyecto Generado

Cuando seleccionas por ejemplo el tipo FXML, el script genera la siguiente estructura:

miapp/
├── bin/                          # Archivos compilados (.class)
├── docs/                         # Documentación
├── lib/                          # Dependencias externas (.jar)
├── scripts/                      # Scripts SQL o de compilación
├── src/
│   ├── main/
│   │   ├── java/com/miapp/
│   │   │   ├── App.java          # Punto de entrada
│   │   │   ├── controller/
│   │   │   │   └── MainController.java
│   │   │   ├── model/
│   │   │   └── view/
│   │   └── resources/
│   │       ├── css/
│   │       │   └── style.css     # Estilos base
│   │       ├── fxml/
│   │       │   └── MainView.fxml # Vista principal
│   │       ├── fonts/
│   │       └── img/
│   └── test/java/com/miapp/     # Unit tests
├── .gitignore
├── README.md
└── run.bat                       # Compilar y ejecutar

CSS Base Incluido

El script genera un archivo style.css con estilos profesionales listos para usar:

.root {
    -fx-background-color: #f8f9fa;
    -fx-font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}

.button {
    -fx-background-color: #0d6efd;
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-padding: 8px 16px;
    -fx-background-radius: 5px;
    -fx-cursor: hand;
}

.button:hover {
    -fx-background-color: #0b5ed7;
}

.card {
    -fx-background-color: white;
    -fx-border-color: #dee2e6;
    -fx-border-radius: 8px;
    -fx-background-radius: 8px;
    -fx-padding: 16px;
}

Incluye estilos para botones (primary, danger, success), campos de texto, tablas, tarjetas y una barra de estado — todo con un look moderno tipo Bootstrap.

Resolución de Problemas Comunes

"javac no se reconoce como comando"

• Asegúrate de tener el JDK instalado y JAVA_HOME configurado
• Agrega %JAVA_HOME%\bin a tu variable PATH

"Error: JavaFX runtime components are missing"

• Verifica que la ruta en JAVAFX_PATH del run.bat sea correcta
• Asegúrate de que apunte a la carpeta lib/ del SDK

"La aplicación compila pero no muestra la ventana"

• Revisa que la clase principal extienda Application
• Verifica que el método main llame a launch(args)

Siguiente Paso

Con tu entorno listo, ya puedes empezar a construir interfaces JavaFX profesionales. En los próximos artículos exploraremos cómo crear controles personalizados, aplicar temas avanzados y trabajar con animaciones.