2014年10月10日 星期五

JavaFX 8 Tree Table

JavaFX 8新增樹狀表格(Tree Table),樹狀表格結合樹與表格物件,因此與後兩者十分類似,特色是將樹狀物件置於表格單元之中,讓表格單元中的資料以階層的方式呈現,下圖為樹狀表格的樣式:
JavaFX的樹狀表格物件由以下類別所組成:
  • javafx.scene.control.TreeTableView
  • javafx.scene.control.TreeTableColumn
  • javafx.scene.control.TreeTableRow
  • javafx.scene.control.TreeTableCell
  • javafx.scene.control.cell.CheckBoxTreeTableCell
  • javafx.scene.control.cell.ChoiceBoxTreeTableCell
  • javafx.scene.control.cell.ComboBoxTreeTableCell
  • javafx.scene.control.cell.TextFieldTreeTableCell
首先以TreeItem類別建立樹狀物件的根節點,並以setExpanded()方法設定節點的展開狀態:
// 建立根節點
TreeItem<String> treeRoot = new TreeItem<>("Root node");
// 設定節點的展開狀態
treeRoot.setExpanded(true);
...
接著以TreeItem類別建立子節點,並以TreeItem類別的getChildren().add()getChildren().addAll()方法依序將子節點加入至根節點之中:
// 建立子節點
TreeItem<String> treeItem1 = new TreeItem<>("Profile");
TreeItem<String> treeItem2 = new TreeItem<>("Course");
TreeItem<String> treeItem3 = new TreeItem<>("Publication");
TreeItem<String> treeItem4 = new TreeItem<>("Book");
TreeItem<String> treeItem5 = new TreeItem<>("Project");

// 依序將子節點加入至根節點之中
treeRoot.getChildren().addAll(
  treeItem1, treeItem2, treeItem3, treeItem4, treeItem5);
...
待建立樹狀物件之後,則以TreeTableColumn類別設定直行的相關屬性如直行標題,本範例僅設定一直行:
// 設定直行標題
TreeTableColumn<String,String> treeTableColumn = 
  new TreeTableColumn<>("Vita");

// 設定直行屬性
treeTableColumn.setCellValueFactory(
  (CellDataFeatures<String,String> p) -> 
  new ReadOnlyStringWrapper(p.getValue().getValue()));  
...
最後以TreeTableView類別的getColumns().add()getColumns().addAll()方法依序將直行加入至樹狀表格之中:
// 建立TreeTableView物件
TreeTableView<String> treeTableView = null;
treeTableView = new TreeTableView<>(treeRoot);

// 依序將直行加入至樹狀表格之中
treeTableView.getColumns().add(treeTableColumn);
// 設定是否顯示根節點
treeTableView.setShowRoot(true); 
// 設定是否可以選擇樹狀表格單元
treeTableView.getSelectionModel().setCellSelectionEnabled(false);
// 設定複選模式
treeTableView.getSelectionModel().setSelectionMode(
  SelectionMode.MULTIPLE);
// 設定直行的調整原則
treeTableView.setColumnResizePolicy(
  TreeTableView.CONSTRAINED_RESIZE_POLICY);
// 設定是否顯示樹狀表格選單按鈕
treeTableView.setTableMenuButtonVisible(true);
...
【執行結果】
除了上述範例的建立方式之外,亦可以陣列的方式處理多直行的樹狀表格單元。首先自定Department類別以建立節點陣列:
// 自定Department類別
public class Department {
  private SimpleStringProperty faculty;
  private SimpleStringProperty position;
  private SimpleStringProperty email;
  private SimpleStringProperty office; 
  private SimpleStringProperty phone;

  public Department(String _faculty, String _position, 
    String _email, String _office, String _phone) {

    this.faculty = new SimpleStringProperty(_faculty);
    this.position = new SimpleStringProperty(_position);
    this.email = new SimpleStringProperty(_email);
    this.office  = new SimpleStringProperty(_office);
    this.phone = new SimpleStringProperty(_phone);
  }

  public SimpleStringProperty facultyProperty() {
    if (faculty == null) {
      faculty = new SimpleStringProperty(this, "faculty");
    }
    return faculty;
  }
  ...

  public String getFaculty() {
    return faculty.get();
  }

  public void setFaculty(String _faculty) {
    faculty.set(_faculty);
  }
  ...
}  
...
以此自定的Department類別建立節點陣列:
// 建立節點陣列
ObservableList<Department> department = 
  FXCollections.observableArrayList(
    new Department("Athena", "Associate Professor", "athena@edu.tw",
      "725", "6400"),
    new Department("Leo", "Associate Professor", "leo@edu.tw",
      "813", "6506"),
    new Department("Teresa", "Professor", "teresa@edu.tw",
      "825", "4059"),
    ...);
...
【執行結果】
【參考資料】

[1] Java Official Web Site:http://www.oracle.com/technetwork/java/index.html
[2] JavaFX:http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang

8 則留言:

  1. 哇…我喜歡這個!!!

    請教一下…root除了用css之外,可以用java直接設定嗎?

    回覆刪除
  2. 哈…變相做一個Label,貼上底圖就OK了…

    回覆刪除
    回覆
    1. Dear Linuxice

      可參考上述範例建立一個直行或兩個以上直行的樹狀表格,不過兩種方式不太一樣

      Thanks a lot.

      Leo

      刪除
  3. 做了一個RGB換色的程式…原始碼:

    https://drive.google.com/file/d/0B2z0BtOkkf7gZC00OThscDR3NlU/view?usp=sharing

    回覆刪除
    回覆
    1. Dear Linuxice

      感謝你的分享 讚喔

      Thanks a lot.

      Leo

      刪除
    2. 哈…謝謝您的錯愛♥

      其實小弟也很感謝您,不厭其煩的回答,也很感謝您的書…

      如果JavaFX8的書沒出真的很可惜…可以直接跟您買嗎?哈…開玩笑的

      刪除
    3. Dear Linuxice

      互相交流而已,不算什麼,不過開學之後比較忙,無法一一回答,請見諒

      JavaFX8有書商要出了,正在排版中

      Leo

      刪除