javafx_
Toques de requinte
para aplicações
Desktop com JavaFX
Conhecendo o funcionamento desta plataforma que
promete estilizar aplicações Desktop, mesmo sem grandes
conhecimentos de CSS.
N o dia a dia dos desenvolvedores de software,
nos deparamos com incógnitas definidas pelo
cliente final, as quais demandam tempo e recursos
para constatar a melhor forma de satisfazê-lo. Afi-
nal, nem sempre aquilo que imaginamos ser o me-
lhor para o sistema, é aquilo que o cliente espera do
produto. Apesar de muitas vezes pormos em prática
aquele velho conceito de que “devemos nos preocu-
par em entregar o sistema rodando, com layout nos
preocupamos mais tarde, se for viável”, começamos
a repensar sobre este pensamento, que limita o sis-
tema e esquece de torná-lo agradável aos olhos dos
usuários. Para a entrega final, vemos cada dia mais
a importância de um sistema visualmente interes-
sante, semelhante a um jogo de videogame no qual
os jogadores muitas vezes se animam com o jogo só
pelo trailer, antes mesmo de seu lançamento oficial.
Porém, também sabemos o quão difícil é dar uma
aparência agradável a aplicações Desktop com as
APis gráficas disponíveis. Por este motivo os desen-
volvedores preferem desenvolver aplicações Web,
pela variedade de frameworks disponíveis, como o
Primefaces e RichFaces, por exemplo.
O JavaFX oferece uma solução eficaz para este
problema. Com a plataforma JavaFX, pode-se dar di-
versos “toques de requinte” para aplicações Desktop,
como o uso de CSS para dar estilo aos componentes
gerais, e efeitos gráficos interessantes, como o Re-
flection, que dá o efeito de espelho d’água em um
componente, dando um visual inimaginável para
este fim, além de Transitions e Timelines, que são
efeitos de tempo, como a translação de um painel
para um determinado local na tela. Estes diversos
/ 42
efeitos podem se unir, formando um gráfico agradá-
vel aos olhos dos usuários. Os componentes desta
plataforma se diferem dos componentes de aplica-
ções Swing, melhorando certos itens, como o JTable,
que se mostra complexo para muitos desenvolvedo-
res Java, dando lugar para os TableViews e TableCo-
lumns, que possuem conceitos semelhantes aos Ob-
servers (Observer Pattern), que facilitam na edição
dos dados exibidos. Além de outros componentes
adicionados, como o Accordion, um painel sanfona-
do interessante para quem utilizava diversos JPanels
para dar um efeito dinâmico, e também possui uma
variedade de componentes Charts (gráficos) que so-
luciona o problema de muitas aplicações nas quais
há necessidade de conjunto de informações numéri-
cas. Ao final do artigo, encontram-se referências para
exemplos práticos que ensinam o funcionamento de
vários códigos que serão mostrados a seguir.
Desenvolvendo uma tela de cadastro
Para começarmos a desenvolver com JavaFX,
criaremos uma tela simples, para cadastro de um
cliente com alguns campos: nome, idade e sexo. ini-
cialmente, não serão constatadas grandes mudanças
em relação ao antigo Swing, mas já veremos uma es-
trutura diferente.
Criação da tela
Começaremos entendendo que precisamos de
uma cena para “acontecer” nossa tela, e a tela pro-
priamente dita é o nosso estágio, que seria equiva-
lente ao JFrame, no Swing. Faremos uso, também, de
 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.

Este artigo apresenta a plataforma JavaFX, com foco no desenvolvi-

mento de aplicações Desktop com uso de CSS e efeitos gráficos visu-
ais de forma simples. Ao final deste artigo, o leitor aprenderá como
construir formulários e utilizar recursos como Effects, Transitions e
Timelines para tornar a aplicação cada vez mais interessante aos
olhos do cliente final.

um AnchorPane, que seria equivalente ao JPanel do O método main é necessário para executar o nosso
Swing, para adicionar os componentes. Os compo- formulário. O método launch é estático, da classe Ap-
nentes são adicionados ao painel, que é adicionado à plication, e passa como parâmetro o args que vem do
cena, que por sua vez é adicionada ao estágio. método main, caso haja alguma variável que venha
junto da execução da classe. O método start é imple-
Listagem 1. Criação de uma tela simples. mentado também da classe Application, e é nele que
colocamos a lógica para inicialização do formulário.
package application;
inicialmente criamos um painel que conterá os com-
ponentes da tela, o AnchorPane, e damos sua largu-
import javafx.application.Application; ra e altura com o método setPrefSize(double width,
import javafx.scene.Scene; double height), no exemplo, damos 150x200. Então,
import javafx.scene.layout.AnchorPane; criamos uma nova Scene, correspondente à tela,
import javafx.stage.Stage; passando o componente de visualização principal da
tela, no caso o nosso pane. indicaremos o valor da
public class CadastroApp extends Application { variável stage, que é do tipo Stage, que seria nossa
tela propriamente dita, passando para ela qual cena
// Método principal para execução da Application
public static void main(String[] args) { acontecerá com o método setScene(Scene scene).
launch(args); Demos também um título para a tela com o método
} setTitle(String value), e por fim abrimos a tela com o
método show(), da Stage.
// Método implementado da Application, para iniciar
a tela
@Override
Criando os componentes
public void start(Stage stage) throws Exception {
Nossa tela terá poucos e básicos itens, como
AnchorPane pane = new AnchorPane(); campos de texto e botões. Criaremos um método
pane.setPrefSize(150, 200); para inicializar os componentes e adicioná-los à
Scene scene = new Scene(pane); cena.
stage.setScene(scene);
stage.setTitle(“Cadastro de Clientes”); Listagem 2. Método para inicialização de compo-
stage.show(); nentes.
}
private void initComponents(AnchorPane pane) {
TextField txNome = new TextField();
}
txNome.setPromptText(“Digite seu nome”);
TextField txIdade = new TextField();

43 \

txIdade.setPromptText(“Digite sua idade”);
txIdade.setLayoutY(30);
RadioButton rbMasc = new RadioButton(“Masculino”);
rbMasc.setLayoutY(60);
RadioButton rbFem = new RadioButton(“Feminino”);
rbFem.setLayoutY(90);
ToggleGroup groupSexo = new ToggleGroup();
groupSexo.getToggles().addAll(rbMasc, rbFem);
Button btCadastrar = new Button(“Cadastrar”);
btCadastrar.setLayoutY(120);
Button btSair = new Button(“Sair”);
btSair.setLayoutY(150);
pane.getChildren().addAll(txNome, txIdade, rbMasc,
rbFem, btCadastrar, btSair);
} }
Neste método, instanciamos os componentes da
tela, que são os seguintes:
» TextField: campos de texto, indicamos para
nome e idade;
» RadioButton: botões de opção, indicamos para
o sexo (masculino ou feminino);
» ToggleGroup: grupo de opções, indicamos os
RadioButtons, para que se possa escolher ape-
nas uma opção, para isto usa-se o método get-
Toggles().addAll(Toggle... toggles) passando os
RadioButtons como parâmetros;
» Button: botões, indicamos para os itens “Ca-
dastrar” e “Sair”.
Indicamos a coordenada de cada componente na
tela, através do método setLayoutY(double value),
que indica a coordenada Y do eixo cartesiano. Pode-
-se usar setLayoutX(double value) para indicar a co-
ordenada X. Adicionamos todos os componentes ao
painel principal, usando o método getChildren(), que
retorna a lista de componentes deste painel, e adicio-
namos itens a esta lista, com o método addAll(Node...
nodes), passando todos os itens de uma só vez, pois
todos são Node. indicamos também um texto padrão
de visualização nos campos de texto, com o método
setPromptText(String value), este texto será visuali-
zado enquanto seu foco estiver fora do componente,
facilitando, por exemplo, para evitar o uso de Labels
excessivas. Um código simples que pode ser melho-
rado, criando atributos privados para torná-los visí-
veis a outros métodos, como um método para iniciar
as ações dos botões, por exemplo. Para criarmos sua
ação, usamos um código semelhante ao listener do
JButton.
btSair.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent arg0) {
stage.close();
}
});
/ 44
O método setOnAction(EventHandler han-
dler) é o que indica a ação do botão, criamos um
novo EventHandler para indicar o evento de ação,
este método deve ser implementado, com o método
handle(ActionEvent arg0).
Para a função de cadastrar, apenas exibiremos
uma caixa de mensagem dizendo que o cliente foi ca-
dastrado com sucesso.
btCadastrar.setOnAction(new EventHandler<ActionEvent>()
{
@Override
public void handle(ActionEvent event) {
JOptionPane.showMessageDialog(null,
“Cliente cadastrado com sucesso!”);
});
Primeiro toque de requinte - CSS
No JavaFX, podemos fazer uso de CSS para esti-
lizar a aplicação. Porém, seus códigos são um pouco
diferentes do padrão CSS. Podemos utilizar de dois
modos: criando um novo arquivo CSS e indicando
seus ids conforme seus componentes, ou também
diretamente em código de cada componente, utili-
zando o método setStyle(String value), passando em
uma String o mesmo estilo CSS que seria utilizado no
arquivo.
Modificaremos o fundo do painel principal da
nossa tela de cadastro dos dois modos. Primeiro, uti-
lizaremos o arquivo CSS, para isto, criaremos ele com
o nome cadastro.css.
Listagem 3. Arquivo CSS para personalização da tela.
.pane {
-fx-background-color: blue;
}
E identificamos este CSS em duas partes em có-
digo. Primeiro, indicamos o arquivo utilizado dentro
da cena.
scene.getStylesheets().add(CadastroApp.class.
getResource(“cadastro.css”).toExternalForm());
E depois identificamos os componentes conforme o
iD indicado.
pane.getStyleClass().add(“pane”);
A figura 1 apresenta nossa tela inicial com o uso do
estilo CSS indicado.
Mas que tal mudarmos esta cor de fundo para
um tom gradiente, com duas cores distintas, por
exemplo, um cinza e um azul? isto é completamen-
te possível com o JavaFX, utilizando a propriedade
linear-gradient. Vamos utilizar no próprio arquivo
CSS. Aproveitaremos, também, para modificar a cor
 Figura 1. Formulário de cadastro de clientes. Figura 2. Tela de cadastro com efeito gradiente

do texto dos RadioButtons para branco, para melhor E dará o mesmo efeito do exemplo com o arquivo
visualização. CSS.
Listagem 4. Modificação no arquivo CSS.
.pane {
Segundo toque de requinte – Effects
Com o JavaFX, podemos usufruir de efeitos grá-
-fx-background-color: linear-gradient(from 0% 0% to 100% ficos visuais surpreendentes, como, por exemplo, um
100%, blue 0%, gray 100%); espelho d’água em um componente, ou uma sombra
} no mesmo. São diversas opções de Effects, a própria
Oracle disponibiliza exemplos práticos de uso.
.rb { Neste artigo, mostraremos dois exemplos, com
-fx-text-fill: white; Reflection e Drop Shadow. Primeiro, usaremos o Re-
} flection para dar um efeito de reflexão aos dois bo-
tões da tela. Seu uso em código é muito simples.
E apenas precisamos indicar nos RadioButtons, o
nosso iD deste arquivo. btCadastrar.setEffect(new Reflection());
btSair.setEffect(new Reflection());
rbMasc.getStyleClass().add(“rb”);
rbFem.getStyleClass().add(“rb”); O método setEffect(Effect effect) indica o tipo de
efeito utilizado no componente. instanciando um
novo Reflection, já vemos seu efeito prático. A figura
Veja o toque de requinte dado à aplicação, depois 3 apresenta este efeito.
dessas modificações. O efeito gradiente para painéis
faz uma diferença gráfica perceptível para qualquer
leigo. A figura 2 mostrará o resultado da modificação Podemos alterar certas propriedades do Reflec-
de estilo CSS na tela. tion, como a opacidade da reflexão. Para isto, bas-
A partir daqui, veremos diversos estilos de CSS ta instanciar uma variável do tipo Reflection e usar
para produzirmos efeitos visuais para a aplicação. seus métodos para configurá-lo da sua maneira. Este
Podemos também indicar o CSS direto no código. mesmo efeito poderia ser facilmente utilizado nos
Veremos o exemplo do efeito gradiente: RadioButtons ou nos TextFields, com o mesmo mé-
todo, presente em qualquer componente, pois todos
pane.setStyle(“-fx-background-color: linear-gradient( derivam da classe Node, envolvendo o conceito do
from 0% 0% to 100% 100%, blue 0%, gray 100%);”);
Composite Pattern.

45 \
 Figura 3. Efeito Reflection. Figura 4. Efeito Drop Shadow.

Agora vamos colocar um efeito de sombra nos dois Listagem 5. FadeTransition no botão btCadastrar.
TextFields. Com o mesmo método setEffect(Effect
effect), podemos indicar o Drop Shadow.
DropShadow dropShadow = new DropShadow();
dropShadow.setSpread(0.5);
Usamos o método setSpread(double value) ape-
nas para aumentar o espaço de sombreamento do
componente. Agora, basta passar o efeito para cada
componente.
txNome.setEffect(dropShadow);
txIdade.setEffect(dropShadow);
// Ação no botão, ao passar ao mouse sobre o componente
btCadastrar.setOnMouseEntered(new
EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
FadeTransition transition = new FadeTransition(
Duration.millis(2000), btCadastrar);
transition.setFromValue(0.0);
transition.setToValue(1.0);
transition.play();
}
});

No nosso exemplo, este efeito não será muito

perceptível, porém, mudando a cor da tela para o Com o método setOnMouseEntered (EventHand-
branco, o sombreamento será mais visível. A figura 4 ler handler), indicamos uma ação ao passar o mouse
apresenta o efeito DropShadow nos TextFields. sobre o componente. Em sua implementação, criamos
um novo FadeTransition(Duration duration, Node
node), passando a duração da transição, utilizando a
Terceiro toque de requinte – Transitions classe Duration do JavaFX, no nosso exemplo, passa-
e Timelines mos 2000 milissegundos, ou seja, 2 segundos de tran-
O uso de Transitions e Timelines pode ser inte- sição, e também passamos qual o Node que acontece-
ressante em aplicações que exigem recursos visuais rá o efeito. Os métodos setFromValue(double value)
avançados. Com eles podemos, por exemplo, mudar e setToValue(double value) indicam a variação do
um componente de lugar, como em um efeito de Fade, começando em 0.0 e terminando em 1.0, res-
translação, e também utilizar um efeito alpha, que pectivamente, em seus métodos. E, por fim, executa-
tira a visibilidade aos poucos de um componente e o mos a transição com o método play().
torna visível, em seguida. Há diversos tipos de Transitions, como já comen-
Primeiro, mostraremos o uso de Transitions, en- tado, inclusive pode-se utilizar vários Transitions em
tre os vários tipos, usaremos a classe FadeTransition, sequência ou paralelamente.
manipulando um efeito Fade in/Fade Out. Mostraremos agora o uso de Timelines para mo-

/ 46
ver um componente de um ponto ao outro, daremos
este efeito para o botão “sair”.
Listagem 6. Timeline no botão btSair.
//Listagem 6. Timeline no botão btSair.
btSair.setOnMouseEntered(new
EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent arg0) {
Timeline timeline = new Timeline();
KeyValue kv = new Keyvalue(btSair.
layoutxProperty(), btSair.getLayoutx() + 20);
KeyFrame kf = new KeyFrame(
Duration.millis(2000), kv);
timeline.getKeyFrames().add(kf);
timeline.play();
} ao mesmo tempo, para aumentar a escala do botão
});
Criamos uma nova Timeline, que será responsável
pelo efeito. A criação da KeyValue indica qual a tran-
sição de valores ocorrerá, no nosso caso, a coordenada
X do btSair será incrementada em 20. A KeyFrame in-
dica o tempo de execução do efeito, necessita passar
em sua construção qual a duração (Duration) e qual a
KeyValue, pode-se passar diversas KeyValues ao mes-
mo tempo. Adicionamos a KeyFrame para a Timeline,
com o método getKeyFrames().add(KeyFrame kf), e,
por fim, executamos, com o método play().
Ao passar o mouse sobre o botão, veremos o mes-
mo movendo-se para o lado direito. Este efeito já se
mostra bastante avançado. Podemos também au-
mentar a largura e altura de um componente, voltan-
do ao normal quando tira o mouse dele.
Listagem 7. Efeito Scale no botão btSair.
btSair.setOnMouseEntered(new
EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent arg0) {
Timeline timeline = new Timeline();
KeyValue kv = new Keyvalue(btSair.scalexProperty(),
1.2);
KeyValue kv2 = new Keyvalue(
btSair.scaleYProperty(), 1.2);
KeyFrame kf = new KeyFrame(Duration.millis(1000),
kv, kv2);
timeline.getKeyFrames().add(kf);
timeline.play();
}
});
btSair.setOnMouseExited(new EventHandler
<MouseEvent>() {
@Override
public void handle(MouseEvent arg0) {
Timeline timeline = new Timeline();
KeyValue kv = new Keyvalue(btSair.scalexProperty(),
1.0);
KeyValue kv2 = new Keyvalue(
btSair.scaleYProperty(), 1.0);
KeyFrame kf = new KeyFrame(Duration.millis(1000),
kv, kv2);
timeline.getKeyFrames().add(kf);
timeline.play();
}
});
A novidade aqui é a indicação de duas KeyValues
em coordenada X e Y. Na construção da KeyFra-
me, indicamos todas as KeyValues necessárias,
logo após a duração. Utilizamos também o método
setOnMouseExited(EventHandler handler) para indi-
car uma ação ao tirar o mouse do componente, ele irá
fazer o botão voltar ao normal, conforme outra Time-
line criada.
Considerações finais
Vimos um pouco do que o JavaFX oferece para
os desenvolvedores Java. Seus efeitos gráficos visu-
ais mostram-se incríveis para aplicações Desktop,
dando-nos poder para pensar em um layout adequa-
do e belo, mesmo sem conhecer efeitos avançados de
CSS e JavaScript, por exemplo. Com esta plataforma,
torna-se simples programar extensos formulários e
dimensioná-los na tela de forma limpa. Pode-se tor-
nar ainda mais organizado utilizando o programa da
Oracle, o JavaFX Scene Builder, que é um ambiente
para desenvolver layouts do JavaFX com um sistema
drag-and-drop. Ele gera um arquivo FXML, que é fa-
cilmente identificado em código.
/referências
> JavaFX 2.0: Introduction by Example, de Carl Dea,
ed. Apress. – Livro para introduzir JavaFX, com códigos
práticos e ensino fácil, porém em inglês.
> http://docs.oracle.com/javafx/2/visual_effects/jfxpub-
visual_effects.htm – Documentação sobre Effects
> http://docs.oracle.com/javafx/2/animations/jfxpub-
animations.htm – Documentação sobre Transitions e
Timelines
> http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/
cssref.html – Documentação sobre CSS JavaFX
47 \