Използване на JavaFX таблици за организиране на данни

Изглед на таблица компонентът е един от универсалните компоненти, често използвани при разработката на приложения на JavaFX. Позволява бързо визуално организиране на данни. Зрителят може бързо да схване дори имплицитната информация, предвидена от информацията с нейното таблично представяне. Тази статия разглежда този компонент от гледна точка на организацията на данните и как може да бъде ефективно използван в програмирането на Java.

Изглед на таблица

Изглед на таблица control предоставя почти еквивалентна функционалност на Jtable на Swing съставна част. Той е проектиран да представлява неограничен брой редове с данни, сегментирани в колони. В JavaFX има друг компонент, наречен ListView , което е подобно. Единствената разлика е, че TableView поддържа множество колони, докато ListView има една колона. Характеристиките на TableView контрол са както следва:

• Тъй като таблицата е съставена от брой колони, всяка колона е представена от Колона на таблица клас. Този клас осигурява по-фин контрол върху колоната. Екземпляр на този клас е отговорен за показването и модифицирането на съдържанието на тази колона. Следователно, той съдържа редица регулируеми свойства. Например,
• Може да се преоразмерява със свойството за ширина (minWidth, maxWidth, prefWidth, width ).
• Видимостта на колоната може да се превключи с видимостта собственост.
• Има методи за задаване и получаване на свойствата на заглавката на колона и текста.
• Може да показва вложени колони.
• Има контекстно меню, върху което потребителят може да щракне с десния бутон върху областта на заглавката на колоната.
• Съдържанието може да се сортира (с помощта на компаратор , сортируем , sortType ).
• За таблицата има правила за преоразмеряване, които определят състоянието на таблицата, когато потребителят преоразмерява колоната.
• Осигурява поддръжка за сортиране на множество колони.

Създаване на TableView

Нека създадем примерно приложение, за да демонстрираме как TableView в JavaFX може да се използва. Първо, нека представим основите на JavaFX TableView в код. Тъй като таблицата показва данни, ще създадем клас, който съхранява данните.

package sample;

import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
public class Employee {
   private StringProperty name;
   private StringProperty phone;
   private StringProperty email;
   private IntegerProperty salary;
   public Employee(String name, String phone, String email,
         Integer salary) {
      setName(name);
      setPhone(phone);
      setEmail(email);
      setSalary(salary);
   }
   public StringProperty nameProperty(){
      if(name == null)
      name = new SimpleStringProperty();
      return name;
   }
   public StringProperty phoneProperty() {
      if(phone == null)
      phone = new SimpleStringProperty();
      return phone;
   }
   public StringProperty emailProperty() {
      if(email == null)
      email = new SimpleStringProperty();
      return email;
   }
   public IntegerProperty salaryProperty() {
      if(salary == null)
      salary = new SimpleIntegerProperty();
      return salary;
   }
   public void setName(String name)
         { nameProperty().setValue(name);  }
   public String getName()
         { return nameProperty().get();  }
   public void setPhone(String phone)
         {phoneProperty().setValue(phone);}
   public String getPhone()
         { return phoneProperty().get(); }
   public void setEmail(String email)
         { emailProperty().setValue(email);}
   public String getEmail()
         { return emailProperty().get(); }
   public void setSalary(Integer salary)
         { salaryProperty().setValue(salary);}
   public Integer getSalary()
         { return salaryProperty().get(); }
}

Сега нека създадем оформлението на приложението и да поставим TableView като единствен компонент в сцената.

package sample;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class AppMain extends Application {
   @Override
   public void start(Stage primaryStage)
         throws Exception {
      BorderPane root = new BorderPane();
      root.setPrefSize(600,400);

      final TableView<Employee> employeeTableView =
         new TableView<>();
      employeeTableView.setPrefWidth(500);
      employeeTableView.setItems(dummyEmployees());
      TableColumn<Employee, String> nameCol =
         new TableColumn<>("Name");
      nameCol.setCellValueFactory(
         new PropertyValueFactory<Employee,
            String>("Name"));

      TableColumn<Employee, String> phoneCol =
         new TableColumn<>("Phone");
      phoneCol.setCellValueFactory(
         new PropertyValueFactory<Employee,
            String>("Phone"));

      TableColumn<Employee, String> emailCol =
         new TableColumn<>("Email");
      emailCol.setCellValueFactory(
         new PropertyValueFactory<Employee,
            String>("Email"));

      TableColumn<Employee, Integer> salaryCol =
         new TableColumn<>("Salary");
      salaryCol.setCellValueFactory(
         new PropertyValueFactory<Employee,
            Integer>("Salary"));

      employeeTableView.getColumns().addAll(nameCol,phoneCol,
         emailCol,salaryCol);
      root.setCenter(employeeTableView);
      Scene scene = new Scene(root);
      primaryStage.setScene(scene);
      primaryStage.setTitle("JavaFX TableView Demonstration");
      primaryStage.show();
   }

   private static ObservableList<Employee> dummyEmployees() {
      ObservableList<Employee> employees =
         FXCollections.observableArrayList();
      employees.add(new Employee("Arko Bannerjee",
         "9876543210","[email protected]", 5600));
      employees.add(new Employee("Subir Sha",
         "8109276354","[email protected]",7200));
      employees.add(new Employee("Karoline Bhatt",
         "638374642","[email protected]",3600));
      employees.add(new Employee("Vikas Verma",
         "425637772","[email protected]",7800));
      employees.add(new Employee("Gurmeet Singh",
         "9876543210","[email protected]",8900));
      employees.add(new Employee("Partho Goel",
         "837743636","[email protected]",5644));
      employees.add(new Employee("Hanish Jaiswal",
         "826355343","[email protected]",6500));
      employees.add(new Employee("Preety Ahuja",
         "9298366454","[email protected]",7800));
      employees.add(new Employee("Sandip Paul",
         "82773554536","[email protected]",8600));
      employees.add(new Employee("Sudipto Sarkar",
         "73664552542","[email protected]",8200));
      employees.add(new Employee("Bikash Panda",
         "6365344245","[email protected]",8400));
      employees.add(new Employee("Abhronil Sahu",
         "7829293663","[email protected]",8000));
      employees.add(new Employee("Dilip Das",
         "9283665455","[email protected]",8100));
      return employees;
   }

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

Таблицата е създадена със следния код:

final TableView<Employee> employeeTableView =
   new TableView<>();

Съдържанието на таблицата е представено от добавените колони. Всяка колона също трябва да има заглавие, за да обозначи визуално съдържанието на колоната. В този пример сме задали четири колони (означени от свойството, дефинирано в Служител клас).

TableColumn<Employee, String> nameCol =
      new TableColumn<>("Name");
   nameCol.setEditable(true);
   nameCol.setCellValueFactory(
      new PropertyValueFactory<Employee,
         String>("Name"));

Изход

Фигура 1: Съдържанието на таблицата

След това сме задали това като основен компонент на оформлението. Това е всичко, което трябва да направим, за да покажем някакво съдържание в TableView . Функции като сортиране на съдържанието не изискват никаква специална/допълнителна обработка, тъй като са дадени като функция по подразбиране от компонента. Също така многократното сортиране може да се извърши, като задържите клавиша SHIFT от клавиатурата, докато избирате колони с щракване на мишката.

Редактируеми колони в таблица

Ако искаме да създадем таблица, която има колона за редактиране, можем да го направим много лесно. Когато щракнем двукратно върху редактируемата колона, се появява текстово поле, където можем да редактираме стойността. За да направим промяната постоянна, трябва да натиснете клавиша Enter от клавиатурата.

Ето още един пример с редактируеми колони.

package sample;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
public class PhoneBook {
   private StringProperty name;
   private StringProperty phone;
   public PhoneBook(String name, String phone) {
      setName(name);
      setPhone(phone);
   }
   public StringProperty nameProperty(){
      if(name == null)
         name = new SimpleStringProperty();
      return name;
   }
   public StringProperty phoneProperty(){
      if(phone == null)
         phone = new SimpleStringProperty();
      return phone;
   }
   public void setName(String name)
      { nameProperty().setValue(name);  }
   public String getName()
      { return nameProperty().get();  }
   public void setPhone(String phone)
      { phoneProperty().setValue(phone);}
   public String getPhone()
      { return phoneProperty().get(); }
   @Override
   public String toString() {
      return getName()+" : "+getPhone();
   }
}

package sample;
import javafx.application.*;
import javafx.beans.value.*;
import javafx.collections.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.*;
import javafx.scene.layout.*;
import javafx.scene.text.*;
import javafx.stage.*;
public class PhoneBookTable extends Application {
   private TableView<PhoneBook> table;
   private ObservableList data;
   private Text txtStatus;
   @Override
   public void start(Stage primaryStage) {
      primaryStage.setTitle("Table View Demonstration.");
      HBox hb = new HBox();
      hb.setAlignment(Pos.CENTER);
      table = new TableView<>();
      data = dummyData();
      table.setItems(data);
      TableColumn<PhoneBook,String> nameCol = new
         TableColumn<>("Name");
      nameCol.setCellValueFactory(new
         PropertyValueFactory<>("name"));
      TableColumn<PhoneBook,String> phoneCol = new
         TableColumn("Phone");
      phoneCol.setCellValueFactory(new
         PropertyValueFactory<>("phone"));
      table.getColumns().setAll(nameCol, phoneCol);
      table.setPrefWidth(400);
      table.setPrefHeight(250);
      table.setColumnResizePolicy(TableView.
         CONSTRAINED_RESIZE_POLICY);
      table.getSelectionModel().selectedIndexProperty().
            addListener(
         new RowChangeHandler());
      table.setEditable(true);
      phoneCol.setCellFactory(TextFieldTableCell.
         forTableColumn());
      phoneCol.setOnEditCommit(event -> (event.getTableView().
         getItems().get(event.getTablePosition().getRow())).
         setPhone(event.getNewValue()));
      txtStatus = new Text();
      VBox vbox = new VBox(20);
      vbox.setPadding(new Insets(20, 20, 20, 20));;
      vbox.getChildren().addAll(hb, table, txtStatus);
      // W x H
      Scene scene = new Scene(vbox, 450, 375);
      primaryStage.setScene(scene);
      primaryStage.show();
      table.getSelectionModel().select(0);
      PhoneBook pb = table.getSelectionModel().
         getSelectedItem();
      txtStatus.setText(pb.toString());
   }
   private class RowChangeHandler implements
         ChangeListener {
      @Override
      public void changed(ObservableValue ov, Object oldVal,
            Object newVal) {
         int val = ((Number)newVal).intValue();
         if (data.size()<=0) {
            return;
         }
        PhoneBook pb= (PhoneBook) data.get(val);
        txtStatus.setText(pb.toString());
      }
   }
   public ObservableList<PhoneBook> dummyData() {
      ObservableList<PhoneBook> records =
         FXCollections.observableArrayList();
      records.add(new PhoneBook("Mickey Mouse",
         "7894561230"));
      records.add(new PhoneBook("Donald Duck",
         "1234567890"));
      records.add(new PhoneBook("Alladin",
         "7418529630"));
      records.add(new PhoneBook("Zairo",
         "9638527410"));
      records.add(new PhoneBook("Batman",
         "7894561230"));
      records.add(new PhoneBook("Spiderman",
         "852478930"));
      return records;
   }
   public static void main(String [] args) {
      Application.launch(args);
   }
}

Изход

Фигура 2: Един запис, извлечен от таблицата

Заключение

Изглед на таблица компонентът е доста полезен в дизайна на потребителския интерфейс, особено когато правим програмиране на база данни. JavaFX направи този компонент универсален, въпреки че има някои проблеми при прилагането на сложни таблични представяния. Разбира се, използваемостта, показана тук, е само драскотина. Повече може да се постигне с TableView , както ще видим в бъдещи статии.