JavaFX控件——TableView

在JavaFX 應用中對創建表格最重要的是TableView, TableColumnTableCell這三個類。

你可以通過實現數據模型(data model) 和 實現 單元格工廠(cell factory) 來填充表格。

表格類提供了表格列嵌入式的排序能力和必要時調整列寬度的功能。
下面開始學習表格類的相關內容。

創建一個表格

例子1-1

import javafx.application.Application;  
import javafx.geometry.Insets;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.control.Label;  
import javafx.scene.control.TableColumn;  
import javafx.scene.control.TableView;  
import javafx.scene.layout.VBox;  
import javafx.scene.text.Font;  
import javafx.stage.Stage;  

public class TableViewSample extends Application {  

    private TableView table = new TableView();  
    public static void main(String[] args) {  
        launch(args);  
    }  

    @Override  
    public void start(Stage stage) {  
        Scene scene = new Scene(new Group());  
        stage.setTitle("Table View Sample");  
        stage.setWidth(300);  
        stage.setHeight(500);  

        final Label label = new Label("Address Book");  
        label.setFont(new Font("Arial", 20));  

        table.setEditable(true);  

//設置自動拉滿    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

        TableColumn firstNameCol = new TableColumn("First Name");  
        TableColumn lastNameCol = new TableColumn("Last Name");  
        TableColumn emailCol = new TableColumn("Email");  

        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);  

        final VBox vbox = new VBox();  
        vbox.setSpacing(5);  
        vbox.setPadding(new Insets(10, 0, 0, 10));  
        vbox.getChildren().addAll(label, table);  

        ((Group) scene.getRoot()).getChildren().addAll(vbox);  

        stage.setScene(scene);  
        stage.show();  
    }  
} 

此表格組件 通過實例化TableView類來創建。

在該例子中,表格組件被添加到VBox 的佈局容器中,然而你也可以直接將其添加到應用場景中。

例子 12-1定義了3列將用來存放地址簿的信息:一個聯繫人的 姓和名以及電子郵箱地址。列通過TableColumn這個類創建。

TableViewgetColumns方法可以獲取之前創建過的列。在你的應用中,你可以用此方法動態的添加和移除表格列。

編譯並運行此程序將獲取輸入輸出 ,結果如圖所示:

你可以通過setVisible 方法來控制列是否顯示。

如:如果你的應用邏輯需要隱藏電子郵件地址,可以這樣做:emailCol.setVisible(false).
將這句代碼添加到例子1-1中,效果如圖:

如果你的數據需要更加複雜的呈現方式,你可以創建嵌套列
假設地址簿中的聯繫方式有兩個電子郵箱賬戶。你需要兩列來分別呈現第一個和第二個電子郵箱地址。
像下面代碼中展示的一樣,創建兩個子列,然後調用emailColgetColumns方法

TableColumn firstEmailCol = new TableColumn("Primary");  
TableColumn secondEmailCol = new TableColumn("Secondary");  

emailCol.getColumns().addAll(firstEmailCol, secondEmailCol);  

在這段代碼裏面添加到例子1-1中然後編譯並運行, 此表格將呈現下圖中的樣子.
帶有嵌套列的表格
儘管表格已經添加到應用中,但是因爲表格中沒有數據,標準的標題“表中無內容”(表格內容爲空)將呈現在表格中。

如果不想顯示上述標題,你可以使用setPlaceholder 方法類制定 一個 Node(節點)對象呈現在空表格中。

定義數據模型( Data Model)

當你要在JavaFx應用中創建一個表格,最好先創建一個類來定義數據模型和提供將來和表格交互的方法和屬性。例子1-2中定義了Person類來定義數據和地址簿。

例字1-2 創建 Person 類

public class Person {  
    private final SimpleStringProperty firstName;  
    private final SimpleStringProperty lastName;  
    private final SimpleStringProperty email;  

    private Person(String fName, String lName, String email) {  
        this.firstName = new SimpleStringProperty(fName);  
        this.lastName = new SimpleStringProperty(lName);  
        this.email = new SimpleStringProperty(email);  
    }  

    public String getFirstName() {  
        return firstName.get();  
    }  
    public void setFirstName(String fName) {  
        firstName.set(fName);  
    }  

    public String getLastName() {  
        return lastName.get();  
    }  
    public void setLastName(String fName) {  
        lastName.set(fName);  
    }  

    public String getEmail() {  
        return email.get();  
    }  
    public void setEmail(String fName) {  
        email.set(fName);  
    }  

}  

firstName, lastName, 和 email這些字符串屬性用來提供特殊數據元素的引用。

另外,每個數據元素都提供了getset方法。 這樣如果調用 getFirstName方法經返回firstName屬性的值,可以通過調用setFirstName方法來爲這個屬性賦值 。

在數據模型已經在Person 類中呈現以後。你可以創建ObservableList 數組隨心所欲的定義數據行(data rows) 在你的表格中展示
下面的代碼片段實現了這個任務:

final ObservableList<Person> data = FXCollections.observableArrayList(  
    new Person("Jacob", "Smith", "[email protected]"),  
    new Person("Isabella", "Johnson", "[email protected]"),  
    new Person("Ethan", "Williams", "[email protected]"),  
    new Person("Emma", "Jones", "[email protected]"),  
    new Person("Michael", "Brown", "[email protected]")  
); 

下一步就是將這些數據和表格的列之間建立聯繫。你可以像例子1-3中那樣通過對每個數據元素的屬性定義來實現。

例子1-3 爲列創建數據屬性

firstNameCol.setCellValueFactory(  
    new PropertyValueFactory<Person,String>("firstName")  
);  
lastNameCol.setCellValueFactory(  
    new PropertyValueFactory<Person,String>("lastName")  
);  
emailCol.setCellValueFactory(  
    new PropertyValueFactory<Person,String>("email")  
);  

setCellValueFactory 方法爲每個列定製單元工廠。單元工程通過使用PropertyValueFactory類來實現, 表格列的firstName, lastNameemail 屬性來引用Person中相應的屬性的 。

當數據模型已經定義完畢,數據已經添加並關聯到對應的列,你還可以通過TableViewsetItems 方法來添加表格數據:table.setItems(data).

因爲ObservableList 對象能夠跟蹤表格元素的任何變化,當其中的數據變化,TableView 的內容也自動更新。

例子1-4 創建一個表格並添加數據

import javafx.application.Application;  
import javafx.beans.property.SimpleStringProperty;  
import javafx.collections.FXCollections;  
import javafx.collections.ObservableList;  
import javafx.geometry.Insets;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.control.Label;  
import javafx.scene.control.TableColumn;  
import javafx.scene.control.TableView;  
import javafx.scene.control.TextField;  
import javafx.scene.control.cell.PropertyValueFactory;  
import javafx.scene.layout.VBox;  
import javafx.scene.text.Font;  
import javafx.stage.Stage;  

public class TableViewSample extends Application {  

    private TableView<Person> table = new TableView<Person>();  
    private final ObservableList<Person> data =  
        FXCollections.observableArrayList(  
            new Person("Jacob", "Smith", "[email protected]"),  
            new Person("Isabella", "Johnson", "[email protected]"),  
            new Person("Ethan", "Williams", "[email protected]"),  
            new Person("Emma", "Jones", "[email protected]"),  
            new Person("Michael", "Brown", "[email protected]")  
        );  

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

    @Override  
    public void start(Stage stage) {  
        Scene scene = new Scene(new Group());  
        stage.setTitle("Table View Sample");  
        stage.setWidth(450);  
        stage.setHeight(500);  

        final Label label = new Label("Address Book");  
        label.setFont(new Font("Arial", 20));  

        table.setEditable(true);  

        TableColumn firstNameCol = new TableColumn("First Name");  
        firstNameCol.setMinWidth(100);  
        firstNameCol.setCellValueFactory(  
                new PropertyValueFactory<Person, String>("firstName"));  

        TableColumn lastNameCol = new TableColumn("Last Name");  
        lastNameCol.setMinWidth(100);  
        lastNameCol.setCellValueFactory(  
                new PropertyValueFactory<Person, String>("lastName"));  

        TableColumn emailCol = new TableColumn("Email");  
        emailCol.setMinWidth(200);  
        emailCol.setCellValueFactory(  
                new PropertyValueFactory<Person, String>("email"));  

        table.setItems(data);  
        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);  

        final VBox vbox = new VBox();  
        vbox.setSpacing(5);  
        vbox.setPadding(new Insets(10, 0, 0, 10));  
        vbox.getChildren().addAll(label, table);  

        ((Group) scene.getRoot()).getChildren().addAll(vbox);  

        stage.setScene(scene);  
        stage.show();  
    }  

    public static class Person {  

        private final SimpleStringProperty firstName;  
        private final SimpleStringProperty lastName;  
        private final SimpleStringProperty email;  

        private Person(String fName, String lName, String email) {  
            this.firstName = new SimpleStringProperty(fName);  
            this.lastName = new SimpleStringProperty(lName);  
            this.email = new SimpleStringProperty(email);  
        }  

        public String getFirstName() {  
            return firstName.get();  
        }  

        public void setFirstName(String fName) {  
            firstName.set(fName);  
        }  

        public String getLastName() {  
            return lastName.get();  
        }  

        public void setLastName(String fName) {  
            lastName.set(fName);  
        }  

        public String getEmail() {  
            return email.get();  
        }  

        public void setEmail(String fName) {  
            email.set(fName);  
        }  
    }  
}  

當你編譯並運行此代碼將呈現如下圖的樣子:
表格數據填充

添加新行

圖標例子1-4中的表格包好5行數據,目前爲止還不能編輯。

你可以用 文本域 爲Last Name, and Email columns鍵入新值 Text Field 組件能夠使你的應用接收到用戶輸入的文本。
例子1-5 將創建3個文本域。併爲每個文本域定義提示並創建添加按鈕。

例子1-5 利用文本域爲表格創建新元素

final TextField addFirstName = new TextField();  
addFirstName.setPromptText("First Name");  
addFirstName.setMaxWidth(firstNameCol.getPrefWidth());  
final TextField addLastName = new TextField();  
addLastName.setMaxWidth(lastNameCol.getPrefWidth());  
addLastName.setPromptText("Last Name");  
final TextField addEmail = new TextField();  
addEmail.setMaxWidth(emailCol.getPrefWidth());  
addEmail.setPromptText("Email");  

final Button addButton = new Button("Add");  
addButton.setOnAction(new EventHandler<ActionEvent>() {  
    @Override public void handle(ActionEvent e) {  
        data.add(new Person(  
            addFirstName.getText(),  
            addLastName.getText(),  
            addEmail.getText()  
        ));  
        addFirstName.clear();  
        addLastName.clear();  
        addEmail.clear();  
    }  
});  

當用戶點擊添加按鈕,在文本域輸入的文本將被添加到Person 的構造方法中,並添加到 data (observable list)中。因此帶有內容信息的實體出現在表格中。
完整代碼如下:

例子1-6 用文本域添加條目的表格

import javafx.beans.property.SimpleStringProperty;  
import javafx.collections.FXCollections;  
import javafx.collections.ObservableList;  
import javafx.event.ActionEvent;  
import javafx.event.EventHandler;  
import javafx.geometry.Insets;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.control.Button;  
import javafx.scene.control.Label;  
import javafx.scene.control.TableColumn;  
import javafx.scene.control.TableView;  
import javafx.scene.control.TextField;  
import javafx.scene.control.cell.PropertyValueFactory;  
import javafx.scene.layout.HBox;  
import javafx.scene.layout.VBox;  
import javafx.scene.text.Font;  
import javafx.stage.Stage;  

public class FileChooserSample extends Application {  

    private TableView<Person> table = new TableView<Person>();  
    private final ObservableList<Person> data =  
            FXCollections.observableArrayList(  
            new Person("Jacob", "Smith", "[email protected]"),  
            new Person("Isabella", "Johnson", "[email protected]"),  
            new Person("Ethan", "Williams", "[email protected]"),  
            new Person("Emma", "Jones", "[email protected]"),  
            new Person("Michael", "Brown", "[email protected]"));  
    final HBox hb = new HBox();  

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

    @Override  
    public void start(Stage stage) {  
        Scene scene = new Scene(new Group());  
        stage.setTitle("Table View Sample");  
        stage.setWidth(450);  
        stage.setHeight(550);  

        final Label label = new Label("Address Book");  
        label.setFont(new Font("Arial", 20));  

        table.setEditable(true);  

        TableColumn firstNameCol = new TableColumn("First Name");  
        firstNameCol.setMinWidth(100);  
        firstNameCol.setCellValueFactory(  
                new PropertyValueFactory<Person, String>("firstName"));  

        TableColumn lastNameCol = new TableColumn("Last Name");  
        lastNameCol.setMinWidth(100);  
        lastNameCol.setCellValueFactory(  
                new PropertyValueFactory<Person, String>("lastName"));  

        TableColumn emailCol = new TableColumn("Email");  
        emailCol.setMinWidth(200);  
        emailCol.setCellValueFactory(  
                new PropertyValueFactory<Person, String>("email"));  

        table.setItems(data);  
        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);  

        final TextField addFirstName = new TextField();  
        addFirstName.setPromptText("First Name");  
        addFirstName.setMaxWidth(firstNameCol.getPrefWidth());  
        final TextField addLastName = new TextField();  
        addLastName.setMaxWidth(lastNameCol.getPrefWidth());  
        addLastName.setPromptText("Last Name");  
        final TextField addEmail = new TextField();  
        addEmail.setMaxWidth(emailCol.getPrefWidth());  
        addEmail.setPromptText("Email");  

        final Button addButton = new Button("Add");  
        addButton.setOnAction(new EventHandler<ActionEvent>() {  
            @Override  
            public void handle(ActionEvent e) {  
                data.add(new Person(  
                        addFirstName.getText(),  
                        addLastName.getText(),  
                        addEmail.getText()));  
                addFirstName.clear();  
                addLastName.clear();  
                addEmail.clear();  
            }  
        });  

        hb.getChildren().addAll(addFirstName, addLastName, addEmail, addButton);  
        hb.setSpacing(3);  

        final VBox vbox = new VBox();  
        vbox.setSpacing(5);  
        vbox.setPadding(new Insets(10, 0, 0, 10));  
        vbox.getChildren().addAll(label, table, hb);  

        ((Group) scene.getRoot()).getChildren().addAll(vbox);  

        stage.setScene(scene);  
        stage.show();  
    }  

    public static class Person {  

        private final SimpleStringProperty firstName;  
        private final SimpleStringProperty lastName;  
        private final SimpleStringProperty email;  

        private Person(String fName, String lName, String email) {  
            this.firstName = new SimpleStringProperty(fName);  
            this.lastName = new SimpleStringProperty(lName);  
            this.email = new SimpleStringProperty(email);  
        }  

        public String getFirstName() {  
            return firstName.get();  
        }  

        public void setFirstName(String fName) {  
            firstName.set(fName);  
        }  

        public String getLastName() {  
            return lastName.get();  
        }  

        public void setLastName(String fName) {  
            lastName.set(fName);  
        }  

        public String getEmail() {  
            return email.get();  
        }  

        public void setEmail(String fName) {  
            email.set(fName);  
        }  
    }  
}   

效果圖如下:
用文本域添加條目的表格

此應用沒有提供任何校驗的過濾器,比如校驗電子郵件格式是否正確。當你開發自己的應用時可以添加這些方法。

當前的應用也沒有檢查是否鍵入了空值,如果沒有提供任何值,點擊添加按鈕將在表格中鍵入一個空行。

列數據排序

TableView類提供了列中數據的排序。用戶可以通過點擊列頭來對數據進行排序。第一次點擊將進行升序排列,第二次點擊將進行降序排列。第三次點擊不排列。默認是不排列

用戶可以對錶格的多列進行排序,同樣也可以指定每列數據在排序操作中的優先級。如果想多行排列,用戶按住Shift的同時點擊想要排序的每一列的列頭。

下面的圖中, first names升序排列, last names降序排列.記住第一列比第二列的優先級更高
多列排序

作爲應用的開發人員,你可以通過setSortType方法設置每一列的排序優先級。你可以分別指定升序和降序的排列規則,例如,用下面的代碼來設置emailCol 降序的排序。列:emailCol.setSortType(TableColumn.SortType.DESCENDING);

表格的數據編輯

TableView類不僅能夠渲染表格式的數據,還能提供編輯的能力。使用 setEditable 方法來開啓表格編輯模式。

setCellFactory 方法,藉助TextFieldTableCell的幫助來 重新實現表格單元格作爲文本域。

setOnEditCommit 方法具有編輯 指派更新數據到相應表格單元格的能力。

例子1-7 顯示怎樣用這些方法來 編輯 First Name, Last Name, and Email列。

例子1-7 單元格編輯的實現

firstNameCol.setCellFactory(TextFieldTableCell.forTableColumn());  
firstNameCol.setOnEditCommit(  
    new EventHandler<CellEditEvent<Person, String>>() {  
        @Override  
        public void handle(CellEditEvent<Person, String> t) {  
            ((Person) t.getTableView().getItems().get(  
                t.getTablePosition().getRow())  
                ).setFirstName(t.getNewValue());  
        }  
    }  
);  

lastNameCol.setCellFactory(TextFieldTableCell.forTableColumn());  
lastNameCol.setOnEditCommit(  
    new EventHandler<CellEditEvent<Person, String>>() {  
        @Override  
        public void handle(CellEditEvent<Person, String> t) {  
            ((Person) t.getTableView().getItems().get(  
                t.getTablePosition().getRow())  
                ).setLastName(t.getNewValue());  
        }  
    }  
);  

emailCol.setCellFactory(TextFieldTableCell.forTableColumn());  
emailCol.setOnEditCommit(  
    new EventHandler<CellEditEvent<Person, String>>() {  
        @Override  
        public void handle(CellEditEvent<Person, String> t) {  
            ((Person) t.getTableView().getItems().get(  
                t.getTablePosition().getRow())  
                ).setEmail(t.getNewValue());  
        }  
    }  
); 

完整代碼如下:

import javafx.application.Application;  
import javafx.beans.property.SimpleStringProperty;  
import javafx.collections.FXCollections;  
import javafx.collections.ObservableList;  
import javafx.event.ActionEvent;  
import javafx.event.EventHandler;  
import javafx.geometry.Insets;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.control.Button;  
import javafx.scene.control.Label;  
import javafx.scene.control.TableColumn;  
import javafx.scene.control.TableColumn.CellEditEvent;  
import javafx.scene.control.TableView;  
import javafx.scene.control.TextField;  
import javafx.scene.control.cell.PropertyValueFactory;  
import javafx.scene.control.cell.TextFieldTableCell;  
import javafx.scene.layout.HBox;  
import javafx.scene.layout.VBox;  
import javafx.scene.text.Font;  
import javafx.stage.Stage;  

public class TableViewSample extends Application {  

    private TableView<Person> table = new TableView<Person>();  
    private final ObservableList<Person> data =  
            FXCollections.observableArrayList(  
            new Person("Jacob", "Smith", "[email protected]"),  
            new Person("Isabella", "Johnson", "[email protected]"),  
            new Person("Ethan", "Williams", "[email protected]"),  
            new Person("Emma", "Jones", "[email protected]"),  
            new Person("Michael", "Brown", "[email protected]"));  
    final HBox hb = new HBox();  

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

    @Override  
    public void start(Stage stage) {  
        Scene scene = new Scene(new Group());  
        stage.setTitle("Table View Sample");  
        stage.setWidth(450);  
        stage.setHeight(550);  

        final Label label = new Label("Address Book");  
        label.setFont(new Font("Arial", 20));  

        table.setEditable(true);  

        TableColumn firstNameCol = new TableColumn("First Name");  
        firstNameCol.setMinWidth(100);  
        firstNameCol.setCellValueFactory(  
            new PropertyValueFactory<Person, String>("firstName"));  
        firstNameCol.setCellFactory(TextFieldTableCell.forTableColumn());  
        firstNameCol.setOnEditCommit(  
            new EventHandler<CellEditEvent<Person, String>>() {  
                @Override  
                public void handle(CellEditEvent<Person, String> t) {  
                    ((Person) t.getTableView().getItems().get(  
                            t.getTablePosition().getRow())  
                            ).setFirstName(t.getNewValue());  
                }  
            }  
        );  


        TableColumn lastNameCol = new TableColumn("Last Name");  
        lastNameCol.setMinWidth(100);  
        lastNameCol.setCellValueFactory(  
            new PropertyValueFactory<Person, String>("lastName"));  
        lastNameCol.setCellFactory(TextFieldTableCell.forTableColumn());  
        lastNameCol.setOnEditCommit(  
            new EventHandler<CellEditEvent<Person, String>>() {  
                @Override  
                public void handle(CellEditEvent<Person, String> t) {  
                    ((Person) t.getTableView().getItems().get(  
                        t.getTablePosition().getRow())  
                        ).setLastName(t.getNewValue());  
                }  
            }  
        );  

        TableColumn emailCol = new TableColumn("Email");  
        emailCol.setMinWidth(200);  
        emailCol.setCellValueFactory(  
            new PropertyValueFactory<Person, String>("email"));  
        emailCol.setCellFactory(TextFieldTableCell.forTableColumn());  
        emailCol.setOnEditCommit(  
            new EventHandler<CellEditEvent<Person, String>>() {  
                @Override  
                public void handle(CellEditEvent<Person, String> t) {  
                    ((Person) t.getTableView().getItems().get(  
                        t.getTablePosition().getRow())  
                        ).setEmail(t.getNewValue());  
                }  
            }  
        );  

        table.setItems(data);  
        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);  

        final TextField addFirstName = new TextField();  
        addFirstName.setPromptText("First Name");  
        addFirstName.setMaxWidth(firstNameCol.getPrefWidth());  
        final TextField addLastName = new TextField();  
        addLastName.setMaxWidth(lastNameCol.getPrefWidth());  
        addLastName.setPromptText("Last Name");  
        final TextField addEmail = new TextField();  
        addEmail.setMaxWidth(emailCol.getPrefWidth());  
        addEmail.setPromptText("Email");  

        final Button addButton = new Button("Add");  
        addButton.setOnAction(new EventHandler<ActionEvent>() {  
            @Override  
            public void handle(ActionEvent e) {  
                data.add(new Person(  
                        addFirstName.getText(),  
                        addLastName.getText(),  
                        addEmail.getText()));  
                addFirstName.clear();  
                addLastName.clear();  
                addEmail.clear();  
            }  
        });  

        hb.getChildren().addAll(addFirstName, addLastName, addEmail, addButton);  
        hb.setSpacing(3);  

        final VBox vbox = new VBox();  
        vbox.setSpacing(5);  
        vbox.setPadding(new Insets(10, 0, 0, 10));  
        vbox.getChildren().addAll(label, table, hb);  

        ((Group) scene.getRoot()).getChildren().addAll(vbox);  

        stage.setScene(scene);  
        stage.show();  
    }  

    public static class Person {  

        private final SimpleStringProperty firstName;  
        private final SimpleStringProperty lastName;  
        private final SimpleStringProperty email;  

        private Person(String fName, String lName, String email) {  
            this.firstName = new SimpleStringProperty(fName);  
            this.lastName = new SimpleStringProperty(lName);  
            this.email = new SimpleStringProperty(email);  
        }  

        public String getFirstName() {  
            return firstName.get();  
        }  

        public void setFirstName(String fName) {  
            firstName.set(fName);  
        }  

        public String getLastName() {  
            return lastName.get();  
        }  

        public void setLastName(String fName) {  
            lastName.set(fName);  
        }  

        public String getEmail() {  
            return email.get();  
        }  

        public void setEmail(String fName) {  
            email.set(fName);  
        }  
    }  
}  

下圖中,用戶正在編輯Michael Brown的姓氏。用戶鍵入在單元格中鍵入了新的值,然後暗下來 Enter鍵。只有按下了Enter鍵,單元格編輯纔算結束。這一行爲取決於TextField的實現。
編輯表格的單元格

請記住:默認的TextField 實現,需要用戶按下Enter鍵來提交編輯。你可以重新定義TextField的行爲來通過焦點變化提交編輯,這是一個好的用戶體驗。嘗試修改代碼來實現這個替代的行爲。

例子1-8 單元編輯的替換方案

import javafx.application.Application;  
import javafx.beans.property.SimpleStringProperty;  
import javafx.beans.value.ChangeListener;  
import javafx.beans.value.ObservableValue;  
import javafx.collections.FXCollections;  
import javafx.collections.ObservableList;  
import javafx.event.ActionEvent;  
import javafx.event.EventHandler;  
import javafx.geometry.Insets;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.control.Button;  
import javafx.scene.control.Label;  
import javafx.scene.control.TableCell;  
import javafx.scene.control.TableColumn;  
import javafx.scene.control.TableColumn.CellEditEvent;  
import javafx.scene.control.TableView;  
import javafx.scene.control.TextField;  
import javafx.scene.control.cell.PropertyValueFactory;  
import javafx.scene.layout.HBox;  
import javafx.scene.layout.VBox;  
import javafx.scene.text.Font;  
import javafx.stage.Stage;  
import javafx.util.Callback;  

public class TableViewSample extends Application {  

    private TableView<Person> table = new TableView<Person>();  
    private final ObservableList<Person> data =  
            FXCollections.observableArrayList(  
            new Person("Jacob", "Smith", "[email protected]"),  
            new Person("Isabella", "Johnson", "[email protected]"),  
            new Person("Ethan", "Williams", "[email protected]"),  
            new Person("Emma", "Jones", "[email protected]"),  
            new Person("Michael", "Brown", "[email protected]"));  
    final HBox hb = new HBox();  

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

    @Override  
    public void start(Stage stage) {  
        Scene scene = new Scene(new Group());  
        stage.setTitle("Table View Sample");  
        stage.setWidth(450);  
        stage.setHeight(550);  

        final Label label = new Label("Address Book");  
        label.setFont(new Font("Arial", 20));  

        table.setEditable(true);  
        Callback<TableColumn, TableCell> cellFactory =  
             new Callback<TableColumn, TableCell>() {  
                 public TableCell call(TableColumn p) {  
                    return new EditingCell();  
                 }  
             };  

        TableColumn firstNameCol = new TableColumn("First Name");  
        firstNameCol.setMinWidth(100);  
        firstNameCol.setCellValueFactory(  
            new PropertyValueFactory<Person, String>("firstName"));  
        firstNameCol.setCellFactory(cellFactory);  
        firstNameCol.setOnEditCommit(  
            new EventHandler<CellEditEvent<Person, String>>() {  
                @Override  
                public void handle(CellEditEvent<Person, String> t) {  
                    ((Person) t.getTableView().getItems().get(  
                        t.getTablePosition().getRow())  
                        ).setFirstName(t.getNewValue());  
                }  
             }  
        );  


        TableColumn lastNameCol = new TableColumn("Last Name");  
        lastNameCol.setMinWidth(100);  
        lastNameCol.setCellValueFactory(  
            new PropertyValueFactory<Person, String>("lastName"));  
        lastNameCol.setCellFactory(cellFactory);  
        lastNameCol.setOnEditCommit(  
            new EventHandler<CellEditEvent<Person, String>>() {  
                @Override  
                public void handle(CellEditEvent<Person, String> t) {  
                    ((Person) t.getTableView().getItems().get(  
                        t.getTablePosition().getRow())  
                        ).setLastName(t.getNewValue());  
                }  
            }  
        );  

        TableColumn emailCol = new TableColumn("Email");  
        emailCol.setMinWidth(200);  
        emailCol.setCellValueFactory(  
            new PropertyValueFactory<Person, String>("email"));  
        emailCol.setCellFactory(cellFactory);  
        emailCol.setOnEditCommit(  
            new EventHandler<CellEditEvent<Person, String>>() {  
                @Override  
                public void handle(CellEditEvent<Person, String> t) {  
                    ((Person) t.getTableView().getItems().get(  
                        t.getTablePosition().getRow())  
                        ).setEmail(t.getNewValue());  
                }  
            }  
        );  

        table.setItems(data);  
        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);  

        final TextField addFirstName = new TextField();  
        addFirstName.setPromptText("First Name");  
        addFirstName.setMaxWidth(firstNameCol.getPrefWidth());  
        final TextField addLastName = new TextField();  
        addLastName.setMaxWidth(lastNameCol.getPrefWidth());  
        addLastName.setPromptText("Last Name");  
        final TextField addEmail = new TextField();  
        addEmail.setMaxWidth(emailCol.getPrefWidth());  
        addEmail.setPromptText("Email");  

        final Button addButton = new Button("Add");  
        addButton.setOnAction(new EventHandler<ActionEvent>() {  
            @Override  
            public void handle(ActionEvent e) {  
                data.add(new Person(  
                        addFirstName.getText(),  
                        addLastName.getText(),  
                        addEmail.getText()));  
                addFirstName.clear();  
                addLastName.clear();  
                addEmail.clear();  
            }  
        });  

        hb.getChildren().addAll(addFirstName, addLastName, addEmail, addButton);  
        hb.setSpacing(3);  

        final VBox vbox = new VBox();  
        vbox.setSpacing(5);  
        vbox.setPadding(new Insets(10, 0, 0, 10));  
        vbox.getChildren().addAll(label, table, hb);  

        ((Group) scene.getRoot()).getChildren().addAll(vbox);  

        stage.setScene(scene);  
        stage.show();  
    }  

    public static class Person {  

        private final SimpleStringProperty firstName;  
        private final SimpleStringProperty lastName;  
        private final SimpleStringProperty email;  

        private Person(String fName, String lName, String email) {  
            this.firstName = new SimpleStringProperty(fName);  
            this.lastName = new SimpleStringProperty(lName);  
            this.email = new SimpleStringProperty(email);  
        }  

        public String getFirstName() {  
            return firstName.get();  
        }  

        public void setFirstName(String fName) {  
            firstName.set(fName);  
        }  

        public String getLastName() {  
            return lastName.get();  
        }  

        public void setLastName(String fName) {  
            lastName.set(fName);  
        }  

        public String getEmail() {  
            return email.get();  
        }  

        public void setEmail(String fName) {  
            email.set(fName);  
        }  
    }  

    class EditingCell extends TableCell<Person, String> {  

        private TextField textField;  

        public EditingCell() {  
        }  

        @Override  
        public void startEdit() {  
            if (!isEmpty()) {  
                super.startEdit();  
                createTextField();  
                setText(null);  
                setGraphic(textField);  
                textField.selectAll();  
            }  
        }  

        @Override  
        public void cancelEdit() {  
            super.cancelEdit();  

            setText((String) getItem());  
            setGraphic(null);  
        }  

        @Override  
        public void updateItem(String item, boolean empty) {  
            super.updateItem(item, empty);  

            if (empty) {  
                setText(null);  
                setGraphic(null);  
            } else {  
                if (isEditing()) {  
                    if (textField != null) {  
                        textField.setText(getString());  
                    }  
                    setText(null);  
                    setGraphic(textField);  
                } else {  
                    setText(getString());  
                    setGraphic(null);  
                }  
            }  
        }  

        private void createTextField() {  
            textField = new TextField(getString());  
            textField.setMinWidth(this.getWidth() - this.getGraphicTextGap()* 2);  
            textField.focusedProperty().addListener(new ChangeListener<Boolean>(){  
                @Override  
                public void changed(ObservableValue<? extends Boolean> arg0,   
                    Boolean arg1, Boolean arg2) {  
                        if (!arg2) {  
                            commitEdit(textField.getText());  
                        }  
                }  
            });  
        }  

        private String getString() {  
            return getItem() == null ? "" : getItem().toString();  
        }  
    }
}

記住這種處理方式可能會在未來的升級中變得多餘,TextFieldTableCell 的實現對TextField的取代,提供了更好的而用戶體驗。

將Map數據添加到表格中

JavaFX SDK 2.2開始,你可以往表格中添加Map類型的數據。用如 例子1-9 展示的 利用MapValueFactory展示 student IDs Map;

例子1-9 往表格中添加Map數據

import java.util.HashMap;  
import java.util.Map;  
import javafx.application.Application;  
import javafx.collections.FXCollections;  
import javafx.collections.ObservableList;  
import javafx.geometry.Insets;  
import javafx.scene.Group;  
import javafx.scene.Scene;  
import javafx.scene.control.Label;  
import javafx.scene.control.TableCell;  
import javafx.scene.control.TableColumn;  
import javafx.scene.control.TableView;  
import javafx.scene.control.cell.MapValueFactory;  
import javafx.scene.control.cell.TextFieldTableCell;  
import javafx.scene.layout.VBox;  
import javafx.scene.text.Font;  
import javafx.stage.Stage;  
import javafx.util.Callback;  
import javafx.util.StringConverter;  

public class TableViewSample extends Application {  

    public static final String Column1MapKey = "A";  
    public static final String Column2MapKey = "B";  

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

    @Override  
    public void start(Stage stage) {  
        Scene scene = new Scene(new Group());  
        stage.setTitle("Table View Sample");  
        stage.setWidth(300);  
        stage.setHeight(500);  

        final Label label = new Label("Student IDs");  
        label.setFont(new Font("Arial", 20));  

        TableColumn<Map, String> firstDataColumn = new TableColumn<>("Class A");  
        TableColumn<Map, String> secondDataColumn = new TableColumn<>("Class B");  

        firstDataColumn.setCellValueFactory(new MapValueFactory(Column1MapKey));  
        firstDataColumn.setMinWidth(130);  
        secondDataColumn.setCellValueFactory(new MapValueFactory(Column2MapKey));  
        secondDataColumn.setMinWidth(130);  

        TableView table_view = new TableView<>(generateDataInMap());  

        table_view.setEditable(true);  
        table_view.getSelectionModel().setCellSelectionEnabled(true);  
        table_view.getColumns().setAll(firstDataColumn, secondDataColumn);  
        Callback<TableColumn<Map, String>, TableCell<Map, String>>  
            cellFactoryForMap = new Callback<TableColumn<Map, String>,  
                TableCell<Map, String>>() {  
                    @Override  
                    public TableCell call(TableColumn p) {  
                        return new TextFieldTableCell(new StringConverter() {  
                            @Override  
                            public String toString(Object t) {  
                                return t.toString();  
                            }  
                            @Override  
                            public Object fromString(String string) {  
                                return string;  
                            }                                      
                        });  
                    }  
        };  
        firstDataColumn.setCellFactory(cellFactoryForMap);  
        secondDataColumn.setCellFactory(cellFactoryForMap);  

        final VBox vbox = new VBox();  

        vbox.setSpacing(5);  
        vbox.setPadding(new Insets(10, 0, 0, 10));  
        vbox.getChildren().addAll(label, table_view);  

        ((Group) scene.getRoot()).getChildren().addAll(vbox);  

        stage.setScene(scene);  

        stage.show();  
    }  

    private ObservableList<Map> generateDataInMap() {  
        int max = 10;  
        ObservableList<Map> allData = FXCollections.observableArrayList();  
        for (int i = 1; i < max; i++) {  
            Map<String, String> dataRow = new HashMap<>();  

            String value1 = "A" + i;  
            String value2 = "B" + i;  

            dataRow.put(Column1MapKey, value1);  
            dataRow.put(Column2MapKey, value2);  

            allData.add(dataRow);  
        }  
        return allData;  
    }  
}  

MapValueFactory 類實現了Callback 接口,此接口爲定義表格列的單元格工廠而設計的。在例子1-9中,數據行 hash map(哈希map) 展現了TableView對象的一個單行。這個map有兩個String(字符串)類型的鍵: Column1MapKeyColumn2MapKey來映射第一和第二列對應的值。

表格列通過調用setCellValueFactory 來填充與指定鍵(key)相匹配的數據。以便第一列包含與”A“鍵(key)對應的值,第二列包含於key(鍵)”B“對應的值。

當你編譯並運行此應用,將顯示如圖所顯示的結果。
帶Map數據的表格

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章