자바 자바fx 테이블뷰 TableView [북붙따라하기]

TableView

사용 예제 ) 코드를 복붙 하여 실행해 보시기 바랍니다.

설명은  주석과 코드 아랫부분에  있습니다.

1. 메인 파일 예제입니다.(title 만 다르고 내용이 거의 변하지 않습니다.)

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {
	@Override
	public void start(Stage primaryStage) throws Exception {
		Parent root = (Parent)FXMLLoader.load(getClass().getResource("main.fxml"));
		Scene scene = new Scene(root);
		
		primaryStage.setTitle("TableView 예제 입니다.");
		primaryStage.setScene(scene);
		primaryStage.show();
		primaryStage.setAlwaysOnTop(true);
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

 

 

2. main.fxml  파일 예제입니다.

그대로 복붙 하여 테스트해보시면 됩니다.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="590.0" prefWidth="780.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MainHandler">
   <children>
      <Button layoutX="18.0" layoutY="31.0" mnemonicParsing="false" prefHeight="38.0" prefWidth="740.0" style="-fx-border-color: #CECEF6; -fx-background-color: #0174DF;" text="테이블뷰 예제 입니다." textFill="#fbfcf9">
         <font>
            <Font name="Batang" size="20.0" />
         </font>
      </Button>
      <Button fx:id="bt_view" layoutX="304.0" layoutY="89.0" mnemonicParsing="false" onAction="#sel_bt_view" prefHeight="32.0" prefWidth="454.0" style="-fx-border-color: #0174DF; -fx-background-color: gray;" text="테이블 정보보기" textFill="#fcf6f6" />
      <Button layoutX="18.0" layoutY="89.0" mnemonicParsing="false" prefHeight="32.0" prefWidth="274.0" style="-fx-border-color: #0174DF;" text="출력창" />
      <TableView fx:id="tableView1" layoutX="302.0" layoutY="150.0" onMouseClicked="#selecttableView1" prefHeight="418.0" prefWidth="454.0" style="-fx-border-color: #0174DF;">
        <columns>
            <TableColumn fx:id="tableViewColumn1" prefWidth="54.0" text="번 호" />
          <TableColumn fx:id="tableViewColumn2" prefWidth="108.0" text="등록번호" />
          <TableColumn fx:id="tableViewColumn3" minWidth="0.0" prefWidth="65.0" text="이름" />
            <TableColumn fx:id="tableViewColumn4" prefWidth="104.0" text="부서/소속" />
            <TableColumn fx:id="tableViewColumn5" prefWidth="121.0" text="직급/직책" />
        </columns>
      </TableView>
      <TextField fx:id="textField1" layoutX="18.0" layoutY="150.0" prefHeight="60.0">
         <font>
            <Font size="18.0" />
         </font>
      </TextField>
      <TextField fx:id="textField2" layoutX="18.0" layoutY="213.0" prefHeight="60.0">
         <font>
            <Font size="18.0" />
         </font>
      </TextField>
      <TextField fx:id="textField3" layoutX="18.0" layoutY="279.0" prefHeight="60.0">
         <font>
            <Font size="18.0" />
         </font>
      </TextField>
      <TextField fx:id="textField4" layoutX="18.0" layoutY="349.0" prefHeight="60.0">
         <font>
            <Font size="18.0" />
         </font>
      </TextField>
      <TextField fx:id="textField5" layoutX="18.0" layoutY="430.0" prefHeight="60.0">
         <font>
            <Font size="18.0" />
         </font>
      </TextField>
   </children>
</AnchorPane>

 

3. TableData.java  파일입니다.

그대로 복붙 하여 테스트하시길 바랍니다.

테이블뷰 처리를 위한 단순 클래스입니다.

public class TableData {
	String strNum;
	String strId;
	String strName;
	String strGroup;
	String strClass;
	
	//배열을 받아서 각각의 항목의 저장을 합니다.
	//그리고 출력때 사용 합니다.
	//만들때는 get / set 으로 만들면 됩니다.
	public TableData(String[] strArr) {
		
		this.strNum = strArr[0];
		this.strId = strArr[1];
		this.strName = strArr[2];
		this.strGroup = strArr[3];
		this.strClass = strArr[4];
	}
	public String getStrNum() {
		return strNum;
	}
	public void setStrNum(String strNum) {
		this.strNum = strNum;
	}
	public String getStrId() {
		return strId;
	}
	public void setStrId(String strId) {
		this.strId = strId;
	}
	public String getStrName() {
		return strName;
	}
	public void setStrName(String strName) {
		this.strName = strName;
	}
	public String getStrGroup() {
		return strGroup;
	}
	public void setStrGroup(String strGroup) {
		this.strGroup = strGroup;
	}
	public String getStrClass() {
		return strClass;
	}
	public void setStrClass(String strClass) {
		this.strClass = strClass;
	}
	
	
	
}

 

 

4. MainHandler.java 핸들러 파일입니다.

그대로 복붙 하여 테스트하시길 바랍니다.

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.MouseEvent;



public class MainHandler implements Initializable {
	
	//"테이블 정보보기 " 버튼 입니다.
    @FXML
    private Button bt_view;

    //테이블의 테이터를 선택 했을때 각각의 테이터를 출력할 곳입니다.
    @FXML
    private TextField textField1,textField2,textField3,textField4,textField5;

    /*테이블 뷰는 리스트 뷰와 다르게 데이터가 많아서 배열로 하는것 보다 
    	클래스를 만들어서 하는 것이 쉽고 간편합니다.
    	그래서  TableVDate 라는 클래스를 만들어서 데이트 타입을 클래스로 
    	지정 했습니다.
    	문자열배열을 이용해도 됩니다.
    	그렇게 하면 실제 코딩에서 자료를 받아 출력할때 많이 귀찮아 집니다.
   */
    @FXML
    private TableView<TableData> tableView1;
    
    //테이블 칼럼을 칼럼갯수(출력할 데이터의 칸수) 만큼 선언. 
    @FXML
    private TableColumn tableViewColumn1,tableViewColumn2;
    @FXML
    private TableColumn tableViewColumn3,tableViewColumn4,tableViewColumn5;
    
    @Override
	public void initialize(URL arg0, ResourceBundle arg1) {
    	/*시작 하면서 테이블의 테이터를 보시길 원하시면
    	 * 아래의  sel_bt_view의 부분을 여기 부분에 복붙 하시면 됩니다.
    	 * 따로 핸들러를 클릭해야 테이블의 데이터를 보이게 할려고
    	 * 밑에 핸들러에 칼럼부분을 작성 했습니다.
    	 * 칼럼설정 부분은 어느쪽에 있어도 상관없으면 이곳이나 아래쪽에 
    	 * 있기만 하면 됩니다. 
    	 */
    }
    
    //회색 버튼 의 핸들러 부분 여기를 누르면 테이블뷰의 리스트가 출력됩니다.
    @FXML
    void sel_bt_view(ActionEvent event) {
    	
    	//table뷰의 컬럼부분   컬럼은 5개이다.
    	//항목이 추가 되면 숫자만 증가시켜서 추가 하시면 되고
    	//TableData 클래스에 여기하고 맞게 항목을 같이 
    	//추가 하면 됩니다.
		TableColumn tableViewColumn1=tableView1.getColumns().get(0);
		tableViewColumn1.setCellValueFactory(new PropertyValueFactory("strNum"));
		
		TableColumn tableViewColumn2=tableView1.getColumns().get(1);//테이블븅의 첫번째 컬럼을 생성한다.
		tableViewColumn2.setCellValueFactory(new PropertyValueFactory("strId"));//tableㅇ의 첫번째 컬럼을 strid와대응시킨다.
		
		
		TableColumn tableViewColumn3=tableView1.getColumns().get(2);
		tableViewColumn3.setCellValueFactory(new PropertyValueFactory("strName"));
		
		TableColumn tableViewColumn4=tableView1.getColumns().get(3);
		tableViewColumn4.setCellValueFactory(new PropertyValueFactory("strGroup"));
		
		TableColumn tableViewColumn5=tableView1.getColumns().get(4);
		tableViewColumn5.setCellValueFactory(new PropertyValueFactory("strClass"));
		
		
		
		//for문 안에서 입출력에 사용할 직접만든 테이블 클래스를 선언 합니다. 
		TableData vtData = null;
		/*출력할 데이터의 갯수를 임의로 정했습니다.
		 * 실전에서는 보통 배열로 받습니다.
		 * 그래서 nCnt 에 배열의 갯수를 넣으면 되겠습니다.
		 * 예> int nCnt = 배열명.length;
		 * 이렇게 하면 배열의 갯수만큼 처리 해서 출력해 줍니다.
		 * 지금 예제에서는 1000 이라 1000줄의 데이터가 생깁니다.
		 */
    	
		
		int nCnt =1000;
    	for (int i = 1; i <= nCnt; i++) { // 테이블들어갈 내용을 만드는 부분
			
			//컴럼의 갯수만큼 문자열 배열을 만들어 줍니다.
			String[] strRecord = new String[5]; // 컬럼수가5개이다.
						
			/*각각의 부분에 출력할 데이터를 입력합니다.
			 * 보통 배열로 받는 경우가 많아서 배열의 인자를 
			 * 서로 매칭 해주면 되겠습니다.
			 * 예) 
			 * for(int j=0; j< strRecord.length;j++){
			 * 		strRecord[0] = 입력데이터배열[j];
			 * 		strRecord[1] = 입력데이터배열[j];
			 * 					.
			 * 					.
			 * }
			 */
			strRecord[0] = ""+i;
			strRecord[1] = "등록번호 : "+(i+10000);
			strRecord[2] = "이름 : "+i;
			strRecord[3] = "부서/소속 : "+i;
			strRecord[4] = "직급 / 직책 : "+i;					

			// TableData클래스의  데이터를 한번에 입력
			//하면 생성자를 만들어 그것을 출력에 사용한다.
			vtData = new TableData(strRecord);
			tableView1.getItems().add(vtData); 
		}
    }

    
    //테이블 뷰에서 각 항목을 선택했을때 출력창에 표시 해주는 부분
    @FXML
    void selecttableView1(MouseEvent event) {

    	// 선택했을 때 인덱스 값을 가지고 옴
    	//.getSelectedIndex() 메소드를 사용
    	int nSel = tableView1.getSelectionModel().getSelectedIndex(); 
		
    	//0부터 값이 전달되어서 1을 더하기 했음
    	textField5.setText((nSel+1)+" 번째 행을 선택");		
    	
		//선택한 행의 데이터를 테이블 데이터 로 보낸다.
    	//.getSelectedItem() 메소드를 사용
		TableData vtd = tableView1.getSelectionModel().getSelectedItem();
			

		textField1.setText(vtd.getStrId());
		textField2.setText(vtd.getStrName());
		textField3.setText(vtd.getStrGroup());
		textField4.setText(vtd.getStrClass());
		
    }
	

}

 

 

주석을 설명을 하였습니다.

복붙하여 실행해보시고 궁금한 점은 댓글 이용하세요.

 

아래는 실행 영상입니다.

 

 

세상 모든것들은 그 자신을 위해 존재한다.