[JavaFX] Table View 사용법

들어가며

• JavaFX TableView 사용법에 대한 내용은 되도록이면 새로 작성된 버전이 있으니 아래 리뉴얼 버전을 참고부탁드립니다.

(JavaFX) JavaFX TableView 사용법 ver.2

---

 

 

Table View 사용법

 

 이번 시간에는 JavaFX의 Table View 사용법에 대해서 알아보도록 하겠습니다. 

 

 일단 Table View를 fxml코드에서 생성해보겠습니다. 

 

 

■ TableView 생성

 

 

 * 참고로 모든 소스파일들은 하나의 안에 있습니다. (저의 경우는 sample패키지), Controller 클래스는 그냥 만들기만 해주세요.

 

 

sample.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.VBox?>
<VBox fx:controller="sample.tableview.Controller" stylesheets="@tableview.css"
      xmlns:fx="http://javafx.com/fxml" alignment="center">
    <padding>
        <Insets top="10" right="10" bottom="10" left="10"/>
    </padding>
    <TableView>
 
    </TableView>
</VBox>

 

 

 Main.java 는 아래와 같이 적어줍니다. 

 

Main.java

public class Main  extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("tableview.fxml"));
        primaryStage.setTitle("Chart Test");
        primaryStage.setScene(new Scene(root, 700, 300));
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}
 

 

 

 CSS 파일는 아래의 파일을 다운 받으셔서 패키지 안에 넣어주면 됩니다.

 

 

tableview.css

다운로드

 

 

자.. 그럼 아래와 같은 결과가 나타납니다.

 

 

 

 

 

초라해 보이죠 ..? 괜찮습니다. 이제부터 테이블뷰를 채워보겠습니다.

 

 

 

 

■ Column 생성

 

 

 이제 해야할 것은 Table의 Column을 생성하는 일입니다. 방법은 TableColumn 클래스를 이용하면 됩니다. 아래처럼 말이죠. 위에서 작성했던 fxml 코드의 TableView 부분을 아래의 코드로 바꿔주시면 됩니다. 

 

 

 

sample.fxml

 

    <TableView fx:id="myTableView">
        <columns>
            <TableColumn text="Name" fx:id="nameColumn" prefWidth="170"/>
            <TableColumn text="Address" fx:id="addressColumn" prefWidth="170"/>
            <TableColumn text="Gender" fx:id="genderColumn" prefWidth="170"/>
            <TableColumn text="Class" fx:id="classColumn" prefWidth="170"/>
        </columns>
    </TableView>

 

 

 

 보시다싶이 ID 값을 추가했습니다. 그리고 보기 좋게 하려고 사이즈 조정을 조금 했습니다...

 

 

 이렇게 수정한 뒤 실행해보면 

 

 

 

 

 

 

이렇게 Column 이 추가 되었습니다 ! 그럼 이제 마지막으로 데이터를 넣어보도록 하겠습니다.

 

 

 

■ Data 삽입

 

 

 일단 먼저 TableView의 DataModel을 정의해보겠습니다. 

 

 

TableRowDataModel.java

public class TableRowDataModel {
    private StringProperty name;
    private StringProperty address;
    private StringProperty gender;
    private IntegerProperty classNum;
 
    public TableRowDataModel(StringProperty name, StringProperty address, StringProperty gender, IntegerProperty classNum) {
        this.name = name;
        this.address = address;
        this.gender = gender;
        this.classNum = classNum;
    }
 
    public StringProperty nameProperty() {
        return name;
    }
    public StringProperty addressProperty() {
        return address;
    }
    public StringProperty genderProperty() {
        return gender;
    }
    public IntegerProperty classNumProperty() {
        return classNum;
    }
}

 

 

 DataModel은 TableView의 칼럼들의 데이터 형식 이라고 보시면 됩니다. 이때 형식은 프로퍼티로 정의가 되는데 데이터를 넣어줄 때도 데이터 하나하나가 프로퍼티로 이루어져 있습니다.  

 

 

  이제 데이터 리스트를 만들고 데이터를 넣어보겠습니다. 리스트는 Controller 클래스안에서 만들어주기 때문에 Controller 클래스를 아래와 같이 작성해보겠습니다. 

 

 

Controller.java

public class Controller implements Initializable {
    @FXML
    private TableView<TableRowDataModel> myTableView;
    @FXML
    private TableColumn<TableRowDataModel, String> nameColumn;
    @FXML
    private TableColumn<TableRowDataModel, String> addressColumn;
    @FXML
    private TableColumn<TableRowDataModel, String> genderColumn;
    @FXML
    private TableColumn<TableRowDataModel, Integer> classColumn;
 
 
    ObservableList<TableRowDataModel> myList = FXCollections.observableArrayList(
            new TableRowDataModel(new SimpleStringProperty("Jin Seong"), new SimpleStringProperty("DaeJeon"), new SimpleStringProperty("male"), new SimpleIntegerProperty(3)),
            new TableRowDataModel(new SimpleStringProperty("Jang Ho"), new SimpleStringProperty("SiGol"), new SimpleStringProperty("male"), new SimpleIntegerProperty(3)),
            new TableRowDataModel(new SimpleStringProperty("Sung Bin"), new SimpleStringProperty("SuWon"), new SimpleStringProperty("male"), new SimpleIntegerProperty(3)),
            new TableRowDataModel(new SimpleStringProperty("Key Hwang"), new SimpleStringProperty("DaeJeon"), new SimpleStringProperty("male"), new SimpleIntegerProperty(3)),
            new TableRowDataModel(new SimpleStringProperty("Seong Woo"), new SimpleStringProperty("DaeJeon"), new SimpleStringProperty("male"), new SimpleIntegerProperty(3)),
            new TableRowDataModel(new SimpleStringProperty("I kyun"), new SimpleStringProperty("BuSan"), new SimpleStringProperty("male"), new SimpleIntegerProperty(3))
    );
 
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        nameColumn.setCellValueFactory(cellData -> cellData.getValue().nameProperty());
        addressColumn.setCellValueFactory(cellData -> cellData.getValue().addressProperty());
        genderColumn.setCellValueFactory(cellData -> cellData.getValue().genderProperty());
        classColumn.setCellValueFactory(cellData -> cellData.getValue().classNumProperty().asObject());
        myTableView.setItems(myList);
    }
}
 

 

 

 위 코드를 보시면 TableView와 TableColumn 들 모두 위에서 정의한 데이터 모델로 이루어져있다는 것을 알수 있습니다. 그리고 데이터 리스트들 역시도 SimpleProperty로 모두 Property로 생성하고 있는 모습을 볼수 있습니다. 

 

 그 후에 Column들 하나하나를 setCellValueFactory 메소드로 cell에 들어갈 데이터 형식을 DataModel에 있는 프로퍼티로 세팅을 하는 모습을 볼 수 있습니다. 그런 후에 마지막으로 setItems로 위에서 생성한 리스트를 세팅해주는 방식입니다. 

 

 

 

■ 결과 화면

 

 

 

 

봐주셔서 감사합니다 :) 다음시간에는 만든 테이블뷰의 이벤트 처리 하는 방법에 대해서 알아보겠습니다.

---

관련글

(JavaFX) JavaFX Spinner 개념 및 사용법

(JavaFX) JavaFX ImageView 사용법 (이미지 전시 방법)

[JavaFX] 실시간 업데이트 되는 Timer(시계) 컨트롤 구현 방법

[JavaFx] Tray Icon에 메뉴 추가 방법 (Tray Menu 사용법)