FXML

FXML은 JavaFX 애플리케이션의 사용자 인터페이스를 정의하는 XML 기반의 마크업 언어입니다.

UI 컴포넌트의 레이아웃과 속성을 선언적으로 정의할 수 있어 Java 코드와 UI 디자인을 분리하여 관리할 수 있습니다.

Scene Builder와 같은 시각적 도구를 사용하여 FXML 파일을 쉽게 생성하고 편집할 수 있으며, 이는 MVC(Model-View-Controller) 패턴을 구현하는 데 도움이 됩니다.

XML(eXtensible Markup Language)

데이터를 전송 양식 또는 사용자 확장 태그를 위한 마크업 언어입니다. 태그를 사용하여 데이터의 구조를 정의하며, 사용자가 직접 태그를 만들 수 있어 확장성이 뛰어납니다. 웹 서비스, 데이터 교환, 설정 파일 등 다양한 용도로 활용됩니다.

핵심 요소

요소	설명
AnchorPane	고정된 위치에 UI 요소 배치
BorderPane	상, 하, 좌, 우, 중앙 5개 영역으로 UI 배치
VBox	세로 방향으로 UI 요소 정렬
HBox	가로 방향으로 UI 요소 정렬
GridPane	행과 열의 격자 형태로 UI 배치
StackPane	여러 컴포넌트를 겹쳐서 배치
TextField	한 줄 텍스트 입력 필드
PasswordField	비밀번호 입력 필드
Button	버튼 생성
Label	텍스트 라벨 표시
TableView	테이블 형식의 데이터 표시
ListView	리스트 형태로 데이터 표시
ImageView	이미지 출력
MenuBar	메뉴바 추가

문법 사항

문법 요소	설명	예제
XML 선언	FXML 파일의 시작	<?xml version="1.0" encoding="UTF-8"?>
루트 컨테이너	UI의 최상위 요소	<VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
속성 지정	요소의 속성 설정	<Button text="클릭"/>
이벤트 핸들러	컨트롤의 이벤트 설정	<Button onAction="#handleClick"/>
컨트롤 ID	FXML 컨트롤을 Java에서 참조 가능하게 설정	<TextField fx:id="usernameField"/>
include 태그	다른 FXML 파일 포함	<fx:include source="header.fxml"/>

공통 속성

속성	설명	예제
fx:id	컨트롤을 Java 코드에서 접근할 수 있도록 설정	<Button fx:id="submitButton"/>
text	버튼이나 라벨 등의 텍스트 설정	<Label text="Hello, JavaFX!"/>
onAction	버튼 클릭 등의 이벤트 설정	<Button onAction="#handleClick"/>
alignment	정렬 방식 설정	<VBox alignment="CENTER"/>
spacing	자식 요소 간격	<VBox spacing="10"/>
padding	컨테이너 내부 여백 설정	<VBox padding="10"/>

예제 코드

(1) 로그인 화면 (login.fxml)

<?xml version="1.0" encoding="UTF-8"?>
<VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
      alignment="CENTER" spacing="10">
    <Label text="로그인"/>
    <TextField fx:id="usernameField" promptText="아이디"/>
    <PasswordField fx:id="passwordField" promptText="비밀번호"/>
    <Button text="로그인" onAction="#handleLogin"/>
</VBox>
XML
복사

(2) 회원가입 화면 (register.fxml)

<?xml version="1.0" encoding="UTF-8"?>
<VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
      alignment="CENTER" spacing="10">
    <Label text="회원가입"/>
    <TextField fx:id="nameField" promptText="이름"/>
    <TextField fx:id="emailField" promptText="이메일"/>
    <PasswordField fx:id="passwordField" promptText="비밀번호"/>
    <Button text="가입하기" onAction="#handleRegister"/>
</VBox>
XML
복사

(3) 아이콘 버튼 그리드 링크 화면 (icon_grid.fxml)

<?xml version="1.0" encoding="UTF-8"?>
<GridPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
          hgap="10" vgap="10" alignment="CENTER">
    <Button text="홈" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
    <Button text="설정" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
    <Button text="프로필" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
    <Button text="로그아웃" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
XML
복사

(4) 게시판 목록 화면 (board.fxml)

<?xml version="1.0" encoding="UTF-8"?>
<BorderPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <top>
        <Label text="게시판 목록" style="-fx-font-size: 16px;"/>
    </top>
    <center>
        <TableView fx:id="boardTable">
            <columns>
                <TableColumn text="번호" fx:id="colId"/>
                <TableColumn text="제목" fx:id="colTitle"/>
                <TableColumn text="작성자" fx:id="colAuthor"/>
                <TableColumn text="날짜" fx:id="colDate"/>
            </columns>
        </TableView>
    </center>
    <bottom>
        <HBox alignment="CENTER" spacing="10">
            <Button text="새 글 작성" onAction="#handleNewPost"/>
        </HBox>
    </bottom>
</BorderPane>
XML
복사