Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Criando sua primeira aplicação JavaFX <ul>Daniel Campos </ul>Sun Campus Ambassador [email_address] [email_address]
Agenda <ul><li>O que é JavaFX?
Instalando o plugin para NetBeans
Primeira aplicação JavaFX
Próximos Passos </li></ul>
O que é JavaFX? <ul><li>É 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; </li></ul>
O que é JavaFX? JavaFX Mobile e JavaFX Script <ul><li>JavaFX Mobile: </li><ul><li>Sistema de software completo para dispos...
disponível para operadoras, fabricantes de telefones e outras empresas; </li></ul><li>JavaFX Script: </li><ul><li>Linguage...
Sintaxe simplificada;
É diferente do Java tradicional; </li></ul></ul>
O que é JavaFX? JavaFX Mobile e JavaFX Script <ul><ul><li>Possui plugins para NetBeans e eclipse;
Desenvolvimento para diversos dispositivos como: set-top boxe, dispoitivos móveis, desktop e até mesmo discos Blu-ray;  </...
O que é JavaFX? Comparação Java x JavaFX
Instalando plugin no NetBeans
Plugin JavaFX no NetBeans Instalação  <ul><li>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: </li></ul>
Plugin JavaFX no NetBeans Instalação
Plugin JavaFX no NetBeans Instalação  <ul><ul><li>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: </li></ul></ul>
Plugin JavaFX no NetBeans Instalação
Plugin JavaFX no NetBeans Instalação  <ul><ul><li>O guia de instalação do NetBeans aparecerá, clique em next e aceite os t...
Após a instalação o NetBeans deve ser reinicializado;
Pronto! Podemos partir para a nossa primeira aplicação JavaFX; </li></ul></ul>
Primeira aplicação JavaFX
Primeira aplicação JavaFX Neste exemplo, iremos criar uma simples esfera que altera a cor de seu texto enquanto realiza um...
Primeira aplicação JavaFX Esfera JavaFX  <ul><ul><li>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: </li></ul></ul>
Primeira aplicação JavaFX Esfera JavaFX
Primeira aplicação JavaFX Esfera JavaFX  <ul><ul><li>O projeto está aberto no NetBeans;
O arquivo Main.fx deve estar aberto em Source Editor;
Upcoming SlideShare
Loading in …5
×

Java Fx Guia De IntroduçãO

3,674 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Java Fx Guia De IntroduçãO

  1. 1. Criando sua primeira aplicação JavaFX <ul>Daniel Campos </ul>Sun Campus Ambassador [email_address] [email_address]
  2. 2. Agenda <ul><li>O que é JavaFX?
  3. 3. Instalando o plugin para NetBeans
  4. 4. Primeira aplicação JavaFX
  5. 5. Próximos Passos </li></ul>
  6. 6. O que é JavaFX? <ul><li>É uma nova família de produtos baseada na tecnologia Java;
  7. 7. Apresentado pela Sun em Maio/2008;
  8. 8. Versão 1.0 lançada em dezembro/2008;
  9. 9. Desenvolvido para implementação de RIA - Rich Internet Applications, ou seja, aplicações ricas para internet;
  10. 10. Concorrentes: Adobe Flex e MS Silverlight;
  11. 11. Dois produtos foram anunciados: JavaFX Mobile e JavaFX script; </li></ul>
  12. 12. O que é JavaFX? JavaFX Mobile e JavaFX Script <ul><li>JavaFX Mobile: </li><ul><li>Sistema de software completo para dispositivos móveis;
  13. 13. disponível para operadoras, fabricantes de telefones e outras empresas; </li></ul><li>JavaFX Script: </li><ul><li>Linguagem de script orientada a objeto;
  14. 14. Sintaxe simplificada;
  15. 15. É diferente do Java tradicional; </li></ul></ul>
  16. 16. O que é JavaFX? JavaFX Mobile e JavaFX Script <ul><ul><li>Possui plugins para NetBeans e eclipse;
  17. 17. Desenvolvimento para diversos dispositivos como: set-top boxe, dispoitivos móveis, desktop e até mesmo discos Blu-ray; </li></ul></ul>
  18. 18. O que é JavaFX? Comparação Java x JavaFX
  19. 19. Instalando plugin no NetBeans
  20. 20. Plugin JavaFX no NetBeans Instalação <ul><li>Inicialize o NetBeans 6.5;
  21. 21. Selecione o menu Tools > Plugins;
  22. 22. Na janela Plugins, na aba Settings ative todas as caixas de seleção, como mostrado na figura seguinte: </li></ul>
  23. 23. Plugin JavaFX no NetBeans Instalação
  24. 24. Plugin JavaFX no NetBeans Instalação <ul><ul><li>Selecione a aba Available Plugins;
  25. 25. Digite JavaFx no campo Search;
  26. 26. O NetBeans listará todos os plugins disponíveis;
  27. 27. Marque todas as opções;
  28. 28. Clique em Install;
  29. 29. A sua tela deve estar parecida com a figura seguinte: </li></ul></ul>
  30. 30. Plugin JavaFX no NetBeans Instalação
  31. 31. 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;
  32. 32. Após a instalação o NetBeans deve ser reinicializado;
  33. 33. Pronto! Podemos partir para a nossa primeira aplicação JavaFX; </li></ul></ul>
  34. 34. Primeira aplicação JavaFX
  35. 35. 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
  36. 36. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>No NetBeans, selecione File > New Project (Ctrl + Shift + N);
  37. 37. Na janela New Project, selecione a pasta JavaFX > JavaFX Script Application;
  38. 38. Escolha o nome e a localização do projeto e clique em Finish;
  39. 39. A janela deve estar parecida com a figura seguinte: </li></ul></ul>
  40. 40. Primeira aplicação JavaFX Esfera JavaFX
  41. 41. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>O projeto está aberto no NetBeans;
  42. 42. O arquivo Main.fx deve estar aberto em Source Editor;
  43. 43. 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;
  44. 44. A figura a seguir mostra o arquivo Main.fx aberto no NetBeans; </li></ul></ul>
  45. 45. Primeira aplicação JavaFX Esfera JavaFX
  46. 46. 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.
  47. 47. 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>
  48. 48. 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.
  49. 49. 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>
  50. 50. 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 .
  51. 51. A figura a seguir mostra o local exato de soltar o código para gerar um círculo. </li></ul></ul>
  52. 52. Primeira aplicação JavaFX Esfera JavaFX
  53. 53. 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.
  54. 54. Adicione o RadialGradient ao código do círculo para dar a torná-lo parecido com uma esfera.
  55. 55. O RadialGradient irá definir a cor da esfera, o raio, a sombra, dando a impressão de um objeto 3D. </li></ul></ul>
  56. 56. 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
  57. 57. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Para visualizar a aplicação, clique no ícone Enable Preview. </li></ul></ul>
  58. 58. 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.
  59. 59. 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.
  60. 60. 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>
  61. 61. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Para corrigir os erros, será necessário importar duas classes. import javafx.scene.effect.DropShadow;
  62. 62. import javafx.scene.transform.Scale; Ou digite Ctrl-shift-I. </li></ul></ul>
  63. 63. 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>
  64. 64. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Adicione uma animação para fazer o texto mudar de amarelo para verde enquanto gira.
  65. 65. 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>
  66. 66. Primeira aplicação JavaFX Esfera JavaFX
  67. 67. 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 ;
  68. 68. Cada Timeline contém um ou mais KeyFrames , representados pelos objetos javafx.animation.KeyFrame ;
  69. 69. Mude o valor da variável time , que está dentro do bloco de código do KeyFrame , para 5s ; </li></ul></ul>
  70. 70. 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 ;
  71. 71. Values define as variáveis alvo e os valores pretendidos para serem definidos durante o tempo especificado no KeyFrame ; </li></ul></ul>
  72. 72. Primeira aplicação JavaFX Esfera JavaFX
  73. 73. 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;
  74. 74. O código fará com que a cor do texto altere de amarelo para verde durante a execução; </li></ul></ul>
  75. 75. Primeira aplicação JavaFX Esfera JavaFX <ul><ul><li>Finalmente, adicione o método play() ao final do bloco de código do Timeline;
  76. 76. O método play() inicializa o Timeline e realiza a ações definidas;
  77. 77. O bloco de código Timeline deve estar igual a figura a seguir; </li></ul></ul>
  78. 78. 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.
  79. 79. 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.
  80. 80. A primeira aplicação JavaFX está concluída! </li></ul></ul>
  81. 81. <ul><li>Mais informações;
  82. 82. Downloads;
  83. 83. Documentação;
  84. 84. Exemplos;
  85. 85. Tutoriais completos;
  86. 86. Acesse os sites: </li></ul><ul><ul><li>http://javafx.com
  87. 87. https://openjfx.dev.java.net </li></ul></ul>Próximos Passos Get Involved
  88. 88. <ul><li>Treinamento via WEB grátis Java TM , Solaris TM & outros!! </li></ul><ul><ul><li>Visit: http://osum.sun.com
  89. 89. Acesse o grupo UNI-BH 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
  90. 90. Sun Certified Web Component Developer for Java EE
  91. 91. Sun Certified Mobile Application Developer for Java ME
  92. 92. 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
  93. 93. Obrigado! [email_address] [email_address] Criando sua primeira aplicação JavaFX

×