Java FX criando tela básica com Scene Builder

Olá a todos, estou meio enrolado ultimamente, já estou estudando para começar o TCC (estou no terceiro ano).
Hoje vou fazer um exemplo simples utilizando o Java FX com o JDK8, o Java FX veio com o JDK7, porém ele era um pouco “imaturo” nessa época. Hoje com o JAVA 8 as coisas estão melhores e mais tranquilas.

Para quem quiser baixar a versão que estou utilizando é a 2.0 que está nesse link aqui

Depois de instalar a parada você vai se deparar com essa telinha.

scenebuilder

Do lado Esquerdo podemos ver a palleta com os componentes que estão categorizados entre:

  • Containers
  • Controls
  • Menu
  • Miscellaneous
  • Shape
  • Charts
  • 3D

 

Depois podemos ver abaixo a divisória Document onde temos Hierarchy e Controller.

Ao centro temos a área de trabalho efetiva, onde os componentes ficam e a mágica acontece.

A direita temos a divisória Inspector onde temos Properties, Layout e Code.

 

Bem vamos começar colocando o nosso painel, vamos utilizar o GridPane (divisória Container)

gridpane

Vamos adicionar dois Labels e um TextField e um Button (divisória Controls)

telacomcomponentes

Agora vamos clicar com o botão direito em cima do Label de cima e ir em GridPane e depois clicar em Increase Collumn Span. Estamos aumentando o espaçamento desse componente em específico para ocupar duas colunas.

Também é possível alterar o Collumn Span e Row Span na divisória de Layout.

outraFormademudarrowspan

Recomendo que brinque com as propriedades e possibilidades que o programa fornece.

Vamos agora nomear os nossos componentes e colocar os devidos textos tudo isso na divisória Properties.

Clique no Label de cima e depois na divisória Properties. Nela vamos deixar o texto vazio (atributo Text). Com o mesmo Label selecionado vá na divisória Code. Nessa divisória é onde são definidos os eventos e o fx:id que será o nome que sua classe Java irá manipular esse componente. Vamos colocar o fx:id como “texto”

No próximo Label vamos colocar somente a descrição Nome: no atributo Text da divisória Properties.

Agora vamos configurar nosso TextField, vamos na divisória Code e colocar seu fx:id como “nome”.

E por último vamos configurar o Button, colocando seu fx:id como “botao” seu onAction na mesma divisória como “botaoClicado”, ele será o evento que o clique do botão vai disparar e seu Text com o texto “Enviar”.

Para finalizar a parte da criação da tela vamos setar a Controller Class como “TelaController”

controller

Vou prosseguir com o Tutorial sem nenhuma IDE.

Com a tela pronta vamos gravar ela com o nome “Tela.fxml” na mesma pasta onde ficarão os arquivos fonte.

Vamos agora criar nossa classe TelaController.javaVamos copiar o código gerado pelo SceneBuilder. Clicamos no menu lá em cima em View depois em Show Sample Controller Skeleton.***Dica verifique se o import javafx.event.ActionEvent; está no “TelaController.java”, caso não tenha coloque ele junto dos outros imports.

Feito isso vamos agora criar o arquivo fonte que vai carrecar essa nossa tela, ele se chamará “Main.java”.

import java.io.IOException;
import java.util.Locale;
import java.util.ResourceBundle;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.SceneBuilder;
import javafx.stage.Stage;

public class Main extends Application {

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

	public void start(Stage primaryStage) throws IOException {
		primaryStage.setScene(SceneBuilder.create()
			.root(FXMLLoader. load( Main.class.getResource("Tela.fxml") ) ).width(800).height(600).build() );
		primaryStage.show();
	}
}

Se você compilar as duas classes usando o comando javac e gerando os Main.class e TelaController.class, você já consegue executar sua tela com o comando java Main.
Caso não saiba o que é o comando java e javac e como se configura a JDK recomendo esses dois links. Link 1Link 2

Para finalizar basta editar nosso “TelaController.java” e trocar o método botaoClicado por esse:

@FXML
void botaoClicado(ActionEvent event) {
   texto.setText("Olá "+nome.getText()+", seja bem vindo ao JavaFx");
}

Não esqueça de recompilar os arquivos .java e testar.
Qualquer dúvida só comentar.

Anúncios

Um comentário sobre “Java FX criando tela básica com Scene Builder

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