javafx_

Agilizando a
Criação de Telas em JavaFX
com JavaFX Scene Builder
Conhecendo esta IDE que facilita e dinamiza a criação
de telas em JavaFX.

Este artigo apresenta o funcionamento

e conceito do JavaFX Scene Builder, para
facilitar a criação de telas em JavaFX, sem necessidade de
template com código Java, e sim utilizando um arquivo XML. O
leitor aprenderá a manipular esta IDE e a se comunicar com o
código Java, através de MVC e Annotations, tornando o código
limpo e extremamente eficaz.

Bruno Henrique de Oliveira | bruno.vky@live.com

Cursando Análise e Desenvolvimento de Sistemas na FATEC São 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 \
O JavaFX está cada vez mais entrando na pauta dos
desenvolvedores de software e, mais especifica-
mente, entre os desenvolvedores Java. Os recursos
alcançados por esta plataforma demonstram um
crescimento contínuo, a cada atualização, os criado-
res vêm com novidades relevantes. Porém, criar uma
interface adequada no JavaFX pode ser tão complexo
quanto às antigas aplicações Swing, devido a gama
de componentes habilitados. No artigo “Toques de
Requinte em Aplicações Desktop com JavaFX”, na
edição 58, vimos a criação de uma simples tela de lo-
gin utilizando JavaFX. Porém, criar formulários “na
mão”, torna o processo cansativo e demorado, além
de não obter recursos de programação capazes de re-
duzir linhas de código e aumentar a produtividade.
Para solucionar este problema, é possível criar
frames em um arquivo semelhante ao XML (chama-
do FXML), onde possui toda a interface de sua tela
e todas as propriedades necessárias. Então, o código
Java interpreta aquele layout montado neste arquivo
e identifica todos os componentes, através de Anno-
tation (@FXML). O trabalho do desenvolvedor será
apenas criar a lógica de implementação de cada ação
e códigos 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 se-
guir: http://www.oracle.com/technetwork/java/javafx/
downloads/index.html, juntamente com o download
do JavaFX. Ela trabalha, além do FXML, com CSS,
para recursos gráficos em componentes. Com visual
simples e criação 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 prática seu uso e a implementação dos conceitos
MVC, facilitando a vida de desenvolvedores e desig-
ners.
Conhecendo a interface da IDE
Para demonstrarmos o funcionamento da IDE,
utilizaremos um exemplo clássico: uma tela de lo-
gin com campos de texto para login e senha, e dois
botões para confirmação da operação e encerrar
aplicação. Além disso, terá um link para uma página
de cadastro de novo usuário. Estes dois tópicos (lo-
gin e novo usuário) serão dois painéis embutidos na
mesma tela, onde surgirão conforme necessidade do
usuário. Com o JavaFX Scene Builder, esta tarefa se
torna muito simples, pois os componentes se tornam
fáceis de manusear.
Primeiro, mostraremos a interface da IDE. Ao
executá-la, veremos a tela principal (figura 1).
Agora, desvendaremos cada parte desta interfa-
ce, para tornar a vida do desenvolvedor iniciante em
JavaFX ainda mais fácil.
Library
Nesta parte, veremos todos os componentes
disponíveis no JavaFX. Para utilizá-los, basta que
arrastemos o componente para dentro da tela, po-
sicionando na coordenada X e Y desejada, podendo
ser alterada posteriormente. Os componentes es-
tão divididos por tipo: Containers, Controls, Popup
Controls, Menu Content, Miscellaneous, Shapes e
Charts, além 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
o início do nome do componente e uma filtragem é
gerada para localização rápida do mesmo.
Na figura 2, veremos a aba Library, conforme ci- tes à tela, como já dito anteriormente. Você pode
tado:
Figura 2. Aba Library.
Hierarchy
Contém todos os componentes já adicionados à AnchorPane principal.
tela. Ao gerar uma nova tela, um AnchorPane é ge-
rado automaticamente para representar seu painel nel:
principal, onde conterá os demais itens. Como o pró-
prio nome diz, a tela possui um esquema de hierar-
quia, onde demonstra exatamente que cada Node se
encontra dentro de um Parent, ou seja, de um com-
ponente pai.
Na figura 3, veremos a representação de uma tela
com um VBox dentro do AnchorPane principal, e três
componentes dentro do VBox:
Figura 3. Aba Hierarchy.
Content
Aqui ficará o conteúdo da tela, onde o desenvol-
vedor visualiza o resultado da mesma em runtime,
conforme for colocando novos componentes nela.
Tudo funciona em um sistema drag n’ drop, idêntico
ao WindowBuilder, do Eclipse para Swing, por exem-
plo. Seu trabalho será apenas arrastar os componen-
organizar seu layout após os componentes serem in-
seridos na tela. Basta arrastar os componentes até a
posição desejada.
Existe também algumas facilidades no menu de
contexto deste painel. Por exemplo, se tivéssemos
colocado os três componentes que estão dentro do
VBox anterior, mas sem o uso do VBox, para criarmos
um novo Box com este conteúdo dentro, basta clicar-
mos com o botão direito do mouse, após selecionar-
mos os três componentes, irmos na opção “Wrap in”,
e escolhermos o VBox. Pronto! Os três componentes
foram inseridos em um novo VBox. E também se qui-
séssemos abrir o VBox para o tamanho completo da
tela, basta clicarmos com o botão direito do mouse no
VBox e selecionarmos a opção “Fit to Parent”. Ago-
ra, o componente encontra-se com o tamanho full do
Na figura 4, veremos um exemplo do Content Pa-
Figura 4. Aba Content.
Inspector
Este painel contém todas as propriedades de um
componente selecionado. Esta aba possui três “sub-
-abas”: Properties, Layout e Code. Aqui também pos-
sui um campo de texto para pesquisa de uma proprie-
dade específica, para agilizar a busca.
»» Properties: possui todas as propriedades ge-
rais do componente, como valor do texto, ID,
efeitos, fontes, opacidade, visibilidade, entre
outros. Além disso, possui opções de criação de
CSS para estilizar o componente (veremos esta
opção em breve), opções extras e de transfor-
mação, como rotação, translação e escala.
33 \
 »» Code: neste local, podem-se criar os métodos
de ação (listeners) do componente referido,
como ação de clique, de mouse, de tecla etc.
Veremos que o JavaFX com FXML funciona com
injeção de dependências para facilitar o código
do desenvolvedor. Entenderemos esta facilida-
de em breve.

Figura 5. Aba Properties.

»» Layout: nesta “sub-aba”, veremos todas as op-

ções de posição do componente, além de largu-
ra e altura preferida, mínima e máxima.

Figura 7. Aba Code.

Implementando o CSS
Para utilizar CSS para estilizar sua aplicação,
você pode criar seu arquivo .CSS em qualquer IDE, ou
simplesmente em um bloco de notas. Após sua cria-
ção, basta irmos às abas superiores do JavaFX Scene
Builder, clicar em “Preview” e depois em “Preview a
Style Sheet...”, então, selecione o arquivo recém-cria-
do. Após isto, volte à aba Properties, na parte de CSS,
vá em “Style Class” e clique no botão “+”, então, sele-
cione a classe do CSS responsável pelo efeito do seu
componente. Você pode também criar o efeito CSS
sem a necessidade de criar um arquivo próprio. Basta
ir em “Style”, logo acima de “Style Class” e escreva o
mesmo código CSS do arquivo, sem a necessidade de
identificar um ID. Veja um exemplo na figura 8:

Figura 6. Aba layout. Figura 8. Uso do Style.

/ 34
Criando a Tela de Login e Novo Usuário
Agora, iniciaremos a criação da tela de login e
novo usuário. Como citado anteriormente, criaremos
dois painéis para isto, que serão visíveis conforme
desejado pelo usuário. Começaremos pelo painel de
login.
Tela de Login
Esta tela conterá campos de texto para login e se-
nha, dois botões para entrar no sistema e sair da apli-
cação, além de um link para cadastro de novo usuário.
Figura 9. Painel de Login.
Figura 10. Tela de novo usuário.
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,
então clique e arraste o mesmo até a tela. Deixaremos
livre para o desenvolvedor utilizar recursos avança-
dos e efeitos gráficos adequados para esta tela. Na
figura 9, veremos o resultado do nosso painel:
Importante: estes componentes estão dentro de
um AnchorPane, que por sua vez, está dentro do An-
chorPane principal. Sem isto, ficará complicado va-
riar a visibilidade dos painéis.
35 \
 Tela de Cadastro de Novo Usuário Listagem 1. Classe Application.
Para iniciarmos a criação deste painel, precisa-
mos deixar invisível o painel de login, para facilitar
a organização. Para isto, basta selecionarmos o An- package application;
chorPane do login, ir na aba Properties, e clicar no
check da opção “Visible”. import javafx.application.Application;
Neste outro painel, teremos campos de texto import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
para nome completo, idade, login e senha, além de import javafx.scene.Scene;
botões para salvar a ação e cancelar a operação, 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.
Com os dois painéis já criados, devemos deixar public static void main(String[] args) {
launch(args);
invisível este segundo e voltar a tornar visível o pai-
}
nel de login, pois a exibição iniciará por ele.
Mais um fator importante é dar nomes (ID) aos @Override
dois AnchorPane’s: chamarei o painel de login de public void start(Stage stage) throws Exception {
“paneLogin” e o painel de novo usuário de “paneNo- Parent parent =
voUsuario”. Para isto, vá na aba Properties, e no item FXMLLoader.load(getClass().getClassLoader()
fx:id, digite o nome do componente. Este item é de .getResource(“fxml/login.fxml”));
Scene scene = new Scene(parent);
extrema importância, pois este nome será identifica-
stage.setScene(scene);
do em código, através de injeção de dependência. stage.setTitle(“Login”);
E, por fim, precisamos criar os métodos das ações stage.show();
dos botões, que também serão identificados em códi- }
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 código, então dê um nome
fácil para identificação. Não esqueça de acrescentar
o símbolo “#” antes do nome do método. Na figura A única mudança deste código com a Application tra-
11, veremos um exemplo de ação do botão de entrar dicional é o uso do Parent, sendo relacionado com o
no sistema: arquivo FXML criado (login.fxml). Utilizamos o mé-
todo FXMLLoader.load(URL url) para este fim, indi-
cando o caminho do arquivo como parâmetro.
Caso tenha CSS na tela, necessita indicar na Sce-
ne, utilizando o seguinte código:

Figura 11. Método onAction do botão “btEntrar”. scene.getStylesheets().add(getClass().getClassLoader().

getResource(“css/login.css”).toExternalForm());
Após estas etapas, podemos colocar a “mão no
código”.
Veremos que o código no JavaFX, com o uso de Agora, precisamos criar a classe Initializable
FXML, se torna muito simples, pois trabalhamos com (Controller), sem ela, esta tela ainda não rodará.
o padrão MVC, dividindo as funções das classes de
forma coesa. É necessária a criação de duas classes: Classe Initializable (Controller)
Application (View) e Initializable (Controller). Esta classe com certeza é novidade entre os de-
senvolvedores iniciantes em JavaFX. Aqui conterá
Classe Application (View) todas as funcionalidades da tela indicada, em ou-
Esta classe possui um código simples e enxuto, tras palavras, será o controlador da tela. Ela é im-
justamente focado para a exibição da tela. Para isto, plementada da interface Initializable e necessita da
criamos um Parent, baseado no arquivo FXML, criado utilização do método initialize (URL url, Resource-
no JavaFX Scene Builder, e então criaremos normal- Bundle bundle). Veremos que, nesta classe, usam-se
mente a Scene e o Stage, assim como a classe Appli- conceitos de injeção de dependência e Annotations,
cation tradicional. para enxugar ainda mais o código. No próprio Java-
FX Scene Builder, podemos ver o esqueleto da classe
Controller. Vá na aba View e clique em “Show Sample

/ 36
Controller Skeleton”, então verá um campo de texto
mostrando o esqueleto da classe.
Mostraremos o código e depois explicaremos:
Listagem 2. Classe Login Controller.
package controller;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
public class LoginController implements Initializable { na aba Code, do JavaFX Scene Builder, os métodos
@FXML
private AnchorPane paneLogin, paneNovoUsuario;
@FXML
private TextField txLogin, txNome, txIdade,
txLoginUsuario;
@FXML
private PasswordField txSenha, txSenhaUsuario;
@Override
public void initialize(URL url, ResourceBundle
bundle) {
} to de aplicações Desktop de alta qualidade gráfica e
@FXML
protected void btEntrarAction(ActionEvent evt) {
// Logar no sistema
} o desenvolvedor e a criação de aplicações avançadas.
@FXML
protected void btSairAction(ActionEvent evt) {
System.exit(0);
}
Primeiro, para criarmos os componentes, basta
que declaremos os objetos e anotemos com a Anno-
tation FXML (@FXML). Uma vez o controller identifi-
cado, irá buscar os componentes de mesmo nome que
o declarado no arquivo FXML. Se o nome for diferen-
te, dará um Exception em tempo de execução. Com
isto, não há necessidade de instanciarmos os compo-
nentes e identificarmos na tela. O JavaFX fará isto por
“debaixo dos panos”.
Dentro do método initialize, ficarão os códigos de
implementação inicial dos componentes, como uma
troca de texto ao abrir a tela, por exemplo. No nosso
exemplo, não necessitaremos de códigos ali dentro.
E, por fim, temos a criação das ações (listeners)
dos botões e do Hyperlink. Primeiro, devemos criar
adequados, então, indicamos a construção destes
métodos (por padrão, é adequado indicá-los como
protegidos – protected), passando como parâmetro o
tipo do evento (pode ser ActionEvent – ações de cli-
que, MouseEvent – ações de mouse, KeyEvent – ações
de tecla, entre outros).
Considerações finais
Com a união dos artigos “Toques de Requinte em
Aplicações Desktop com JavaFX” (edição 58) e este
artigo podemos facilmente iniciar o desenvolvimen-
organização de estrutura de códigos eficaz. Vimos
que o JavaFX possui recursos não apenas visuais, mas
estruturados, utilizando conceitos MVC e injeções de
dependência, que reduz imensamente a ponte entre

@FXML
protected void btCadastrarAction(ActionEvent evt) {
// Cadastrar novo usuário
} /referências
@FXML
protected void btCancelarAction(ActionEvent evt) {

// Cancelar operação
> Toques de Requinte em Aplicações Desktop com JavaFX,
paneLogin.setVisible(true);
paneNovoUsuario.setVisible(false); de Bruno Henrique de Oliveira, Revista MundoJ Ed. 58.
}
> JavaFX Scene Builder User Guide - http://docs.oracle.

@FXML com/javafx/scenebuilder/1/user_guide/jsbpub-user_guide.
protected void linkCliqueAquiAction(ActionEvent evt) { htm
paneLogin.setVisible(false);
paneNovoUsuario.setVisible(true);
}

37 \