javafx_

Agilizando a
Criao de Telas em JavaFX
com JavaFX Scene Builder
Conhecendo esta IDE que facilita e dinamiza a criao
de telas em JavaFX.

Este artigo apresenta o funcionamento

e conceito do JavaFX Scene Builder, para
facilitar a criao de telas em JavaFX, sem necessidade de
template com cdigo Java, e sim utilizando um arquivo XML. O
leitor aprender a manipular esta IDE e a se comunicar com o
cdigo Java, atravs de MVC e Annotations, tornando o cdigo
limpo e extremamente eficaz.
Bruno Henrique de Oliveira | bruno.vky@live.com
Cursando Anlise e Desenvolvimento de Sistemas na FATEC So Jos dos Campos, programa com Java desde 2010, focado em
desenvolvimento Android e JavaFX, possui conhecimento em desenvolvimento de jogos em Android com a framework AndEngine.

31 \

JavaFX est cada vez mais entrando na pauta dos

desenvolvedores de software e, mais especificamente, entre os desenvolvedores Java. Os recursos
alcanados por esta plataforma demonstram um
crescimento contnuo, a cada atualizao, os criadores vm com novidades relevantes. Porm, criar uma
interface adequada no JavaFX pode ser to complexo
quanto s antigas aplicaes Swing, devido a gama
de componentes habilitados. No artigo Toques de
Requinte em Aplicaes Desktop com JavaFX, na
edio 58, vimos a criao de uma simples tela de login utilizando JavaFX. Porm, criar formulrios na
mo, torna o processo cansativo e demorado, alm
de no obter recursos de programao capazes de reduzir linhas de cdigo e aumentar a produtividade.
Para solucionar este problema, possvel criar
frames em um arquivo semelhante ao XML (chamado FXML), onde possui toda a interface de sua tela
e todas as propriedades necessrias. Ento, o cdigo
Java interpreta aquele layout montado neste arquivo
e identifica todos os componentes, atravs de Annotation (@FXML). O trabalho do desenvolvedor ser
apenas criar a lgica de implementao de cada ao
e cdigos ao abrir a tela, como uma troca de texto em
um campo. Este arquivo FXML feito na IDE JavaFX
Scene Builder.
Esta IDE da Oracle pode ser baixada no link a seguir: http://www.oracle.com/technetwork/java/javafx/
downloads/index.html, juntamente com o download
do JavaFX. Ela trabalha, alm do FXML, com CSS,
para recursos grficos em componentes. Com visual
simples e criao de telas com conceito drag-and-drop, o JavaFX Scene Builder uma ferramenta
importante para o desenvolvedor JavaFX. Veremos

Figura 1. Interface do JavaFX Scene Builder.

/ 32

na prtica seu uso e a implementao dos conceitos

MVC, facilitando a vida de desenvolvedores e designers.

Conhecendo a interface da IDE

Para demonstrarmos o funcionamento da IDE,

utilizaremos um exemplo clssico: uma tela de login com campos de texto para login e senha, e dois
botes para confirmao da operao e encerrar
aplicao. Alm disso, ter um link para uma pgina
de cadastro de novo usurio. Estes dois tpicos (login e novo usurio) sero dois painis embutidos na
mesma tela, onde surgiro conforme necessidade do
usurio. Com o JavaFX Scene Builder, esta tarefa se
torna muito simples, pois os componentes se tornam
fceis de manusear.
Primeiro, mostraremos a interface da IDE. Ao
execut-la, veremos a tela principal (figura 1).
Agora, desvendaremos cada parte desta interface, para tornar a vida do desenvolvedor iniciante em
JavaFX ainda mais fcil.

Library

Nesta parte, veremos todos os componentes

disponveis no JavaFX. Para utiliz-los, basta que
arrastemos o componente para dentro da tela, posicionando na coordenada X e Y desejada, podendo
ser alterada posteriormente. Os componentes esto divididos por tipo: Containers, Controls, Popup
Controls, Menu Content, Miscellaneous, Shapes e
Charts, alm de que cada Node possui um cone que
demonstra bem o resultado do mesmo. Na aba, existe
um campo de texto para pesquisa dos componentes,
caso precise de rapidez em sua busca. Basta digitar

ao WindowBuilder, do Eclipse para Swing, por exemplo. Seu trabalho ser apenas arrastar os componentes tela, como j dito anteriormente. Voc pode
organizar seu layout aps os componentes serem inseridos na tela. Basta arrastar os componentes at a
posio desejada.
Existe tambm algumas facilidades no menu de
contexto deste painel. Por exemplo, se tivssemos
colocado os trs componentes que esto dentro do
VBox anterior, mas sem o uso do VBox, para criarmos
um novo Box com este contedo dentro, basta clicarmos com o boto direito do mouse, aps selecionarmos os trs componentes, irmos na opo Wrap in,
e escolhermos o VBox. Pronto! Os trs componentes
foram inseridos em um novo VBox. E tambm se quisssemos abrir o VBox para o tamanho completo da
Figura 2. Aba Library.
tela, basta clicarmos com o boto direito do mouse no
VBox e selecionarmos a opo Fit to Parent. AgoHierarchy
ra, o componente encontra-se com o tamanho full do
Contm todos os componentes j adicionados AnchorPane principal.
tela. Ao gerar uma nova tela, um AnchorPane geNa figura 4, veremos um exemplo do Content Parado automaticamente para representar seu painel nel:
principal, onde conter os demais itens. Como o prprio nome diz, a tela possui um esquema de hierarquia, onde demonstra exatamente que cada Node se
encontra dentro de um Parent, ou seja, de um componente pai.
Na figura 3, veremos a representao de uma tela
com um VBox dentro do AnchorPane principal, e trs
componentes dentro do VBox:
o incio do nome do componente e uma filtragem
gerada para localizao rpida do mesmo.
Na figura 2, veremos a aba Library, conforme citado:

Figura 4. Aba Content.

Inspector

Figura 3. Aba Hierarchy.

Content

Aqui ficar o contedo da tela, onde o desenvolvedor visualiza o resultado da mesma em runtime,
conforme for colocando novos componentes nela.
Tudo funciona em um sistema drag n drop, idntico

Este painel contm todas as propriedades de um

componente selecionado. Esta aba possui trs sub-abas: Properties, Layout e Code. Aqui tambm possui um campo de texto para pesquisa de uma propriedade especfica, para agilizar a busca.
Properties: possui todas as propriedades gerais do componente, como valor do texto, ID,
efeitos, fontes, opacidade, visibilidade, entre
outros. Alm disso, possui opes de criao de
CSS para estilizar o componente (veremos esta
opo em breve), opes extras e de transformao, como rotao, translao e escala.
33 \

 Code: neste local, podem-se criar os mtodos

de ao (listeners) do componente referido,
como ao de clique, de mouse, de tecla etc.
Veremos que o JavaFX com FXML funciona com
injeo de dependncias para facilitar o cdigo
do desenvolvedor. Entenderemos esta facilidade em breve.

Figura 5. Aba Properties.

Layout: nesta sub-aba, veremos todas as opes de posio do componente, alm de largura e altura preferida, mnima e mxima.
Figura 7. Aba Code.

Implementando o CSS

Para utilizar CSS para estilizar sua aplicao,

voc pode criar seu arquivo .CSS em qualquer IDE, ou
simplesmente em um bloco de notas. Aps sua criao, basta irmos s abas superiores do JavaFX Scene
Builder, clicar em Preview e depois em Preview a
Style Sheet..., ento, selecione o arquivo recm-criado. Aps isto, volte aba Properties, na parte de CSS,
v em Style Class e clique no boto +, ento, selecione a classe do CSS responsvel pelo efeito do seu
componente. Voc pode tambm criar o efeito CSS
sem a necessidade de criar um arquivo prprio. Basta
ir em Style, logo acima de Style Class e escreva o
mesmo cdigo CSS do arquivo, sem a necessidade de
identificar um ID. Veja um exemplo na figura 8:

Figura 6. Aba layout.

/ 34

Figura 8. Uso do Style.

Criando a Tela de Login e Novo Usurio

Na base, usaremos Labels, TextFields e Buttons, para

selecionar cada item, v na Library Panel e digite no
campo de pesquisa o nome do componente desejado,
ento clique e arraste o mesmo at a tela. Deixaremos
livre para o desenvolvedor utilizar recursos avanados e efeitos grficos adequados para esta tela. Na
figura 9, veremos o resultado do nosso painel:
Importante: estes componentes esto dentro de
Tela de Login
um AnchorPane, que por sua vez, est dentro do AnEsta tela conter campos de texto para login e sechorPane principal. Sem isto, ficar complicado vanha, dois botes para entrar no sistema e sair da apliriar a visibilidade dos painis.
cao, alm de um link para cadastro de novo usurio.
Agora, iniciaremos a criao da tela de login e
novo usurio. Como citado anteriormente, criaremos
dois painis para isto, que sero visveis conforme
desejado pelo usurio. Comearemos pelo painel de
login.

Figura 9. Painel de Login.

Figura 10. Tela de novo usurio.

35 \

Tela de Cadastro de Novo Usurio

Listagem 1. Classe Application.

Para iniciarmos a criao deste painel, precisamos deixar invisvel o painel de login, para facilitar
a organizao. Para isto, basta selecionarmos o An- package application;
chorPane do login, ir na aba Properties, e clicar no
import javafx.application.Application;
check da opo Visible.
Neste outro painel, teremos campos de texto import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
para nome completo, idade, login e senha, alm de import javafx.scene.Scene;
botes para salvar a ao e cancelar a operao, vol- import javafx.stage.Stage;
tando ao painel de login. Novamente, deixaremos a
criatividade para o desenvolvedor. O nosso exemplo public class LoginApp extends Application {
ficou assim como a figura 10.
public static void main(String[] args) {
Com os dois painis j criados, devemos deixar
launch(args);
invisvel este segundo e voltar a tornar visvel o pai}
nel de login, pois a exibio iniciar por ele.
Mais um fator importante dar nomes (ID) aos
@Override
dois AnchorPanes: chamarei o painel de login de
public void start(Stage stage) throws Exception {
Parent parent =
paneLogin e o painel de novo usurio de paneNoFXMLLoader.load(getClass().getClassLoader()
voUsuario. Para isto, v na aba Properties, e no item
.getResource(fxml/login.fxml));
fx:id, digite o nome do componente. Este item de
Scene scene = new Scene(parent);
extrema importncia, pois este nome ser identificastage.setScene(scene);
do em cdigo, atravs de injeo de dependncia.
stage.setTitle(Login);
E, por fim, precisamos criar os mtodos das aes
stage.show();
dos botes, que tambm sero identificados em cdi}
go. Vamos aba Code, em cada Button, e d um valor
para o campo On Action. Este ser o nome do m- }
todo que ser criado em cdigo, ento d um nome
fcil para identificao. No esquea de acrescentar
o smbolo # antes do nome do mtodo. Na figura A nica mudana deste cdigo com a Application tra11, veremos um exemplo de ao do boto de entrar dicional o uso do Parent, sendo relacionado com o
no sistema:
arquivo FXML criado (login.fxml). Utilizamos o mtodo FXMLLoader.load(URL url) para este fim, indicando o caminho do arquivo como parmetro.
Caso tenha CSS na tela, necessita indicar na Scene, utilizando o seguinte cdigo:

Figura 11. Mtodo onAction do boto btEntrar.

scene.getStylesheets().add(getClass().getClassLoader().
getResource(css/login.css).toExternalForm());

Aps estas etapas, podemos colocar a mo no

cdigo.
Agora, precisamos criar a classe Initializable
Veremos que o cdigo no JavaFX, com o uso de
FXML, se torna muito simples, pois trabalhamos com (Controller), sem ela, esta tela ainda no rodar.
o padro MVC, dividindo as funes das classes de
forma coesa. necessria a criao de duas classes: Classe Initializable (Controller)
Application (View) e Initializable (Controller).
Esta classe com certeza novidade entre os desenvolvedores iniciantes em JavaFX. Aqui conter
todas as funcionalidades da tela indicada, em ouClasse Application (View)
Esta classe possui um cdigo simples e enxuto, tras palavras, ser o controlador da tela. Ela imjustamente focado para a exibio da tela. Para isto, plementada da interface Initializable e necessita da
criamos um Parent, baseado no arquivo FXML, criado utilizao do mtodo initialize (URL url, Resourceno JavaFX Scene Builder, e ento criaremos normal- Bundle bundle). Veremos que, nesta classe, usam-se
mente a Scene e o Stage, assim como a classe Appli- conceitos de injeo de dependncia e Annotations,
para enxugar ainda mais o cdigo. No prprio Javacation tradicional.
FX Scene Builder, podemos ver o esqueleto da classe
Controller. V na aba View e clique em Show Sample

/ 36

Controller Skeleton, ento ver um campo de texto

Primeiro, para criarmos os componentes, basta
mostrando o esqueleto da classe.
que declaremos os objetos e anotemos com a AnnoMostraremos o cdigo e depois explicaremos:
tation FXML (@FXML). Uma vez o controller identificado, ir buscar os componentes de mesmo nome que
Listagem 2. Classe Login Controller.
o declarado no arquivo FXML. Se o nome for diferente, dar um Exception em tempo de execuo. Com
package controller;
isto, no h necessidade de instanciarmos os componentes e identificarmos na tela. O JavaFX far isto por
import java.net.URL;
debaixo dos panos.
import java.util.ResourceBundle;
Dentro do mtodo initialize, ficaro os cdigos de
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
implementao inicial dos componentes, como uma
import javafx.fxml.Initializable;
troca de texto ao abrir a tela, por exemplo. No nosso
import javafx.scene.control.PasswordField;
exemplo, no necessitaremos de cdigos ali dentro.
import javafx.scene.control.TextField;
E, por fim, temos a criao das aes (listeners)
import javafx.scene.layout.AnchorPane;
dos botes e do Hyperlink. Primeiro, devemos criar
na aba Code, do JavaFX Scene Builder, os mtodos
public class LoginController implements Initializable {
adequados, ento, indicamos a construo destes
@FXML
mtodos (por padro, adequado indic-los como
private AnchorPane paneLogin, paneNovoUsuario;
protegidos protected), passando como parmetro o
@FXML
tipo do evento (pode ser ActionEvent aes de cliprivate TextField txLogin, txNome, txIdade,
que, MouseEvent aes de mouse, KeyEvent aes
txLoginUsuario;
de tecla, entre outros).
@FXML
private PasswordField txSenha, txSenhaUsuario;
@Override
public void initialize(URL url, ResourceBundle
bundle) {
}
@FXML
protected void btEntrarAction(ActionEvent evt) {
// Logar no sistema
}

Consideraes finais

Com a unio dos artigos Toques de Requinte em

Aplicaes Desktop com JavaFX (edio 58) e este
artigo podemos facilmente iniciar o desenvolvimento de aplicaes Desktop de alta qualidade grfica e
organizao de estrutura de cdigos eficaz. Vimos
que o JavaFX possui recursos no apenas visuais, mas
estruturados, utilizando conceitos MVC e injees de
dependncia, que reduz imensamente a ponte entre
o desenvolvedor e a criao de aplicaes avanadas.

@FXML
protected void btSairAction(ActionEvent evt) {
System.exit(0);
}
@FXML
protected void btCadastrarAction(ActionEvent evt) {
// Cadastrar novo usurio
}
@FXML
protected void btCancelarAction(ActionEvent evt) {

// Cancelar operao
paneLogin.setVisible(true);
paneNovoUsuario.setVisible(false);

@FXML
protected void linkCliqueAquiAction(ActionEvent evt) {
paneLogin.setVisible(false);
paneNovoUsuario.setVisible(true);
}

/referncias
> Toques de Requinte em Aplicaes Desktop com JavaFX,
de Bruno Henrique de Oliveira, Revista MundoJ Ed. 58.
> JavaFX Scene Builder User Guide - http://docs.oracle.
com/javafx/scenebuilder/1/user_guide/jsbpub-user_guide.
htm

37 \