Criando sua primeira aplicação JavaFX Daniel Campos Sun Campus Ambassador [email_address]
Agenda O que é JavaFX? Instalando o plugin para NetBeans Primeira aplicação JavaFX Próximos Passos
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;
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;
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;
O que é JavaFX? Comparação Java x JavaFX
Instalando plugin no NetBeans
Plugin JavaFX no NetBeans Instalaçã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:
Plugin JavaFX no NetBeans Instalação
Plugin JavaFX no NetBeans Instalaçã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:
Plugin JavaFX no NetBeans Instalação
Plugin JavaFX no NetBeans Instalaçã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;
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 evento em um certo período de tempo, como mostrado na figura abaixo: Esfera JavaFX
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:
Primeira aplicação JavaFX Esfera JavaFX
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;
Primeira aplicação JavaFX Esfera JavaFX
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.
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 .
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).
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.
Primeira aplicação JavaFX Esfera JavaFX
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.
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
Primeira aplicação JavaFX Esfera JavaFX  Para visualizar a aplicação, clique no ícone Enable Preview.
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.
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.
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.
Primeira aplicação JavaFX Esfera JavaFX  Clique no botão Enable Preview (Alt-shift-P) para visualizar as modificações do texto.
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.
Primeira aplicação JavaFX Esfera JavaFX
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 ;
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 ;
Primeira aplicação JavaFX Esfera JavaFX
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;
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;
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.
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!
Mais informações; Downloads; Documentação; Exemplos; Tutoriais completos; Acesse os sites: http://javafx.com https://openjfx.dev.java.net Próximos Passos Get Involved
Treinamento via WEB grátis  Java TM , Solaris TM  & 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 Passos Acelere sua carreira com a Sun
Obrigado! [email_address] Criando sua primeira aplicação JavaFX

JavaFx - Guia Prático

  • 1.
    Criando sua primeiraaplicação JavaFX Daniel Campos Sun Campus Ambassador [email_address]
  • 2.
    Agenda O queé JavaFX? Instalando o plugin para NetBeans Primeira aplicação JavaFX Próximos Passos
  • 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;
  • 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;
  • 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;
  • 6.
    O que éJavaFX? Comparação Java x JavaFX
  • 7.
  • 8.
    Plugin JavaFX noNetBeans Instalaçã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:
  • 9.
    Plugin JavaFX noNetBeans Instalação
  • 10.
    Plugin JavaFX noNetBeans Instalaçã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:
  • 11.
    Plugin JavaFX noNetBeans Instalação
  • 12.
    Plugin JavaFX noNetBeans Instalaçã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;
  • 13.
  • 14.
    Primeira aplicação JavaFXNeste 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.
    Primeira aplicação JavaFXEsfera 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:
  • 16.
  • 17.
    Primeira aplicação JavaFXEsfera 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;
  • 18.
  • 19.
    Primeira aplicação JavaFXEsfera 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.
    Primeira aplicação JavaFXEsfera 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 .
  • 21.
    Primeira aplicação JavaFXEsfera 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).
  • 22.
    Primeira aplicação JavaFXEsfera 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.
  • 23.
  • 24.
    Primeira aplicação JavaFXEsfera 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.
  • 25.
    Primeira aplicação JavaFXApenas 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.
    Primeira aplicação JavaFXEsfera JavaFX Para visualizar a aplicação, clique no ícone Enable Preview.
  • 27.
    Primeira aplicação JavaFXEsfera 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.
  • 28.
    Primeira aplicação JavaFXEsfera 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.
  • 29.
    Primeira aplicação JavaFXEsfera 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.
  • 30.
    Primeira aplicação JavaFXEsfera JavaFX Clique no botão Enable Preview (Alt-shift-P) para visualizar as modificações do texto.
  • 31.
    Primeira aplicação JavaFXEsfera 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.
  • 32.
  • 33.
    Primeira aplicação JavaFXEsfera 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 ;
  • 34.
    Primeira aplicação JavaFXEsfera 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 ;
  • 35.
  • 36.
    Primeira aplicação JavaFXEsfera 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;
  • 37.
    Primeira aplicação JavaFXEsfera 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;
  • 38.
    Primeira aplicação JavaFXEsfera JavaFX Ao clicar no ícone Enable Preview, você verá o texto da esfera girar enquanto muda a cor de amarelo para verde.
  • 39.
    Primeira aplicação JavaFXEsfera 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!
  • 40.
    Mais informações; Downloads;Documentação; Exemplos; Tutoriais completos; Acesse os sites: http://javafx.com https://openjfx.dev.java.net Próximos Passos Get Involved
  • 41.
    Treinamento via WEBgrátis Java TM , Solaris TM & 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 Passos Acelere sua carreira com a Sun
  • 42.
    Obrigado! [email_address] Criandosua primeira aplicação JavaFX