top

JavaFX UI Controls Part 2

分享:

JavaFX UI Controls Part 1 << 前情

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

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

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

建立表格與加入欄位

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-ui-controls-part-2-2

提供表格使用的資料

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", "simon@javafx.com", "simon@oracle.com"),
            new User("mary", "321", "mary@javafx.com", "mary@oracle.com"),
            new User("sam", "555", "sam@javafx.com", "sam@oracle.com"),
            new User("jo", "999", "jo@javafx.com", "jo@oracle.com"),
            new User("emma", "135", "emma@javafx.com", "emma@oracle.com"));
}

準備好測試需要的資料後,回到應用程式中,加入這些程式片段,建立測試資料和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-ui-controls-part-2-3

新增資料到表格

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-ui-controls-part-2-4 javafx-ui-controls-part-2-5

 

後續 >> JavaFX 2 Charts Part 1

分享:
按讚!加入 CodeData Facebook 粉絲群

留言

留言請先。還沒帳號註冊也可以使用FacebookGoogle+登錄留言

關於作者

張益裕。目前是自由講師與作者,專長是教育訓練課程規劃、教材編製與課程推廣,技術書籍與專欄寫作。涵蓋的領域有OOAD、Java程式設計、JavaFX、Java Embedded、Android與SQL。

熱門論壇文章

熱門技術文章