JavaFx - Guia Prático

7,856 views
7,685 views

Published on

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

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Em relação ao download, já está disponível. Realmente eu nao tinha percebido, valew.

    Java FX mobile é citado no próprio site do JavaFx.: http://www.javafx.com/faq/
    Mas com certeza vou checar isso, valew.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,856
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
293
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • JavaFx - Guia Prático

    1. 1. Criando sua primeira aplicação JavaFX <ul><li>Daniel Campos </li></ul>Sun Campus Ambassador [email_address]
    2. 2. Agenda <ul><li>O que é JavaFX? </li></ul><ul><li>Instalando o plugin para NetBeans </li></ul><ul><li>Primeira aplicação JavaFX </li></ul><ul><li>Próximos Passos </li></ul>
    3. 3. O que é JavaFX? <ul><li>É uma nova família de produtos baseada na tecnologia Java; </li></ul><ul><li>Apresentado pela Sun em Maio/2008; </li></ul><ul><li>Versão 1.0 lançada em dezembro/2008; </li></ul><ul><li>Desenvolvido para implementação de RIA - Rich Internet Applications, ou seja, aplicações ricas para internet; </li></ul><ul><li>Concorrentes: Adobe Flex e MS Silverlight; </li></ul><ul><li>Dois produtos foram anunciados: JavaFX Mobile e JavaFX script; </li></ul>
    4. 4. O que é JavaFX? JavaFX Mobile e JavaFX Script <ul><li>JavaFX Mobile: </li></ul><ul><ul><li>Sistema de software completo para dispositivos móveis; </li></ul></ul><ul><ul><li>disponível para operadoras, fabricantes de telefones e outras empresas; </li></ul></ul><ul><li>JavaFX Script: </li></ul><ul><ul><li>Linguagem de script orientada a objeto; </li></ul></ul><ul><ul><li>Sintaxe simplificada; </li></ul></ul><ul><ul><li>É diferente do Java tradicional; </li></ul></ul>
    5. 5. O que é JavaFX? JavaFX Mobile e JavaFX Script <ul><ul><li>Possui plugins para NetBeans e eclipse; </li></ul></ul><ul><ul><li>Desenvolvimento para diversos dispositivos como: set-top boxe, dispositivos móveis, desktop e até mesmo discos Blu-ray; </li></ul></ul>
    6. 6. O que é JavaFX? Comparação Java x JavaFX
    7. 7. Instalando plugin no NetBeans
    8. 8. Plugin JavaFX no NetBeans Instalação <ul><li>Inicialize o NetBeans 6.5; </li></ul><ul><li>Selecione o menu Tools > Plugins; </li></ul><ul><li>Na janela Plugins, na aba Settings ative todas as caixas de seleção, como mostrado na figura seguinte: </li></ul>
    9. 9. Plugin JavaFX no NetBeans Instalação
    10. 10. Plugin JavaFX no NetBeans Instalação <ul><ul><li>Selecione a aba Available Plugins; </li></ul></ul><ul><ul><li>Digite JavaFx no campo Search; </li></ul></ul><ul><ul><li>O NetBeans listará todos os plugins disponíveis; </li></ul></ul><ul><ul><li>Marque todas as opções; </li></ul></ul><ul><ul><li>Clique em Install; </li></ul></ul><ul><ul><li>A sua tela deve estar parecida com a figura seguinte: </li></ul></ul>
    11. 11. Plugin JavaFX no NetBeans Instalação
    12. 12. Plugin JavaFX no NetBeans Instalação <ul><ul><li>O guia de instalação do NetBeans aparecerá, clique em next e aceite os termos apresentados; </li></ul></ul><ul><ul><li>Após a instalação o NetBeans deve ser reinicializado; </li></ul></ul><ul><ul><li>Pronto! Podemos partir para a nossa primeira aplicação JavaFX; </li></ul></ul>
    13. 13. Primeira aplicação JavaFX
    14. 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. 15. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>No NetBeans, selecione File > New Project (Ctrl + Shift + N); </li></ul></ul><ul><ul><li>Na janela New Project, selecione a pasta JavaFX > JavaFX Script Application; </li></ul></ul><ul><ul><li>Escolha o nome e a localização do projeto e clique em Finish; </li></ul></ul><ul><ul><li>A janela deve estar parecida com a figura seguinte: </li></ul></ul>
    16. 16. Primeira aplicação JavaFX Esfera JavaFX
    17. 17. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>O projeto está aberto no NetBeans; </li></ul></ul><ul><ul><li>O arquivo Main.fx deve estar aberto em Source Editor; </li></ul></ul><ul><ul><li>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; </li></ul></ul><ul><ul><li>A figura a seguir mostra o arquivo Main.fx aberto no NetBeans; </li></ul></ul>
    18. 18. Primeira aplicação JavaFX Esfera JavaFX
    19. 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. 20. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>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 . </li></ul></ul>
    21. 21. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>O NetBeans acusará um erro pois é necessário importar a classe TextAligment usada para alinhar a aplicação no centro. </li></ul></ul><ul><ul><li>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). </li></ul></ul>
    22. 22. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>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 . </li></ul></ul><ul><ul><li>A figura a seguir mostra o local exato de soltar o código para gerar um círculo. </li></ul></ul>
    23. 23. Primeira aplicação JavaFX Esfera JavaFX
    24. 24. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Modifique o valor das variáveis do círculo para obter o tamanho certo para caber o texto. </li></ul></ul><ul><ul><li>Adicione o RadialGradient ao código do círculo para dar a torná-lo parecido com uma esfera. </li></ul></ul><ul><ul><li>O RadialGradient irá definir a cor da esfera, o raio, a sombra, dando a impressão de um objeto 3D. </li></ul></ul>
    25. 25. Primeira aplicação JavaFX Apenas modifique o código em negrito . Para retirar as mensagens de erro, clique com o botão direito e selecione Fix imports (Ctrl-shift-I). Esfera JavaFX
    26. 26. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Para visualizar a aplicação, clique no ícone Enable Preview. </li></ul></ul>
    27. 27. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>No código a seguir, iremos alterar a cor do texto para amarelo e adicionar um efeito de sombra. </li></ul></ul><ul><ul><li>Adicione as variáveis color e scale, essas variáveis serão utilizadas na animação que iremos criar nos próximos passos. </li></ul></ul>Modifique apenas o código em negrito.
    28. 28. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>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. </li></ul></ul>
    29. 29. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Para corrigir os erros, será necessário importar duas classes. import javafx.scene.effect.DropShadow; </li></ul></ul><ul><ul><li>import javafx.scene.transform.Scale; Ou digite Ctrl-shift-I. </li></ul></ul>
    30. 30. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Clique no botão Enable Preview (Alt-shift-P) para visualizar as modificações do texto. </li></ul></ul>
    31. 31. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Adicione uma animação para fazer o texto mudar de amarelo para verde enquanto gira. </li></ul></ul><ul><ul><li>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. </li></ul></ul>
    32. 32. Primeira aplicação JavaFX Esfera JavaFX
    33. 33. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>A animação ocorre ao longo de uma linha do tempo, representada pelo objeto javafx.animation.Timeline ; </li></ul></ul><ul><ul><li>Cada Timeline contém um ou mais KeyFrames , representados pelos objetos javafx.animation.KeyFrame ; </li></ul></ul><ul><ul><li>Mude o valor da variável time , que está dentro do bloco de código do KeyFrame , para 5s ; </li></ul></ul>
    34. 34. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Arraste o componente Values da seção Animation , para dentro do bloco de código do KeyFrame logo após a variável canSkip ; </li></ul></ul><ul><ul><li>Values define as variáveis alvo e os valores pretendidos para serem definidos durante o tempo especificado no KeyFrame ; </li></ul></ul>
    35. 35. Primeira aplicação JavaFX Esfera JavaFX
    36. 36. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>O código a seguir define os valores que serão alterados durante a animação; </li></ul></ul><ul><ul><li>O código fará com que a cor do texto altere de amarelo para verde durante a execução; </li></ul></ul>
    37. 37. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Finalmente, adicione o método play() ao final do bloco de código do Timeline; </li></ul></ul><ul><ul><li>O método play() inicializa o Timeline e realiza a ações definidas; </li></ul></ul><ul><ul><li>O bloco de código Timeline deve estar igual a figura a seguir; </li></ul></ul>
    38. 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. 39. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>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. </li></ul></ul><ul><ul><li>A primeira aplicação JavaFX está concluída! </li></ul></ul>
    40. 40. <ul><li>Mais informações; </li></ul><ul><li>Downloads; </li></ul><ul><li>Documentação; </li></ul><ul><li>Exemplos; </li></ul><ul><li>Tutoriais completos; </li></ul><ul><li>Acesse os sites: </li></ul><ul><ul><li>http://javafx.com </li></ul></ul><ul><ul><li>https://openjfx.dev.java.net </li></ul></ul>Próximos Passos Get Involved
    41. 41. <ul><li>Treinamento via WEB grátis Java TM , Solaris TM & outros!! </li></ul><ul><ul><li>Visit: http://osum.sun.com </li></ul></ul><ul><ul><li>Acesse o grupo MGJUG e conheça o SAI – Sun Academic Initiative. </li></ul></ul><ul><li>Certificações Sun! </li></ul><ul><ul><li>Sun Certified Associate/Programmer for the Java 2 Platform SE </li></ul></ul><ul><ul><li>Sun Certified Web Component Developer for Java EE </li></ul></ul><ul><ul><li>Sun Certified Mobile Application Developer for Java ME </li></ul></ul><ul><ul><li>Sun Certified System/Network Admin for Solaris Operating System </li></ul></ul><ul><li>Simuladores de exames grátis </li></ul>Próximos Passos Acelere sua carreira com a Sun
    42. 42. Obrigado! <ul><li>[email_address] </li></ul>Criando sua primeira aplicação JavaFX

    ×