Utilizando FXML

Table of Contents

Organização das Pastas

O programa MyShapes e propriedades do MyShapes utiliza apenas o código JavaFX para construir elementos visuais do programa. Uma abordagem alternativa é declarar esses elementos visuais com FXML, uma anotação baseada no XML. FXML deixa você descrever e configurar seu scene graph no formato declarativo. Essa abordagem tem várias vantagens:

A estrutura hierárquica do FXML, é mais bem refletido na estrutura do seu scene graph.
FXML descreve seu view e suporta a arquitetura Model-View-Controller (MVC), fornecendo melhor estrutura para grandes aplicações.
FXML reduz o código JavaFX e configura scene graph nodes.
Você pode modelar seu UI com Scene Builder. Essa ferramenta de arrasta e solta é uma aplicação que fornece uma renderização de sua scene. E a Scene Builder gera a marcação FXML.
Você pode editar a marcação FXML com um editor de texto ou uma IDE.

FXML afeta a estrutura de seu programa. A classe principal da classe invoca um FXMLLoader. Esse loader analisa sua marcação FXML, e cria objetos JavaFX, e insere a scene graph dentro da scene que está no node root.

Você pode ter múltiplos arquivos FXML, e tipicamente cada um tem uma classe controller JavaFX correspondente. Esse controller pode incluir eventos manipuladores ou outras declarações que dinamicamente atualizam a scene. O controller também inclui a camada de lógica de negócios que manipula uma específica view.

Reorganize o seu projeto MyShapes de maneira que as pastas fiquem nessa formação.

O código do JavaFX está no subdiretório java. O subdiretório resources contêm os arquivos FXML e CSS (Scene.fxml e Style.css). Esse programa inclui uma rotação StackPane, controle VBox e um segundo objeto Text.

O arquivo Scene.FXML descreve nosso scene graph: um top-level VBox que inclui um elemento StackPane e Text. O StackPane inclui a Ellipse e o 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"
      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" text="Animation Status: ">
            <font>
                <Font name="Arial Bold" size="18.0" />
            </font>
        </Text>
    </children>
</VBox>

O container top-level inclui o nome da classe controller JavaFX com o atributo fx:controller. O VBox especifica alinhamento, preferência de tamanhos e espaçamento entre seguido dos seus filhos: o StackPane e Text.

No StackPane, nós configuramos as dimensões do StackPane. Um atributo especial fx:id especifica uma variável para o node correspondente. Na classe controller JavaFX, você irá ver o nome dessa variável anotada com @FXML para o StackPane. Assim que o objeto é acessado na classe controller que está declarada no arquivo FXML.

Além disso, StackPane especificas um onMouseClicked event handler chamado #handleMousClick. Esse event handler é também anotado com @FXML na classe controller JavaFX.

Os filhos do StackPane, Ellipse e Text, estão declarados dentro do node Children FXML. Não tem associação ao atributo fx:id, desde que a classe controller não precisa acessar esses objetos. Temos as configurações linear gradient, drop shadow e reflection effect.

Veja que o objeto Text com fx:id “text2” aparece depois da definição do StackPane. Esse segundo Text está abaixo do StackPane dentro do VBox. Foi também especificado um atributo fx:id para acessar esse node a partir do controller JavaFX.