18 de jul. de 2012

Sua primeira aplicação em JavaFX usando Eclipse

Para aprender como iniciar com o JavaFX 8, vejam esse artigo

Veja um CRUD completo com JavaFX 8!


Nessa primeira postagem vamos mostrar um passo a passo de como executar sua primeira aplicação usando JavaFX 2!
Vamos direto ao assunto, abaixo o que você precisa para seguir esse texto:


  • Eclipse (não há preferência de versão, mas eu irei usar o Indigo para Java EE);
  • Baixe o SDK do JavaFX no site da Oracle.


Ótimo! Já temos tudo o que precisamos. O próximo passo agora é abrir o Eclipse e criar um projeto do tipo Java Project(1). Nesse projeto iremos criar um pacote(2) e nele uma classe Java(3).

  1. Acesse o menu
  2. File -> New -> Java Project, dê um nome (no meu caso ola-javafx) e clique em Finish. 
  3. Clique com o botão direto sobre o seu projeto e acesse o menu New -> Package, dê um nome (no meu caso main) e em seguida clique em Finish.
  4. Clique com o botão direito no pacote main e acesse o menu New -> Class. Dê um nome para a classe (eu usei Main) e clique em Finish.
Agora você deve configurar a biblioteca do JavaFX(1), adicionar o JAR(2) e assim referenciar no seu projeto(3). Uma vez feito isso, todas as classes serão reconhecidas no seu código e você poderá compilar/executar sua aplicação JavaFX

  1. Acesse o menu Windows -> Preferences. Na árvore no lado esquerdo, escolha Java -> Build Path -> User Libraries e clique em New... dê um nome para a biblioteca (eu usei JAVAFX) e clique em OK.
  2. Clique sobre a biblioteca criada e então clique em Add JARs..., navegue até a instalação do JavaFX(no Windows, o SDK deverá ficar em C:\Program Files\Oracle\JavaFX 2.1 SDK) e procure o JAR jfxrt.jar (geralmente na pasta lib). Clique em Ok.
  3. Clique com o botão direito sobre o seu projeto e acesse o menu Build Path -> Add Libraries..., vai aparecer um diálogo. Escolha User Libraries e na tela seguinte marque a recém criada biblioteca do JavaFX e clique em Finish.
Perfeito, agora é hora de código. Nesse primeiro "post" vou simplesmente colar o código aqui e explicar brevemente o mesmo. Veja abaixo o código completo da classe Main e note que temos comentários numerados. Eles marcam os pontos mais importantes do código e explicarei na lista numerada a seguir.

package main;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application { // 1

 public static void main(String[] args) {
  launch(); // 2
 }

 @Override
 public void start(Stage palco) throws Exception { // 3
  StackPane raiz = new StackPane(); // 4
  Label lblMensagem = new Label(); // 5

  lblMensagem.setText("Estou aprendendo JavaFX!"); // 6
  raiz.getChildren().add(lblMensagem); // 7

  Scene cena = new Scene(raiz, 250, 100); // 8
  palco.setTitle("Aprendendo JavaFX"); // 9
  palco.setScene(cena); // 10
  palco.show(); // 11

 }
}
  1. Perceba que a classe principal herda de javafx.application.Application. Toda classe principal de JavaFX deve herdar de Application e implementar o método start;
  2. No método main chamamos o método lunch para começar a nossa aplicação. Aqui não vai código JavaFX, o código vai no método start;
  3. A implementação do método start, herdado da classe Application. O atributo recebido é do tipo Stage. Bruscamente falando, podemos ver o Stage (palco) como o frame, a janela da nossa aplicação, mas na verdade ele não pode ser representado sim se pensarmos nos diversos dispositivos que podem rodar(em um futuro próximo) JavaFX: Celulares, televisores, "tablets", etc;
  4. Nesse ponto nós criamos um elemento chamado "pai", pois permite adicionarmos outras coisas dentro dele. No nosso caso, o StackPane permite adicionar vários elementos os quais tem seu leiaute de pilha, ou seja, eles serão empilhados um sobre o outro. No futuro falaremos mais sobre isso, mas lembre-se que tudo no JavaFX é um nó, ou seja, herda da classe Node;
  5. Não há nada de mais aqui, simplesmente criamos um objeto do tipo Label, que é um controle de interface para mostrar texto. Ponto;
  6. Aqui informamos o texto que o Label irá mostrar. Note que isso poderia ter sido feito pelo construtor, na criação do Label;
  7. Como o StackPane é um elemento pai, ele também tem elementos filhos. Nessa linha de código, recuperamos os filhos dele(getChildren()) e adicionamos nosso Label(add(Node)), fazendo que o Label seja um filho dele;
  8. É hora de aprender outro conceito do JavaFX. Nessa linha criamos uma Scene(cena). Uma cena é o contâiner principal de todos os elementos do JavaFX e na criação dela aproveitamos para informar a raiz (como o nome diz, a raiz de todos os componentes), largura e altura da cena;
  9. Agora vamos voltar a mexer com nosso palco. Nessa linha informamos o título dele, no nosso caso atual, o título da janela que será mostrada;
  10. O palco precisa de uma cena, simplesmente é isso que é feito nessa linha.
  11. Simplesmente mostrando o palco! Se esse método não for chamado, nada irá acontecer quando executar esse código.
Ufa, agora a melhor parte: executar e ver o resultado! Execute[1] o código e deverá ver uma janela como abaixo.
  1. Com a classe Main aberta, simplesmente segure Ctrl e aperte F11.

Conforme pode ver, não é muito difícil usar JavaFX. Ok, pode parecer, mas mais umas 5 aplicações e você já ficará fera nessa nova biblioteca gráfica da plataforma Java. Vou tentar manter um post por semana e esse mesmo estilo de tutorial, espero ter agradado vocês!

16 comentários:

  1. Valeu Willian, eu estava tendo dificuldade em utilizar o JavaFX no eclipse, mas agora ficou tudo mais fácil. Estou querendo investir no aprendizado do JavaFX e vi que aqui é o lugar certo.

    ResponderExcluir
  2. Legal William, ainda não testei pois a empresa está fechando o expediente, mas irei testar. Tenho todos meus projetos criados no Eclipse e não queria ter que criar um projeto no NetBeans pelas facilidade de integração entre os aplicativos.
    Estou usando o Scene Builder para criar o fxml e espero que depois você poste material que inclua o controller criado no Eclipse, para eu ter uma base! Muito bom o blog!

    ResponderExcluir
    Respostas
    1. Para ficar mais simples para você, crie o primeiro projeto no netbens usando o exemplo contendo FXML e depois importe o projeto para o Eclipse.
      Segue o link de um tutorial de importação: http://www.ehow.com.br/converter-projeto-netbeans-eclipse-como_45375/
      Espero ter ajudado.

      Excluir
  3. Bacana o post. Parabéns.

    Acompanho o blog.

    ResponderExcluir
  4. Parabéns, tudo bem detalhado e os passos das instruções no próprio código.

    ResponderExcluir
  5. Gostaria de saber se seria possível um artigo com o uso da porta serial e javafx...
    Obrigado pelo atual artigo.

    ResponderExcluir
  6. Não consigo baixar o JavaFX SDK.
    Estou usando o JDK 1.8.0_31

    ResponderExcluir
    Respostas
    1. Olá,

      O java 8 da Oracle já vem com JavaFX! Não precisar baixar nada, só sair programando em JavaFX!

      Excluir
  7. Cara, muito obrigado, estava precisando de um tutorial assim pra saber por onde e como começar a estudar.
    Mas ainda não entendi muito algumas definições, Fazendo uma alusão ao Swing:
    o StackPane seria a JFrame? o Scene seria o Panel ou o Layout?
    Se puder me responder com algumas comparações seria melhor para minha compreensão.
    Valeu.

    ResponderExcluir
    Respostas
    1. O JFrame seria o Stage e o StackPane um painel qualquer como os que encontramos no Swing. Já o Scene é meio específico do JavaFX e é onde colocamos nossos components - a casca.

      Excluir
  8. Willian, boa tarde. Muito boa a explicação.

    ResponderExcluir
  9. Cara voce está ajudando muito até hoje, há muito pouco material sobre isso na internet e o seu é excelente! Obrigado!

    ResponderExcluir