4 de mar de 2014

Introdução ao FXML: Criando interfaces em JavaFX usando XML e o Scene Builder

Veja aqui um CRUD com JavaFX


Até agora nossas postagem utilizaram código Java na criação das interfaces gráficas(GUI). O uso de Java  pode parecer atrativo a primeira vista, no entanto, o código pode se tornar complexo e de díficil manutenção, mas não é só em Java que podemos criar as telas.
O uso de XML é possível no JavaFX para que possamos criar a GUI de uma aplicação e então referenciar o mesmo no código JavaFX. Os XMLs que contém componentes JavaFX são chamados de FXML.

O modo Java de se fazer interfaces

Digamos que temos uma aplicação que contém um campo de texto, um botão e um campo de texto de leitura com uma saudação ao nome entrado. O código de interface para esse simples programa ficaria como segue:

public class DigaOlaComJava extends Application {

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

 @Override
 public void start(Stage palco) throws Exception {
  final Reflection r = new Reflection();
  final VBox raiz = new VBox(30);
  final HBox hbTopo = new HBox(5);  
  final TextField txtNome = new TextField();
  final Button btnAcao = new Button("Enviar");
  final Label lblMensagem = new Label();
  raiz.setTranslateX(10);raiz.setTranslateY(10);
  lblMensagem.setText("Digite seu nome e clique no botão");
  hbTopo.getChildren().addAll(txtNome, btnAcao);  
  raiz.getChildren().addAll(hbTopo, lblMensagem);
  lblMensagem.setEffect(r);
  Scene cena = new Scene(raiz, 250, 100);
  palco.setTitle("Aplicação usando código Java");
  palco.setScene(cena);
  palco.show();

  btnAcao.setOnAction(new EventHandler() {
   @Override
   public void handle(ActionEvent arg0) {
    lblMensagem.setText("Olá, " + txtNome.getText()
      + ", bem vindo!");
   }
  });
 }
}

Essa é uma aplicação simples, temos poucos componentes e um leiaute muito fácil de se montar. Mas e quando temos aplicações cheia de controles e leiaute complexo?

Usando FXML 

Utilizar XML em interface gráfica não é uma novidade. O Pivot, um framework Java para criação de aplicações desktop, e o Adobe Flex também utilizam esse conceito. A grande vantagem do uso dessa linguagem declarativa está na possibilidade de usar uma ferramenta para a geração da interface e a possibilidade de modificar o XML sem ter que recompilar a aplicação inteira.
O JavaFX traz suporte ao FXML, uma forma de declarar todos os elementos de interface sem escrever uma linha de código de Java. Veja como o programa que demonstramos anteriormente ficaria com FXML(código no github):



Claro que o FXML também pode ser complexo e gigante, já falamos mais sobre isso. No código Java acima é fácil adicionar ações ao botão e manipular os elementos da interface. Mas como fazer com FXML?

O controller de um FXML

A lógica e o tratamento de eventos em uma aplicação JavaFX que usa FXML fica em uma classe que referênciamos no próprio FXML, essa classe é chamada de controller. Nessa classe podemos referenciar os elementos declarados no FXML para manipulação deles, látambém declaramos o método que irá tratar os eventos. Veja como fica o FXML completo e pronto para uso com o nosso controller



O código do controller ControleAplicacao está mais abaixo e ele tem declarado campos correspondentes ao nosso TextFieldLabel. Notem que usamos a anotação @FXML no campo, é ela que informa o nome do mesmo e o JavaFX injeta o campo declarado lá no XML para nosso uso aqui! Veja o método atualizaMensagem também, é ele que é invocado quando clicamos no botão.

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class ControleAplicacao {

 @FXML
 Label lblMensagem;

 @FXML
 TextField txtNome;

 public void atualizaMensagem() {
  lblMensagem.setText("Olá, " + txtNome.getText() + ", bem vindo!");
 }
}

Executando sua aplicação com FXML

Nesse momento, nossa aplicação está funcionando. Só precisamos carregar o FXML e isso é feito através da classe FXMLLoader, que lê o nosso arquivo .fxml e retorna um objeto do tipo Parent. Com ele é possível configurar a raiz da cena da aplicação, veja:

public class DigaOlaComFXML extends Application {

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

 @Override
 public void start(Stage palco) throws Exception {
  URL arquivoFXML = getClass().getResource(
    "./ola-mundo.fxml");
  Parent fxmlParent = (Parent) FXMLLoader.load(arquivoFXML);
  palco.setScene(new Scene(fxmlParent, 300, 100));
  palco.setTitle("Olá mundo com FXML");
  palco.show();
 }
}

Criando interfaces visualmente com o Scene Builder

Falamos que com Java o projeto poderia ficar muito complexo, mas você pode perceber que o XML não é lá aquelas facilidades... Felizmente temos uma ferramenta onde podemos arrastar e soltar componentes para desenhar nossa tela. Em seguida, exportamos um arquivo .fxml para uso em nossa aplicação JavaFX! Veja uma imagem da ferramenta. (mais imagens e informações nesse blog)



Em uma postagem futura iremos trazer mais detalhes com relação ao uso do Scene Builder. O download pode ser feito no site da Oracle.O Scenebuilder deve ser baixado no site da empresa Gluon.

Vídeo

Abaixo um vídeo demonstrando o que falamos nesse breve artigo.


Conclusão

Criar interfaces com  FXML traz agilidade e facilidade na criação de aplicações em JavaFX, além de forçar o usuário a separar bem sua lógica da construção da GUI.

 O código da aplicação está no Github!

9 comentários:

  1. Bom dia!

    Poderia informar como poderia chamar outra cena no mesmo stage usando um botão?

    ResponderExcluir
    Respostas
    1. Olá,

      Por gentileza, use nosso grupo para postar dúvidas:

      https://groups.google.com/forum/#!forum/javafx-br

      Obrigado!

      Excluir
  2. "Layout", você esta escrevendo errado...

    ResponderExcluir
    Respostas
    1. Olá,

      Existe Leiaute sim: http://michaelis.uol.com.br/moderno/portugues/index.php?palavra=leiaute

      Excluir
  3. Boa noite, gostaria de saber como eu desenvolvo um simples programa para fazer uma chamada de transmissão de áudio e vídeo em tempo real para outra pessoa me ver.

    ResponderExcluir
    Respostas
    1. Olá, vc vai ter que mexer com stream e abrir um player de vídeo. TEm material aqui no blog mesmo. Qualquer coisa posta no grupo JavaFX-BR!

      Valeu e boa sorte

      Excluir
  4. Estou com esse erro, me da um help ai =/


    Exception in Application start method
    java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:497)
    at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
    at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:497)
    at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:767)
    Caused by: java.lang.RuntimeException: Exception in Application start method
    at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$152(LauncherImpl.java:182)
    at com.sun.javafx.application.LauncherImpl$$Lambda$50/1327763628.run(Unknown Source)
    at java.lang.Thread.run(Thread.java:745)
    Caused by: java.lang.NullPointerException: Location is required.
    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3211)
    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3179)
    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3152)
    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3128)
    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3108)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:3101)
    at main.DigaOlaComFXML.start(DigaOlaComFXML.java:21)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$159(LauncherImpl.java:863)
    at com.sun.javafx.application.LauncherImpl$$Lambda$53/1490405881.run(Unknown Source)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$172(PlatformImpl.java:326)
    at com.sun.javafx.application.PlatformImpl$$Lambda$45/1685538367.run(Unknown Source)
    at com.sun.javafx.application.PlatformImpl.lambda$null$170(PlatformImpl.java:295)
    at com.sun.javafx.application.PlatformImpl$$Lambda$48/1356972795.run(Unknown Source)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$171(PlatformImpl.java:294)
    at com.sun.javafx.application.PlatformImpl$$Lambda$47/485815673.run(Unknown Source)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.lambda$null$145(WinApplication.java:101)
    at com.sun.glass.ui.win.WinApplication$$Lambda$36/1673605040.run(Unknown Source)
    ... 1 more
    Exception running application main.DigaOlaComFXML
    Java Result: 1

    ResponderExcluir
    Respostas
    1. Eita! Qual código que dá esse erro? Tenho que repetir esse na minha máqiuna pra saber o que está acontecendo!!

      Excluir
  5. Olá William, muito bom seu blog, realmente tem coisas incríveis aqui!
    Estou estudando java a um bom tempo mas fazem só 6 meses que comecei a estudar JavaFX, e gosto de aprender essas funcionalidades diferentes, agradeço muito pelos conteúdos que você posta!

    Obs. Acho legal a idéia de você criar um canal, porém algo mais profissional, qualquer ajuda estamos ai!

    ResponderExcluir