O JavaFX proporciona uma interface de usuário mais avançada em comparação ao Swing, permitindo o uso de FXML para layout e CSS para personalização visual. Assim como no desenvolvimento web, onde HTML e CSS trabalham juntos, o FXML atua como estrutura e o CSS cuida da estética, embora com diferenças sintáticas.

Sintaxe do CSS no JavaFX

A sintaxe do CSS no JavaFX é similar à do CSS convencional, incluindo seletores de classe e pseudo-elementos, mas requer o prefixo "-fx-" para todas as propriedades. Por exemplo, propriedades padrão do CSS como "min-height" devem ser escritas como "-fx-min-height" no JavaFX. Isso permite uma transição suave para desenvolvedores familiarizados com CSS da web.

.container {
  -fx-background-color: #f0f0f0;
  -fx-border-color: #ccc;
}

.label-destaque:active {
  -fx-text-fill: #333;
  -fx-font-weight: bold;
  -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 5, 0, 0, 2);
}

Aplicando Estilos a Componentes

Componentes JavaFX podem ser estilizados diretamente usando o atributo "style" no FXML ou código Java. Para um botão, por exemplo, definir propriedades como altura mínima e cor de fundo pode melhorar significativamente sua aparência.

<Button text="Confirmar."
  style="-fx-min-height: 28; -fx-min-width: 90; -fx-background-color: #2ecc71;">
</Button>

Gerenciamento de Estilos com Arquivos CSS

Para manter a organização, é recomendável usar arquivos CSS externos. Crie um arquivo CSS, como "itnerface.css", e associe-o ao layout FXML usando o atributo "stylesheets". Isso facilita a manutenção e reutilização dos estilos.

.botao-acao {
  -fx-text-fill: white;
  -fx-min-height: 28;
  -fx-min-width: 90;
  -fx-background-color: #2ecc71;
}

No FXML, vincule a classe de estilo ao componente:

<BorderPane prefHeight="350" prefWidth="500"
            stylesheets="@interface.css">
  <center>
    <VBox alignment="CENTER" spacing="15">
      <Label fx:id="titulo"/>
      <Button onAction="#enviar" text="Enviar." styleClass="botao-acao"/>
    </VBox>
  </center>
</BorderPane>

Para garantir que o arquivo CSS seja incluído no classpath durante a compilação, configure o Maven para incluí-lo:

<build>
  <resources>
    <resource>
      <directory>src/main/java</directory>
      <includes>
        <include>**/*.fxml</include>
        <include>**/*.css</include>
      </includes>
    </resource>
  </resources>
</build>

Utilizando Frameworks de Estilo Open Source

Frameworks como o BootstrapFX fornecem estilos pré-definidos para JavaFX. Para usar, adicione a dependência Maven e aplique as folhas de estilo na cena ou nos componentes.

Adicione a dependência no pom.xml:

<dependency>
  <groupId>org.kordamp.bootstrapfx</groupId>
  <artifactId>bootstrapfx-core</artifactId>
  <version>0.2.4</version>
</dependency>

No código Java, carregue o CSS no cena:

stage.setScene(scene);
stage.getScene().getStylesheets().add("org/kordamp/bootstrapfx/bootstrapfx.css");
stage.show();

No FXML, use classes de estilo do BootstrapFX:

<Button text="Ação.">
  <styleClass>
    <String fx:value="btn"/>
    <String fx:value="btn-primary"/>
  </styleClass>
</Button>

Outras alternativas incluem o jboootx, que segue um processo semelhante de integração e oferece estilos adicionais para interfaces desktop.