JavaFx - Guia Prático

  • View
    7.026

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Text of JavaFx - Guia Prático

  • 1. Criando sua primeira aplicao JavaFX
    • Daniel Campos

Sun Campus Ambassador [email_address] 2. Agenda

  • O que JavaFX?
  • Instalando o plugin para NetBeans
  • Primeira aplicao JavaFX
  • Prximos Passos

3. O que JavaFX?

  • uma nova famlia de produtos baseada na tecnologia Java;
  • Apresentado pela Sun em Maio/2008;
  • Verso 1.0 lanada em dezembro/2008;
  • Desenvolvido para implementao de RIA - Rich Internet Applications, ou seja, aplicaes 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 mveis;
    • disponvel 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 mveis, desktop e at mesmo discos Blu-ray;

6. O que JavaFX? Comparao Java x JavaFX 7. Instalando plugin no NetBeans 8. Plugin JavaFX no NetBeans Instalao

  • Inicialize o NetBeans 6.5;
  • Selecione o menu Tools > Plugins;
  • Na janela Plugins, na aba Settings ative todas as caixas de seleo, como mostrado na figura seguinte:

9. Plugin JavaFX no NetBeans Instalao 10. Plugin JavaFX no NetBeans Instalao

    • Selecione a aba Available Plugins;
    • Digite JavaFx no campo Search;
    • O NetBeans listar todos os plugins disponveis;
    • Marque todas as opes;
    • Clique em Install;
    • A sua tela deve estar parecida com a figura seguinte:

11. Plugin JavaFX no NetBeans Instalao 12. Plugin JavaFX no NetBeans Instalao

    • O guia de instalao do NetBeans aparecer, clique em next e aceite os termos apresentados;
    • Aps a instalao o NetBeans deve ser reinicializado;
    • Pronto! Podemos partir para a nossa primeira aplicao JavaFX;

13. Primeira aplicao JavaFX 14. Primeira aplicao JavaFX Neste exemplo, iremos criar uma simples esfera que altera a cor de seu texto enquanto realiza um evento em um certo perodo de tempo, como mostrado na figura abaixo: Esfera JavaFX 15. Primeira aplicao 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 localizao do projeto e clique em Finish;
    • A janela deve estar parecida com a figura seguinte:

16. Primeira aplicao JavaFX Esfera JavaFX 17. Primeira aplicao JavaFX Esfera JavaFX

    • O projeto est aberto no NetBeans;
    • O arquivo Main.fx deve estar aberto em Source Editor;
    • Note que um bloco de cdigo j vem por default no arquivo Main.fx. Este cdigo inclui vrias declaraes importantes do JavaFX;
    • A figura a seguir mostra o arquivo Main.fx aberto no NetBeans;

18. Primeira aplicao JavaFX Esfera JavaFX 19. Primeira aplicao JavaFX Esfera JavaFXObjeto Descrio Stage Define algumas caractersticas da aplicao como: title, width e height. Scene Componente visual da aplicao. Text Define o elemento grfico que exibe o texto. Font Define o tipo de fonte utilizado para apresentar o texto. 20. Primeira aplicao JavaFX Esfera JavaFX

    • Agora vamos modificar o cdigo do objetoStage , para definirmos o ttulo, a largura e a altura. Tambm vamos definir a fonte e mostrar um texto atravs do objetoScene .

21. Primeira aplicao JavaFX Esfera JavaFX

    • O NetBeans acusar um erro pois necessrio importar a classeTextAligmentusada para alinhar a aplicao no centro.
    • Para importar a classe TextAligment digite: import javafx.scene.text.TextAligment ; Ou clique com o boto direito em qualquer rea do arquivo e selecione a opoFix imports (Ctrl-Shift-I).

22. Primeira aplicao JavaFX Esfera JavaFX

    • Para inserirmos um crculo, temos que expandir a seoBasic Shapesna janelaPelletee arrastarmos a opoCircle at a linha acima do bloco de cdigoText .
    • A figura a seguir mostra o local exato de soltar o cdigo para gerar um crculo.

23. Primeira aplicao JavaFX Esfera JavaFX 24. Primeira aplicao JavaFX Esfera JavaFX

    • Modifique o valor das variveis do crculo para obter o tamanho certo para caber o texto.
    • Adicione o RadialGradient ao cdigo do crculo para dar a torn-lo parecido com uma esfera.
    • O RadialGradient ir definir a cor da esfera, o raio, a sombra, dando a impresso de um objeto 3D.

25. Primeira aplicao JavaFX Apenas modifique o cdigo emnegrito . Para retirar as mensagens de erro, clique com o boto direito e selecioneFix imports (Ctrl-shift-I). Esfera JavaFX 26. Primeira aplicao JavaFX Esfera JavaFX

    • Para visualizar a aplicao, clique no cone Enable Preview.

27. Primeira aplicao JavaFX Esfera JavaFX

    • No cdigo a seguir, iremos alterar a cor do texto para amarelo e adicionar um efeito de sombra.
    • Adicione as variveis color e scale, essas variveis sero utilizadas na animao que iremos criar nos prximos passos.

Modifique apenas o cdigo em negrito. 28. Primeira aplicao JavaFX Esfera JavaFX

    • Modifique o objetoText ,adicionando e definindo o valor das variveis de instnciafill ,effectetransforms.Esse cdigo ir modificar a cor texto, adicionar sombra ao texto e configurar as propriedades de escala.

29. Primeira aplicao JavaFX Esfera JavaFX

    • Para corrigir os erros, ser necessrio importar duas classes. import javafx.scene.effect.DropShadow;
    • import javafx.scene.transform.Scale; Ou digite Ctrl-shift-I.

30. Primeira aplicao JavaFX Esfera JavaFX

    • Clique no boto Enable Preview (Alt-shift-P) para visualizar as modificaes do texto.

31. Primeira aplicao JavaFX Esfera JavaFX

    • Adicione uma animao para fazer o texto mudar de amarelo para verde enquanto gira.
    • Expanda a seoAnimationda janelaPalettee arraste o componenteTimelinepara a linha acima do bloco de cdigo do objetoStage , como mostrado na figura seguinte.

32. Primeira aplicao JavaFX Esfera JavaFX 33. Primeira aplicao JavaFX Esfera JavaFX

    • A animao ocorre ao longo de uma linha do tempo, representada pelo objetojavafx.animation.Timeline ;
    • CadaTimelinecontm um ou maisKeyFrames , representados pelos objetosjavafx.animation.KeyFrame ;
    • Mude o valor da variveltime , que est dentro do bloco de cdigo doKeyFrame , para5s ;

34. Primeira aplicao JavaFX Esfera JavaFX

    • Arraste o componenteValuesda seoAnimation , para dentro do bloco de cdigo doKeyFramelogo aps a varivelcanSkip ;
    • Valuesdefine as variveis alvo e os valores pretendidos para serem definidos durante o tempo especificado noKeyFrame ;

35. Primeira aplicao JavaFX Esfera JavaFX 36. Primeira aplicao JavaFX Esfera JavaFX

    • O cdigo a seguir define os valores que sero alterados durante a animao;
    • O cdigo far com que a cor do texto altere de amarelo para verde durante a execuo;

37. Primeira aplicao JavaFX Esfera JavaFX

    • Finalmente, adicione o mtodo play() ao final do bloco de cdigo do Timeline;
    • O mtodo play() inicializa o Timeline e realiza a aes definidas;
    • O bloco de cdigo Timeline deve estar igual a figura a seguir;

38. Primeira aplicao JavaFX Esfera JavaFXAo clicar no cone Enable Preview, voc ver o texto da esfera girar enquanto muda a cor de amarelo para verde. 39. Primeira aplicao JavaFX Esfera JavaFX

    • Para executar a aplicao, clique com o boto direito em cima do nome do projeto e selecione Run Project ou digite a tecla F6.
    • A primeira aplicao JavaFX est concluda!

40.

  • Mais informaes;
  • Downloads;
  • Documentao;
  • Exemplos;
  • Tutoriais completos;
  • Ace