A plataforma JavaFX foi lanada na primavera de 2007, seguindo

um rumo diferente do que vinha sendo adotado pela Sun.

Introduzindo assim uma ferramenta de gerao de aplicativos RIA
atravs da linguagem Java. Divergindo totalmente das ltimas
verses ou atualizaes do Java, o JavaFX utiliza uma linguagem
declarativa, mais parecida com outras plataformas RIA, como o
Flex. Neste artigo, o leitor aprender os conceitos bsicos desta
nova abordagem, assim como sua utilizao com a IDE NetBeans.
Para xar o aprendizado, o artigo apresenta diversos cdigos de
exemplo com as caractersticas da plataforma.
44
www.mundoj.com.br
a r t i g o
lanamento da plataforma JavalX causou grande curlosldade em meados de 2007, lsso
porque depois de uma sequncia de mudanas na plataformas, porm, sem grandes novi-
dades, o Java inovou-se e incorporou a ideia de aplicativos RIA (Rich Internet Application), que objetiva
a entrega de sistemas ricos em interface, que causem uma impresso extremamente nova e impactante
no que se refere imagem. Um bom exemplo deste novo tipo de sistema seria um aplicativo Flash
mesclando uma interface web com acesso a banco de dados e todo tipo de processamento computa-
cional.
A plataforma oferece dois pers distintos, um chamado Desktop Prole e outro chamado de Common
Prole. Toda a API de classes existente em Common Prole pode ser usada no ambiente desktop, web e
moblle, ou seja, o JavalX Voblle utlllza este perhl. Porem, e possivel construlr apllcatlvos mals elabora-
dos gracamente, como, por exemplo, efeitos sobre qualquer elemento grco existente em uma cena,
ou ainda, utilizar alguns componentes baseados em Swing.
O
Por meio deste artigo crie e
compreenda seus primeiros
aplicativos Java FX Mobile.
Conhecendo a plataforma
JavaFX Mobile
Ricardo da Silva Ogliari
(rogliariping@gmail.com):
bacharel em Cincia da Computao pela
Universidade de Passo Fundo. Atua no
desenvolvimento de aplicativos mveis h 5
anos. Ministra cursos e ocinas referentes
plataforma Java ME. Tambm ministrante de
palestras em eventos nacionais e internacionais,
como o JustJava, WebMedia, Frum Internacional
do Software Livre, dentre outros. Mestrando em
Cincia da Computao pela USP como aluno
especial.
45
Ferramentas de desenvolvimento
Figura 1. Elementos de interface grca disponveis no Desktop Prole.
Figura 2. Ferramenta JavaFXPad.
Para os desenvolvedores que j trabalham com programao mobile em
Java, imaginem o Common Prole como um Java ME com mais recursos
grahcos. Alem dlsso, o JavalX apresenta uma malor compatlbllldade en-
tre os ambientes possveis de desenvolvimento, melhorando um pouco
a extrema forma heterognea de trabalho entre as plataformas SE, EE e
ME da plataforma Java tradicional.
Para crlaao de apllcatlvos JavalX, o desenvolvedor possul, atualmente,
tres alternatlvas: JavalXPad, Neteans e lcllpse. A prlmelra opao e a
mais simples e mais fcil, apenas acesse o endereo http://download.
java.net/general/openjfx/demos/javafxpad.jnlp e execute o aplicativo
jnlp. 0 JavalXPas altera a vlsao do apllcatlvo automatlcamente quando o
cdigo modicado. Veja a ferramenta em execuo na gura 2. Atravs
do boto Go, na parte superior, possvel escolher um arquivo .fx no
seu diretrio de arquivos e trabalhar e visualizar o comportamento da
aplicao ao mesmo tempo.
lxlste tambem a posslbllldade de desenvolver apllcaoes JavalX atraves
da conhecida IDE NetBeans. Na sua verso 6.5, a ferramenta traz suporte
para o S0K do JavalX, permltlndo a edlao, teste e emulaao de apllca-
es RIA. Depois de baixar e instalar o software, o desenvolvedor tem
a opo de criar um novo projeto. Para isso, acesse o menu File->New
Project. Na wlzard que abrlr, basta escolher a categorla "JavalX' e o
projeto "JavalX Scrlpt Appllcatlon'. 0 proxlmo passo e escolher a opao
Next. Na tela recebida posteriormente, necessrio informar o nome
do projeto, localizao, pasta, alm de opes de criao. Uma destas
opes o checkbox Create Main File, se este estiver habilitado quando
Finish for chamado, o NetBeans cria o projeto e juntamente com ele um
arquivo .fx que representa a classe principal da aplicao.
Depois que o projeto foi criado podemos test-lo com a tecla de atalho
F6. Veja o resultado na gura 3. Porm, percebe-se claramente que o
Visando separar denitivamente os dois pers, permitindo que o leitor tenha
uma noao exata do que pode construlr com o JavalX Voblle, veja as carac-
tersticas que esto presentes somente no perl Desktop:
- elementos de lnterface de usuarlo, veja hgura 1,
- cursores,
- efeltos. Alguns dos efeltos sao: shadow, llghtlng, blur, reectlon,
glow, sepia tone, ajuste de cores e perspectiva.
aplicativo gerado est executando em um ambiente de janelas desktop.
Se o usurio quiser alterar este modo de execuo, basta acessar as
propriedades do projeto. Na janela wizard que recebida, escolhemos
a opo Run. direita da janela receberemos vrias opes, porm,
preste ateno na congurao de Application Execution Model:, a
opo Standart Edition vai estar marcada. Para utilizarmos o Common
Prole e executarmos o exemplo em um emulador de telefone mvel,
escolha a opo Run in Mobile Emulator. Ao selecionar esta opo, caixa
de seleo Device habilitada, permitindo a escolha de um dos dois
emuladores exlstentes no JavalX S0K. 0elxamos o prlmelro marcado e
usamos novamente a tecla F6. Veja o resultado na gura 4.
Ferramentas de desenvolvimento
Figura 3. Aplicao padro do NetBeans sendo executada.
"SUJHPt$POIFDFOEPBQMBUBGPSNB+BWB'9.PCJMF
46
www.mundoj.com.br
package javafxapplication1;
import javafx.stage.Stage;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
Stage {
title: Application title
width: 250
height: 80
scene: Scene {
content:
Text {
font : Font {
size : 16
}
x: 10, y: 30
content: Application content
}
}
}
Listagem 1. Implementao do Session Bean QueryPerformer.
"SUJHPt$POIFDFOEPBQMBUBGPSNB+BWB'9.PCJMF
Apresentao de objetos de UI na cena
'JHVSB"QMJDBPQBESPEP/FU#FBOTTFOEPFYFDVUBEBFNVNUFMFGPOFDFMVMBSFNVMBEP
De forma semelhante ao NetBeans, a IDE Eclipse tambm possui um
plugln para programaao JavalX em seu amblente.
Comeando a programar
Vamos comear analisando o cdigo base que a IDE NetBeans cria no
momento da gerao do projeto. Observe a Listagem 1. As quatro pri-
melras llnhas representam os lmports necessarlos. No JavalX exlste um
conceito de cena, no qual todos os objetos grcos so alocados, sendo
que eles se sobrepem, ou seja, o ltimo objeto grco a ser acoplado
na cena ser o primeiro a ser mostrado, cando em cima de todos os
demais.
A cena grca gerenciada por uma instncia da classe Stage. No exem-
plo, ela criada logo aps os imports. Dentre outros parmetros, esta
classe possui um ttulo (title), uma largura (width) e uma altura (height).
lstes parmetros nao sao utlllzados quando estamos utlllzando a JavalX
para o ambiente mobile, a prova disso est nas guras 3 e 4. A gura 3
mostra o ttulo congurado no parmetro title. Alm disso, possui as
dimenses indicadas nas variveis width e height. A cena, por sua vez,
ter objetos grcos, denidos em content.
Na Listagem 1 percebemos que somente um objeto Text foi adicionado.
Em Text, denimos sua fonte (parmetro font), sua posio (variveis x e
y) e seu contedo (content).
No exemplo de cdigo da Listagem 1, o leitor pode identicar o estilo
declarativo de programao, muito indicado para construo de inter-
faces grcas. Nos tpicos a seguir, iremos mostrar algumas das princi-
pals caracteristlcas do JavalX, sendo elas: apresentaao de objetos de
interface grca na cena, data binding, layout de elemento de interface
grca, criao de objetos animados e interao do usurio com os ob-
jetos criados.
Este assunto comeou a ser tratado na Listagem 1, porm, neste tpico
vamos construir um aplicativo mais elaborado, alm disso, usaremos um
agrupamento de nodos. No JavalX, todo elemento que quer fazer parte
da cena deve pertencer a uma classe que herde de Node. Estes elementos
podem ser agrupados de forma que as alteraes aplicadas para o grupo
so reetidas em todos os seus componentes.
Para iniciar este exemplo, precisamos criar a cena e denir seus parme-
tros iniciais. Veja o cdigo do arquivo .fx na Listagem 2. As trs primeiras
linhas so dedicadas aos imports. Logo em seguida criado o Stage e a
Scene. Tambm, so denidas as conguraes bsicas da janela (igno-
radas se o aplicativo for direcionado ao ambiente mobile). Em referncia
Listagem 1, o exemplo da Listagem 2 acrescenta a propriedade ll,
denindo a cor de preenchimento da janela. A cor pode ser congurada
de diversas maneiras. No exemplo, utilizamos a mais simples, apenas
usamos uma constante da classe javafx.scene.paint.Color.
Porm, a cor tambm pode ser denida com seu cdigo RGB, como em:
var c Color .rgb(0, 0, 10)
Color.web("0000FF")
Ainda, a cor pode ser congurada atravs de um valor hexadecimal utili-
zado na web, como em:
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
Stage {
title: Nodes
scene: Scene {
ll: Color.LIGHTBLUE
width: 220
height: 170
}
}
content: [
Circle {
centerX: 50
centerY: 50
radius: 50
stroke: Color.YELLOW
ll: Color.WHITE
},
Text {
content: Duke
}
]
content: Group {
translateX: 55
translateY: 10
content: [
Circle {
centerX: 50
centerY: 50
radius: 50
stroke: Color.YELLOW
ll: Color.WHITE
},
Text {
transforms: Transform.rotate(33, 10, 100)
content: Duke
}
]
}
Listagem 2. Classe inicial do exemplo apresentando objetos ui na cena.
Listagem 3. Contedo a ser adicionado na cena criada na Listagem 2.
Listagem 4. Complemento de cdigo do exemplo de apresentao de objetos
UI.
47
"SUJHPt$POIFDFOEPBQMBUBGPSNB+BWB'9.PCJMF
Data Binding
O prximo passo a adio dos nodos grcos cena. O cdigo para
esta tarefa mostrado na Listagem 3. A varivel utilizada para denir
o contedo de uma cena o content. No exemplo, adicionamos dois
componentes, um crculo e um texto, devido a isto, devemos utilizar
parenteses, '|' e '|', e separamos cada nodo com uma virgula. Para crlar
o crculo, utilizamos a classe Circle, congurando as variveis de instn-
cla, centerX, centerY, radlus, stroke e hll. 0s dols prlmelros servem para
denir a localizao do crculo, o terceiro dene o raio do crculo. Por
m, stroke dene a cor da linha e o ltimo parmetro informa a cor de
preenchimento da rea contida no crculo. Para o componente de texto,
criado a partir da classe Text, conguramos apenas seu contedo atravs
da varivel content. O resultado parcial do nosso exemplo mostrado
na gura 5.
Figura 5. Resultado parcial do aplicativo exemplo.
Perceba que o texto no est sendo visualizado. Isso acontece porque,
por padro, o texto colocado na coordenada 0,0. Lembrando que
neste ponto o JavalX e ldentlco ao JavaVl, sendo que o valor de x e
y cresce para direita e para baixo, respectivamente. O prximo passo
adicionar os nodos em um grupo e aplicar uma transformao no texto
para que o mesmo se torne visvel. A Listagem 4 mostra como isso feito.
Em primeiro lugar, adicionamos os nodos a um Group. Nesta varivel,
atrlbuimos as varlavels translateX e translateY, alem de seu conteudo
congurado na varivel content. Por m, aplicamos uma transformao
no texto, para que ele se torne visvel ao usurio. Os trs parmetros
passados ao mtodo rotate fazem com que o texto rotacione 33 graus
sobre o ponto 10, 100.
Data Binding pura e simplesmente uma ligao de dados, fazendo com
que a alterao em uma varivel tenha reexo em uma propriedade ligada
(binding) a esta varivel. Para no termos muito trabalho, vamos fazer algumas
alteraes no exemplo anterior para apresentar este conceito de forma prtica.
A mudana far com que cada clique dentro do crculo aumente seu raio, ou
seja, o crculo se expande a cada interao com o usurio.
Exatamente aps as declaraes de import, vamos declarar uma varivel cha-
mada raio, que ser utilizada para congurar a propriedade radius do objeto
Circle, veja a Listagem de cdigo 5. A palavra-chave para isso bind. Com isso,
qualquer alterao na varivel raio reetir automaticamente na propriedade
radius do Circle. Perceba tambm que uma ao para clique de mouse foi
adicionada ao exemplo anterior, sendo que, a cada clique, o raio incre-
mentada com cinco. Agora, para vericar o efeito disso de forma efetiva,
execute novamente este exemplo e clique vrias vezes no crculo.
48
www.mundoj.com.br
"SUJHPt$POIFDFOEPBQMBUBGPSNB+BWB'9.PCJMF
O exemplo anterior mostrou uma forma de interao de objetos grcos com
eventos de interface de usurio. Na Listagem 5 percebemos a implementao
do evento onMouseClicked, na qual passamos como parmetro uma funo e
sua lmplementaao. Asslm como este evento para cllque de mouse, a JavalX
chamar esta mesma funo quando uma caneta stylus for utilizada. Alm
disso, existem outros eventos para diversas aes, como, por exemplo: onMou-
sePressed, onMouseExited, onMouseMoved, onMouseEntered, onMouseDra-
gged, onKeyTyped, dentre outras.
Interao do usurio
Layout de componentes
O layout de uma interface grca um componente importante de uma apli-
cao mbile. Sendo assim, neste tpico veremos como denir uma orientao
horizontal e vertical para nossa interface. O aplicativo de exemplo a ser criado
mostra uma lista de livros e um boto direita, para saber mais sobre a obra.
Devido nalidade deste exemplo, no trataremos nenhum evento de usurio.
No JavalX, podemos utlllzar duas classes do pacote javxfx.scene.layout para
layout. A primeira, HBox, alinha os componentes horizontalmente, j a classe
VBox alinha os componentes no sentido vertical, no exemplo iremos utilizar
os dois. Veja na gura 6 como nosso aplicativo ser apresentado, perceba que
h uma diviso horizontal entre a coluna de nomes com a coluna de imagens
e uma diviso vertical entre cada nome de livro em referncia a outro nome de
livro, e tambm, de uma imagem para outra. Para estudarmos o cdigo-fonte,
vamos dividi-lo em duas partes, uma com as declaraes das variveis, e outra
com a construo da cena.
Figura 6. Resultado nal do aplicativo de listagem de livros.
def songs = [
A Cabana,
1968,
Meu Amigo Che,
71 Segundos
];
var livros = for (song in songs)
Group{
content:[
Rectangle{
width: 200
height: 25
ll: LinearGradient {startY: 5
endX:190, endY: 10 proportional: false
stops: [
Stop {offset: 0.0
color: Color.rgb(106, 104, 30)
},
Stop {offset: 1.0 color: Color.rgb(251, 244, 225)}
]
}//LinearGradient
},//Rectangle
Text{
y: 20
x: 5
ll: Color.BLACK
font: Font {size: 12}
content: song
}//Text
]
}//Group
def image = Image{url: {__DIR__}/voltar1.JPG }
var imagens = for (song in songs)
ImageView{image: image}
var raio = 50;
Stage {

content: Group {

content: [
Circle {

radius: bind raio
onMouseClicked: function(event){
raio = raio + 5;
}
},

]
}
}
}
Listagem 6. Cdigo com as variveis e constantes usadas no exemplo.
Listagem 5. Cdigo inserido no exemplo anterior para incorporar o mecanismo
de data binding.
A Listagem 6 apresenta o cdigo com a denio das variveis e das constan-
tes. Prlmelramente devemos saber que constantes em JavalX sao dehnldas
com def, e variveis com var. Logo no incio criamos uma constante com o
nome dos livros a serem apresentados. Posteriormente a varivel livros cria-
da, ela guardar os componentes retngulo e texto, que representam a lista
de livros que aparece na esquerda da gura 6. Neste momento, no temos
grandes surpresas no cdigo, apenas um agrupamento (j visto aqui) de dois
componentes: Rectangle e Text. Temos uma novidade apenas na denio do
retngulo, mais precisamente no seu preenchimento (varivel ll). Para pintar o
componente, utilizamos um efeito gradiente, atravs da classe LinearGradient.
A API tambm fornece a classe RadialGradient. Na construo da classe Linear-
Gradient, conguramos o ponto de partida e chegada do efeito gradiente, nas
varlavels startY, endX e endY. Alem dlsso, lndlcamos false para a proprledade
proportional. Sendo assim, os valores sero absolutos.
Por m, e a parte mais importante, conguramos as cores que sero utilizadas.
Para isso, utilizamos pontos de parada com a classe Stop. Estes pontos so
denidos entre os valores 0.0 e 1.0, podendo existir mais de uma cor. No nosso
caso, apenas conguramos a cor inicial e nal e deixamos que a API trabalhe no
efeito gradiente da cor. Na penltima linha, criamos a constante image.
Na crlaao de lmagens no javalX, utlllzamos a classe lmage, que recebe a va-
rivel url na sua inicializao. Esta, por sua vez, apenas armazena a localizao
do recurso. Perceba que no nosso exemplo existe o texto __DIR__. Isto indica
que o recurso est no sistema de diretrio, ou, quando o aplicativo for fechado,
no .jar. Caso contrrio, a imagem seria buscada na web. Anteriormente falamos
que uma cena aceita somente instncia que sejam classes Node. Por isso, na
ltima linha da Listagem 6, criamos uma sequncia de classes ImageView que
sero adicionadas cena.
49
"SUJHPt$POIFDFOEPBQMBUBGPSNB+BWB'9.PCJMF
Animao de objetos grcos
Stage {
title: Lista de livros
scene:
Scene{
ll: Color.rgb(251, 244, 225)
width: 250
height: 230
content:
HBox{
content:[
VBox{spacing: 12 content: livrios},
VBox{spacing: 5 content: imagens}
]
}//HBox
}//Scene
}//Stage
var x: Number;
var y: Number;
Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
at (0s) {x => 0.0},
at (4s) {x => 158.0 tween Interpolator.LINEAR}
]
}.play();
Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
at (0s) {y => 0.0},
at (7s) {y => 258.0 tween Interpolator.LINEAR},
]
}.play();
...
content:
Path {
stroke: Color.DODGERBLUE
translateX: bind x
translateY: bind y
ll: LinearGradient {
startX:0 startY:100 endX:158 endY:100 proportional: false
stops: [
Stop {offset: 0.0 color: Color.DODGERBLUE},
Stop {offset: 0.5 color: Color.LIGHTSKYBLUE},
Stop {offset: 1.0 color: Color.WHITE}
]
}
elements: [
MoveTo {x: 15 y: 15 },
ArcTo {x: 50 y: 10 radiusX: 20 radiusY: 20 sweepFlag: true},
ArcTo {x: 70 y: 20 radiusX: 20 radiusY: 20 sweepFlag: true},
ArcTo {x: 50 y: 60 radiusX: 20 radiusY: 20 sweepFlag: true},
ArcTo {x: 20 y: 50 radiusX: 10 radiusY: 5 sweepFlag: true},
ArcTo {x: 15 y: 15 radiusX: 10 radiusY: 10 sweepFlag: true},
]
}//Path
...
Listagem 7. Cdigo com a criao da cena do exemplo.
Listagem 8. Cdigo do aplicativo exemplo de animao de objetos.
Na llstagem 7 veremos a crlaao da cena e a utlllzaao dos gerencladores
de layout. Vamos diretamente na denio da varivel content da Scene.
Perceba que usei a classe HBox para que os elementos sejam alinhados
horizontalmente e, no interior desta classe, mais especicamente na
denio de seu contedo, cerco com a classe VBox os componente do
HBox. A varivel spacing dene o espao que separa uma linha da outra.
Por isso, usamos um valor maior para o texto (12).
Para mostrar a funclonalldade de anlmaao de objetos no JavalX, vamos
criar um aplicativo supersimples, que apenas move uma nuvem de forma
interrupta pelo display do dispositivo mvel. Veja a Listagem 8. As duas
primeiras linhas so usadas para criao das variveis que posicionam
a nuvem. As duas variveis sero manipuladas todo o tempo pelas ani-
maes, denidas nos dois Timelines que o cdigo implementa, vamos
estudar o primeiro. Como parmetros, passamos um primeiro valor que
dene que a animao no ter tempo denido (Timeline.INDEFINIDE),
ou seja, ser innita.
O segundo parmetro, autoReverse, congurado como true. Desta ma-
neira, a nuvem retorna a posio original ao chegar no nal da animao.
Explicando de outra maneira, a nuvem sair da extremidade superior
esquerda rumo extremidade inferior direita, quando chegar l, retorna-
r a extremidade superior esquerda e assim sucessivamente. O terceiro
parmetro o mais importante, os quadros-chaves (keyFrames). Neste
momento, conguramos que em 4 segundos o valor da varivel x passar
do valor 0 para 258, transitando de forma linear. O segundo timeline
denido de maneira idntica, com a diferena de alterar a varivel y e
demorar mals 7 segundos. lsso acontece porque a altura do dlsplay e
maior que a largura.
Por m, criamos uma instncia da classe Path, que dene um shape geo-
mtrico, ou seja, um conjunto de linhas que unidas pode formar qualquer
forma geomtrica. Seu contedo formado por chamada de classes do
pacote javafx.scene.shape. No nosso exemplo, utilizamos o MoveTo, que
apenas move o sistema de coordenadas para a posio passada por pa-
rmetro, ou seja, (15, 15). E, posteriormente, criamos diversos arcos com
a classe ArcTo. Esta classe, por sua vez, recebe os parmetros de posio x
e y, raio do arco nas direes horizontais e verticais e, seu ltimo parme-
tro, indica se o path ser construdo no sentido horrio ou no.
Concluso
Neste artlgo fol possivel fazer uma sintese da plataforma JavalX, ver
algumas de suas principais caractersticas e funcionalidades, perceber
seu poder de fogo em relao criao de interfaces ricas para diversos
ambientes, dentre eles mobile. Sua utilizao ainda uma incgnita,
porm, o alto investimento da Sun nesta plataforma pode ser uma pista
de sua futura penetrao entre as plataformas utilizadas para entrega de
servios mveis. Cabe a ns, desenvolvedores, conhecer e saber utilizar
esta interessante plataforma, e estar preparado para a possvel sucessora
do Java Vl-