Iniciando no JavaFX

Image

Já desenvolvi bastante usando Swing. De tanto ver interfaces horríveis feitas nos softwares de criação de interface gráfica, fiquei com medo e fugi para o GridBagLayout. Cheguei inclusive a fazer alguns componentes na unha, às vezes desenhando tudo com o Graphics2D. Tudo ia bem, até que surgiu o JavaFX, finalmente com uma carinha mais bonita e prometendo facilitar bastante a parte visual. No início, era só uma linguagem de script chatinha, mas a versão 2 já está bem legal de usar. Para comprovar isso, vou mostrar neste post como criar uma tela bem básica.

Instalação:

Para começar, é preciso instalar o Java (JDK 7), um IDE e o JavaFX Scene Builder:

Criando o Projeto no NetBeans:

Para começar, abra o NetBeans e crie crie um novo projeto JavaFX com FXML (Figura 1).

 1-1

1-2

1-3

Figura 1 – Criando projeto JavaFX com FXML.

Você terá um projeto com três arquivos (Figura 2): Main.java, que contém o código necessário para iniciar o programa; TelaLogin.fxml, que contém a aparência da tela, e; TelaLoginController.java, que, em resumo, cuidará das ações após cliques nos botões.

1-4

Figura 2 – Projeto recém criado.

Clique com o botão direito no arquivo FXML (TelaLogin.fxml) e depois clique em “Abrir” (Figura 3). O JavaFX Scene Builder abrirá automaticamente, e terá apenas um botão em uma tela branca.

1-5

Figura 3 – Abrindo o FXML no JavaFX Scene Builder.

Criando a Interface Gráfica:

No Scene Builder, você verá uma lista de componentes à esquerda, no painel “Container”. Á medida que for arrastando para a tela no centro, eles irão aparecer no painel “Hierarchy”. Você também pode arrastar os componentes diretamente para o “Hierarchy”.

Para o nosso exemplo, adicione os componentes no painel “Hierarchy”, de cima para baixo como aparecem na Figura 4.

1-6

Figura 4 – Hierarquia de componentes, tela e campo fx:id.

Você pode brincar um pouco com os tamanhos e posições dos componentes (no centro) e com as inúmeras propriedades dos componentes (no painel à direita). Nesta etapa, não precisa embelezar muito, pois podemos utilizar CSS para isso mais adiante.

Após adicionar os componentes, realize uma busca pela propriedade “id”, no campo “Inspector” (em cima à direita). Adicione os IDs para os componentes mais importantes da tela:

  • PasswordField – fx:id campoSenha
  • TextField – fx:id campoUsuario
  • Label – fx:id labelMensagem

Agora, realize a busca pela propriedade “action”, e adicione uma ação para o botão e outra para o link.

  • Button (“Entrar”) – entrarAction
  • Hyperlink (“Esqueci minha senha”) – esqueciMinhaSenhaAction

Algumas mensagens aparecerão em um quadrinho amarelo, em cima. Por enquanto, ignore-as.

Salve o projeto em “File > Save (Ctrl+S)”

Integrando a tela com o código:

Voltando à tela do NetBeans, é necessário adicionar os componentes e as ações ao controlador. Clique duas vezes na classe TelaLoginController.java e adicione o código referente aos componentes e aos métodos:

 @FXML private TextField campoUsuario;
 @FXML private PasswordField campoSenha;
 @FXML private Label labelMensagem;

 @FXML private void entrarAction(ActionEvent event) {
   System.out.println("Realizando login para usuário \""+campoUsuario.getText()+"\", senha \""+campoSenha.getText()+"\".");
   labelMensagem.setText("Bem vindo, "+campoUsuario.getText()+"!");
 }
 @FXML private void esqueciMinhaSenhaAction(ActionEvent event) {
   labelMensagem.setText("Sua senha será enviada por e-mail.");
 }

(Nota: Se clicar com o botão direito no FXML (TelaLogin.fxml) e selecionar “Controlador Make” funcionar com vocês, me avisem!)

Ou seja, para adicionar um componente que deverá ser acessado pelo código:

  1. no Scene Builder, insira o fx:id no componente
  2. na classe de controle, crie um atributo privado com o mesmo id e use a anotação @FXML

Para relacionar um botão a um método:

  1. no Scene Builder, escreva o nome do método em onAction
  2. na classe de controle, crie um método com o mesmo nome com a anotação @FXML e recebendo o parâmetro ActionEvent

Rodando a aplicação:

Na classe Main.java, adicione um código para colocar um título na janela, como por exemplo:

 Scene scene = new Scene(root);
 stage.setTitle("Login - Matruskan");

Para rodar, basta apertar F6. O código será compilado e a janela aparecerá (Figura 5).

jfx4

Figura 5 – A demonstração de JavaFX rodando!

Para ir além:

Em breve:

  • JavaFX + CSS
  • JavaFX + Facebook & Twitter
  • JavaFX + Animações
  • Autenticação do usuário: JavaFX + Hibernate + MySQL
  • Autenticação do usuário: Login com WebServices

Links relacionados:

Anúncios
Marcado com: , , ,
Publicado em JavaFX
3 comentários em “Iniciando no JavaFX
  1. camila disse:

    😉 curiosa por mais!

  2. O controlador MAKE funcionou perfeitamente

    • Matruskan disse:

      Obrigado por participar, Marcelo!
      Clicar com o botão direito no arquivo FXML e selecionar o comando “Controlador Make” é uma forma rápida para criar os botões, labels, actions, etc, automaticamente no controlador.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: