JavaFX2Introduçao

09/08/14 12:11DevMedia - Versão para impressão

Página 1 de 25http://www.devmedia.com.br/websys.5/webreader_print.asp?cat=61&artigo=4972&revista=impressao_23#a-4972

DevMedia - Versão para impressão

Introdução ao JavaFX 2.0Uma renovada plataforma que agora consagra o poder do Java

De que se trata o artigo O artigo apresenta a renovada plataforma JavaFX e as características da nova versão (2.0),que englobam as funcionalidades: controles de interface gráfica aprimorados, novos painéis delayout, mecanismo de renderização com aceleração por hardware, reprodução de mídia e asmudanças que ocorreram ao longo do seu lançamento. É abordada também uma introduçãoaos principais componentes que constituem a estrutura da plataforma e desenvolvido umaaplicação demonstrando alguns recursos oferecidos pelo JavaFX.

Em que situação o tema é útil Para desenvolvedores e designers que buscam a criação de interfaces gráficas com bonsefeitos visuais, permitindo aproveitar seus conhecimentos em Java por meio da reutilização debibliotecas próprias, uma vez que JavaFX utiliza Java. Esta vantagem possibilita usufruir de características da linguagem como genéricos, anotaçõese multithreading.

Resumo Devman Introdução ao JavaFX 2.0: O JavaFX 2.0 representa a principal atualização para odesenvolvimento client-side da plataforma Java. Com base nisso, este artigo aborda asinúmeras modificações que ocorreram em sua versão 2.0, bem como a substituição dalinguagem de script - JavaFX Script - pela linguagem Java e a possibilidade de realizar o deployem três diferentes modos: Standalone, Browser e Web Start. Por fim, uma aplicaçãodemonstrando alguns recursos da tecnologia é desenvolvida.

JavaFX é uma plataforma baseada em Java e projetada para desenvolvedores que precisamcriar aplicativos RIA. O termo RIA é usado para descrever Aplicações Ricas para Internet, ouseja, aplicações que são executadas em ambiente web, mas que possuem característicassimilares a softwares desenvolvidos para execução em ambiente desktop. Aplicações RIA

http://www.devmedia.com.br/revista-easy-java-magazine



podem ser acessadas por meio de qualquer computador que esteja conectado à internet e sema necessidade de instalação destes softwares. A execução deles ocorre no ambiente donavegador, e atualizações de novas versões são realizadas de maneira automática. Desta maneira, ocorre um equilíbrio entre o processamento executado no servidor e o queocorre no cliente, visto que o servidor não necessita realizar todo o processamento. Assim, seganha em termos de agilidade na interação entre a aplicação e o usuário, reduzindo o volumede dados transmitido. Desde seu lançamento pela Sun Microsystems em dezembro de 2008, o JavaFX tem passadopor significativas mudanças. Na versão 1.0, foi criada uma linguagem para trabalhar com osrecursos do JavaFX com o nome de JavaFX Script. Esta linguagem era conhecidaanteriormente como F3 (Form Follows Function), um projeto adquirido pela Sun por meio dacompra da SeeBeyond. O JavaFX Script era uma linguagem estaticamente tipada, orientada a objetos e projetada paraa JVM. As aplicações construídas com essa linguagem eram executadas em todos osambientes (desktop ou navegador) onde o JRE (Java Runtime Environment) era executado,buscando aplicar o conceito “Write once, run anywhere”. Este conceito ganhou ênfase na versão1.1, anunciada em fevereiro de 2009, quando se tornou possível, além da criação de aplicativospara desktop e navegadores, a criação de aplicativos JavaFX para dispositivos móveis. Na versão 1.2 algumas características foram adicionadas, como o suporte beta para asplataformas Linux e Solaris, a mudança no pacote de layouts (com a inclusão de novas classescomo ClipView, Flow e Panel) e a adição de efeitos visuais. Com as modificações na sintaxe dalinguagem JavaFX Script, alguns códigos funcionais da versão anterior se tornaramincompatíveis e obsoletos. A versão 1.3, lançada em 22 de abril de 2010, trouxe várias melhorias, oferecendo melhordesempenho em tempo de execução para animações complexas e renderização de textos,suporte para aplicativos de TV, suporte à tecnologia 3D e novos controles de interface (porexemplo, ChoiceBox e PasswordBox). Outra novidade que instigou o uso do JavaFX foi a inclusão de um editor visual para interfaceschamado JavaFX Composer, na versão 6.9 da IDE NetBeans. Com a compra da Sun pela Oracle em 2010, o JavaFX foi totalmente remodelado, tornando-seincompatível com as versões anteriores. Como destaques dessa mudança, ressalta-se adescontinuação do suporte à linguagem JavaFX Script e a conversão de toda a API, que antesera codificada em JavaFX Script, para Java puro. Esta mudança permite que o programadorescolha a linguagem utilizada para codificar em JavaFX (desde que seja uma linguagem querode na JVM). Com isso, programadores Java não precisam aprender uma nova linguagem paracodificar em JavaFX. Para aqueles que preferem utilizar uma linguagem declarativa, a perda doJavaFX Script pode ser contornada com linguagens como Visage (fork de JavaFX Script), Scalaou Groovy. No FAQ criado pela Oracle sobre JavaFX (veja a seção Links), consta que esta tecnologiasubstituirá o Swing e o AWT. Com base nisso é possível presumir que a Oracle não está“brincando” com JavaFX e investirá pesado na tecnologia. Deste modo, ao longo deste artigo serão abordadas as características que envolvem oJavaFX, considerado o próximo passo na evolução do lado cliente (client-side) da plataformaJava.



JavaFX 2.0 O JavaFX 2.0 foi projetado para oferecer um rico conjunto de APIs que simplifiquem odesenvolvimento de softwares que utilizem conteúdo de multimídia.

Para que isso seja possível, são utilizadas avançadas engines de mídia e gráficos comaceleração por hardware. Além do suporte à música, vídeo e animações, JavaFX provê umanova e moderna coleção de controles de Interface com o Usuário, tornando-se a escolha óbviapara o desenvolvimento RIA com Java. E por ser baseado em Java, usufrui de todos ospoderosos recursos desta linguagem, como anotações, genéricos e multithreading, e o suportea aplicações 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 eplataforma, pois possibilita utilizar suas bibliotecas de maneira transparente, conectar comaplicações Java EE ou até mesmo utilizar recursos nativos do sistema operacional por meio deJNI (Java Native Interface). Olhando para a distribuição das aplicações, as desenvolvidas emJavaFX suportam três modos de execução: um deles é pelo navegador, onde a aplicação éembutida em uma página web, sendo iniciada automaticamente quando esta página écarregada; outro modo de deploy é conhecido como Web Start, permitindo realizar o downloaddo aplicativo e executá-lo na área de trabalho - isto é, no desktop; e no caso do usuário nãopossuir acesso à internet, existe ainda um terceiro modo, conhecido como Standalone, onde oaplicativo é instalado em uma unidade local e pode ser executado com um duplo clique noarquivo JAR. Para a criação da interface com o usuário, JavaFX introduz uma nova linguagem de marcaçãochamada FXML como opção à codificação em Java. FXML permite modelar a UIseparadamente da lógica da aplicação, não sendo necessário recompilar o código toda vez queuma mudança no layout ocorrer. Por ser baseada em XML, uma linguagem conhecida pelamaioria dos desenvolvedores, se torna fácil e intuitiva de aprender. Outra novidade do JavaFX 2.0 é que a tecnologia oferece uma perfeita integração comaplicações Swing. Esta integração é possível porque o JavaFX apresenta a classe JFXPanel,localizada no pacote javafx.embed.swing, que permite incorporar novas funcionalidades, taiscomo reprodução de mídia e inclusão da sua rica API gráfica, dentro de aplicações Swing.Desta maneira a Oracle possibilita a utilização de Swing e JavaFX na mesma aplicação,enquanto recomenda a migração para JavaFX. Para compreender melhor o funcionamento do JavaFX, na Figura 1 é demonstrada aarquitetura 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 visualizadana Figura 1. Esta estrutura e seus componentes serão descritos ao longo deste artigo.

Scene Graph e o conjunto de APIs Java O Scene Graph (ou Gráfico de Cena) é o ponto inicial para a construção de uma aplicaçãoJavaFX. Nele concentram-se os componentes visuais da interface, que juntos formam umaárvore hierárquica de nós. O JavaFX utiliza a metáfora 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 osNodes (nós) e sempre terá um nó raiz, que por sua vez conterá outros nós. Esta é a estruturabásica de uma aplicação JavaFX: um Stage, que contém um Scene, que contém um nó raiz(geralmente uma instância da classe javafx.scene.Group), que contém um ou mais nós filhos,que por sua vez podem ter filhos ou não. Desta maneira é formada a árvore hierárquicamencionada anteriormente. Com exceção do nó raiz, um único nó pode possuir várias propriedades que customizam seucomportamento e aparência, como efeitos de sombra, iluminação, desfoco, opacidade,propriedades que manipulam eventos (event handlers), visibilidade, rotação, 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 apresentação de dados emgráficos. Dentre eles podem-se destacar as classes AreaChart, LineChart, BarChart e PieChart.No javafx.scene.control e no javafx.scene.control.cell estão contidos os controles de InterfaceGráfica com o Usuário. Controles básicos como Button, Label e TextField estão disponíveis,assim como os avançados, como Accordion, TreeView e ProgressIndicator.




Figura 2. Alguns efeitos visuais do JavaFX.

A API javafx.scene ainda fornece o pacote effect, onde estão localizadas as classesresponsáveis pelos efeitos aplicados aos nós, como DropShadow, GaussianBlur, Reflection eLighting. Alguns efeitos disponíveis no pacote javafx.scene.effect podem ser observados naFigura 2. Para que seja possível carregar e exibir imagens, as classes pertencentes ao pacote imagesão necessárias. Já as classes referentes aos eventos de mouse e teclado residem no pacoteinput. A API javafx.scene fornece também os pacotes layout, text, paint, media e shape, quetomam conta do layout da interface, nós de texto, cores e gradientes, integração de áudio evídeo e formas em 2D, respectivamente. No javafx.scene.transform são controladas astransformações dos nós, como rotação, escala e deslocamento. Já o pacote web provê asclasses para carregar e exibir conteúdo da Web dentro do JavaFX. Essa funcionalidade éconstituída por duas classes principais: WebEngine e WebView. Uma das grandescaracterísticas das aplicações RIA são as animações. Esta característica é implementada noJavaFX tendo como base um TimeLine (linha de tempo) ou por meio de transições. Xxx As animações baseadas em TimeLine permitem alterar propriedades associadas aoobjeto, tais como cor, localização e tamanho, durante determinado período de tempo. Neste tipode animação são criados KeyFrames (Quadros-Chave) que definem o valor de uma propriedadeem dado momento. As animações por transição são ainda mais fáceis de serem criadas, poissomente é necessário indicar o valor final da propriedade e o tempo para a animação, fazendocom que a TimeLine seja criada internamente de forma transparente ao desenvolvedor. Uma das características do JavaFX é permitir personalizar a aparência de objetos/controles deinterface, como das animações, por exemplo. Esta característica consiste no controle de seusestilos, os quais seguem os padrões propostos pelo W3C, aplicando CSS (Cascading StyleSheets). Desta maneira é possível criar Skins para as aplicações, contribuindo ainda mais paraa separação da lógica de negócio da lógica de apresentação. Esses controles de interface doScene Graph podem ser estilizados por meio de arquivos CSS externos ou no próprio códigoJava (inline). Assim, estilos personalizados podem ser atribuídos em uma aplicação em tempode execução, tornando possível um aplicativo mudar dinamicamente de aparência.

NotaSkin: É um estilo visual ou aparência aplicada a um programa. Todo programa tem seu estilovisual padrão. Caso seja possível alterar essa aparência, isso pode ser feito por meio deskins pré-construídos.



Para incrementar ainda mais a interface com o usuário, JavaFX incorpora diversos controles,os quais fazem parte do pacote javafx.scene.control. Alguns destes controles podem ser vistosna Figura 3.


Figura 3. Exemplos de componentes de UI disponíveis no JavaFX.

Com a inserção de controles em uma interface, torna-se necessária a organização doposicionamento deles na tela. Neste sentido, o JavaFX é constituído de painéis de layout quetêm por objetivo organizar de maneira mais flexível estes controles (Buttons e TextFields, porexemplo). De maneira análoga ao Swing, os Painéis de Layout são similares em funcionalidadeaos Gerenciadores de Layout. Na Figura 4 é possível visualizar alguns painéis de layout, comoo HBox, que organiza os nós horizontalmente em uma linha, o VBox, que organiza os nósverticalmente, dentre outros. Todos os painéis disponíveis estão inclusos no pacotejavafx.scene.layout.


Figura 4. Gerenciadores de Layout disponíveis no JavaFX.



Sistema Gráfico Na Figura 1, as três camadas destacadas em azul formam o sistema gráfico, que suportagráficos de cena em 2D e 3D.O sistema gráfico do JavaFX, por meio do Prism (responsável pela rasterização e renderizaçãodas Scenes), utiliza várias APIs para renderização dos gráficos, dependendo do sistema ondeele está sendo executado.Quando a aceleração por hardware está disponível, ele utiliza DirectX (para Windows) ouOpenGL (para Mac ou Linux). Quando somente a aceleração por software está disponível, oPrism usa Java2D para a renderização, pois o Java2D já está incluído no JRE. Mas odesempenho da aplicação é maior quando se usa aceleração por hardware.

NotaCom a aceleração de hardware, a construção de gráficos tridimensionais (3D) usa oprocessador de sua placa gráfica ao invés de usar recursos da CPU para desenhar asimagens. GPU: GPUs são processadores especializados que efetuam operaçõesrelacionadas a aplicativos gráficos 3D. Seu uso é frequente em jogos, consoles devideogames, estações de trabalho, dentre outros.

Media EngineA camada destacada pela cor verde na Figura 1, chamada de Media Engine, é responsávelpelas funcionalidades de reprodução de conteúdo de mídia por meio da bibliotecajavafx.scene.media. Esta biblioteca é essencial para a criação de aplicações ricas.

Os formatos de mídia suportados são: MP3, AIFF (Audio Interchange File Format) e WAV (ouWAVE), bem como vídeos em Flash (FLV). Na versão 2.0, esta camada foi redesenhada paraalcançar um melhor desempenho.

Web Engine O Web Engine, conhecido também como Embedded Browser, é um novo componente deinterface com o usuário. Ele está disponível no pacote javafx.scene.web e pode inclusive serutilizado dentro do Swing para exibir conteúdo Web. O componente é baseado no webkit, umnavegador web open source que suporta HTML5, CSS, JavaScript, DOM e SVG.

Instalação do SDK Para desenvolver aplicações em JavaFX deve-se ter instalado o JavaFX SDK. A partir do JavaSE 7 o Runtime e o JavaFX SDK estão contidos no JDK. Se você tem uma versão anterior,pode instalar o JavaFX SDK isoladamente. Além disso, é necessário o NetBeans 7.1 ousuperior para trabalhar com JavaFX 2.0.

Aplicação com JavaFX Para demonstrar o uso do JavaFX, serão mostrados os primeiros passos para odesenvolvimento de uma aplicação nesta tecnologia por meio do IDE NetBeans.



Para isso, acesse o menu File > New Project para abrir o Assistente de Novo Projeto doNetBeans. Neste assistente, selecione JavaFX em Categories e em Projects selecioneJavaFXApplication, conforme demonstrado na Figura 5. Feito isso, clique em Next.


Figura 5. Diálogo de novo projeto do NetBeans.

A próxima etapa do assistente é utilizada para configurar o nome e o local do projeto. Assim,em Project Name, substitua a sugestão do NetBeans por “JavaMagazine”, deixe os outroscampos como estão e clique em Finish, como indica a Figura 6.




Figura 6. Diálogo de novo projeto do NetBeans.

Em seguida, o NetBeans criará o projeto com a estrutura básica. Nesta estrutura, o arquivoJavaMagazine.java, contendo um código de exemplo, será criado automaticamente pelo IDE.Para executar este código, clique no menu Run e depois em Run Main Project, ou tecle F6.Após esse procedimento, será exibida a tela demonstrada na Figura 7.


Figura 7. Aplicação de exemplo crida automaticamente pelo NetBeans.

Codificando a aplicação Analisando a classe JavaMagazine, verifica-se que ela estende Application. É esta classe quecontrola o ciclo de vida de uma aplicação JavaFX. Ainda nesta classe, o método main() realiza achamada ao método launch(), que é responsável por iniciar a execução da aplicação. Comotoda aplicação possui um ciclo de vida, em JavaFX não é diferente. Sendo assim, este ciclocomeça após a chamada a launch(), onde o runtime do JavaFX cria uma instância da classeApplication, invoca o método init() e depois o start(). Após isso, a aplicação fica no estado deexecução, aguardando sua finalização. Quando isto ocorre, é chamado o método stop(). Os métodos init() e stop() têm implementações concretas e podem ser sobrescritos,respectivamente, para executar rotinas de inicialização antes que a aplicação inicieefetivamente, e rotinas de preparação para a finalização. O método start() de Application é abstrato e deve ser sobrescrito em toda aplicação JavaFX,pois é nele que a lógica da aplicação deve ser construída. Este método é invocado diretamentepelo método launch().

Listagem 1. Código 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 método é chamado automaticamente pela Runtime do JavaFX, que

cria uma instância de Stage para passar como parâmetro. */

@Override

public void start(Stage primaryStage) {

//Título da janela

primaryStage.setTitle("Hello World!");

//Criação de um objeto Button

Button btn = new Button();

btn.setText("Say 'Hello World'");

btn.setOnAction(new EventHandler<ActionEvent>() {

//Ação atribuída 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 método start() é do tipo Stage, que é considerado como sendo “opalco”. Ele é o container de mais alto nível em uma aplicação JavaFX. A classe Stage contémvárias propriedades e métodos que permitem alterar, por exemplo, a posição, tamanho,visibilidade e título da janela. O título é configurado por meio do método setTitle(String title),como é possível verificar na Listagem 1. Na linha seguinte é criado um botão(javafx.scene.control.Button), ajustado o texto do botão e adicionado um manipulador deeventos para o seu evento onAction. Após o método handle(), é criado um painel(javafx.scene.layout.StackPane) e adicionado o botão a ele. Para adicionar este botão aoStackPane, é feito uso do método getChildren(), que retorna uma lista dos nós filhos existentesno objeto. Com a lista retornada, utiliza-se então o método add(), para que enfim o botão sejainserido como um nó ao conteúdo do StackPane. Na sequência, é utilizado o métodosetScene(Scene) de Stage para atribuir uma Scene ao Stage. Como parâmetro para estemétodo é instanciado um objeto Scene, passando como parâmetro o StackPane criadoanteriormente e que contém o botão, e dois inteiros que definem a largura e altura do Scene,respectivamente. Por último, é exibido o Stage com o método show().



Assim, conclui-se a análise do código que o NetBeans gera automaticamente na criação deum projeto JavaFX. O próximo passo será o de incrementar este exemplo, alterando o título do Stage. Para isso,no exemplo da Listagem 1, na linha que contém o método setTitle(), é preciso alterar a String“Hello World” para “Java Magazine”. Em seguida, exclua o código que cria o botão, juntamentecom o seu evento de ação. No lugar deste botão será inserido um objeto da classejavafx.scene.text.Text. O código para criação do Text é apresentado na Listagem 2. Note que nacriação deste objeto é utilizada a classe TextBuilder. Esta classe auxilia a criação de objetos detexto. Com TextBuilder é possível instanciar um objeto Text e ajustar suas propriedades numacadeia de métodos. Pode-se também instanciar o objeto com o operador new e ajustar suaspropriedades com métodos setters, ficando a escolha a cargo do programador de acordo comsuas preferências. 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 próximo passo é alterar o parâmetro do método add() (Listagem 1) para “txt”, pois o buttonfoi removido, sendo substituído por um objeto Text (Listagem 2). Ao executar o projeto, teclandoF6, 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 propriedadesscaleX e scaleY no construtor de Text.



Vamos então adicionar os métodos scaleX(double) e scaleY(double) ao TextBuilder com ovalor de 10 para ambos. Assim, o tamanho do texto será aumentado em 10 vezes.Prosseguindo, será alterada a dimensão do Scene e consequentemente a do Stage que ocontém, para 800 x 600. Podemos fazer isso modificando os valores dos parâmetros passadosao método setScene() de Stage. As Listagens 3 e 4 mostram como ficaram os códigos. Comestas mudanças, 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 aparência e adicionando efeito ao texto Para demonstrar como o JavaFX facilita a construção de interfaces gráficas com boaaparência, serão realizadas duas customizações: 1) adicionar um azul gradiente comobackground da janela; e 2) adicionar um efeito DropShadow (sombra) ao texto. Assim,



primeiramente deve-se criar o gradiente instanciando a classe LinearGradient. Observe o códigona 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 parâmetro aométodo setScene() de Stage que informa qual o preenchimento do Scene. Por padrão estepreenchimento (background) é branco, mas pode ser alterado para qualquer cor ou gradiente. Ocódigo alterado com a inclusão do quarto parâmetro fica 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 dasombra, 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 código da Listagem 6 deve ser adicionado antes da criação do objeto Text. Para que o efeitoapareça na tela, é preciso ajustar o atributo effect do objeto Text para receber a referência àvariável que armazena o efeito de DropShadow (ds), inserindo o código a seguir após a criaçãodo objeto Text:

txt.setEffect(ds);

Observe que mesmo instanciando o objeto por meio de uma classe Builder, é possível alterarsuas propriedades por meio dos setters normalmente. Ao executar o código pressionando F6, a janela com as alterações é exibida (veja a Figura 10).

Adicionando movimento à aplicação Uma das características de uma aplicação RIA é prover animação. Para adicionar essapeculiaridade ao nosso exemplo, será utilizada a animação de rotação do JavaFX no texto“JavaMagazine”. Esta animação é executada pela classe RotateTransition (do pacotejavafx.animation.transition).



Após o código que cria o efeito DropShadow, mostrado na Listagem 6, é preciso realizar aimplementação descrita na Listagem 7, onde é definida a animação de rotação para o botão quecontrola a animação.

Listagem 7. Animando o texto com transição de rotação.

/* O efeito DropShadow foi instanciado da maneira tradicional com

o operador new, usando métodos

setters para ajustar suas propriedades. */

final DropShadow ds2 = new DropShadow();

ds2.setColor(Color.WHITE);

ds2.setRadius(20);

// Animação de rotação instanciada pelo Builder

final RotateTransition rtb = RotateTransitionBuilder

.create()

// Nó indica qual objeto (Node) sofrerá a rotação.

.node(txt)

// Determina em graus a rotação aplicada.

.byAngle(360)

// Quantas vezes a animação deve repetir.

.cycleCount(Animation.INDEFINITE)

/* Ao final da animação, repetir inversamente?

se ajustarmos para true, a rotação acontecerá

uma vez no sentido horário,

e outra no sentido anti-horário, intercaladamente.*/

.autoReverse(false)

//Quanto tempo dura um ciclo da rotação em milissegundos

.duration(new Duration(3000))

/* interpolator() é o método para controlar o tempo

de aceleração e desaceleração de uma

transição, sendo que:

LINEAR mantém a mesma velocidade durante todo o ciclo.

EASEIN é mais lento no começo da animação.

EASEOUT é mais lento no fim da animação

EASEBOTH é mais lento no início e fim da animação.*/

.interpolator(Interpolator.LINEAR)

.build();

// Botão que controla a animação

final Button btn_Anim = ButtonBuilder

.create()

.text("Iniciar Animação")

.build();

// Ajustando o Evento da ação com o método setOnAction() de Button

btn_Anim.setOnAction(new EventHandler() {

@Override

public void handle(ActionEvent evt) {



// Inicia e pausa a animação e ajusta o texto do botão

if (btn_Anim.getText().equals("Iniciar Animação")) {

rtb.play();

btn_Anim.setText("Pausar Animação");

} else {

rtb.pause();

btn_Anim.setText("Iniciar Animação");

}

}

});

// 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. Aspropriedades color e radius foram ajustadas por meio dos métodos setColor() e setRadius(),respectivamente. Posteriormente, foi implementado o código responsável pelo efeito daanimação: RotateTransition rtb = RotateTransitionBuilder. Uma das propriedades da animação de rotação é CycleCount. Esta determina quantas vezes ociclo da animação será repetido. Em nosso exemplo, o valor desta propriedade foi definido como Animation.INDEFINITE, paraque a animação seja contínua. Já a propriedade Interpolator teve seu valor ajustado para linear,fazendo com que a animação mantenha uma velocidade constante. Ela é responsável porcontrolar o tempo de aceleração e desaceleração em cada ciclo da animação. Com avelocidade definida, foi estabelecida a duração da animação por meio da propriedade Duration,com o valor de três mil milissegundos. Na sequência, para ativar e desativar o efeito de DropShadow, ajustou-se os eventosonMouseEntered e onMouseExited. Para controlar a animação, foi criado um botão com oauxílio do builder e implementou-se o método que captura o evento onAction. Neste evento,uma lógica foi implementada para a invocação dos métodos play() e pause() (ambos deRotateTransition), de acordo com o estado da animação. Cabe lembrar que uma animação depois de instanciada não entra em execução enquanto ométodo play() não for chamado. Com essas propriedades definidas, é necessário adicionar o botão ao painel inserindo oseguinte código:



root.getChildren().add(btn_Anim)

Ao executar a aplicação pressionando F6, a tela exibida na Figura 11 é apresentada.

Quando clicado no botão Iniciar Animação, o texto irá girar no sentido horário. Repare que obotão foi renderizado sobre o texto. Isto ocorreu porque esse exemplo usa o StackPane comoLayout, que tem como característica o “empilhamento” dos nós. No código da Listagem 8 édemonstrado como substituir o StackPane por outro gerenciador de layout para que a tela fiquemais organizada. Neste caso foi adotado o BorderPane, que lembra o BorderLayout do Swing.


Figura 10. Alteração da cor de fundo e inclusão do efeito de DropShadow.




Figura 11. Adicionando um botão para controlar a animação.

Com este Layout é possível ajustar em qual região do BorderPane se deseja adicionar os nós(botões, textos, etc.), e outros containers, podendo assim construir interfaces complexas. Ocódigo da Listagem 8 deve ser inserido no lugar onde era instanciado o StackPane, substituindotambém o código que adicionava o texto e o botão ao StackPane.

Listagem 8. Utilizando o BorderPane.

final BorderPane root = new BorderPane()

root.setCenter(txt);

root.setTop(btn_Anim);

Com essa alteração, o botão Iniciar Animação passa a ser exibido no topo da janela e o texto“JavaMagazine” é exibido no centro da aplicação.

Adicionando controles à aplicação Outra característica interessante de JavaFX é o processo de Bind. O Bind é um mecanismoque permite vincular uma propriedade/variável à outra. Desta maneira, quando houver alteraçãono valor de uma das propriedades vinculadas, a outra será automaticamentealterada/sincronizada. Para demonstrar seu uso na aplicação, na Listagem 9 foram criados doiscontroles Slider utilizando a classe SliderBuilder: um que será vinculado aos atributos ScaleX eScaleY do texto, e outro que será vinculado ao atributo Radius do efeito DropShadow. Além destes, foram criados mais dois controles Label com o auxílio da classe LabelBuilder. Estecódigo deve ser inserido após 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 Máximo, mínimo 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 nóscomo em uma tabela. No código a seguir, na primeira linha, foi criado o GridPane, eposteriormente ajustado o espaço vertical entre as linhas da tabela (método setVgap()) e oespaço horizontal entre as colunas (método setHgap()). Por último, é ajustado o espaço interno(padding) em relação à margem de cada célula da tabela. O padding é o espaço entre oconteúdo e a margem do container. Este código deve ser inserido após o trecho onde o título daaplicação é alterado para “JavaMagazine”. GridPane gridSliders = new GridPane();gridSliders.setVgap(5);gridSliders.setHgap(15);gridSliders.setPadding(new Insets(10));

Com a criação do GridPane, é necessário inserir no container os Labels e Sliders criados.Observe o código a seguir, que realiza esse procedimento. Na última linha, ajusta-se oGridPane à região inferior do BorderPane. Este código deve ser inserido após o trecho referenteà implementação do botão 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 execução destas instruções o grid passa a ter dois Labels e dois Sliders. Oalinhamento, para o label referente ao Slider responsável pelo dimensionamento do texto, érealizado pelo código a seguir, sendo informada a opção à direita e no sentido horizontal. Estelabel é o que aparece na Figura 12 com o rótulo “Tamanho”.

gridSliders.setHalignment(lbTam, HPos.RIGHT);

Até este ponto, tem-se o layout da tela pronto, porém os sliders não produzem efeito algum.Para que eles efetivamente controlem as propriedades dos nós, é necessário vincular aspropriedades value dos sliders às propriedades desejadas dos objetos. Esta vinculação é dada conforme código a seguir, que deve ser inserido após a criação dosobjetos que serão vinculados. Na primeira linha é vinculada a propriedade scaleX de txt ao valorde slTam. Na segunda linha é feito o mesmo para a propriedade scaleY. Na terceira linhavincula-se o valor da propriedade radius de ds ao valor de slDSR. Assim, ao utilizar os sliders,os valores destes serão replicados nas propriedades vinculadas dos objetos.

txt.scaleXProperty().bind(slTam.valueProperty());txt.scaleYProperty().bind(slTam.valueProperty());ds.radiusProperty().bind(slDSR.valueProperty());

O resultado da execução da aplicação pode ser verificado na Figura 12.




Figura 12. Ajuste do Layout e inclusão de controles.

Adicionando formas geométricas JavaFX permite não somente a criação de animações, textos, controles, vídeos e imagens,mas também a possibilidade de inserção de formas geométricas. Para isso foram criadas asclasses do pacote shape. Com o intuito de demonstrar uma destas classes, serãoacrescentados círculos à tela. Na Listagem 10 tem-se a criação dos círculos que serão adicionados à tela da aplicação. Nasegunda linha do método getCircle(), é definido o efeito GaussianBlur. Este efeito será utilizadopara deixar o objeto Circle com aparência de apagado/borrado. Em seguida, são atribuídos trêsvalores inteiros de forma aleatória a três variáveis int. Estes valores serão usados comoargumentos para o método rgb() de Color, que primeiro define a cor para o contorno (variávelstroke) e depois para a cor de preenchimento (variável fill). Além da cor, foram atribuídosvalores randômicos às propriedades layoutX e layoutY, que determinam o posicionamento docírculo na tela. O código exibido na Listagem 10 deve ser inserido depois do método start().

Listagem 10. Método que cria círculos para serem inseridos na tela e métodos auxiliarespara geração de números randômicos.

public Circle getCircle() {

// Aparência 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 círculo com a cor aleatória 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 círculo sejamválidos em relação à área disponível para a exibição dele, é preciso saber o tamanho da área(Scene) onde este círculo será desenhado. Os valores que definem este tamanho foraminformados anteriormente como 800 x 600, na criação do Scene para o Stage. É interessanteque estes valores sejam atribuídos às variáveis, seja de maneira fixa, solicitando ao usuário ouobtendo os mesmos diretamente do Scene, caso sua janela seja redimensionável. O objetivo douso das variáveis está em ter a definição destas dimensões em um único local. No código aseguir estes valores são definidos 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 círculos sejam desenhados por meio de uma interação com o usuário, um botão écriado (Listagem 11). No código responsável por esta criação, os eventos onMouseEntered eonMouseExited são configurados para adicionar e excluir o efeito de DropShadow.É possível verificar, também neste código, que o método responsável pela definição do eventoonAction, o métodohandle(), insere um círculo ao StackPane (objeto root). O código da Listagem 11, querepresenta o botão de interação para a inserção de círculos ao StackPane, deve ser inseridoapós a criação do botão que controla a animação descrita na Listagem 7.

Listagem 11. Acrescentando círculos à aplicação.

final Button btn_Circ = ButtonBuilder.create().text("Inserir Círculos").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 botão será inserido juntamente com o botão anterior (de iniciar e pausar a animação),dentro de um HBox, um container que dispõe seus nós lado a lado horizontalmente. Estecontainer é criado e tem seu padding e spacing ajustados. Sem padding os botões ficariam“encostados” no canto superior direito do HBox. Com padding é garantido que entre a margemdo container e os botões haja o espaço configurado. O atributo spacing se refere ao espaçoentre os botões. Sem ele um botão ficaria muito próximo ao outro, isto é, sem separação. Ocódigo a seguir deve ser inserido após o código de criação do GridPane dos Sliders:

HBoxfpRoot = new HBox();fpRoot.setPadding(new Insets(5));fpRoot.setSpacing(5); Note que com este código apenas é criado o HBox. Sendo assim, ainda é necessário inserir osbotões e adicioná-lo ao topo do BorderPane. Para isso, é preciso adicionar o código a seguirentre o trecho onde foi inserido o texto “JavaMagazine” ao topo do BorderPane e o trecho ondeforam inseridos os sliders no rodapé do BorderPane. Como agora o botão que controla aanimação foi adicionado ao HBox, deve-se remover a linha que insere este botão no topo doBorderPane.

fpRoot.getChildren().add(btn_Circ);fpRoot.getChildren().add(btn_Anim);root.setTop(fpRoot);

A Figura 13 exibe a aparência da aplicação após todas as alterações.




Figura 13. Estágio final da aplicação de exemplo.

Modos de deploy JavaFX concentra seus recursos para o desenvolvimento de aplicações RIA, e dentro desteobjetivo, é preciso que estas aplicações possam ser disponibilizadas para diversas plataformas.Desta maneira, estas aplicações buscam a existência de maior interatividade com o usuário euma satisfação deste no uso delas, independente da plataforma em que serão executadas. No intuito de subsidiar esta disponibilidade, JavaFX, na versão 2, prevê três modos dedeployment. Para configurá-los, acesse a aba Projects do NetBeans, clique com o botão direitosobre o projeto JavaMagazine e escolha Properties no menu de contexto. Feito isso, a Figura14 será exibida.




Figura 14. Diálogo de Properties do NetBeans.

Nesta figura, é possível definir qual será o método de execução da aplicação. Se Standalone(execução no Desktop), Web Start (execução no desktop através de um arquivo JNLP baixadoda Web) ou in Browser (Applet). Teste as três opções para identificar as diferenças. Para que seja possível verificar os arquivos .jar gerados pelo NetBeans, aperte F11 paraexecutar o Build do Projeto. Após o Build, na pasta dist do projeto existirão três arquivos e umdiretório, como demonstra a Figura 15. O arquivo JavaMagazine.html é uma página de exemplopara uso do método de execução in Browser. O arquivo de mesmo nome, mas com extensãojnlp, é usado tanto pelo método in Browser como pelo método Web Start. Já o arquivoJavaMagazine.jar, é utilizado pelos três métodos de deploy. Além desses, a pasta web-filescontém os arquivos necessários para a execução do método in Browser.


Figura 15. Conteúdo do diretório dist do projeto JavaMagazine.

Conclusão Neste artigo foi apresentada a plataforma JavaFX, considerada pela Oracle como a evoluçãoda Plataforma Cliente Java. Esta foi desenvolvida para facilitar a construção de aplicativos RIA(Rich Internet Application), ou seja, aplicativos que incorporam animações, músicas, vídeos eelementos que possibilitam uma experiência mais agradável ao usuário. No decorrer do artigo foram descritas as mudanças entre a versão atual e as versõesanteriores do JavaFX, assim como as principais novidades desta nova versão. Uma breve



descrição dos principais componentes da API e da estrutura da plataforma também foiabordada. Ao final, foi desenvolvida uma aplicação de exemplo demonstrando algumas dasfuncionalidades básicas da tecnologia, como a criação de formas geométricas, animação eBind, servindo como um rico ponto de partida para o aprendizado da plataforma.

Regis GiongoGraduada em Tecnologia em Análise e Desenvolvimento de Sistemas pela Universidade do Oeste deSanta Catarina (UNOESC). Atualmente está cursando especialização em projeto e desenvolvimentode sistemas baseados em objetos para ambiente internet, na Universidade Tecnológica Federal doParaná (UTFPR). Trabalha como desenvolvedora web na Viasoft, empresa especializada naprodução de softwares de gestão empresarial.

EVERTON COIMBRA DE ARAÚJOhttps://www.facebook.com/evertoncoimbradearaujo Desde 1987 atua na área de treinamento edesenvolvimento. É mestre em Ciência da Computação, e professor efetivo da UTFPR, CampusMedianeira. Tem Atuado também em cursos de EaD oferecidos pela UAB e ETEC. Autor de livrospela Visual Books: http://www.visualbooks.com.br/shop/MostraAutor.asp?proc=191

Daniel Rodriguesgraduado em Tecnologia em Análise e Desenvolvimento de Sistemas pela UNOESC. Entusiasta deJavaFX. Trabalha em uma instituição bancária desenvolvendo sistemas de suporte ao negóciodisponíveis por meio da Intranet para a rede de agências.

http://www.devmedia.com.br/autor.asp?id=269048



JavaFX2Introduçao

Documents

Transcript of JavaFX2Introduçao