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

<em>&lt;?</em>xml version="1.0" encoding="UTF-8"<em>?&gt;<br></em><em><br></em><em>&lt;?</em>import javafx.scene.effect.DropShadow<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.effect.Reflection<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.layout.StackPane<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.layout.VBox<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.paint.LinearGradient<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.paint.Stop<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.shape.Ellipse<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.text.Font<em>?&gt;<br></em><em>&lt;?</em>import javafx.scene.text.Text<em>?&gt;<br></em><em><br></em>&lt;VBox alignment="CENTER" prefHeight="350.0" prefWidth="350.0" spacing="50.0"<br>      xmlns="http://javafx.com/javafx/10.0.1"<br>      xmlns:fx="http://javafx.com/fxml/1 fx"<br>      fx:controller="main.java.br.com.cursojavanow.FXMLController" &gt;<br><br>    &lt;children&gt;<br>        &lt;StackPane fx:id="stackPane" onMouseClicked="#handleMouseClick"<br>                   prefHeight="150.0" prefWidth="200.0"&gt;<br>            &lt;children&gt;<br>                &lt;Ellipse radiusX="110.0" radiusY="70.0"&gt;<br>                    &lt;fill&gt;<br>                        &lt;LinearGradient endX="0.5" endY="1.0" startX="0.5"&gt;<br>                            &lt;stops&gt;<br>                                &lt;Stop color="DODGERBLUE" /&gt;<br>                                &lt;Stop color="LIGHTBLUE" offset="0.5" /&gt;<br>                                &lt;Stop color="LIGHTGREEN" offset="1.0" /&gt;<br>                            &lt;/stops&gt;<br>                        &lt;/LinearGradient&gt;<br>                    &lt;/fill&gt;<br>                    &lt;effect&gt;<br>                        &lt;DropShadow color="GREY" offsetX="5.0"<br>                                    offsetY="5.0" /&gt;<br>                    &lt;/effect&gt;<br>                &lt;/Ellipse&gt;<br>                &lt;Text text="My Shapes"&gt;<br>                    &lt;font&gt;<br>                        &lt;Font name="Arial Bold" size="24.0" /&gt;<br>                    &lt;/font&gt;<br>                    &lt;effect&gt;<br>                        &lt;Reflection fraction="0.8" topOffset="1.0" /&gt;<br>                    &lt;/effect&gt;<br>                &lt;/Text&gt;<br>            &lt;/children&gt;<br>        &lt;/StackPane&gt;<br>        &lt;Text fx:id="text2" text="Animation Status: "&gt;<br>            &lt;font&gt;<br>                &lt;Font name="Arial Bold" size="18.0" /&gt;<br>            &lt;/font&gt;<br>        &lt;/Text&gt;<br>    &lt;/children&gt;<br>&lt;/VBox&gt;

<?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"> <effect> <Reflection fraction="0.8" topOffset="1.0" /> </effect> </Text> </children> </StackPane> <Text fx:id="text2" text="Animation Status: "> </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.