2
Agenda
•O que é JavaFX?•Instalando o plugin para NetBeans•Primeira aplicação JavaFX•Próximos Passos
3
O que é JavaFX?• É uma nova família de produtos baseada na
tecnologia Java;• Apresentado pela Sun em Maio/2008;• Versão 1.0 lançada em dezembro/2008;• Desenvolvido para implementação de RIA - Rich
Internet Applications, ou seja, aplicações ricas para internet;• Concorrentes: Adobe Flex e MS Silverlight;• Dois produtos foram anunciados: JavaFX Mobile e
JavaFX script;
4
O que é JavaFX?JavaFX Mobile e JavaFX Script• JavaFX Mobile:> Sistema de software completo para dispositivos
móveis;> disponível para operadoras, fabricantes de telefones
e outras empresas;
• JavaFX Script:> Linguagem de script orientada a objeto;> Sintaxe simplificada;> É diferente do Java tradicional;
5
O que é JavaFX?JavaFX Mobile e JavaFX Script
> Possui plugins para NetBeans e eclipse;> Desenvolvimento para diversos dispositivos como:
set-top boxe, dispositivos móveis, desktop e até mesmo discos Blu-ray;
6
O que é JavaFX?Comparação Java x JavaFX
7
Instalando plugin no NetBeans
8
Plugin JavaFX no NetBeansInstalação
Inicialize o NetBeans 6.5; Selecione o menu Tools > Plugins; Na janela Plugins, na aba Settings ative todas as caixas de seleção, como mostrado na figura seguinte:
9
Plugin JavaFX no NetBeansInstalação
10
Plugin JavaFX no NetBeansInstalação
Selecione a aba Available Plugins; Digite JavaFx no campo Search; O NetBeans listará todos os plugins disponíveis; Marque todas as opções; Clique em Install; A sua tela deve estar parecida com a figura seguinte:
11
Plugin JavaFX no NetBeansInstalação
12
Plugin JavaFX no NetBeansInstalação
O guia de instalação do NetBeans aparecerá, clique em next e aceite os termos apresentados;
Após a instalação o NetBeans deve ser reinicializado; Pronto! Podemos partir para a nossa primeira aplicação JavaFX;
13
Primeira aplicação JavaFX
14
Primeira aplicação JavaFX
Neste exemplo, iremos criar uma simples esfera que altera a cor de seu texto enquanto realiza um evento em um certo período de tempo, como mostrado na figura abaixo:
Esfera JavaFX
15
Primeira aplicação JavaFX
Esfera JavaFX
No NetBeans, selecione File > New Project (Ctrl + Shift + N); Na janela New Project, selecione a pasta JavaFX > JavaFX Script
Application; Escolha o nome e a localização do projeto e clique em Finish; A janela deve estar parecida com a figura seguinte:
16
Primeira aplicação JavaFX Esfera JavaFX
17
Primeira aplicação JavaFX
Esfera JavaFX
O projeto está aberto no NetBeans; O arquivo Main.fx deve estar aberto em Source Editor; Note que um bloco de código já vem por default no arquivo
Main.fx. Este código inclui várias declarações importantes do JavaFX;
A figura a seguir mostra o arquivo Main.fx aberto no NetBeans;
18
Primeira aplicação JavaFX
Esfera JavaFX
19
Primeira aplicação JavaFX
Esfera JavaFX
Objeto Descrição
Stage Define algumas características da aplicação como: title, width e height.
Scene Componente visual da aplicação.
Text Define o elemento gráfico que exibe o texto.
Font Define o tipo de fonte utilizado para apresentar o texto.
20
Primeira aplicação JavaFX
Esfera JavaFX
Agora vamos modificar o código do objeto Stage, para definirmos o título, a largura e a altura. Também vamos definir a fonte e mostrar um texto através do objeto Scene.
21
Primeira aplicação JavaFX
Esfera JavaFX
O NetBeans acusará um erro pois é necessário importar a classe TextAligment usada para alinhar a aplicação no centro.
Para importar a classe TextAligment digite:
import javafx.scene.text.TextAligment;
Ou clique com o botão direito em qualquer área do arquivo e selecione a opção Fix imports (Ctrl-Shift-I).
22
Primeira aplicação JavaFX
Esfera JavaFX
Para inserirmos um círculo, temos que expandir a seção Basic Shapes na janela Pellete e arrastarmos a opção Circle até a linha acima do bloco de código Text.
A figura a seguir mostra o local exato de soltar o código para gerar um círculo.
23
Primeira aplicação JavaFX
Esfera JavaFX
24
Primeira aplicação JavaFX
Esfera JavaFX
Modifique o valor das variáveis do círculo para obter o tamanho certo para caber o texto.
Adicione o RadialGradient ao código do círculo para dar a torná-lo parecido com uma esfera.
O RadialGradient irá definir a cor da esfera, o raio, a sombra, dando a impressão de um objeto 3D.
25
Primeira aplicação JavaFX
Apenas modifique o códigoem negrito.
Para retirar as mensagens deerro, clique com o botãodireito e selecione Fix imports(Ctrl-shift-I).
Esfera JavaFX
26
Primeira aplicação JavaFX
Esfera JavaFX
Para visualizar a aplicação, clique no ícone Enable Preview.
27
Primeira aplicação JavaFX
Esfera JavaFX
No código a seguir, iremos alterar a cor do texto para amarelo e adicionar um efeito de sombra.
Adicione as variáveis color e scale, essas variáveis serão utilizadas na animação que iremos criar nos próximos passos.
Modifique apenas o código em negrito.
28
Primeira aplicação JavaFX
Esfera JavaFX Modifique o objeto Text, adicionando e definindo o
valor das variáveis de instância fill, effect e transforms. Esse código irá modificar a cor texto, adicionar sombra ao texto e configurar as propriedades de escala.
29
Primeira aplicação JavaFX
Esfera JavaFX
Para corrigir os erros, será necessário importar duas classes.
import javafx.scene.effect.DropShadow; import javafx.scene.transform.Scale;
Ou digite Ctrl-shift-I.
30
Primeira aplicação JavaFX
Esfera JavaFX
Clique no botão Enable Preview (Alt-shift-P) para visualizar as modificações do texto.
31
Primeira aplicação JavaFX
Esfera JavaFX
Adicione uma animação para fazer o texto mudar de amarelo para verde enquanto gira.
Expanda a seção Animation da janela Palette e arraste o componente Timeline para a linha acima do bloco de código do objeto Stage, como mostrado na figura seguinte.
32
Primeira aplicação JavaFX
Esfera JavaFX
33
Primeira aplicação JavaFX
Esfera JavaFX
A animação ocorre ao longo de uma linha do tempo, representada pelo objeto javafx.animation.Timeline;
Cada Timeline contém um ou mais KeyFrames, representados pelos objetos javafx.animation.KeyFrame;
Mude o valor da variável time, que está dentro do bloco de código do KeyFrame, para 5s;
34
Primeira aplicação JavaFX
Esfera JavaFX
Arraste o componente Values da seção Animation, para dentro do bloco de código do KeyFrame logo após a variável canSkip;
Values define as variáveis alvo e os valores pretendidos para serem definidos durante o tempo especificado no KeyFrame;
35
Primeira aplicação JavaFX Esfera JavaFX
36
Primeira aplicação JavaFX
Esfera JavaFX
O código a seguir define os valores que serão alterados durante a animação;
O código fará com que a cor do texto altere de amarelo para verde durante a execução;
37
Primeira aplicação JavaFX
Esfera JavaFX
Finalmente, adicione o método play() ao final do bloco de código do Timeline;
O método play() inicializa o Timeline e realiza a ações definidas;
O bloco de código Timeline deve estar igual a figura a seguir;
38
Primeira aplicação JavaFX
Esfera JavaFX
Ao clicar no ícone Enable Preview, você verá o texto da esfera girar enquanto muda a cor de amarelo para verde.
39
Primeira aplicação JavaFX
Esfera JavaFX
Para executar a aplicação, clique com o botão direito em cima do nome do projeto e selecione Run Project ou digite a tecla F6.
A primeira aplicação JavaFX está concluída!
40
Get Involved •Mais informações;•Downloads;•Documentação;•Exemplos;•Tutoriais completos;• • Acesse os sites:
> http://javafx.com> https://openjfx.dev.java.net
Próximos Passos
41
•Treinamento via WEB grátis JavaTM, SolarisTM & outros!!
>Visit: http://osum.sun.com
>Acesse o grupo MGJUG e conheça o SAI – Sun Academic Initiative.
•Certificações Sun!
>Sun Certified Associate/Programmer for the Java 2 Platform SE
>Sun Certified Web Component Developer for Java EE
>Sun Certified Mobile Application Developer for Java ME
>Sun Certified System/Network Admin for Solaris Operating System
•Simuladores de exames grátis
Próximos PassosAcelere sua carreira com a Sun
Criando sua primeira aplicação JavaFX