[JavaFX] JavaFX TableView Data 추가 TableView 컬럼 합치기

JavaFX TableView를 Scene Builder를 이용하여 data를 추가하고 만들고 사용법에 대해 간단히 소개하려고 한다.

JavaFX에서 fxml로 UI를 만들고 로드해서 TableView에 데이터를 생성하는 방법이 Web에서 테이블을 만들고

tr, td생성 후 데이터를 넣는 방식과는 조금 다르다.

그래서 이번 글에서는 TableView 생성 후 데이터를 가공해서 TableView에 넣는 방법, 그리고 테이블의 컬럼을 colspan, rowspan하는 방법에 대해 알아보려고 한다.

 

1. TableView column merge

2. TableView 생성 후 데이터 넣기

 

 

TableView 컬럼 합치기

fxml과 controller 를 먼저 만들어 준다.

fxml에서 TableView만 만들고 컬럼은 controller에서 만들고 merge 하려고 한다.

fxml에 fx:id 를 tableMerge인 TableView를 만든다.

<TableView fx:id="tableMerge" layoutX="10" layoutY="400" prefHeight="100" prefWidth="900" />

controller에서 initialize 초기화로 테이블의 컬럼을 초기화 한다.

@FXML
private TableView<String> tableMerge;

@Override
public void initialize(URL location, ResourceBundle resources) {
  TableColumn<String, String> col1 = new TableColumn<>("no");
  TableColumn<String, String> col2 = new TableColumn<>("Name");
  TableColumn<String, String> col2-1 = new TableColumn<>("First Name");
  TableColumn<String, String> col2-2 = new TableColumn<>("Last Name");
  col2.getColumns().addAll(col2-1, col2-2);
  
  tableMerge.getColumns().addAll(col1, col2);
}

 

 

TableView 데이터 추가

이번에는 fxml에서 TableView와 column을 만들고 TextField에 값을 입력 후 Button클릭 시 TextField에 있는

값들을 TableView 에 추가하는 코드입니다.

그러려면 fxml 파일에서 UI를 그리고 controller에서 객체 생성 및 데이터를 추가해야 합니다.

name, age, phone 컬럼과 필드를 만들고 버튼에 onAction 을 추가합니다.

AnchorPane에 fx:controller 로 컨트롤러를 지정해줘야 합니다.

<AnchorPane fx:controller="application.TableController">
<TableView fx:id="tableView">
  <columns>
    <TableColumn text="Name" fx:id="colName" />
    <TableColumn text="Age" fx:id="colAge" />
    <TableColumn text="Phone" fx:id="colPhone" />
  </columns>
</TableView>

<TextField fx:id="nameTxt" />
<TextField fx:id="nameAge" />
<TextField fx:id="namePhone" />

<Button text="add" onAction="#add" />
</AnchorPane>

 

ObservableList는 User객체를 담아 변경사항이 발생할 때 변경사항을 추적할 수 있도록 하는 목록이다.

FXCollections는 ObservableList를 리턴한다.

initialize에서 테이블을 초기화해 준다.

컬럼의 setCellValueFactory를 사용하였는데 컬럼의 셀을 채울 때 사용하는 메소드인 것 같다. observablevalue인스턴스의 값을

즉시 업데이트하여 화면에 반영할 수 있도록 하는 것 같다.

public class TableController implements Initializable {
  @FXML
  private TableView<User> tableView;
  @FXML
  private TableColumn<User, String> colName;
  @FXML
  private TableColumn<User, Integer> colAge;
  @FXML
  private TableColumn<User, String> colPhone;
  @FXML
  private TextField nameTxt;
  @FXML
  private TextField ageTxt;
  @FXML
  private TextField phoneTxt;
  
  ObservableList<User> observableList;
  
  @FXML
  private void add() {
    observableList.add(new User(nameTxt.getText(), Integer.parseInt(ageTxt.getText()), phoneTxt.getText()));
  }
  
  @Override
  public void initialize(URL location, ResourceBundle resources) {
    observableList = FXCollections.observableArrayList();
    colName.setCellValeuFactory(new PropertyValueFactory<>("UserName"));
    colAge.setCellValueFactory(new PropertyValueFactory<>("UserAge"));
    colPhone.setCellValueFactory(new PropertyValueFactory<>("UserPhone"));
    tableView.setItems(observableList);
  }
  
}

 

User 객체를 생성하고 생성자와 getter, setter를 만들어 준다.

주의할 점은 controller에서 초기화 시 컬럼에 PropertyValueFacotry에 사용한 값과 User객체의 변수명과 동일해야 한다.

public class User {
  private SimpleStringProperty userName;
  private SimpleStringProperty userAge;
  private SimpleStringProperty userPhone;
  
  public User(String userName, int age, String userPhone) {
    super();
    this.userName = new SimpleStringProperty(userName);
    this.userAge = new SimpleStringProperty(userAge);
    this.userPhone = new SimpleStringProperty(userPhone);
  }
  
  public String getUserName() {
    return userName.get();
  }
  public void setUserName(String userName) {
    this.userName = new SimpleStringProperty(userName);
  }
  public int getUserAge() {
    return userAgel.get();
  }
  public void setUserAge(int userAge) {
    this.userAge = new SimpleStringProperty(userAge);
  }
  public String getUserPhone() {
    return userPhone.get();
  }
  public void setUserPhone(String userPhone) {
    this.userPhone = new SimpleStringProperty(userPhone);
  }
}