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
TextField e
Label. 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!
