Adicionando CSS

Vamos incorporar nosso próprio estilo com o CSS. Uma vantagem do JavaFX é a capacidade de estilizar nodes com o CSS. O JavaFX já vem com um stylesheet padrão, Moderna.css.

Você pode aumentar esses estilos padrões ou substituir por um outro. O exemplo do arquivo CSS é encontrado no arquivo Styles.css é uma simples classe que configura a font para itálico.

    .mytext {
        -fx-font-style: italic;
    }

Para usar esse stylesheet, você precisa carregar o arquivo ou no método start() da aplicação ou no arquivo FXML. Já fizemos o carregamento do arquivo stylesheet no arquivo MyShapesFXML.java.

        Scene scene = new Scene(root, Color.LIGHTYELLOW);
                        scene.getStylesheets().add(getClass()
                        .getResource(“/styles/Styles.css”).toExternalForm());

Uma vez o arquivo adicionado e habilitado para stylesheet, você pode aplicar o style para um node. Aplicar individualmente style para um node específico podemos fazer assim:

text2.getStyleClass().add(“mytext”);

Aqui, o “mytext” é o style e text2 é o segundo objeto do Text do nosso programa. Alternativamente, você pode especificar o stylesheet no arquivo FXML.

A vantagem dessa abordagem é que styles estão avaliados dentro do Scene Builder. Modificando o arquivo Scene.fxml que carrega o arquivo CSS e aplica a customização style ao text2 do node Text.

Adicionei ao VBox a linha stylesheets="@../style/Style.css" e adicionei o styleClass="mytext" no node Text.

Scene.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.effect.Reflection?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.paint.LinearGradient?>
<?import javafx.scene.paint.Stop?>
<?import javafx.scene.shape.Ellipse?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<VBox alignment="CENTER" prefHeight="350.0" prefWidth="350.0" spacing="50.0"
      stylesheets="@../style/Style.css"
      xmlns="http://javafx.com/javafx/10.0.1"
      xmlns:fx="http://javafx.com/fxml/1 fx"
      fx:controller="main.java.br.com.cursojavanow.FXMLController" >

    <children>
        <StackPane fx:id="stackPane" onMouseClicked="#handleMouseClick"
                   prefHeight="150.0" prefWidth="200.0">
            <children>
                <Ellipse radiusX="110.0" radiusY="70.0">
                    <fill>
                        <LinearGradient endX="0.5" endY="1.0" startX="0.5">
                            <stops>
                                <Stop color="DODGERBLUE" />
                                <Stop color="LIGHTBLUE" offset="0.5" />
                                <Stop color="LIGHTGREEN" offset="1.0" />
                            </stops>
                        </LinearGradient>
                    </fill>
                    <effect>
                        <DropShadow color="GREY" offsetX="5.0"
                                    offsetY="5.0" />
                    </effect>
                </Ellipse>
                <Text text="My Shapes">
                    <font>
                        <Font name="Arial Bold" size="24.0" />
                    </font>
                    <effect>
                        <Reflection fraction="0.8" topOffset="1.0" />
                    </effect>
                </Text>
            </children>
        </StackPane>
        <Text fx:id="text2" styleClass="mytext" text="Animation Status: ">
            <font>
                <Font name="Arial Bold" size="18.0" />
            </font>
        </Text>
    </children>
</VBox>