JavaFX 2. Как вывести данные в TableView?

В этом уроке мы разберемся как работать с TableView и научимся выводить POJO в TableView.

Скачать

Создавать форму мы будем с помощью SceneBuilder, как его настроить можно почитать тут.

Структура нашего проекта:

Теперь пройдем по всем шагам создания данного проекта, и разберемся с деталями.

 

Шаг 1

Создаем простой JavaFX проект:

И редактируем класс Main.java:

package sample;

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

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("views/main.fxml"));
        primaryStage.setTitle("Users List");
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }


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

Как видите в 13 строке мы указываем какой fxml файл будем использовать.

Создайте пакет views и в нем будем хранить наши views.

 

Шаг 2

Создаем view называем её main.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" 
            minHeight="-Infinity" minWidth="-Infinity" 
            prefHeight="400.0" prefWidth="624.0" 
            xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" 
            fx:controller="sample.controller.Controller">
  <children>
    <!-- Таблица в которую мы будем выводит наш pojo -->
    <TableView fx:id="tableUsers" layoutX="12.0" layoutY="62.0" prefHeight="324.0" prefWidth="600.0">
      <columns>
        <!-- Колонки таблицы -->
        <TableColumn prefWidth="80.0" text="№" fx:id="idColumn" />
        <TableColumn prefWidth="150.0" text="Login" fx:id="loginColumn" />
        <TableColumn prefWidth="150.0" text="Password" fx:id="passwordColumn" />
        <TableColumn prefWidth="220.0" text="Email" fx:id="emailColumn" />
      </columns>
    </TableView>
    <Label layoutX="14.0" layoutY="18.0" text="List all users:">
      <font>
        <Font name="Verdana" size="24.0" />
      </font>
    </Label>
  </children>
</AnchorPane>

В 11-й строке мы привязываем данную view на определённый контроллер который будет управлять содержимым view.

Выглядеть будущее окно будет так:

 

Шаг 3

Теперь создадим POJO которое будем выводить в таблице.

package sample.pojo;

public class User {

    private int id;
    private String login;
    private String password;
    private String email;

    public User(int id, String login, String password, String email) {
        this.id = id;
        this.login = login;
        this.password = password;
        this.email = email;
    }

    public User() {
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getLogin() {
        return login;
    }

    public void setLogin(String login) {
        this.login = login;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

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

На основе этого класса мы будем формировать данные для заполнения таблицы.

 

Шаг 4

А теперь реализуем мозг нашего приложения, а именно контроллер. Создаем новый пакет controller и в нем создаем класс Controller.java:

package sample.controller;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import sample.pojo.User;

import javafx.scene.control.TableColumn;

public class Controller {

    private ObservableList<User> usersData = FXCollections.observableArrayList();

    @FXML
    private TableView<User> tableUsers;

    @FXML
    private TableColumn<User, Integer> idColumn;

    @FXML
    private TableColumn<User, String> loginColumn;

    @FXML
    private TableColumn<User, String> passwordColumn;

    @FXML
    private TableColumn<User, String> emailColumn;

    // инициализируем форму данными
    @FXML
    private void initialize() {
        initData();

        // устанавливаем тип и значение которое должно хранится в колонке
        idColumn.setCellValueFactory(new PropertyValueFactory<User, Integer>("id"));
        loginColumn.setCellValueFactory(new PropertyValueFactory<User, String>("login"));
        passwordColumn.setCellValueFactory(new PropertyValueFactory<User, String>("password"));
        emailColumn.setCellValueFactory(new PropertyValueFactory<User, String>("email"));

        // заполняем таблицу данными
        tableUsers.setItems(usersData);
    }

    // подготавливаем данные для таблицы
    // вы можете получать их с базы данных
    private void initData() {
        usersData.add(new User(1, "Alex", "qwerty", "alex@mail.com"));
        usersData.add(new User(2, "Bob", "dsfsdfw", "bob@mail.com"));
        usersData.add(new User(3, "Jeck", "dsfdsfwe", "Jeck@mail.com"));
        usersData.add(new User(4, "Mike", "iueern", "mike@mail.com"));
        usersData.add(new User(5, "colin", "woeirn", "colin@mail.com"));
    }

}

@FXML – эта аннотация говорит о том, что поле или метод класса доступны для разметки fxml.

Как видите мы аннотируем переменные, которые должны называться также как и id компонента разметки:

@FXML
private TableView<User> tableUsers;

тогда в разметке fxml должно быть так:

<TableView fx:id="tableUsers">
   ...
</TableView>

 

Шаг 5

Теперь можно запустить наше приложение и посмотреть на результат:

 

01/10/2013

20 комментариев к статье "JavaFX 2. Как вывести данные в TableView?"

  1. Vanek08/12/2013 в 10:37 пп

    Спасибо за пример! А как обновить tableView , если например ежесекундно изменяются POJO объекты ?

  2. Антон16/02/2016 в 7:23 пп

    Здравствуйте! Спасибо Вам за очень внятную статью! Но хотелось бы кое-что уточнить….
    1. Является ли в данном случае POJO – моделью?
    2. Где правильней всего хранить промежуточные данные? Допустим, у Вас они хранятся в Контроллере. Но это, наверное, не совсем правильно, не так ли?
    3. Какие средства следует использовать чтобы произвести чтение с XML файла в таблицу и как при этом изменится структура проекта?
    Спасибо!

  3. Виок29/03/2016 в 6:00 пп

    Если добавить поле ВСЕГО, то как там записать сумму всех Юзеров?

  4. Aleksei20/04/2016 в 5:59 дп

    Если вместо Login (a = 2) цифра, Password (b=2) цифра, Email(c = a* b).Если изменяется значение ячейки, то должно меняться значение TableView. Как это реализовать?

  5. Алексей11/06/2016 в 11:44 дп

    Господа. Что-то не работает как у вас описано. В таблицу загружает, но ничего не отображает. Данные внутри точно есть, в консоль выводит.
    Методо table.setVisible(true) не помог. Что может быть, не подскажете?

  6. Михаил27/10/2016 в 5:45 дп

    Здравствуйте, а как таблицу Tableview заполнять из написанного мной списка ?

  7. Алексей30/01/2017 в 6:18 дп

    Добрый день.
    Вы в последнем методе упомянули про импорт из базы данных.
    // подготавливаем данные для таблицы
    // вы можете получать их с базы данных
    private void initData() {
    usersData.add(new User(1, “Alex”, “qwerty”, “alex@mail.com”));
    usersData.add(new User(2, “Bob”, “dsfsdfw”, “bob@mail.com”));
    usersData.add(new User(3, “Jeck”, “dsfdsfwe”, “Jeck@mail.com”));
    usersData.add(new User(4, “Mike”, “iueern”, “mike@mail.com”));
    usersData.add(new User(5, “colin”, “woeirn”, “colin@mail.com”));
    }
    А можно пример?
    У меня есть приложение, которое в консоль выводит результат из БД Firebird.
    А вот прикрутить к JavaFX Application не выходит((

  8. Андрій02/11/2017 в 5:12 пп

    Супер!

  9. Борис15/02/2018 в 5:34 пп

    Я делаю программу, которая интерактивно создает дерево TreeView , потом я хочу перенести информацию из дерева в таблицу TableView, дополнить информацией некоторые поля строки таблицы и потом занести информацию из таблицы в записи базы данных. Везде есть интерактивное заполнение полей таблицы, а есть ли способ заносить и дополнять таблицу например из цикла for?

  10. Аноним26/02/2018 в 3:26 пп

    Что делать если возникает nullpointerexception в том месте где проиходит setCellValueFactory? Объект new PropertyValueFactory создается нормально, но далее почему то не срабатывает операций setCellValueFactory.

  11. Борис10/04/2018 в 2:14 пп

    Я уже второй год ищу способы работы с таблицами TableView, когда изменять поля таблицы должна сама программа. Я создаю на основе редактирования дерево TreeView, а потом надо взять запись из узла дерева и занести информацию в некоторые поля таблицы. Потом взять запись таблицы и занести информацию в базу данных. Потом внести в запись таблицы поле с номером созданной записи базы данных. Потом я на основе дерева создаю запись в другой таблице, аналогичным образом заношу в базу данных и потом дополняю поле с номером созданной записи, а в запись первой таблицы вношу также этот номер второй таблицы. Вот элементарный процесс работы с таблицами, а во всех учебниках рассматривается только интерактивный механизм заполнение полей таблицы. Вы можете посоветовать, где можно найти описание работы с таблицами не используя интерактивные механизмы.
    С уважением, Борис.

Добавить комментарий