JavaFX | FXML GUI 디자인 | 스타일 시트를 이용

컨트롤의 섬세한 표시 설정은 FXML에 속성으로 작성해서 넣는 것보다 좀 더 알아보기 쉽게 하는 방식이 있다. 그것은 “스타일 시트"를 사용하는 것이다. JavaFX에는 컨트롤의 속성을 스타일 시트부터 읽어서 적용시키는 기능을 가지고 있다. 이를 이용하여, 컨트롤의 표시를 Java 코드로 작성하지 않고도 쉽게 구성 할 수 있다.

스타일 시트의 사용은 매우 간단하다. FXML의 Pane 태그 안에 다음과 같은 형태로 스타일 시트를 작성하면 된다.

<stylesheets>
    <URL value="@스타일 시트"/>
</stylesheets>

<stylesheets> 태그 중에 로드하는 스타일 시트의 URL을 제공한다. 이것은 필요한 만큼 쓸 수 있다. <URL> 태그에는 value로 로드하는 스타일 시트의 경로를 지정한다. 이것은 “@파일 이름"과 같이 작성함으로써 FXML 파일과 같은 위치에 있는 스타일 시트 파일을 지정할 수 있다.

아래 소스 코드는 이전에 FXML에 스타일 시트를 추가한 것이다.

<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.net.URL ?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
 
<BorderPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <URL value="@app.css" />
    </stylesheets>
    <top>
        <Label fx:id="label1" text="This is FXML!" />
    </top>
</BorderPane>

이것으로 FXML 파일과 같은 위치에 있는 “app.css"을 로드한다. 여기에서는 스타일 시트를 적용하기에 <Label> 태그에 ID를 지정하고 있다.

<Label fx:id="label1"... />

이와 같이 “fx:id"이라고 작성하는 것으로 그 컨트롤에 ID를 지정할 수 있다. 스타일 시트에는 이 ID를 사용하여 특정 컨트롤에 스타일을 적용 할 수 있다.