JavaFX UI Controls Part 2

JavaFX UI Controls Part 1 << 前情

不論是在桌面、網頁或行動應用程式中，使用表格顯示一些應用程式的資料在畫面上，讓使用者瀏覽、選擇或是修改資料，都是一種很常見而且方便的作法。不過想要在畫面中提供表格的元件，通常就會比較複雜一些了。

JavaFX 2的TableView控制項元件，可以把應用程式的資料顯示在表格中，在TableView中加入需要的TableColumn物件，表示表格資料中的欄位，TableCell物件表示表格資料中的儲存格，提供資料給TableView使用的作法也非常方便。使用這些相關的API，可以在應用程式中提供瀏覽資料用的TableView，或是可以新增、修改和排序裡面的資料。

如果為TableView提供設定外觀的CSS檔案，也可以讓TableView不再是樸素而且簡單的元件。這是一個使用TableView元件瀏覽與管理使用者資料的應用程式畫面：

建立表格與加入欄位

TableView元件提供一個表格的容器，你可以依照應用程式的需求加入需要的欄位，每一個欄位是一個TableColumn物件，建立欄位物件的時候，可以設定它們的標題和大小。這個程式片段建立一個TableView物件，然後加入一些用來顯示使用者資料的欄位：

public class MyTableView extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        final Label label = new Label("Users Book");
        label.setFont(new Font("Arial", 24));

        final TableView table = new TableView();

        // 建立需要的欄位物件
        TableColumn accountCol = new TableColumn("Account");
        TableColumn passwordCol = new TableColumn("Password");
        TableColumn emailCol = new TableColumn("Email");
        TableColumn primaryEmailCol = new TableColumn("Primary");
        TableColumn secondEmailCol = new TableColumn("Secondary");

        // 設定欄位的寬度
        accountCol.setMinWidth(100);
        passwordCol.setMinWidth(100);
        primaryEmailCol.setMinWidth(200);
        secondEmailCol.setMinWidth(200);

        // 加入巢狀欄位
        emailCol.getColumns().addAll(primaryEmailCol, secondEmailCol);
        // 加入所有欄位
        table.getColumns().addAll(accountCol, passwordCol, emailCol);

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

        Scene scene = new Scene(vbox);
        primaryStage.setTitle("Users Table");
        primaryStage.setHeight(500);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

上面的程式片段執行後的畫面會像這樣：

提供表格使用的資料

JavaFX 2在提供資料給畫面元件的作法，已經完全改為標準的JavaBean規格，而且加入許多方便而且強大的設計，就算是提供資料給TableView使用，也變的非常簡單。為了提供資料給TableView元件使用，通常會把資料包裝為JavaBean物件，不過在建立這個JavaBean類別的時候，需要的欄位變數應該搭配使用JavaFX 2提供的資料聯結API。

這個程式碼是包裝使用者資料的JavaBean類別，為了提供應用程式測試用的資料，在這個類別裡面建立包含幾個使用者資料的「ObservableList」物件，它是用來設定給TableView元件用的：

public class User {
    private SimpleStringProperty account;
    private SimpleStringProperty password;
    private SimpleStringProperty primaryEmail;
    private SimpleStringProperty secondEmail;

    public User(String account, String password, String primaryEmail, String secondEmail) {
        this.account = new SimpleStringProperty(account);
        this.password = new SimpleStringProperty(password);
        this.primaryEmail = new SimpleStringProperty(primaryEmail);
        this.secondEmail = new SimpleStringProperty(secondEmail);
    }

    public String getAccount() {
        return account.get();
    }

    public void setAccount(String account) {
        this.account = new SimpleStringProperty(account);
    }

    public String getPassword() {
        return password.get();
    }

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

    public String getPrimaryEmail() {
        return primaryEmail.get();
    }

    public void setPrimaryEmail(String primaryEmail) {
        this.primaryEmail = new SimpleStringProperty(primaryEmail);
    }

    public String getSecondEmail() {
        return secondEmail.get();
    }

    public void setSecondEmail(String secondEmail) {
        this.secondEmail = new SimpleStringProperty(secondEmail);
    }

    public static ObservableList data = FXCollections.observableArrayList(
            new User("simon", "123", "[email protected]", "[email protected]"),
            new User("mary", "321", "[email protected]", "[email protected]"),
            new User("sam", "555", "[email protected]", "[email protected]"),
            new User("jo", "999", "[email protected]", "[email protected]"),
            new User("emma", "135", "[email protected]", "[email protected]"));
}

準備好測試需要的資料後，回到應用程式中，加入這些程式片段，建立測試資料和TableColumn的連結：

// 設定每一個欄位對應的JavaBean物件與Property名稱
accountCol.setCellValueFactory(
        new PropertyValueFactory("account"));
passwordCol.setCellValueFactory(
        new PropertyValueFactory("password"));
primaryEmailCol.setCellValueFactory(
        new PropertyValueFactory("primaryEmail"));
secondEmailCol.setCellValueFactory(
        new PropertyValueFactory("secondEmail"));
// 設定TableView元件使用的資料
table.setItems(User.data);

加入這些設定後，測試用的資料就會在TableView元件中顯示：

新增資料到表格

JavaFX 2資料與畫面的連結採用全新的設計，在這個範例中指定給TableView元件的資料是一個「ObservableList」物件，只要把資料加入這個物件，TableView元件就會自動顯示最新的資料。這個程式片段示範新增一筆使用者資料的作法：

User.data.add(new User("NewAccount", "NewPassword", "NewEmail", "NewEmail2"));

修改表格中的資料

如果需要讓使用者直接在TableView元件中修改資料，必須呼叫TableView類別的「setEditable」方法，把參數指定為true設定為可以修改表格中的資料。JavaFX 2提供文字、勾選和下拉式選單欄位，依照資料的需求，呼叫TableColumn類別的「setCellFactory」方法設定一種修改資料的種類。另外必須為TableColumn註冊一個「onEditCommit」事件，在使用者修改資料後執行儲存的工作。這個程式片段示範設定帳號欄位讓使用者修改資料的作法：

// 設定TableView元件為可以修改資料
table.setEditable(true);
// 設定帳號為可以輸入文字的欄位
accountCol.setCellFactory(TextFieldTableCell.forTableColumn());
// 儲存帳號資料
accountCol.setOnEditCommit(
    new EventHandler<CellEditEvent>() {
        @Override
        public void handle(CellEditEvent event) {
            int position = event.getTablePosition().getRow();
            User user = (User)(event.getTableView().getItems().get(position));
            user.setAccount(event.getNewValue());
        }
    });

使用CSS設定表格的外觀

TableView元件提供很多搭配使用的CSS樣式類別，你可以在CSS設定檔中控制整個TableView元件的外觀，搭配使用的樣式類別名稱是「table-view」。另外還有「table-row-cell」和「table-cell」樣式類別，可以設定表格中列和格子的樣式，例如使用者選擇與空白列與格子的樣式。這個CSS檔案中的內容設定選擇列和空白區域的樣式：

.table-row-cell:selected {
    -fx-background-color:
        linear-gradient(
            derive(#0049a6, 120%), 
            derive(#0049a6, 90%)
        ),
        radial-gradient(
            center 50% -40%, 
            radius 180%, 
            derive(#0049a6, 95%) 55%, 
            derive(#0049a6, 75%) 55%
        );  
    -fx-background-radius: 4, 3;
    -fx-background-insets: 0, 1;
    -fx-effect: dropshadow(three-pass-box , rgba(0,0,0,0.55) , 5, 0.0 , 0 , 1 );
    -fx-text-fill: derive(#0049a6, -60%);
}

.table-row-cell:empty {
    -fx-background-color: lightyellow;
}
.table-row-cell:empty .table-cell {
    -fx-border-width: 0px;
}

建立好CSS檔案後，回到應用程式中，加入設定CSS樣式檔案的程式片段：

String cssFile = getClass().getResource("MyStyle.css").toExternalForm();
scene.getStylesheets().add(cssFile);

這是設定樣式前與設定樣式後的畫面：

後續 >> JavaFX 2 Charts Part 1