24 de abr de 2014

Usando Tabelas com JavaFX: TableView

Um dos controles mais utilizados em aplicações cotidianas é a Tabela. Com controles que permitam visualizar dados em forma de tabelas podemos mostrar: lista de funcionários, de produtos, dados já ordenados em planilhas, informações diversas que vêm de algum servidor.
Nesse aspecto, estamos bem "servidos" com o TableView do JavaFX. A TableView, juntamente com a classe TableColumn, facilita visualizações de dados em uma aplicação JavaFX.
Nesse artigo, iremos mostrar o básico sobre criação de tabelas usando JavaFX.

Visão geral da classe TableView 

TableView é mais um controle de interface. Para começarmos falando dela, veja a seguinte imagem:



Uma tabela tem colunas e linhas. Quando configuramos as colunas de uma TableView, temos que também dizer como cada coluna vai representar os dados da tabela.

Itens

Os dados devem ser do tipo da declaração da tabela. Por exemplo, se declaramos uma tabela usando:

TableView<Pessoa> tabela = new TableView<>();

A tabela só irá aceitar dados do tipo Pessoa: 

List<Pessoa> pessoas = ....
tabela.setItems(FXCollections.observableArrayList(pessoas));

Caso você tente inserir dados de outro tipo, simplesmente você terá um erro de compilação.

Colunas

As colunas são definidades pela classe TableColumn e devem saber lidar com cada linha da tabela. Isso é feito através de fábricas de células, que são classes que recebem cada item da tabela e retornam uma célula da tabela. A fábrica você deve fornecer ou usar algumas colunas que já sabem fabricar as células de um tipo já conhecido. Veja um exemplo onde criamos colunas para as propriedades nome, idade e email de uma pessoa:

TableColumn<Pessoa, String> colunaNome = new TableColumn<>("Nome");
TableColumn<Pessoa, String> colunaIdade = new TableColumn<>("Idade");
TableColumn<Pessoa, String> colunaEmail = new TableColumn<>("E-mail");
tabela.getColumns().addAll(colunaNome, colunaIdade, colunaEmail);

Por exemplo, para acessar as propriedades do objeto Pessoa, podemos usar uma fábrica pronta, a PropertyValueFactory. Abaixo criamos as fábricas para as propriedades (atributos) da classe pessoa, note a String que ele recebe no construtor que é o nome da propriedade que declaramos na classe:

colunaNome.setCellValueFactory(new PropertyValueFactory<>("nome"));
colunaIdade.setCellValueFactory(new PropertyValueFactory<>("idade"));
colunaEmail.setCellValueFactory(new PropertyValueFactory<>("email"));

Um exemplo completo de uso da TableView

Abaixo temos um código simples que mostra como mostrar uma lista de pessoas em uma TableView. Veja que não é nada sofisticado, mas com esse código, você já estará apto a construir suas próprias aplicações que usam tabelas.

import java.util.Arrays;
import java.util.List;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;

/**
 *
 * @author william
 */
public class Post13Tabelas extends Application {

    @Override
    public void start(Stage primaryStage) {
        List pessoas = Arrays.asList(
                new Pessoa("William", 32, "william@email.com"),
                new Pessoa("Luana", 17, "luana@email.com"),
                new Pessoa("Maria", 12, "maria@email.com"),
                new Pessoa("João", 15, "joao@email.com"),
                new Pessoa("Antônio", 28, "antonio@email.com"),
                new Pessoa("Teles", 17, "teles@email.com"),
                new Pessoa("Eduan", 30, "eduan@email.com"),
                new Pessoa("Gabu", 22, "gabu@email.com")
        );

        TableView tabela = new TableView<>();
        TableColumn colunaNome = new TableColumn<>("Nome");
        TableColumn colunaIdade = new TableColumn<>("Idade");
        TableColumn colunaEmail = new TableColumn<>("E-mail");

        colunaNome.setCellValueFactory(new PropertyValueFactory<>("nome"));
        colunaIdade.setCellValueFactory(new PropertyValueFactory<>("idade"));
        colunaEmail.setCellValueFactory(new PropertyValueFactory<>("email"));

        tabela.setItems(FXCollections.observableArrayList(pessoas));
        tabela.getColumns().addAll(colunaNome, colunaIdade, colunaEmail);
        
        primaryStage.setScene(new Scene(tabela));
        primaryStage.setWidth(250);
        primaryStage.setHeight(300);
        primaryStage.setTitle("Tabelas no JavaFX");
        primaryStage.show();
    }

    public static class Pessoa {

        private String nome;
        private int idade;
        private String email;

        public Pessoa(String nome, int idade, String email) {
            this.nome = nome;
            this.idade = idade;
            this.email = email;
        }

        public String getNome() {
            return nome;
        }

        public void setNome(String nome) {
            this.nome = nome;
        }

        public int getIdade() {
            return idade;
        }

        public void setIdade(int idade) {
            this.idade = idade;
        }

        public String getEmail() {
            return email;
        }

        public void setEmail(String email) {
            this.email = email;
        }

    }
}


Conclusão

Nesse breve artigo nós mostramos como criar tabelas em JavaFX. Claro que o tópico é extenso e podemos voltar ao tópico no futuro.

Nosso código agora é usando Java 8 e Netbeans 8.  Veja o código no github.

14 comentários:

  1. Como faço para pegar os atributos de uma super classe?

    ResponderExcluir
    Respostas
    1. Acho que usando o que está descrito aqui:

      http://fxapps.blogspot.com.br/2012/09/showing-object-properties-in-tableview.html

      Excluir
  2. Ótimo tópico. Parabéns!
    Poderia definir as propriedades na classe Pessoa também, certo?
    Abs

    ResponderExcluir
  3. Boa noite,

    COMO FAÇO PRA PEGAR O VALOR DE UMA TABELA numa determina Row e Columa?
    Exemplo em tua tabela, como faço pra pegar o Email da Maria em String.

    Agradeceria se me ajudassem nisso.

    ResponderExcluir
  4. É possível selecionar os dados de uma coluna especica dentro de uma tabela para mostra-lo em um textfield?

    ResponderExcluir
  5. É possível selecionar os dados de uma coluna especica dentro de uma tabela para mostra-lo em um textfield?

    ResponderExcluir
    Respostas
    1. você pode passar sobre os dados da tabela e pegar aquela coluna e colocar no text field - mas pergunta no grupo sobre JavaFX

      Excluir
  6. Como faz para inserir imagens em uma coluna? Preciso disso para ontem, me ajuda \0/
    O caminho delas está no banco de dados, e eu carrego tudo numa List para mostrar na tabela. A interface foi toda feita no Scene Builder.

    ResponderExcluir
    Respostas
    1. Acho que é possível usando uma factory pra lista, mas dá uma olhada no grupo sobre JavaFX

      Excluir
  7. Valeu pelo conteúdo William!

    Apesar da documentação do JavaFX ser ótima, é sempre bom ter um exemplo prático com umas dicas de alguém que entende.

    Valeu mesmo!!!

    Sucesso para você!

    ResponderExcluir
  8. Bom artigo, rápido e direto ao ponto.
    Eu fiz uma postagem mais extensa sobre TableView no medium, entrando em alguns pontos mais complexos como Checkbox e TextField nas colunas
    https://medium.com/@antonio.gabriel/javafx-trabalhando-com-tableview-5cc1065babab

    Att

    ResponderExcluir