O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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;
Próximos SlideShares
Carregando em…5
×

Java Fx Guia De IntroduçãO

3.657 visualizações

Publicada em

Publicada em: Tecnologia, Negócios
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×