Java FX2 Introduçao

09/08/14 12:11 DevMedia - Verso para impresso
Pgina 1 de 25 http://www.devmedia.com.br/websys.5/webreader_print.asp?cat=61&artigo=4972&revista=impressao_23#a-4972
DevMedia - Verso para impresso
Introduo ao JavaFX 2.0
Uma renovada plataforma que agora consagra o poder do Java
De que se trata o artigo
O artigo apresenta a renovada plataforma JavaFX e as caractersticas da nova verso (2.0),
que englobam as funcionalidades: controles de interface grca aprimorados, novos painis de
layout, mecanismo de renderizao com acelerao por hardware, reproduo de mdia e as
mudanas que ocorreram ao longo do seu lanamento. abordada tambm uma introduo
aos principais componentes que constituem a estrutura da plataforma e desenvolvido uma
aplicao demonstrando alguns recursos oferecidos pelo JavaFX.
Em que situao o tema til
Para desenvolvedores e designers que buscam a criao de interfaces grcas com bons
efeitos visuais, permitindo aproveitar seus conhecimentos em Java por meio da reutilizao de
bibliotecas prprias, uma vez que JavaFX utiliza Java.
Esta vantagem possibilita usufruir de caractersticas da linguagem como genricos, anotaes
e multithreading.
Resumo Devman
Introduo ao JavaFX 2.0: O JavaFX 2.0 representa a principal atualizao para o
desenvolvimento client-side da plataforma Java. Com base nisso, este artigo aborda as
inmeras modicaes que ocorreram em sua verso 2.0, bem como a substituio da
linguagem de script - JavaFX Script - pela linguagem Java e a possibilidade de realizar o deploy
em trs diferentes modos: Standalone, Browser e Web Start. Por m, uma aplicao
demonstrando alguns recursos da tecnologia desenvolvida.
JavaFX uma plataforma baseada em Java e projetada para desenvolvedores que precisam
criar aplicativos RIA. O termo RIA usado para descrever Aplicaes Ricas para Internet, ou
seja, aplicaes que so executadas em ambiente web, mas que possuem caractersticas
similares a softwares desenvolvidos para execuo em ambiente desktop. Aplicaes RIA
podem ser acessadas por meio de qualquer computador que esteja conectado internet e sem
a necessidade de instalao destes softwares. A execuo deles ocorre no ambiente do
navegador, e atualizaes de novas verses so realizadas de maneira automtica.
Desta maneira, ocorre um equilbrio entre o processamento executado no servidor e o que
ocorre no cliente, visto que o servidor no necessita realizar todo o processamento. Assim, se
ganha em termos de agilidade na interao entre a aplicao e o usurio, reduzindo o volume
de dados transmitido.
Desde seu lanamento pela Sun Microsystems em dezembro de 2008, o JavaFX tem passado
por signicativas mudanas. Na verso 1.0, foi criada uma linguagem para trabalhar com os
recursos do JavaFX com o nome de JavaFX Script. Esta linguagem era conhecida
anteriormente como F3 (Form Follows Function), um projeto adquirido pela Sun por meio da
compra da SeeBeyond.
O JavaFX Script era uma linguagem estaticamente tipada, orientada a objetos e projetada para
a JVM. As aplicaes construdas com essa linguagem eram executadas em todos os
ambientes (desktop ou navegador) onde o JRE (Java Runtime Environment) era executado,
buscando aplicar o conceito Write once, run anywhere. Este conceito ganhou nfase na verso
1.1, anunciada em fevereiro de 2009, quando se tornou possvel, alm da criao de aplicativos
para desktop e navegadores, a criao de aplicativos JavaFX para dispositivos mveis.
Na verso 1.2 algumas caractersticas foram adicionadas, como o suporte beta para as
plataformas Linux e Solaris, a mudana no pacote de layouts (com a incluso de novas classes
como ClipView, Flow e Panel) e a adio de efeitos visuais. Com as modicaes na sintaxe da
linguagem JavaFX Script, alguns cdigos funcionais da verso anterior se tornaram
incompatveis e obsoletos.
A verso 1.3, lanada em 22 de abril de 2010, trouxe vrias melhorias, oferecendo melhor
desempenho em tempo de execuo para animaes complexas e renderizao de textos,
suporte para aplicativos de TV, suporte tecnologia 3D e novos controles de interface (por
exemplo, ChoiceBox e PasswordBox).
Outra novidade que instigou o uso do JavaFX foi a incluso de um editor visual para interfaces
chamado JavaFX Composer, na verso 6.9 da IDE NetBeans.
Com a compra da Sun pela Oracle em 2010, o JavaFX foi totalmente remodelado, tornando-se
incompatvel com as verses anteriores. Como destaques dessa mudana, ressalta-se a
descontinuao do suporte linguagem JavaFX Script e a converso de toda a API, que antes
era codicada em JavaFX Script, para Java puro. Esta mudana permite que o programador
escolha a linguagem utilizada para codicar em JavaFX (desde que seja uma linguagem que
rode na JVM). Com isso, programadores Java no precisam aprender uma nova linguagem para
codicar em JavaFX. Para aqueles que preferem utilizar uma linguagem declarativa, a perda do
JavaFX Script pode ser contornada com linguagens como Visage (fork de JavaFX Script), Scala
ou Groovy.
No FAQ criado pela Oracle sobre JavaFX (veja a seo Links), consta que esta tecnologia
substituir o Swing e o AWT. Com base nisso possvel presumir que a Oracle no est
brincando com JavaFX e investir pesado na tecnologia.
Deste modo, ao longo deste artigo sero abordadas as caractersticas que envolvem o
JavaFX, considerado o prximo passo na evoluo do lado cliente (client-side) da plataforma
Java.
JavaFX 2.0
O JavaFX 2.0 foi projetado para oferecer um rico conjunto de APIs que simpliquem o
desenvolvimento de softwares que utilizem contedo de multimdia.
Para que isso seja possvel, so utilizadas avanadas engines de mdia e grcos com
acelerao por hardware. Alm do suporte msica, vdeo e animaes, JavaFX prov uma
nova e moderna coleo de controles de Interface com o Usurio, tornando-se a escolha bvia
para o desenvolvimento RIA com Java. E por ser baseado em Java, usufrui de todos os
poderosos recursos desta linguagem, como anotaes, genricos e multithreading, e o suporte
a aplicaes de grande escala, com o incremento de novas funcionalidades, como o Binding.
Com o JavaFX sendo baseado em Java, ele preserva o investimento anterior na linguagem e
plataforma, pois possibilita utilizar suas bibliotecas de maneira transparente, conectar com
aplicaes Java EE ou at mesmo utilizar recursos nativos do sistema operacional por meio de
JNI (Java Native Interface). Olhando para a distribuio das aplicaes, as desenvolvidas em
JavaFX suportam trs modos de execuo: um deles pelo navegador, onde a aplicao
embutida em uma pgina web, sendo iniciada automaticamente quando esta pgina
carregada; outro modo de deploy conhecido como Web Start, permitindo realizar o download
do aplicativo e execut-lo na rea de trabalho - isto , no desktop; e no caso do usurio no
possuir acesso internet, existe ainda um terceiro modo, conhecido como Standalone, onde o
aplicativo instalado em uma unidade local e pode ser executado com um duplo clique no
arquivo JAR.
Para a criao da interface com o usurio, JavaFX introduz uma nova linguagem de marcao
chamada FXML como opo codicao em Java. FXML permite modelar a UI
separadamente da lgica da aplicao, no sendo necessrio recompilar o cdigo toda vez que
uma mudana no layout ocorrer. Por ser baseada em XML, uma linguagem conhecida pela
maioria dos desenvolvedores, se torna fcil e intuitiva de aprender.
Outra novidade do JavaFX 2.0 que a tecnologia oferece uma perfeita integrao com
aplicaes Swing. Esta integrao possvel porque o JavaFX apresenta a classe JFXPanel,
localizada no pacote javafx.embed.swing, que permite incorporar novas funcionalidades, tais
como reproduo de mdia e incluso da sua rica API grca, dentro de aplicaes Swing.
Desta maneira a Oracle possibilita a utilizao de Swing e JavaFX na mesma aplicao,
enquanto recomenda a migrao para JavaFX.
Para compreender melhor o funcionamento do JavaFX, na Figura 1 demonstrada a
arquitetura de sua plataforma.

[abrir imagem em janela]
Figura 1. Componentes da arquitetura da plataforma JavaFX 2.0.
A estrutura do JavaFX possui uma arquitetura dividida em camadas que pode ser visualizada
na Figura 1. Esta estrutura e seus componentes sero descritos ao longo deste artigo.
Scene Graph e o conjunto de APIs Java
O Scene Graph (ou Grco de Cena) o ponto inicial para a construo de uma aplicao
JavaFX. Nele concentram-se os componentes visuais da interface, que juntos formam uma
rvore hierrquica de ns. O JavaFX utiliza a metfora de um Teatro, onde se tem um Stage
(palco) e um Scene (Cena). O Stage a janela do programa. Comparando com Swing, o stage
como um JFrame. J o Scene pode ser comparado a um JPanel. Ele um container para os
Nodes (ns) e sempre ter um n raiz, que por sua vez conter outros ns. Esta a estrutura
bsica de uma aplicao JavaFX: um Stage, que contm um Scene, que contm um n raiz
(geralmente uma instncia da classe javafx.scene.Group), que contm um ou mais ns lhos,
que por sua vez podem ter lhos ou no. Desta maneira formada a rvore hierrquica
mencionada anteriormente.
Com exceo do n raiz, um nico n pode possuir vrias propriedades que customizam seu
comportamento e aparncia, como efeitos de sombra, iluminao, desfoco, opacidade,
propriedades que manipulam eventos (event handlers), visibilidade, rotao, posicionamento,
entre outros.
A API javafx.scene fornece o conjunto principal de classes base para o Scene Graph e
formada pelos seguintes pacotes:
javafx.scene.chart;
javafx.scene.control;
javafx.scene.control.cell;
javafx.scene.effect;
javafx.scene.image;
javafx.scene.input;
javafx.scene.layout;
javafx.scene.media;
javafx.scene.paint;
javafx.scene.shape;
javafx.scene.text;
javafx.scene.transform;
javafx.scene.web.
O pacote chart prov um conjunto de componentes para a apresentao de dados em
grcos. Dentre eles podem-se destacar as classes AreaChart, LineChart, BarChart e PieChart.
No javafx.scene.control e no javafx.scene.control.cell esto contidos os controles de Interface
Grca com o Usurio. Controles bsicos como Button, Label e TextField esto disponveis,
assim como os avanados, como Accordion, TreeView e ProgressIndicator.

Figura 2. Alguns efeitos visuais do JavaFX.

A API javafx.scene ainda fornece o pacote effect, onde esto localizadas as classes
responsveis pelos efeitos aplicados aos ns, como DropShadow, GaussianBlur, Reection e
Lighting. Alguns efeitos disponveis no pacote javafx.scene.effect podem ser observados na
Figura 2.
Para que seja possvel carregar e exibir imagens, as classes pertencentes ao pacote image
so necessrias. J as classes referentes aos eventos de mouse e teclado residem no pacote
input. A API javafx.scene fornece tambm os pacotes layout, text, paint, media e shape, que
tomam conta do layout da interface, ns de texto, cores e gradientes, integrao de udio e
vdeo e formas em 2D, respectivamente. No javafx.scene.transform so controladas as
transformaes dos ns, como rotao, escala e deslocamento. J o pacote web prov as
classes para carregar e exibir contedo da Web dentro do JavaFX. Essa funcionalidade
constituda por duas classes principais: WebEngine e WebView. Uma das grandes
caractersticas das aplicaes RIA so as animaes. Esta caracterstica implementada no
JavaFX tendo como base um TimeLine (linha de tempo) ou por meio de transies.
Xxx As animaes baseadas em TimeLine permitem alterar propriedades associadas ao
objeto, tais como cor, localizao e tamanho, durante determinado perodo de tempo. Neste tipo
de animao so criados KeyFrames (Quadros-Chave) que denem o valor de uma propriedade
em dado momento. As animaes por transio so ainda mais fceis de serem criadas, pois
somente necessrio indicar o valor nal da propriedade e o tempo para a animao, fazendo
com que a TimeLine seja criada internamente de forma transparente ao desenvolvedor.
Uma das caractersticas do JavaFX permitir personalizar a aparncia de objetos/controles de
interface, como das animaes, por exemplo. Esta caracterstica consiste no controle de seus
estilos, os quais seguem os padres propostos pelo W3C, aplicando CSS (Cascading Style
Sheets). Desta maneira possvel criar Skins para as aplicaes, contribuindo ainda mais para
a separao da lgica de negcio da lgica de apresentao. Esses controles de interface do
Scene Graph podem ser estilizados por meio de arquivos CSS externos ou no prprio cdigo
Java (inline). Assim, estilos personalizados podem ser atribudos em uma aplicao em tempo
de execuo, tornando possvel um aplicativo mudar dinamicamente de aparncia.

Nota
Skin: um estilo visual ou aparncia aplicada a um programa. Todo programa tem seu estilo
visual padro. Caso seja possvel alterar essa aparncia, isso pode ser feito por meio de
skins pr-construdos.
Para incrementar ainda mais a interface com o usurio, JavaFX incorpora diversos controles,
os quais fazem parte do pacote javafx.scene.control. Alguns destes controles podem ser vistos
na Figura 3.

Figura 3. Exemplos de componentes de UI disponveis no JavaFX.
Com a insero de controles em uma interface, torna-se necessria a organizao do
posicionamento deles na tela. Neste sentido, o JavaFX constitudo de painis de layout que
tm por objetivo organizar de maneira mais exvel estes controles (Buttons e TextFields, por
exemplo). De maneira anloga ao Swing, os Painis de Layout so similares em funcionalidade
aos Gerenciadores de Layout. Na Figura 4 possvel visualizar alguns painis de layout, como
o HBox, que organiza os ns horizontalmente em uma linha, o VBox, que organiza os ns
verticalmente, dentre outros. Todos os painis disponveis esto inclusos no pacote
javafx.scene.layout.

Figura 4. Gerenciadores de Layout disponveis no JavaFX.
Sistema Grco
Na Figura 1, as trs camadas destacadas em azul formam o sistema grco, que suporta
grcos de cena em 2D e 3D.
O sistema grco do JavaFX, por meio do Prism (responsvel pela rasterizao e renderizao
das Scenes), utiliza vrias APIs para renderizao dos grcos, dependendo do sistema onde
ele est sendo executado.
Quando a acelerao por hardware est disponvel, ele utiliza DirectX (para Windows) ou
OpenGL (para Mac ou Linux). Quando somente a acelerao por software est disponvel, o
Prism usa Java2D para a renderizao, pois o Java2D j est includo no JRE. Mas o
desempenho da aplicao maior quando se usa acelerao por hardware.
Nota
Com a acelerao de hardware, a construo de grcos tridimensionais (3D) usa o
processador de sua placa grca ao invs de usar recursos da CPU para desenhar as
imagens. GPU: GPUs so processadores especializados que efetuam operaes
relacionadas a aplicativos grcos 3D. Seu uso frequente em jogos, consoles de
videogames, estaes de trabalho, dentre outros.
Media Engine
A camada destacada pela cor verde na Figura 1, chamada de Media Engine, responsvel
pelas funcionalidades de reproduo de contedo de mdia por meio da biblioteca
javafx.scene.media. Esta biblioteca essencial para a criao de aplicaes ricas.
Os formatos de mdia suportados so: MP3, AIFF (Audio Interchange File Format) e WAV (ou
WAVE), bem como vdeos em Flash (FLV). Na verso 2.0, esta camada foi redesenhada para
alcanar um melhor desempenho.
Web Engine
O Web Engine, conhecido tambm como Embedded Browser, um novo componente de
interface com o usurio. Ele est disponvel no pacote javafx.scene.web e pode inclusive ser
utilizado dentro do Swing para exibir contedo Web. O componente baseado no webkit, um
navegador web open source que suporta HTML5, CSS, JavaScript, DOM e SVG.
Instalao do SDK
Para desenvolver aplicaes em JavaFX deve-se ter instalado o JavaFX SDK. A partir do Java
SE 7 o Runtime e o JavaFX SDK esto contidos no JDK. Se voc tem uma verso anterior,
pode instalar o JavaFX SDK isoladamente. Alm disso, necessrio o NetBeans 7.1 ou
superior para trabalhar com JavaFX 2.0.
Aplicao com JavaFX
Para demonstrar o uso do JavaFX, sero mostrados os primeiros passos para o
desenvolvimento de uma aplicao nesta tecnologia por meio do IDE NetBeans.
Para isso, acesse o menu File > New Project para abrir o Assistente de Novo Projeto do
NetBeans. Neste assistente, selecione JavaFX em Categories e em Projects selecione
JavaFXApplication, conforme demonstrado na Figura 5. Feito isso, clique em Next.

Figura 5. Dilogo de novo projeto do NetBeans.
A prxima etapa do assistente utilizada para congurar o nome e o local do projeto. Assim,
em Project Name, substitua a sugesto do NetBeans por JavaMagazine, deixe os outros
campos como esto e clique em Finish, como indica a Figura 6.

Figura 6. Dilogo de novo projeto do NetBeans.
Em seguida, o NetBeans criar o projeto com a estrutura bsica. Nesta estrutura, o arquivo
JavaMagazine.java, contendo um cdigo de exemplo, ser criado automaticamente pelo IDE.
Para executar este cdigo, clique no menu Run e depois em Run Main Project, ou tecle F6.
Aps esse procedimento, ser exibida a tela demonstrada na Figura 7.

Figura 7. Aplicao de exemplo crida automaticamente pelo NetBeans.
Codicando a aplicao
Analisando a classe JavaMagazine, verica-se que ela estende Application. esta classe que
controla o ciclo de vida de uma aplicao JavaFX. Ainda nesta classe, o mtodo main() realiza a
chamada ao mtodo launch(), que responsvel por iniciar a execuo da aplicao. Como
toda aplicao possui um ciclo de vida, em JavaFX no diferente. Sendo assim, este ciclo
comea aps a chamada a launch(), onde o runtime do JavaFX cria uma instncia da classe
Application, invoca o mtodo init() e depois o start(). Aps isso, a aplicao ca no estado de
execuo, aguardando sua nalizao. Quando isto ocorre, chamado o mtodo stop().
Os mtodos init() e stop() tm implementaes concretas e podem ser sobrescritos,
respectivamente, para executar rotinas de inicializao antes que a aplicao inicie
efetivamente, e rotinas de preparao para a nalizao.
O mtodo start() de Application abstrato e deve ser sobrescrito em toda aplicao JavaFX,
pois nele que a lgica da aplicao deve ser construda. Este mtodo invocado diretamente
pelo mtodo launch().
Listagem 1. Cdigo de exemplo Hello World em JavaFX.
package javamagazine;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class JavaMagazine extends Application {
public static void main(String[] args) {
launch(args);
}
/* Este mtodo chamado automaticamente pela Runtime do JavaFX, que
cria uma instncia de Stage para passar como parmetro. */
@Override
public void start(Stage primaryStage) {
//Ttulo da janela
primaryStage.setTitle("Hello World!");
//Criao de um objeto Button
Button btn = new Button();
btn.setText("Say 'Hello World'");
btn.setOnAction(new EventHandler<ActionEvent>() {
//Ao atribuda ao Evento onAction do Button
@Override
public void handle(ActionEvent event) {
System.out.println("Hello World!");
}
});
StackPane root = new StackPane();
root.getChildren().add(btn);
primaryStage.setScene(new Scene(root, 300, 250));
primaryStage.show();
}
}
O atributo recebido pelo mtodo start() do tipo Stage, que considerado como sendo o
palco. Ele o container de mais alto nvel em uma aplicao JavaFX. A classe Stage contm
vrias propriedades e mtodos que permitem alterar, por exemplo, a posio, tamanho,
visibilidade e ttulo da janela. O ttulo congurado por meio do mtodo setTitle(String title),
como possvel vericar na Listagem 1. Na linha seguinte criado um boto
(javafx.scene.control.Button), ajustado o texto do boto e adicionado um manipulador de
eventos para o seu evento onAction. Aps o mtodo handle(), criado um painel
(javafx.scene.layout.StackPane) e adicionado o boto a ele. Para adicionar este boto ao
StackPane, feito uso do mtodo getChildren(), que retorna uma lista dos ns lhos existentes
no objeto. Com a lista retornada, utiliza-se ento o mtodo add(), para que enm o boto seja
inserido como um n ao contedo do StackPane. Na sequncia, utilizado o mtodo
setScene(Scene) de Stage para atribuir uma Scene ao Stage. Como parmetro para este
mtodo instanciado um objeto Scene, passando como parmetro o StackPane criado
anteriormente e que contm o boto, e dois inteiros que denem a largura e altura do Scene,
respectivamente. Por ltimo, exibido o Stage com o mtodo show().
Assim, conclui-se a anlise do cdigo que o NetBeans gera automaticamente na criao de
um projeto JavaFX.
O prximo passo ser o de incrementar este exemplo, alterando o ttulo do Stage. Para isso,
no exemplo da Listagem 1, na linha que contm o mtodo setTitle(), preciso alterar a String
Hello World para Java Magazine. Em seguida, exclua o cdigo que cria o boto, juntamente
com o seu evento de ao. No lugar deste boto ser inserido um objeto da classe
javafx.scene.text.Text. O cdigo para criao do Text apresentado na Listagem 2. Note que na
criao deste objeto utilizada a classe TextBuilder. Esta classe auxilia a criao de objetos de
texto. Com TextBuilder possvel instanciar um objeto Text e ajustar suas propriedades numa
cadeia de mtodos. Pode-se tambm instanciar o objeto com o operador new e ajustar suas
propriedades com mtodos setters, cando a escolha a cargo do programador de acordo com
suas preferncias. A maioria das classes de JavaFX tem uma classe Builder correspondente,
que permite instanciar e setar atributos de maneira declarativa.
Listagem 2. Instanciando um objeto Text e ajustando suas propriedades.
Text txt = TextBuilder
.create()
.text("JavaMagazine")
.fill(Color.BLUE)
.stroke(Color.ROSYBROWN)
.strokeWidth(0.2)
.build();
O prximo passo alterar o parmetro do mtodo add() (Listagem 1) para txt, pois o button
foi removido, sendo substitudo por um objeto Text (Listagem 2). Ao executar o projeto, teclando
F6, a janela demonstrada na Figura 8 ser exibida.

Figura 8. Tela com objeto Text adicionado.
Na Listagem 3 demonstrado como alterar o tamanho do texto, ajustando as propriedades
scaleX e scaleY no construtor de Text.
Vamos ento adicionar os mtodos scaleX(double) e scaleY(double) ao TextBuilder com o
valor de 10 para ambos. Assim, o tamanho do texto ser aumentado em 10 vezes.
Prosseguindo, ser alterada a dimenso do Scene e consequentemente a do Stage que o
contm, para 800 x 600. Podemos fazer isso modicando os valores dos parmetros passados
ao mtodo setScene() de Stage. As Listagens 3 e 4 mostram como caram os cdigos. Com
estas mudanas, a janela passa a adquirir o formato representado na Figura 9.
Listagem 3. Alterando o tamanho do texto.
Text txt = TextBuilder
.create()
.text("JavaMagazine")
.fill(Color.BLUE)
.scaleX(10)
.scaleY(10)
.stroke(Color.ROSYBROWN)
.strokeWidth(0.2)
.build();
Listagem 4. Ajustando o tamanho do Scene.
primaryStage.setScene(new Scene(root, 800, 600));

Figura 9. Tela com o tamanho da fonte ajustado.
Alterando a aparncia e adicionando efeito ao texto
Para demonstrar como o JavaFX facilita a construo de interfaces grcas com boa
aparncia, sero realizadas duas customizaes: 1) adicionar um azul gradiente como
background da janela; e 2) adicionar um efeito DropShadow (sombra) ao texto. Assim,
primeiramente deve-se criar o gradiente instanciando a classe LinearGradient. Observe o cdigo
na Listagem 5.
Listagem 5. Criando um gradiente.
Stop[] stops = new Stop[]
{new Stop(0, Color.BLACK), new Stop(1, Color.DARKBLUE)};
LinearGradient grd = new LinearGradient(0.5, 0, 0.5, 1.0, true,
CycleMethod.NO_CYCLE, stops);
Para que o fundo da Scene use esse gradiente, preciso adicionar mais um parmetro ao
mtodo setScene() de Stage que informa qual o preenchimento do Scene. Por padro este
preenchimento (background) branco, mas pode ser alterado para qualquer cor ou gradiente. O
cdigo alterado com a incluso do quarto parmetro ca desta maneira:
primaryStage.setScene(new Scene(root, 800, 600, grd));
Para criar um efeito DropShadow, que uma sombra introduzida sob o n que a recebe, deve-
se instanciar a classe DropShadow.
Para isso feito uso da classe DropShadowBuilder, ajustando a cor, deslocamento e raio da
sombra, conforme indica a Listagem 6.
Listagem 6. Criando um efeito DropShadow.
final DropShadow ds = DropShadowBuilder
.create()
.color(Color.WHITE)
.offsetX(2)
.offsetY(2)
.radius(5)
.build();
O cdigo da Listagem 6 deve ser adicionado antes da criao do objeto Text. Para que o efeito
aparea na tela, preciso ajustar o atributo effect do objeto Text para receber a referncia
varivel que armazena o efeito de DropShadow (ds), inserindo o cdigo a seguir aps a criao
do objeto Text:
txt.setEffect(ds);
Observe que mesmo instanciando o objeto por meio de uma classe Builder, possvel alterar
suas propriedades por meio dos setters normalmente.
Ao executar o cdigo pressionando F6, a janela com as alteraes exibida (veja a Figura 10).
Adicionando movimento aplicao
Uma das caractersticas de uma aplicao RIA prover animao. Para adicionar essa
peculiaridade ao nosso exemplo, ser utilizada a animao de rotao do JavaFX no texto
JavaMagazine. Esta animao executada pela classe RotateTransition (do pacote
javafx.animation.transition).
Aps o cdigo que cria o efeito DropShadow, mostrado na Listagem 6, preciso realizar a
implementao descrita na Listagem 7, onde denida a animao de rotao para o boto que
controla a animao.
Listagem 7. Animando o texto com transio de rotao.
/* O efeito DropShadow foi instanciado da maneira tradicional com
o operador new, usando mtodos
setters para ajustar suas propriedades. */
final DropShadow ds2 = new DropShadow();
ds2.setColor(Color.WHITE);
ds2.setRadius(20);
// Animao de rotao instanciada pelo Builder
final RotateTransition rtb = RotateTransitionBuilder
.create()
// N indica qual objeto (Node) sofrer a rotao.
.node(txt)
// Determina em graus a rotao aplicada.
.byAngle(360)
// Quantas vezes a animao deve repetir.
.cycleCount(Animation.INDEFINITE)
/* Ao final da animao, repetir inversamente?
se ajustarmos para true, a rotao acontecer
uma vez no sentido horrio,
e outra no sentido anti-horrio, intercaladamente.*/
.autoReverse(false)
//Quanto tempo dura um ciclo da rotao em milissegundos
.duration(new Duration(3000))
/* interpolator() o mtodo para controlar o tempo
de acelerao e desacelerao de uma
transio, sendo que:
LINEAR mantm a mesma velocidade durante todo o ciclo.
EASEIN mais lento no comeo da animao.
EASEOUT mais lento no fim da animao
EASEBOTH mais lento no incio e fim da animao.*/
.interpolator(Interpolator.LINEAR)
.build();

// Boto que controla a animao
final Button btn_Anim = ButtonBuilder
.create()
.text("Iniciar Animao")
.build();
// Ajustando o Evento da ao com o mtodo setOnAction() de Button
btn_Anim.setOnAction(new EventHandler() {
@Override
public void handle(ActionEvent evt) {
// Inicia e pausa a animao e ajusta o texto do boto
if (btn_Anim.getText().equals("Iniciar Animao")) {
rtb.play();
btn_Anim.setText("Pausar Animao");
} else {
rtb.pause();
btn_Anim.setText("Iniciar Animao");
}
}
});
// Ajustando os eventos MouseEntered e MouseExited
// para incluir e retirar o efeito de sombra.
btn_Anim.setOnMouseEntered(new EventHandler() {
@Override
public void handle(MouseEvent arg0) {
btn_Anim.setEffect(ds2);
}
});
btn_Anim.setOnMouseExited(new EventHandler() {
@Override
btn_Anim.setEffect(null);
}
});
Na Listagem 7, optou-se por instanciar o efeito DropShadow usando o operador new. As
propriedades color e radius foram ajustadas por meio dos mtodos setColor() e setRadius(),
respectivamente. Posteriormente, foi implementado o cdigo responsvel pelo efeito da
animao: RotateTransition rtb = RotateTransitionBuilder.
Uma das propriedades da animao de rotao CycleCount. Esta determina quantas vezes o
ciclo da animao ser repetido.
Em nosso exemplo, o valor desta propriedade foi denido como Animation.INDEFINITE, para
que a animao seja contnua. J a propriedade Interpolator teve seu valor ajustado para linear,
fazendo com que a animao mantenha uma velocidade constante. Ela responsvel por
controlar o tempo de acelerao e desacelerao em cada ciclo da animao. Com a
velocidade denida, foi estabelecida a durao da animao por meio da propriedade Duration,
com o valor de trs mil milissegundos.
Na sequncia, para ativar e desativar o efeito de DropShadow, ajustou-se os eventos
onMouseEntered e onMouseExited. Para controlar a animao, foi criado um boto com o
auxlio do builder e implementou-se o mtodo que captura o evento onAction. Neste evento,
uma lgica foi implementada para a invocao dos mtodos play() e pause() (ambos de
RotateTransition), de acordo com o estado da animao.
Cabe lembrar que uma animao depois de instanciada no entra em execuo enquanto o
mtodo play() no for chamado.
Com essas propriedades denidas, necessrio adicionar o boto ao painel inserindo o
seguinte cdigo:
root.getChildren().add(btn_Anim)
Ao executar a aplicao pressionando F6, a tela exibida na Figura 11 apresentada.
Quando clicado no boto Iniciar Animao, o texto ir girar no sentido horrio. Repare que o
boto foi renderizado sobre o texto. Isto ocorreu porque esse exemplo usa o StackPane como
Layout, que tem como caracterstica o empilhamento dos ns. No cdigo da Listagem 8
demonstrado como substituir o StackPane por outro gerenciador de layout para que a tela que
mais organizada. Neste caso foi adotado o BorderPane, que lembra o BorderLayout do Swing.

Figura 10. Alterao da cor de fundo e incluso do efeito de DropShadow.

Figura 11. Adicionando um boto para controlar a animao.
Com este Layout possvel ajustar em qual regio do BorderPane se deseja adicionar os ns
(botes, textos, etc.), e outros containers, podendo assim construir interfaces complexas. O
cdigo da Listagem 8 deve ser inserido no lugar onde era instanciado o StackPane, substituindo
tambm o cdigo que adicionava o texto e o boto ao StackPane.
Listagem 8. Utilizando o BorderPane.
final BorderPane root = new BorderPane()
root.setCenter(txt);
root.setTop(btn_Anim);
Com essa alterao, o boto Iniciar Animao passa a ser exibido no topo da janela e o texto
JavaMagazine exibido no centro da aplicao.
Adicionando controles aplicao
Outra caracterstica interessante de JavaFX o processo de Bind. O Bind um mecanismo
que permite vincular uma propriedade/varivel outra. Desta maneira, quando houver alterao
no valor de uma das propriedades vinculadas, a outra ser automaticamente
alterada/sincronizada. Para demonstrar seu uso na aplicao, na Listagem 9 foram criados dois
controles Slider utilizando a classe SliderBuilder: um que ser vinculado aos atributos ScaleX e
ScaleY do texto, e outro que ser vinculado ao atributo Radius do efeito DropShadow.
Alm destes, foram criados mais dois controles Label com o auxlio da classe LabelBuilder. Este
cdigo deve ser inserido aps o que instancia a classe LinearGradient, vista na Listagem 5.
Listagem 9. Acrescentando Sliders para controlar o tamanho e a sombra o texto
JavaMagazine.
Slider slTam = SliderBuilder
.create()
// Valores Mximo, mnimo e de incremento para o Slider de tamanho
.max(10)
.min(1)
.blockIncrement(0.01)
.value(5)
.build();
// Label para referenciar o Slider tamanho
Label lbTam = LabelBuilder
.create()
.labelFor(slTam)
.text("Tamanho")
.textFill(Color.WHITE)
.font(new Font("",16))
.build();
Slider slDSR = SliderBuilder
.create()
.max(20)
.min(1)
.blockIncrement(0.1)
.value(5)
.build();
//Label para o Slider que controla o raio da sombra
Label lbDSR = LabelBuilder
.create()
.labelFor(slDSR)
.textFill(Color.WHITE)
.font(new Font("",16))
.text("Drop Shadow Radius")
.build();

Para exibir na tela esses controles, preciso organiz-los em um GridPane, que ajusta os ns
como em uma tabela. No cdigo a seguir, na primeira linha, foi criado o GridPane, e
posteriormente ajustado o espao vertical entre as linhas da tabela (mtodo setVgap()) e o
espao horizontal entre as colunas (mtodo setHgap()). Por ltimo, ajustado o espao interno
(padding) em relao margem de cada clula da tabela. O padding o espao entre o
contedo e a margem do container. Este cdigo deve ser inserido aps o trecho onde o ttulo da
aplicao alterado para JavaMagazine.
GridPane gridSliders = new GridPane();
gridSliders.setVgap(5);
gridSliders.setHgap(15);
gridSliders.setPadding(new Insets(10));
Com a criao do GridPane, necessrio inserir no container os Labels e Sliders criados.
Observe o cdigo a seguir, que realiza esse procedimento. Na ltima linha, ajusta-se o
GridPane regio inferior do BorderPane. Este cdigo deve ser inserido aps o trecho referente
implementao do boto no topo do BorderPane, descrito na Listagem 8.
gridSliders.add(lbTam, 0, 0);
gridSliders.add(slTam, 1, 0);
gridSliders.add(lbDSR, 0, 1);
gridSliders.add(slDSR, 1, 1);
root.setBottom(gridSliders);
Com a execuo destas instrues o grid passa a ter dois Labels e dois Sliders. O
alinhamento, para o label referente ao Slider responsvel pelo dimensionamento do texto,
realizado pelo cdigo a seguir, sendo informada a opo direita e no sentido horizontal. Este
label o que aparece na Figura 12 com o rtulo Tamanho.
gridSliders.setHalignment(lbTam, HPos.RIGHT);
At este ponto, tem-se o layout da tela pronto, porm os sliders no produzem efeito algum.
Para que eles efetivamente controlem as propriedades dos ns, necessrio vincular as
propriedades value dos sliders s propriedades desejadas dos objetos.
Esta vinculao dada conforme cdigo a seguir, que deve ser inserido aps a criao dos
objetos que sero vinculados. Na primeira linha vinculada a propriedade scaleX de txt ao valor
de slTam. Na segunda linha feito o mesmo para a propriedade scaleY. Na terceira linha
vincula-se o valor da propriedade radius de ds ao valor de slDSR. Assim, ao utilizar os sliders,
os valores destes sero replicados nas propriedades vinculadas dos objetos.
txt.scaleXProperty().bind(slTam.valueProperty());
txt.scaleYProperty().bind(slTam.valueProperty());
ds.radiusProperty().bind(slDSR.valueProperty());
O resultado da execuo da aplicao pode ser vericado na Figura 12.

Figura 12. Ajuste do Layout e incluso de controles.
Adicionando formas geomtricas
JavaFX permite no somente a criao de animaes, textos, controles, vdeos e imagens,
mas tambm a possibilidade de insero de formas geomtricas. Para isso foram criadas as
classes do pacote shape. Com o intuito de demonstrar uma destas classes, sero
acrescentados crculos tela.
Na Listagem 10 tem-se a criao dos crculos que sero adicionados tela da aplicao. Na
segunda linha do mtodo getCircle(), denido o efeito GaussianBlur. Este efeito ser utilizado
para deixar o objeto Circle com aparncia de apagado/borrado. Em seguida, so atribudos trs
valores inteiros de forma aleatria a trs variveis int. Estes valores sero usados como
argumentos para o mtodo rgb() de Color, que primeiro dene a cor para o contorno (varivel
stroke) e depois para a cor de preenchimento (varivel ll). Alm da cor, foram atribudos
valores randmicos s propriedades layoutX e layoutY, que determinam o posicionamento do
crculo na tela. O cdigo exibido na Listagem 10 deve ser inserido depois do mtodo start().
Listagem 10. Mtodo que cria crculos para serem inseridos na tela e mtodos auxiliares
para gerao de nmeros randmicos.
public Circle getCircle() {
// Aparncia de apagado/borrado.
GaussianBlur blr = GaussianBlurBuilder
.create()
.radius(8)
.build();
int r = intRand(255);
int g = intRand(255);
int b = intRand(255);
// Cor do contorno
Color stroke = Color.rgb(r, g, b);
//Cor do preenchimento
Color fill = Color.rgb(r, g, b, 0.05);
//Retorna um crculo com a cor aleatria e efeito de apagado/borrado (GaussianBlur)
return CircleBuilder
.create()
.layoutX(intRand(width))
.layoutY(intRand(height))
.mouseTransparent(true)
.fill(fill)
.effect(blr)
.radius(50)
.stroke(stroke)
.build();
}
public Integer intRand(int min, int max) {
double i = min + Math.random() * (max - min) + 1;
return (int) i;
}
public Integer intRand(int max) {
return intRand(0, max);
}
Para que os valores (gerados aleatoriamente) referentes ao posicionamento do crculo sejam
vlidos em relao rea disponvel para a exibio dele, preciso saber o tamanho da rea
(Scene) onde este crculo ser desenhado. Os valores que denem este tamanho foram
informados anteriormente como 800 x 600, na criao do Scene para o Stage. interessante
que estes valores sejam atribudos s variveis, seja de maneira xa, solicitando ao usurio ou
obtendo os mesmos diretamente do Scene, caso sua janela seja redimensionvel. O objetivo do
uso das variveis est em ter a denio destas dimenses em um nico local. No cdigo a
seguir estes valores so denidos de maneira constante, precisando atualizar a Listagem 4.
int width=800;
int height=600;
primaryStage.setScene(new Scene(root, width, height, grd));
Para que os crculos sejam desenhados por meio de uma interao com o usurio, um boto
criado (Listagem 11). No cdigo responsvel por esta criao, os eventos onMouseEntered e
onMouseExited so congurados para adicionar e excluir o efeito de DropShadow.
possvel vericar, tambm neste cdigo, que o mtodo responsvel pela denio do evento
onAction, o mtodo
handle(), insere um crculo ao StackPane (objeto root). O cdigo da Listagem 11, que
representa o boto de interao para a insero de crculos ao StackPane, deve ser inserido
aps a criao do boto que controla a animao descrita na Listagem 7.
Listagem 11. Acrescentando crculos aplicao.
final Button btn_Circ = ButtonBuilder.create().text("Inserir Crculos").build();
btn_Circ.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent evt) {
Circle circle = getCircle();
circle.toBack();
root.getChildren().add(circle);
}
});
btn_Circ.setOnMouseEntered(new EventHandler<MouseEvent>() {
@Override
btn_Circ.setEffect(ds2);
}
});
btn_Circ.setOnMouseExited(new EventHandler<MouseEvent>() {
@Override
btn_Circ.setEffect(null);
}
});
Esse boto ser inserido juntamente com o boto anterior (de iniciar e pausar a animao),
dentro de um HBox, um container que dispe seus ns lado a lado horizontalmente. Este
container criado e tem seu padding e spacing ajustados. Sem padding os botes cariam
encostados no canto superior direito do HBox. Com padding garantido que entre a margem
do container e os botes haja o espao congurado. O atributo spacing se refere ao espao
entre os botes. Sem ele um boto caria muito prximo ao outro, isto , sem separao. O
cdigo a seguir deve ser inserido aps o cdigo de criao do GridPane dos Sliders:
HBoxfpRoot = new HBox();
fpRoot.setPadding(new Insets(5));
fpRoot.setSpacing(5);
Note que com este cdigo apenas criado o HBox. Sendo assim, ainda necessrio inserir os
botes e adicion-lo ao topo do BorderPane. Para isso, preciso adicionar o cdigo a seguir
entre o trecho onde foi inserido o texto JavaMagazine ao topo do BorderPane e o trecho onde
foram inseridos os sliders no rodap do BorderPane. Como agora o boto que controla a
animao foi adicionado ao HBox, deve-se remover a linha que insere este boto no topo do
BorderPane.
fpRoot.getChildren().add(btn_Circ);
fpRoot.getChildren().add(btn_Anim);
root.setTop(fpRoot);
A Figura 13 exibe a aparncia da aplicao aps todas as alteraes.

Figura 13. Estgio final da aplicao de exemplo.
Modos de deploy
JavaFX concentra seus recursos para o desenvolvimento de aplicaes RIA, e dentro deste
objetivo, preciso que estas aplicaes possam ser disponibilizadas para diversas plataformas.
Desta maneira, estas aplicaes buscam a existncia de maior interatividade com o usurio e
uma satisfao deste no uso delas, independente da plataforma em que sero executadas.
No intuito de subsidiar esta disponibilidade, JavaFX, na verso 2, prev trs modos de
deployment. Para congur-los, acesse a aba Projects do NetBeans, clique com o boto direito
sobre o projeto JavaMagazine e escolha Properties no menu de contexto. Feito isso, a Figura
14 ser exibida.

Figura 14. Dilogo de Properties do NetBeans.
Nesta gura, possvel denir qual ser o mtodo de execuo da aplicao. Se Standalone
(execuo no Desktop), Web Start (execuo no desktop atravs de um arquivo JNLP baixado
da Web) ou in Browser (Applet). Teste as trs opes para identicar as diferenas.
Para que seja possvel vericar os arquivos .jar gerados pelo NetBeans, aperte F11 para
executar o Build do Projeto. Aps o Build, na pasta dist do projeto existiro trs arquivos e um
diretrio, como demonstra a Figura 15. O arquivo JavaMagazine.html uma pgina de exemplo
para uso do mtodo de execuo in Browser. O arquivo de mesmo nome, mas com extenso
jnlp, usado tanto pelo mtodo in Browser como pelo mtodo Web Start. J o arquivo
JavaMagazine.jar, utilizado pelos trs mtodos de deploy. Alm desses, a pasta web-les
contm os arquivos necessrios para a execuo do mtodo in Browser.

Figura 15. Contedo do diretrio dist do projeto JavaMagazine.
Concluso
Neste artigo foi apresentada a plataforma JavaFX, considerada pela Oracle como a evoluo
da Plataforma Cliente Java. Esta foi desenvolvida para facilitar a construo de aplicativos RIA
(Rich Internet Application), ou seja, aplicativos que incorporam animaes, msicas, vdeos e
elementos que possibilitam uma experincia mais agradvel ao usurio.
No decorrer do artigo foram descritas as mudanas entre a verso atual e as verses
anteriores do JavaFX, assim como as principais novidades desta nova verso. Uma breve
descrio dos principais componentes da API e da estrutura da plataforma tambm foi
abordada. Ao nal, foi desenvolvida uma aplicao de exemplo demonstrando algumas das
funcionalidades bsicas da tecnologia, como a criao de formas geomtricas, animao e
Bind, servindo como um rico ponto de partida para o aprendizado da plataforma.
Regis Giongo
Graduada em Tecnologia em Anlise e Desenvolvimento de Sistemas pela Universidade do Oeste de
Santa Catarina (UNOESC). Atualmente est cursando especializao em projeto e desenvolvimento
de sistemas baseados em objetos para ambiente internet, na Universidade Tecnolgica Federal do
Paran (UTFPR). Trabalha como desenvolvedora web na Viasoft, empresa especializada na
produo de softwares de gesto empresarial.
EVERTON COIMBRA DE ARAJO
https://www.facebook.com/evertoncoimbradearaujo Desde 1987 atua na rea de treinamento e
desenvolvimento. mestre em Cincia da Computao, e professor efetivo da UTFPR, Campus
Medianeira. Tem Atuado tambm em cursos de EaD oferecidos pela UAB e ETEC. Autor de livros
pela Visual Books: http://www.visualbooks.com.br/shop/MostraAutor.asp?proc=191
Daniel Rodrigues
graduado em Tecnologia em Anlise e Desenvolvimento de Sistemas pela UNOESC. Entusiasta de
JavaFX. Trabalha em uma instituio bancria desenvolvendo sistemas de suporte ao negcio
disponveis por meio da Intranet para a rede de agncias.

Java FX2 Introduçao

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java FX2 Introduçao

Uploaded by

Copyright:

Available Formats

09/08/14 12:11 DevMedia - Verso para impresso

You might also like