← Volver

Proyecto de ejemplo JavaFX

Publicado el 28 de febrero de 2026

Java

El primer paso será crear la estructura de paquetes model, view, controller.

En el segundo paso añadiremos la librería de JavaFX al proyecto. Para ello vamos a File -> Project Structure -> Modules -> Dependencies y añadimos JavaFX

Creamos la clase Main.java que hereda de Application.

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

public class Main extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("./view/ejemplo.fxml"));
        stage.setTitle("JavaFX y CSS");
        stage.setScene(new Scene(root));
        stage.show();
    }
}

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

public class Main extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("./view/ejemplo.fxml"));
        stage.setTitle("JavaFX y CSS");
        stage.setScene(new Scene(root));
        stage.show();
    }
}

Lo siguiente será configurar el ejecutable Main. Current File -> Edit Configurations -> Add Application

Modify options -> Add VM Options y agregamos esta línea.

--module-path "$JavaFX25$" --add-modules javafx.controls,javafx.fxml

--module-path "$JavaFX25$" --add-modules javafx.controls,javafx.fxml

Ahora pasamos a SceneBuilder y en Controller asignamos la ruta y nombre del controlador.

Ahora vamos a View -> Show Simple Skelleton Controller y lo guardamos en el paquete controller.

Y podemos ejecutar el programa.

Para agregar estilos CSS vamos a crear el paquete style y dentro de él el archivo styles.css.

En SceneBuilder vamos a Properties -> Stylesheets y selecciónamos el archivo CSS que acabamos de crear.

Ejemplo de código CSS para JavaFX.

@font-face {
    fx-font-family: "Airstrike";
    src: url("fonts/Airstrike.ttf");
}

.root {
    -fx-font-family: "Airstrike";
    -fx-background-color: #2b2b2b;
}

.boton_principal {
    -fx-background-color: #1E74FA;
    -fx-text-fill: #ffffff;
    -fx-font-size: 20px;
    -fx-effect: dropshadow(
            gaussian,
            rgba(0,0,0,0.4),
            10,
            0.3,
            0,
            3
    );
}

.boton_principal:hover {
    -fx-background-color: #85b5ff;
}

.boton_principal:pressed {
    -fx-background-color: #265cb0;
    -fx-cursor: pointer;
}

.navbar {
    -fx-background-color: #1E74FA;
    -fx-text-fill: #ffffff;
    -fx-font-size: 20px;
}

@font-face {
    fx-font-family: "Airstrike";
    src: url("fonts/Airstrike.ttf");
}

.root {
    -fx-font-family: "Airstrike";
    -fx-background-color: #2b2b2b;
}

.boton_principal {
    -fx-background-color: #1E74FA;
    -fx-text-fill: #ffffff;
    -fx-font-size: 20px;
    -fx-effect: dropshadow(
            gaussian,
            rgba(0,0,0,0.4),
            10,
            0.3,
            0,
            3
    );
}

.boton_principal:hover {
    -fx-background-color: #85b5ff;
}

.boton_principal:pressed {
    -fx-background-color: #265cb0;
    -fx-cursor: pointer;
}

.navbar {
    -fx-background-color: #1E74FA;
    -fx-text-fill: #ffffff;
    -fx-font-size: 20px;
}