13. JavaFX 종합 과제 (Grading System App)

지금까지 배운 JavaFX의 FXML 레이아웃, TableView 컨트롤, 다이얼로그 띄우기, Chart(그래프) 드로잉 등 모든 퍼즐 조각을 맞춰 하나의 멋진 ‘학생 점수 관리 시스템 애플리케이션’을 완성해 봅시다! 🎓💻

이 과제는 점진적인 5개 단계를 거쳐 완성하게 됩니다.

🎯 최종 완성작 미리보기

우리가 만들 프로그램은 다음과 같은 기능을 수행합니다:

  1. 메인 화면: 학생들의 국어/영어/수학 점수를 TableView 표에 리스팅합니다.
  2. 학생 추가: [학생 추가] 버튼을 누르면 팝업 대화상자(form.fxml)가 떠서 새 학생의 점수를 입력받아 표에 꽂아줍니다.
  3. 막대 차트: [학생별 평균 막대 그래프] 버튼을 누르면 전체 학생의 과목별 평균 막대를 보여줍니다.
  4. 파이 차트: 표의 특정 학생 행을 더블 클릭하면 그 학생의 과목별 점수 비중을 PieChart로 시각화합니다.

🧱 과제 1: 학생 점수 관리 메인 화면 설계

📌 목표

프로그램의 얼굴이 되는 메인 윈도우 프레임을 빌드합니다.

  • 필수 생성 파일:
    • AppMain.java (런타임 메인 구동 클래스)
    • root.fxml (전체 화면 설계 레이아웃)
    • RootController.java (화면 제어 컨트롤러 클래스)
  • 세부 요건 (root.fxml):
    • BorderPane을 루트 레이아웃 박스로 삼습니다.
    • 중앙(Center): TableView를 얹고 이름, 국어, 수학, 영어 칼럼을 디자인합니다.
    • 하단(Bottom): HBox 컨테이너 안에 [학생 추가] 및 [학생별 막대 그래프] 버튼을 가지런히 배치합니다.

🧱 과제 2: 학생 정보 입력용 다이얼로그 제작

📌 목표

[학생 추가] 버튼을 클릭했을 때 새로운 윈도우 창이 팝업으로 나타나게 만듭니다.

  • 필수 생성 파일:
    • form.fxml (입력 양식용 레이아웃)
  • 세부 요건 (form.fxml):
    • BorderPane을 루트로 삼습니다.
    • 중앙(Center): GridPane을 쓰고 4행 2열 격자를 나눠 이름, 국어, 수학, 영어 입력용 라벨과 텍스트 필드를 가지런히 배치합니다.
    • 하단(Bottom): HBox 안에 [저장]과 [취소] 버튼을 놓습니다.
  • 동작 기능:
    • [취소] 버튼을 클릭하면 팝업 창이 깔끔하게 닫히도록 코딩합니다.

🧱 과제 3: 입력 데이터를 메인 테이블에 적재하기

📌 목표

추가 팝업창에서 데이터를 입력하고 [저장]을 누르면, 메인 화면의 TableView에 실제로 한 행이 실시간 추가되게 묶어줍니다.

  • 필수 생성 파일:
    • Student.java (이름, 국어, 수학, 영어 변수와 Getter/Setter를 가진 자바 빈 모델 클래스)
  • 💡 핵심 힌트:
    • 테이블 뷰와 바인딩할 리스트는 반드시 일반 ArrayList가 아닌 실시간 감시가 통하는 ObservableList<Student> 타입을 활용해야 합니다.
    • 다이얼로그의 컨트롤러와 메인 화면의 컨트롤러가 데이터를 주고받을 수 있도록 생성자나 인스턴스 주입 설정을 세팅해 줍니다.

🧱 과제 4: 과목별 평균 막대 그래프 (BarChart) 연동

📌 목표

[학생별 막대 그래프] 버튼을 클릭하면 새로운 다이얼로그 창에 과목별 평균 점수를 보여주는 막대 그래프가 그려집니다.

  • 필수 생성 파일:
    • barchart.fxml (막대차트 화면 설계도)
  • 세부 요건 (barchart.fxml):
    • BorderPane 중앙(Center)에 BarChart를 배치하고 하단(Bottom)에 [닫기] 버튼을 배치합니다.
  • 💡 핵심 힌트:
    • XYChart.Series 객체를 생성해 테이블 리스트의 모든 학생 국어/수학/영어 점수를 다 긁어모아 평균을 낸 뒤 차트에 데이터를 주입합니다.

🧱 과제 5: 더블 클릭 시 학생 개별 과목 파이 차트 (PieChart) 팝업

📌 목표

메인 화면의 TableView 표에서 임의의 학생 행을 마우스로 더블 클릭하면, 해당 학생 한 명의 과목별 점수 점유율을 나타내는 원형 파이 그래프 다이얼로그가 가동됩니다.

  • 필수 생성 파일:
    • piechart.fxml (파이차트 화면 설계도)
  • 세부 요건 (piechart.fxml):
    • BorderPane 중앙(Center)에 PieChart를 배치하고 하단(Bottom)에 [닫기] 버튼을 배치합니다.
  • 💡 핵심 힌트:
    • 테이블 뷰에 마우스 클릭 리스너(setOnMouseClicked)를 연동합니다.
    • 이벤트 객체에서 event.getClickCount() == 2 조건을 걸어 더블 클릭일 때만 작동하도록 가두어 줍니다.
    • 더블 클릭으로 선택된 행의 Student 모델 데이터를 확보한 뒤, 그 학생의 점수를 PieChart.Data 리스트로 변환해 차트에 바인딩합니다.
이전 학습 « 33.12 장면 이동과 애니메이션
서브목차