Bienvenido a la guía principal de JJArroyo JavaFX Theme, una librería de diseño nacida para modernizar la forma en la que construimos aplicaciones de escritorio en Java.

Si estás cansado de los estilos grises por defecto de Caspian o Modena, y quieres que tu aplicación compita visualmente con modernas apps web o frameworks como Electron, esta es tu herramienta.

¿Qué incluye JJArroyo Theme?

A diferencia de simples hojas de estilo aisladas, JJArroyo es un sistema de diseño robusto empaquetado como dependencia Maven que te otorga:

• +30 Componentes Modernizados: Desde un simple Button hasta complejos TableView, reescritos en CSS para verse nítidos y elegantes.
• Sistema de Grid y Utilidades: Clases CSS inspiradas en Tailwind (p-4, flex, gap-2, text-center) directamente en JavaFX.
• Soporte Light / Dark Mode Perfecto: Con una arquitectura de tokens de color basada en la paleta Slate, tu app puede alternar de modo claro a oscuro en un instante, sin romper componentes.
• Iconografía Integrada: Uso intensivo de Ikonli (Feather y Material Design 2) para botones e indicadores.
• Componentes Custom Exclusivos: JHeader, JSidebar, JModal, JToast, y hasta un JCodeEditor integrado (basado en RichTextFX) para edición SQL moderna.

🚀 Descarga y Setup

Actualmente la librería se distribuye directamente desde su código fuente. Puedes descargar la última versión desde el repositorio oficial:

Repositorio Oficial en GitHub: JJArroyo / javafx-jjarroyo-theme

Una vez lo tengas en tu equipo (y lo hayas compilado con tu IDE), la inicialización en tu clase App.java requiere una sola línea mágica que inyecta todos los estilos base, tipografías y el motor de modales a tu Scene:

import com.jjarroyo.JJArroyo;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class App extends Application {
    @Override
    public void start(Stage stage) {
        MainLayout mainLayout = new MainLayout();
        Scene scene = new Scene(mainLayout, 1280, 800);

        // 1. Inicializar la librería en tu Escena
        JJArroyo.init(scene);

        stage.setTitle("Mi App Moderna");
        stage.setScene(scene);
        stage.show();
    }
}

🎨 El Poder del Modo Oscuro

El soporte de modo oscuro no requiere que cambies tus archivos CSS uno por uno. JJArroyo Theme implementa Inversión Semántica de Tokens.

Usamos la paleta neutral Slate (slate-50 hasta slate-900). Cuando activas el modo oscuro, la librería invierte la escala bajo el capó.

¿Cómo activar el Dark Mode?

Simplemente debes añadir o remover la clase .dark al nodo raíz (root) de tu aplicación.

// Activar Modo Oscuro
scene.getRoot().getStyleClass().add("dark");

// Volver al Modo Claro
scene.getRoot().getStyleClass().remove("dark");

// Opcional: Activar iconos dinámicos en tu botón switch
boolean isDark = scene.getRoot().getStyleClass().contains("dark");
themeIcon.setIconLiteral(isDark ? "fth-sun" : "fth-moon");

Automáticamente, utilidades como .card, .j-sidebar, y botones ajustarán sus bordes y fondos para mantener contrastes accesibles.

🧩 Componentes Principales

La librería ofrece wrappers e implementaciones CSS que enriquecen los controles de JavaFX. Aquí destacamos algunos:

1. Botones (Buttons & Badges)

JavaFX por defecto usa botones planos. Nosotros soportamos variantes btn-primary, btn-danger, btn-success, btn-ghost, y tamaños btn-sm, btn-lg.

<Button text="Guardar Cambios" styleClass="btn, btn-primary" />
<Button text="Eliminar" styleClass="btn, btn-danger, btn-sm" />
<Button text="Cancelar" styleClass="btn, btn-ghost" />

2. Tarjetas (Cards)

Ideal para agrupar contenido en Dashboards. Las .card manejan su propia sombra y bordes redondeados adaptables al Dark Mode.

<VBox styleClass="card">
    <padding><Insets top="20" right="20" bottom="20" left="20" /></padding>
    <Label text="Resumen de Ventas" styleClass="card-title" />
    <Label text="Vista general de los últimos 30 días" styleClass="card-subtitle" />

    <!-- Tu contenido aquí -->
</VBox>

3. JToast y JModal (Notificaciones y Popups)

Lanzar una alerta profesional o un modal flotante centralizado nunca fue más fácil en JavaFX.

// Mostrar un modal de confirmación
JModal confirmModal = new JModal("¿Eliminar usuario?", "¿Seguro que deseas proceder?");
confirmModal.show();

// Mostrar una notificación flotante estilo Toast
JToast.showSuccess("Exportación Exitosa", "El reporte se guardó en C:/Descargas");

(Recuerda que para usar modales, debes registrar un StackPane flotante usando JJArroyo.setModalContainer(tuPane) en tu layout base).

🏗️ Layout Estándar (Recomendado)

La estructura perfecta para aplicaciones de escritorio modernas con esta librería involucra separar un JSidebar a la izquierda y un JHeader arriba.

BorderPane root = new BorderPane();

// Sidebar Nativo
JSidebar sidebar = new JSidebar();
sidebar.addItem(new JSidebarItem("Dashboard", new JIcon("fth-home")));
sidebar.addItem(new JSidebarItem("Configuración", new JIcon("fth-settings")));

// Header Superior
JHeader header = new JHeader("Nexus App", "Panel Administrativo");

root.setLeft(sidebar);
root.setTop(header);

Descarga el Demo y el Source Code

El mejor lugar para ver la librería en acción y aprender a usar cada componente es descargar el repositorio completo que incluye la aplicación demo.

JJArroyo Theme es una base arquitectónica lista para crecer contigo. ¡Construye mejores interfaces en Java!