[JavaFX] TableView 응용 ( TableView에 동적으로 데이터 추가 해보기 )

TableView에 동적으로 데이터 추가 하기

  이번 시간에는 TableView의 응용으로 간단하게 TextField에 데이터를 입력하고 TableView에 데이터를 추가하는 방법에 대해서 알아보도록 하겠습니다. TableView의 사용법은 TableView 사용법 을 참고하시면 됩니다.

 이번시간에 만들어 볼 것은 TableView아래에 TextField가 있어서 데이터를 입력하고 버튼을 누르면 바로 테이블 뷰에 Row 하나가 추가되는 프로그램을 만들어 볼 것 입니다. 시작해보죠.

■ UI 

 UI는 이전에 만든 TableView를 사용하겠습니다. 그리고 그 아래에다가 간단하게 HBox로 TextField와 Button을 생성해보겠습니다. 

<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 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>
    <HBox>
        <TextField promptText="Name" prefWidth="140" fx:id="nameField">
            <HBox.margin>
                <Insets right="6"/>
            </HBox.margin>
        </TextField>
        <TextField promptText="Address" prefWidth="140" fx:id="addressField">
            <HBox.margin>
                <Insets right="6"/>
            </HBox.margin>
        </TextField>
        <TextField promptText="Gender" prefWidth="140" fx:id="genderField">
            <HBox.margin>
                <Insets right="6"/>
            </HBox.margin>
        </TextField>
        <TextField promptText="ClassNumber" prefWidth="140" fx:id="classField">
            <HBox.margin>
                <Insets right="6"/>
            </HBox.margin>
        </TextField>
        <Button text="Add" prefWidth="80" prefHeight="30" fx:id="addButton"/>
        <VBox.margin>
            <Insets top="6"/>
        </VBox.margin>
    </HBox>
</VBox>

 ID도 붙여줍니다. 그럼 아래와 같은 UI를 보실 수 있습니다.

■ Controller

 이전 포스트를 참고하기 귀찮을 테니 전체 코드를 보여드리겠습니다. 

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;
    @FXML
    private TextField nameField;
    @FXML
    private TextField addressField;
    @FXML
    private TextField genderField;
    @FXML
    private TextField classField;
    @FXML
    private Button addButton;
 
    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);
 
        addButton.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                myTableView.getItems().add(new TableRowDataModel(new SimpleStringProperty(nameField.getText()), new SimpleStringProperty(addressField.getText()),
                                            new SimpleStringProperty(genderField.getText()), new SimpleIntegerProperty(Integer.parseInt(classField.getText()))));
            }
        });
    }
}

 중요한 부분은 EventHandler 부분입니다. Button 이 눌렀을 때 TextField의 값을 가져와 StringProperty로 RowDataModel 객체로 TableView에 Data를 add 해주는 원리 입니다.

■ 결과 화면

  봐주셔서 감사합니다 :)