javafx - guia prático

42
Criando sua primeira aplicação JavaFX Daniel Campos Sun Campus Ambassador [email protected]

Upload: danielfc

Post on 17-Dec-2014

7.088 views

Category:

Technology


0 download

DESCRIPTION

Guia prático para introduzir os interessados nessa nova tecnologia para aplicações ricas para internet chamada JavaFX.

TRANSCRIPT

Page 1: JavaFx - Guia Prático

Criando sua primeira aplicação JavaFX

Daniel Campos

Sun Campus [email protected]

Page 2: JavaFx - Guia Prático

2

Agenda

•O que é JavaFX?•Instalando o plugin para NetBeans•Primeira aplicação JavaFX•Próximos Passos

Page 3: JavaFx - Guia Prático

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;

Page 4: JavaFx - Guia Prático

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;

Page 5: JavaFx - Guia Prático

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;

Page 6: JavaFx - Guia Prático

6

O que é JavaFX?Comparação Java x JavaFX

Page 7: JavaFx - Guia Prático

7

Instalando plugin no NetBeans

Page 8: JavaFx - Guia Prático

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:

Page 9: JavaFx - Guia Prático

9

Plugin JavaFX no NetBeansInstalação

Page 10: JavaFx - Guia Prático

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:

Page 11: JavaFx - Guia Prático

11

Plugin JavaFX no NetBeansInstalação

Page 12: JavaFx - Guia Prático

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;

Page 13: JavaFx - Guia Prático

13

Primeira aplicação JavaFX

Page 14: JavaFx - Guia Prático

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

Page 15: JavaFx - Guia Prático

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:

Page 16: JavaFx - Guia Prático

16

Primeira aplicação JavaFX Esfera JavaFX

Page 17: JavaFx - Guia Prático

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;

Page 18: JavaFx - Guia Prático

18

Primeira aplicação JavaFX

Esfera JavaFX

Page 19: JavaFx - Guia Prático

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.

Page 20: JavaFx - Guia Prático

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.

Page 21: JavaFx - Guia Prático

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).

Page 22: JavaFx - Guia Prático

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.

Page 23: JavaFx - Guia Prático

23

Primeira aplicação JavaFX

Esfera JavaFX

Page 24: JavaFx - Guia Prático

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.

Page 25: JavaFx - Guia Prático

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

Page 26: JavaFx - Guia Prático

26

Primeira aplicação JavaFX

Esfera JavaFX

Para visualizar a aplicação, clique no ícone Enable Preview.

Page 27: JavaFx - Guia Prático

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.

Page 28: JavaFx - Guia Prático

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.

Page 29: JavaFx - Guia Prático

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.

Page 30: JavaFx - Guia Prático

30

Primeira aplicação JavaFX

Esfera JavaFX

Clique no botão Enable Preview (Alt-shift-P) para visualizar as modificações do texto.

Page 31: JavaFx - Guia Prático

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.

Page 32: JavaFx - Guia Prático

32

Primeira aplicação JavaFX

Esfera JavaFX

Page 33: JavaFx - Guia Prático

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;

Page 34: JavaFx - Guia Prático

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;

Page 35: JavaFx - Guia Prático

35

Primeira aplicação JavaFX Esfera JavaFX

Page 36: JavaFx - Guia Prático

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;

Page 37: JavaFx - Guia Prático

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;

Page 38: JavaFx - Guia Prático

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.

Page 39: JavaFx - Guia Prático

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!

Page 40: JavaFx - Guia Prático

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

Page 41: JavaFx - Guia Prático

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

Page 42: JavaFx - Guia Prático

[email protected]

Criando sua primeira aplicação JavaFX